Пример микро-взаимодействий, с которым мы сталкиваемся каждый день.
Вы читаете перевод статьи Николая Бабича “Microinteractions: The Secret of Great App Design”. Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов. При поддержке iSpring.
iSpring — решение для запуска дистанционного обучения.
Самые лучшие продукты хороши в двух аспектах: функции и детали. Функции — это тот аспект продукта, который привлекает людей. Детали — это то, что их удерживает. И именно за счет деталей наше приложение выделяется на фоне конкурентов.
Микровзаимодействия — это один из лучших способов обеспечения пользователю приятной обратной связи от приложения.
Все сводится к человеко-ориентированному подходу к дизайну, когда пользователь играет главную роль. Хотя микровзаимодействия часто считаются второстепенными в дизайне, на самом деле они создают у пользователя ощущение комфорта и благополучия. Для дизайнера понять важность этих невидимых микровзаимодействий так же важно, как и умение их проектировать. Вам нужно создать то, что решает задачу и делает это по-человечески.
Микровзаимодействия — это встроенные в продукт события, которые в комплексе выполняют одну маленькую задачу.
Впервые микровзаимодействия были описаны в книге Дэна Саффера как небольшие детали, которые обычно выполняют одну из следующих необходимых функций:
Вот несколько примеров конкретных микровзаимодействий:
Микровзаимодействия работают, потому что ориентированы на природное стремление человека к признанию. Пользователь понимает, что система зафиксировала его действие и хочет получить визуально приятный отклик. А еще микровзаимодействия могут помочь пользователю разобраться в системе.
Что прекрасно в микровзаимодействиях — их можно использовать в множестве мест и с множеством потенциальных действий. Хотя обычно они используются в следующих случаях:
Первый эвристическиий принцип юзабилити Якоба Нильсена гласит: держите пользователя в курсе того, что происходит. Пользователи ждут мгновенной реакции. Но бывают ситуации, когда приложению нужно время на завершение действия.
Поэтому интерфейс должен рассказывать пользователю, что происходит.
Шкала прогресса для процесса загрузки. Источник: Dribbble.
Или где находится пользователь:
Прогресс скроллинга
Вывод: Не давайте пользователю заскучать — рассказывайте ему, что происходит и сколько еще ждать. (шкала загрузки увлекает пользователя и помогает не запутаться).
Иногда вам нужно не просто отобразить уведомление, но и убедиться, что пользователь его увидел. Анимации вам в этом помогут. Они привлекут внимание пользователя и не дадут упустить из виду информацию, которую вы считаете важной.
Новое сообщение. Источник: Dribbble.
Вывод: В большинстве случаев анимационные эффекты используются, чтобы привлечь внимание пользователей к важным деталям. Используйте принцип KISS — микровзаимодействия должны быть простыми и небольшими.
Используйте движение, чтобы плавно перевести пользователя из одного навигационного контекста в другой и пояснить, как изменилась организация элементов на экране. Это особенно важно на мобильных устройствах и умных часах — потому что в небольшой экран просто невозможно уместить много информации.
Вывод: Поддерживайте понятную навигацию между страницами, чтобы пользователи понимали, что откуда взялось. Переходы между разными визуальными состояниями должны быть понятными, плавными и легкими. Логически свяжите между собой все переходы в единую тему.
Ввод данных — это один из самых важных элементов любого приложения. А микровзаимодействия делают этот процесс особенным. Вы можете обеспечить обратную связь посредством существующих элементов интерфейса.
Вывод: Микровзаимодействия помогают выявить информацию, а также помогают пользователям добиться своей цели.
Микровзаимодействия способны вдохновлять пользователей на реальные взаимодействия. Они могут привнести в пользовательский опыт эмпатию. Главное убедитесь, что визуальные подсказки и анимации подходят вашим пользователям. И учитывайте долгосрочную перспективу — не надоест ли микровзаимодействие, когда пользователь столкнется с ним в сотый раз? Или оно всегда будет чистым и ненавязчивым?
Вывод: Сконцентрируйтесь на эмоциях, потому что они играют огромную роль в пользовательских взаимодействиях. Исходите из контекста и пользовательских исследований и проектируйте на долгую перспективу.
Изначально опубликовано на www.babich.biz
Рекомендуемые статьи:
