Image for post
Image for post

Эксперимент интерактивности

Смысл интерактивного дизайна в создании таких интерфейсов, которые эффективно решают задачи человека.

Этот базовый эксперимент позволяет продемонстрировать, как человек может контролировать интерфейс при помощи индикаторов и достигать поставленной задачи, либо терять контроль над ним.

События

В интерфейсе могут происходить события: файл скачался, чайник вскипел, деньги закончились на счету, сообщение пришло. Интерфейс должен сообщать о важных событиях и держать человека в курсе, иначе он перестаёт контролировать происходящее.

Модель, которая описана в статье ниже, пронизывает любое взаимодействие с интерфейсом и лежит в основе интерактивного дизайна. Тот дизайнер, который поймёт, как это работает, перестанет рисовать картинки и начнёт проектировать интерфейсы.

Модель

Представим две лампочки-индикатора и кнопку. Лампочки изначально не горят. Нажатие на кнопку не приводит ни к какому эффекту.

Через несколько секунд после начала происходит некое условное событие, меняющее состояние интерфейса. Первая лампочка может включаться одновременно с ним и работает как индикатор. После события нажатие на кнопку позволяет зажечь вторую лампочку.

Задача

Задача человека, участвующего в эксперименте — зажечь вторую лампочку. Он знает правила и ждёт, пока первая лампочка загорится, чтобы нажать на кнопку.

Если лампочка №2 загорелась, человек подтверждает, что достиг цели и контролирует интерфейс. Ситуацию, когда ему не удалось достичь цели, назовём разрывом взаимодействия.

Пройти

Ссылка на Framer Cloud, работает в Safari, Chrome и Firefox

Может быть 4 ситуации (кейса):

1. Провал человека

Событие происходит, кнопка становится доступна для нажатия, но человек не отслеживает момент, когда может зажечь вторую лампочку. Интерфейс явно демонстрирует изменение статуса. Но человек не реагирует, имея задачу реагировать. А значит, не контролирует интерфейс.

Возможные причины

  • Человек мог отвлечься и не заметить, что лампочка зажглась
  • Человек не понимает свою задачу в эксперименте. Информация о загоревшейся лампочке ничего ему не сообщает. Для эффективного взаимодействия человек должен быть способен обрабатывать информацию и реагировать на неё.
  • Он незрячий и не может увидеть лампочку. В этом случае для восстановления контроля следует искать другие методы индикации, например звуковой. Кнопку же следует делать тактильной.

Пример №1: Провала человека
Событие: у человека появилась задолженность за мобильный.
Индикатор: СМС-сообщение от оператора.
Человек не реагирует на индикатор. Рано или поздно происходит блокировка номера за неуплату.
Причина разрыва: У человека слишком много непрочитанных СМС и он не увидел ещё одно.

2. Провал интерфейса

Лампочка не зажглась, человек ждал индикации и не смог отследить событие, поэтому, не нажал на кнопку.

Интерфейс не демонстрирует, что событие произошло, хотя внутри происходят какие-то процессы, ожидающие реакции. Человек не может увидеть, что произошло что-то важное. Интерфейс вне контроля. Человек ориентировался по индикатору. Если он не предпримет никаких действий, контроль над интерфейсом будет утерян, потому что он выбрал пассивную стратегию.

Пример №2: Провал интерфейса
Событие: В машине заканчивается бензин.
Индикатор: показатель уровня бензина.
Индикатор сломан и человек не может определить, сколько ещё осталось бензина.
Отсутствие индикации вызывает ощущение нестабильности: ты можешь тормознуть через 100 метров, а можешь доехать до другого конца города.

3. Провал интерфейса, компенсация человека

Событие произошло, лампочка №1 не зажглась, но человек нажал на кнопку. Он компенсировал провал интерфейса методом научного тыка, восстановив контроль и достигнув своей цели.

Интерфейс не демонстрирует, что событие произошло. Но человек знает об условиях эксперимента, и может многократно нажимать на кнопку, пока это не даст желаемого эффекта, вне зависимости от того, зажигается ли лампочка №1. Рано или поздно лампочка №2 загорится. Проблема в отсутствии индикации: лампочка №1 неисправна, интерфейс воспринимается как сломанный и действующий против заявленных правил. Он ненадёжен и работать с ним некомфортно.

Как правило, человек делает компенсацию на то, что интерфейс может работать некорректно и стремится решить поставленную задачу всеми доступными средствами.

Пример №3 Провал интерфейса, компенсация человека
Событие: в электрическом чайнике кипит вода.
Индикатор интерфейса: щелчок и автоматическое выключение.
Чайник дешёвый, сенсор вышел из строя. Чайник кипит и не выключается сам. Индикатор не срабатывает и вода выкипает. Компенсация: Если человек рядом, по внешнему виду чайника он может легко определить, что тот кипит и выключить его, не допустив пожар. Для этого он использует свой опыт и другие способы индикации. Человек принимает решение снять чайник не на основе индикатора, а компенсируя несовершенство интерфейса.

4. Успешное взаимодействие

Событие произошло, лампочка №1 зажглась, человек нажал на кнопку. Интерфейс проявил момент события, человек в нужный момент понял, что кнопка сработает, нажал на неё и зажёг лампочку №2, подтвердив контроль над интерфейсом. Это наиболее эффективное взаимодействие. Все счастливы.

Пример 4: Успешное взаимодействие
Тысячи их вокруг нас. Человек прикладывает билет к турникету, тот зажигается зелёным. Статус интерфейса: проход открыт. Цветовое кодирование помогает сориентироваться без лишнего текста.

В основе хорошего проектирования лежит анализ причин, по которым человек не справился с интерфейсом и почему он ощущает дискомфорт от взаимодействия. Проектировщик смотрит на то, как люди используют продукт, смотрит на цели людей и делает выводы о том, как показать важное изменение статуса. Затем, внедряет их в следующей итерации продукта. Так с каждой итерацией можно сделать интерфейс лучше.

Я веду телеграм-канал UX-гайд о проектировании и интерактивном дизайне, а также Скетч-дизайнер о Скетче и анимации в Фреймере.

/designer

Вышла книга про Фигму.

Саша Окунев

Written by

Дизайн-лид в Ozon. Автор проекта /designer.

/designer

/designer

Вышла книга про Фигму. Правильный блог для современного дизайнера интерфейсов.

Саша Окунев

Written by

Дизайн-лид в Ozon. Автор проекта /designer.

/designer

/designer

Вышла книга про Фигму. Правильный блог для современного дизайнера интерфейсов.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store