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