Микровзаимодействия передают состояние системы, предотвращают ошибки и сообщают бренд. Они инициируются триггером, являются одноцелевыми и делают опыт увлекательным.
Статьи по теме:
Микровзаимодействия: секрет хорошего дизайна приложений
Анимация интерфейсов. Микровзаимодействия для макрорезультата
Что такое микровзаимодействия?
Многие из наших повседневных взаимодействий с компьютерными системами являются микровзаимодействиями. Микровзаимодействия обеспечивают пользователю фидбек, часто благодаря передаче статуса системы или помогают пользователям избежать ошибок. Кроме того, микровзаимодействия могут использоваться как средство брендинга.
Определение. Микровзаимодействия представляют собой пары триггер-фидбек, в которых (1) триггер может быть действием пользователя или изменением состояния системы; (2) фидбек — узко направленный ответ на триггер, который передается посредством небольших, весьма контекстуальных (обычно визуальных) изменений интерфейса.
Триггеры, запущенные пользователем, могут состоять из команды графического пользовательского интерфейса (GUI) или могут быть жестовыми, или голосовыми, запускаемыми системой и включающими в себя выполнение набора заданных условий. Когда микровзаимодействие запускается командой GUI, элемент визуального фидбека обычно размещается в непосредственной близости от этого триггера.
Микровзаимодействия охватывают значительное количество цифровых элементов, но не всякий элемент является частью микровзаимодействия. Статические элементы, которые всегда присутствуют на экране, не являются микровзаимодействиями, потому что у них нет определенного триггера. Кроме того, сценарии, состоящие из нескольких действий, не являются микровзаимодействиями. Некоторые примеры микровзаимодействий описаны в таблице ниже.
| Цифровой элемент | Это микровзаимодействие? | Причина | |
| Скроллбар | Да | Запускается пользователем. Визуальный фидбек пользователю, посредством изменения местоположения на странице | |
| Цифровой будильник | Да | Запускается системой. Аудио (и визуальный) фидбек по истечении времени | |
| Кнопка | Когда как | Если нет фидбека, когда пользователь нажимает на кнопку, микровзаимодействие отсутствует | |
| Анимация «потяните, чтобы обновить» | Да | Запускается пользователем. Визуальный фидбек на действие пользователя | |
| GIF-файлы | Нет | Не запускается пользователем или системой | |
| Анимация свайпа | Да | Запускается пользователем. Визуальный фидбек, когда пользователь свайпает элемент | |
| Email уведомления | Да | Запускается системой. Дает пользователю фидбек о том, что появилось новое сообщение | |
| Видео проигрыватель | Нет | Это функция, а не микровзаимодействие. Управление громкостью в видеопроигрывателе будет представлять собой микровзаимодействие |
В 2014 году Дэн Саффер опубликовал книгу «Микровзаимодействия», которая определила эту концепцию и наметила модель проектирования микровзаимодействий.
В этой статье мы сфокусируемся на том, почему микровзаимодействия важны для пользовательского опыта и рассмотрим несколько примеров с точки зрения пользователя.
Почему микровзаимодействия важны?
Одна из величайших радостей использования технологий заключается в расширении прав и возможностей пользователей. Приятный опыт означает больше, чем просто юзабилити — он нужен, чтобы привлекать пользователя, и именно здесь микровзаимодействия могут играть макро-роль, положительно влияя на внешний вид продукта или услуги.
Микровзаимодействия могут улучшить пользовательский опыт продукта посредством:
- Побуждения совершить действие
- Отображение состояния системы
- Предотвращение ошибок
- Передачи индивидуальности бренда
Маловероятно, что стандартные микровзаимодействия такие, как полоса прокрутки будут плохо спроектированы в отличии от их современными аналогов, таких, как элементы «потяните, чтобы обновить». Именно эти новые микровзаимодействия требуют больше усилий и обдумывания для создания значимого, хорошо продуманного опыта.
Давайте рассмотрим примеры хорошо реализованных микровзаимодействий.
Чтобы отслеживать повседневные задачи, я использую инструмент управления задачами Asana. Есть несколько аспектов этого инструмента, которые мне особенно нравятся, например, теги и визуальный дизайн. Но, безусловно, мой самый любимый аспект Асаны — летающий единорог, который пролетает по браузеру, когда я завершаю задачу. Это является примером микровзаимодействия.
Когда пользователь помечает задачу как завершенную, в нижнем левом углу страницы появляется небольшое диалоговое окно. Это диалоговое окно предоставляет фидбек системы, что задача была помечена, как завершенная. Кроме того, оно выступает в качестве опции предотвращения ошибки, давая возможность отменить это действие в случае, если это была ошибка. Примерно через секунду после появления этого окна, через нижний левый квадрант браузера пролетает единорог в честь хорошо выполненной работы. В этом случае есть два микровзаимодействия: утилитарное диалоговое окно и анимация единорога, вдохновленная геймификацией.
Если вы когда-либо использовали инструменты управления задачами, вы, вероятно, знаете, что есть много вариантов на выбор. Например, Asana, Jira, Trello или Wrike. Эти продукты имеют много общего. У них есть такие общие функции, как возможность назначать задачи членам команды, создавать доски или интегрироваться с другими продуктами. Тем не менее, различия между этими продуктами становятся совершенно ясными при анализе микровзаимодействий, внедренных в течение всего опыта. В Trello перемещение задачи в столбец Done не вызывает лишних фанфар. И это соответствует ожиданиям многих людей. А я жажду положительного подтверждения выполнения задачи и надеюсь, что увижу единорога.
Тем не менее, микровзаимодействия делают больше, чем просто заставляют пользователей почувствовать себя хорошо. Микровзаимодействия передают состояние системы, предотвращают ошибки и передают индивидуальность бренда. Эти варианты использования добавляют значительную ценность, тем самым делая микровзаимодействия ключевым способом дифференциации вашего продукта от конкурентов. Микровзаимодействия обеспечивают фидбек, чтобы информировать пользователей и поддерживать их заинтересованность. Если их не будет, то пострадает пользовательский опыт.
Отображение состояния системы
Первая эвристика юзабилити фокусируется на видимости статуса системы. Эта эвристика усиливает необходимость быть очевидной для пользователя. Если она будет очевидной и будет сообщать текущее состояние системы, то пользователи будут чувствовать контроль ситуации и интерес. Любое отображение состояния системы — это микровзаимодействие, потому что это взаимодействие, естественно, включает в себя триггер (действие пользователя или изменение состояния системы) и фидбек.
Сообщает прогресс
Индикаторы прогресса — это подкатегория микровзаимодействий, позволяющая пользователям знать, что система все еще работает, чтобы отреагировать на их действия. Они могут показывать определенное или неопределенное время ожидания и могут включать такие компоненты, как линейные или круговые индикаторы прогресса. Такие элементы побуждают пользователя оставаться с продуктом, пока он ожидает реакцию системы.
LinkedIn использует круговые индикаторы прогресса, когда пользователи тянут вниз, чтобы обновить новостную ленту. Этот компонент сообщает, что система работает, поэтому пользователи не задумываются о том, распознала ли система их действие или нет. Благодаря этому микровзаимодействию пользователи, вероятно, (недолго) ждут загрузки новых сообщений и, таким образом, продолжают взаимодействовать с LinkedIn.
Режим ожидания
Иногда системам необходимо сообщить, что они ждут дальнейших действий от пользователя. После запуска триггера микровзаимодействие уведомляет пользователя о том, что система находится в режиме ожидания и нуждается в дополнительной информации. Этот тип микровзаимодействия побуждает пользователя продолжать взаимодействие с продуктом.
Например, в iOS, когда вы нажимаете и удерживаете иконку приложения на главном экране устройства, система реагирует, слегка встряхивая все иконки приложений. Это движение сообщает, что система ждет дальнейших действий (или нажатия «X» в верхнем левом углу иконки приложения, чтобы удалить его или перетаскивания иконки на другое место на экране, чтобы переместить его).
Микровзаимодействия не ограничиваются веб-сайтами. Голосовые помощники, такие как Google Home, используют микровзаимодействия, чтобы сообщить о включении режима ожидания команды пользователя. После того, как пользователь говорит: «Hey Google», устройство отображает круговую анимацию из четырех точек. Почти мгновенно точки образуют форму ромба при помощи мерцающего движения. Благодаря этому визуальному фидбеку пользователь знает, что устройство слушает его, и среагирует на вопрос, например, «Какая сейчас погода?»
Предотвращение ошибок
Предотвращение ошибок — еще одна из 10 эвристик юзабилити, фокусируется на избавлении от ситуаций, подверженных ошибкам и обеспечении подтверждения действий. Микровзаимодействия сообщают об этих ситуациях пользователям и могут способствовать удовлетворительному опыту, поддерживая отмену совершенного действия и предотвращая тем самым переделывание работы.
Отмена действия
Все совершают ошибки, и в цифровом мире это означает, что иногда мы случайно кликаем на вещи. Системы должны упростить отмену действий, чтобы пользователям не приходилось лезть из кожи вон ради отмены случайного действия. Микровзаимодействия сообщают о состоянии компонента интерфейса и предполагают, что возможно дальнейшее взаимодействие. Микровзаимодействия — идеальный способ отмены действия, поскольку они информируют пользователя о том, что произошло изменение состояния.
Сайт Gap.com позволяет добавлять товары в избранное, кликнув по значку сердца в правом верхнем углу изображения продукта. Это микровзаимодействие использует анимацию пульсирующего сердца, чтобы сообщить, что вы отметили продукт, как понравившийся. Вы можете легко отменить это действие, еще раз кликнув на значке сердца, который затем вернется в исходное серое состояние.
Это пульсирующее сердце является подходящим использованием анимации для привлечения внимания по нескольким причинам:
- Оно достаточно тонко, чтобы не слишком отвлечь внимание пользователя от основной задачи. (Напротив, агрессивная анимация была бы слишком навязчивой.)
- Одушевляя сердце на короткое время, этот эффект остается микровзаимодействием, а не неуместным перманентным состоянием.
- Различие между пульсирующим сердцем и «обычным» цветным сердцем (у ранее добавленных в избранное предметов) помогает сообщить изменения в состоянии системы и направить внимание пользователя на эффект возможного случайного действия (что, к сожалению, слишком распространено в сенсорных интерфейсах).
Предотвратить переделывания
В процессе создания учетной записи очень неприятно кликнуть на последнюю кнопку отправки формы и получить ошибку, что ваш пароль не соответствует требованиям, которые ранее не были указаны. Микровзаимодействия сообщают пользователям, соответствует ли их пароль всем требованиям поля и предотвращает переделывание работы (например, повторное заполнение формы). Без этих микровзаимодействий продукт раздражает пользователей, и, если задача не является критичной, они, вероятно, вообще откажутся от использования продукта.
eBay использует микровзаимодействия в регистрационной форме для предотвращения ошибок проверки. Например, когда поле пароля активно, появляется список требований к паролю. При наборе текста, когда пароль соответствует всем требованиям, список обновляется динамически. Если поле не удовлетворяет всем требованиям, в поле появляется красное сообщение об ошибке. Эта серия микровзаимодействий работает вместе, чтобы обеспечить пользователям последовательный фидбек и беспроблемный опыт.
Передача индивидуальности бренда
Микровзаимодействия всегда должны служить цели, но это не означает, что они не должны воплощать бренд. Если ваш брендинг забавный и яркий, то вполне нормально отразить это в микровзаимодействиях. И наоборот, если ваш бренд является профессиональным и надежным, не рекомендуется использовать что-то смешное, например, пончик, в вашем микровзаимодействии «потяните, чтобы обновить». Точно так же, как и ваш текст микровзаимодействия имеют определённый тон. (Хороший пример бренда, как опыта).
При отправке текстового сообщения с поздравлением по случаю дня рождения в приложении «Сообщения» от Apple экран заполняют воздушные шарики. Apple позиционирует себя как инновационный, но гуманистический бренд. Подобные микровзаимодействия соответствуют бренду Apple, создавая эмоциональный и чувственный опыт.
В Snapchat микровзаимодействия используются, чтобы сообщить, что два пользователя Bitmoji находятся в одном окне чата. Когда ваш чат-партнер печатает, его Bitmoji появляется с пузырем мысли. Если он читает сообщение, его Bitmoji находится над полем ввода текста. В этом случае фидбек побуждает пользователей продолжать разговор и оставаться в приложении.
Многие бренды для общения с пользователями в значительной степени полагаются на визуальные материалы, но звук может быть столь же мощным средством. Если бы вас попросили нарисовать логотип страховой компании и спеть их джингл, что было бы проще? Если вы будете смотреть много телевидения, джингл, скорее всего, придет на ум первым. Микровзаимодействия могут также включать слуховые реакции. Например, консоль Xbox One обеспечивает аудио и визуальную обратную связь, когда пользователь включает систему: кнопка Xbox загорается, а система испускает короткую характерную мелодию. Владельцы Xbox One могут, вероятно, дифференцировать этот звук от звука выключения Xbox, а также от звуков других игровых приставок. Это микровзаимодействие является отличительным элементом взаимодействия с системой, а также с брендом Xbox.
Консоль Xbox One использует аудио и визуальный фидбек, когда пользователь включает ее. Пользователи Xbox One мгновенно узнают этот визуальный фидбек. (В большинстве браузеров наведение курсора мыши на видео, чтобы отобразить элементы управления, если они еще не видны.)
Вывод
Хорошо спроектированные микровзаимодействия могут существенно повлиять на пользовательский опыт. Они обеспечивают ценность, выступая в качестве средства связи с пользователем. Микровзаимодействия обеспечивают визуальный фидбек состояния системы или помогают пользователям избежать ошибок. Кроме того, микровзаимодействия могут обогатить ваш продукт, сообщая бренд, тем самым призывая пользователей выбрать ваш продукт, а не конкурентов. В целом, эти небольшие детали могут превратить хороший продукт в отличный и заинтересовать пользователя.
Ссылка
Saffer, D. (2014). Microinteractions. O’Reilly Media.
Нет комментариев