Микровзаимодействия: Секрет хорошего дизайна приложений
Вы читаете перевод статьи Николая Бабича “Microinteractions: The Secret of Great App Design”. Над переводом работали: Ольга Жолудова и Анастасия Свеженцева. При поддержке iSpring.
iSpring — решение для запуска дистанционного обучения.
Самые лучшие продукты хороши в двух аспектах: функции и детали. Функции — это тот аспект продукта, который привлекает людей. Детали — это то, что их удерживает. И именно за счет деталей наше приложение выделяется на фоне конкурентов.
Микровзаимодействия — это один из лучших способов обеспечения пользователю приятной обратной связи от приложения.
Все сводится к человеко-ориентированному подходу к дизайну, когда пользователь играет главную роль. Хотя микровзаимодействия часто считаются второстепенными в дизайне, на самом деле они создают у пользователя ощущение комфорта и благополучия. Для дизайнера понять важность этих невидимых микровзаимодействий так же важно, как и умение их проектировать. Вам нужно создать то, что решает задачу и делает это по-человечески.
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook | Instagram, Telegram
Новое. Журнал для digital-дизайнеров. Посмотреть, что за зверь.
Что такое микровзаимодействия?
Микровзаимодействия — это встроенные в продукт события, которые в комплексе выполняют одну маленькую задачу.
Впервые микровзаимодействия были описаны в книге Дэна Саффера как небольшие детали, которые обычно выполняют одну из следующих необходимых функций:
- Обеспечивают обратную связь или результат какого-либо действия
- Выполняют отдельную задачу
- Усиливают ощущение прямой манипуляци
- Помогают пользователям, визуализируя результаты их действий и предотвращая ошибки.
Вот несколько примеров конкретных микровзаимодействий:
- При переключении айфона в тихий режим при помощи кнопки, включается коротенькая вибрация, а на экране появляется иконка беззвучного режима.
- Анимированный элемент интерфейса показывает возможность нажатия (или кнопка, которая меняет цвет при наведении мыши)
Почему работают микровзаимодействия
Микровзаимодействия работают, потому что ориентированы на природное стремление человека к признанию. Пользователь понимает, что система зафиксировала его действие и хочет получить визуально приятный отклик. А еще микровзаимодействия могут помочь пользователю разобраться в системе.
Определяем возможности
Что прекрасно в микровзаимодействиях — их можно использовать в множестве мест и с множеством потенциальных действий. Хотя обычно они используются в следующих случаях:
Показать статус системы:
Первый эвристическиий принцип юзабилити Якоба Нильсена гласит: держите пользователя в курсе того, что происходит. Пользователи ждут мгновенной реакции. Но бывают ситуации, когда приложению нужно время на завершение действия.
Поэтому интерфейс должен рассказывать пользователю, что происходит.
Или где находится пользователь:
Вывод: Не давайте пользователю заскучать — рассказывайте ему, что происходит и сколько еще ждать. (шкала загрузки увлекает пользователя и помогает не запутаться).
Обратить внимание на изменения
Иногда вам нужно не просто отобразить уведомление, но и убедиться, что пользователь его увидел. Анимации вам в этом помогут. Они привлекут внимание пользователя и не дадут упустить из виду информацию, которую вы считаете важной.
Вывод: В большинстве случаев анимационные эффекты используются, чтобы привлечь внимание пользователей к важным деталям. Используйте принцип KISS — микровзаимодействия должны быть простыми и небольшими.
Поддержать контекст
Используйте движение, чтобы плавно перевести пользователя из одного навигационного контекста в другой и пояснить, как изменилась организация элементов на экране. Это особенно важно на мобильных устройствах и умных часах — потому что в небольшой экран просто невозможно уместить много информации.
Вывод: Поддерживайте понятную навигацию между страницами, чтобы пользователи понимали, что откуда взялось. Переходы между разными визуальными состояниями должны быть понятными, плавными и легкими. Логически свяжите между собой все переходы в единую тему.
Визуализировать ввод
Ввод данных — это один из самых важных элементов любого приложения. А микровзаимодействия делают этот процесс особенным. Вы можете обеспечить обратную связь посредством существующих элементов интерфейса.
Вывод: Микровзаимодействия помогают выявить информацию, а также помогают пользователям добиться своей цели.
Призыв к действию
Микровзаимодействия способны вдохновлять пользователей на реальные взаимодействия. Они могут привнести в пользовательский опыт эмпатию. Главное убедитесь, что визуальные подсказки и анимации подходят вашим пользователям. И учитывайте долгосрочную перспективу — не надоест ли микровзаимодействие, когда пользователь столкнется с ним в сотый раз? Или оно всегда будет чистым и ненавязчивым?
Вывод: Сконцентрируйтесь на эмоциях, потому что они играют огромную роль в пользовательских взаимодействиях. Исходите из контекста и пользовательских исследований и проектируйте на долгую перспективу.
Что стоит запомнить:
- Микровзаимодействия: обратная связь, уведомления и инструкции — это посредники взаимодействий.
- Микровзаимодействия должны экономить время, мгновенно передавая информацию и при этом не отвлекая и не утомляя пользователя. Они должны восприниматься как неуловимое подмигивание.
- Если вы знаете своих пользователей и контекст, вы сможете сделать микровзаимодействия еще более точными и эффективными.
- Микровзаимодействия должны успешно проходить проверку временем. То, что показалось забавным в первый раз, может начать раздражать при постоянном использовании.
- Сделайте микровзаимодействия более человечными и сконцентрируйтесь на визуальной гармонии. Чтобы микровзаимодействие “ожило”, все движения должны быть очень плавными. Хороший дизайн — это всегда full stack: от функциональной части и до микровзаимодействий.
Изначально опубликовано на www.babich.biz
Если вам понравилась статья и перевод, дайте нам знать — нажмите Like
А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Нас можно найти в Facebook: Nancy Pong и Ринат Шайхутдинов.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
