2020-03-22 22:02:56
Методы использования микровзаимодействий на сайте
Что такое микровзаимодействия?
Мы видим их каждый день. Когда вы переводите телефон в беззвучный режим — он слабо вибрирует. Когда тянете страницу вниз, чтобы перезагрузить её — появляется знак загрузки. Даже сенсорный включатель крана, — всё это микровзаимодействия.
Может ошибочно показаться, что они незаметны и неважны. Просто мы уже настолько сильно привыкли к ним, что иногда не замечаем. Но именно они дают понять, что мы что-то сделали.
Четыре столпа микровзаимодействий
У микровзаимодействий 4 важных компонента: триггер, правила, обратная связь и циклы+режимы.
Триггер инициирует микровзаимодействие. Он может быть ручным действием, например, иконкой, на которую нужно кликнуть, чтобы что-то произошло. Или может быть встроен в систему и возникает, когда действие уже завершено. Например, звук, который вы слышите, когда получаете сообщение — результат системного триггера.
В микровзаимодействиях запрограммированы правила, суть которых заключается в том, можно или нельзя сделать то, что вы пытаетесь. Так как эти правила не всегда очевидны пользователю, информацию, можно сделать что-то или нет, мы получаем с помощью обратной связи.
Обратная связь помогает понять, что микровзаимодействие прошло успешно. Например, вибрация после перевода телефона в беззвучный режим. Без обратной связи вы не поймёте, получилось отключить звук или нет.
Циклы и режимы — финальная стадия микровзаимодействия. Циклы определяют, как долго оно будет длиться (вспомните вращающуюся при загрузке иконку). Режимы отвечают за персональные данные, которые нужны для продолжения процесса (например, получение информации о местоположении для определения погоды).
Советы по созданию микровзаимодействий
Микровзаимодействия — основа дизайна, ориентированного на пользователя. Важно, чтобы обратную связь от них человек воспринимал их как естественный сигнал о том, что действие прошло успешно. Вот основные рекомендации для проектирования хороших микровзаимодействий:
- В начале работы вы уже должны иметь представление о конечных пользователях и платформе, на которой будет реализован ваш проект;
- Вы должны учитывать ошибки, которые может совершить пользователь, и предотвращать их.
- Избегайте беспорядка. Не придумывайте новые элементы, а используйте уже существующие;
- Говорите с пользователями на их языке;
- Убедитесь, что микровзаимодействия пройдут проверку временем. Нет ничего хуже микровзаимодействий, которые с каждым триггером становятся всё назойливее. Остерегайтесь всего, что кажется слишком сложным или перегружено анимациями;
- Используйте анимацию разумно. Она не должна мешать основному действию. Пример — дрожание иконок на iPhone, когда вы хотите их удалить. Это мило и не мешает достижению основной цели;
- Не забывайте про теорию цвета. Контраст может подчеркнуть специфический процесс или действие, но также может отвлечь. Микровзаимодействия — маленький элемент общего дизайна, который они не должны нарушать;
- Наконец, определитесь: будет ли микровзаимодействие меняться в процессе использования? Имеет ли смысл менять его время от времени или лучше не трогать?
Микровзаимодействия в социальных медиа и приложениях
Микровзаимодействия особо важны в приложениях. Они могут стать поводом для любви или ненависти и причиной, почему одни приложения предпочитают другим. Когда дело доходит до мобильных приложений и социальных медиа, важно, чтобы микровзаимодействия были максимально простыми и интуитивно понятными. Хороший пример — лайк в Instagram.
Используйте микровзаимодействия, чтобы обучать новому
Микровзаимодействия используются не только для улучшения функционала сайта. Они также учат пользователей, как взаимодействовать с новыми элементами. Например, если галерея фотографий сделана непривычно, микровзаимодействия подскажут пользователю, как листать и переключаться между изображениями.
5.6K viewsedited 19:02