Усиление UX дизайна с помощью микроанимации

Усиление UX дизайна с помощью микровзаимодействий
26.07.2015 КОММЕНТАРИИ: 0

О книге судят по обложке. Памятуя об этом, дизайнеры разрабатывают поистине впечатляющие, запоминающиеся и практичные интерфейсы. Они буквально затягивают пользователей в маркетинговую воронку и шаг за шагом направляют к совершению целевого действия.

В основе разработки удобного в использовании UX дизайна лежит человекоцентрированный подход. Во главу угла ставится пользователь с его потребностями, затруднениями, предпочтениями. Ваше приложение должно взаимодействовать с ним на уровне «человек — человек», а не «сервис — человек». Общайтесь с посетителями своего сайта на их языке, проявляйте эмоции, используйте сленг и разговорную речь, постарайтесь втесаться к ним в доверие. Интерфейс должен стать настоящим другом для пользователей, всегда готовым дать совет, помочь с поиском интересующего контента и просто поднять настроение.

Сблизить дизайн сайта с аудиторией позволят микровзаимодействия (micro-interactions). Это элементы интерактивной анимации, которые включаются в интерфейс для повышения его привлекательности и эффективности.

Грамотное использование микроинтеракций позволяет:

  • Наладить коммуникацию с аудиторией и получить обратную связь.
  • Создать впечатление, что пользователь сам управляет сайтом.
  • Помочь людям визуализировать результаты их действий.

Опыт взаимодействия пользователей с ресурсом (user experience, UX) напрямую зависит от вашего с ними обращения и удобства пользования сервисом. При разработке интерфейса следует проявлять повышенное внимание к мелочам. Микровзаимодействия помогут пользователю сориентироваться на сайте, понять, что к чему, получить необходимый отклик. Они доступно объяснят посетителю смысл всех происходящих на сайте процессов, сделают доступным и интуитивно понятным любой интерфейс, независимо от сложности его структуры.

Издание Webdesignerdepot.com представило список основных рекомендаций по использованию микровзаимодействий в UX-дизайне.

1) Покажите состояние системы

Первый принцип юзабилити, сформулированный Якобом Нильсеном (Jakob Nielsen), гласит: держите пользователей в курсе того, что происходит. Посетители рассчитывают получить ответ от системы незамедлительно, однако в отдельных случаях сайту требуется время, чтобы завершить процесс.

Интерфейс должен оповещать юзеров о стадии выполнения операции, показывать в фоновом режиме график загрузки, измерять битрейт (скорость передачи потока данных) или обеспечивать звуковое сопровождение. То же касается и передачи файлов: не давайте пользователям скучать — позвольте им следить за ходом процесса. Даже такие неприятные уведомления, как «Не удалось загрузить файл», должны подаваться в остроумной и позитивной форме. Заставьте пользователя улыбнуться!

Усиление юзабилити с помощью микровзаимодействий 1

Усиление дизайна приложений с помощью микровзаимодействий

2) Акцентируйте внимание на изменениях

Зачастую в целях экономии места в приложении по ходу развития событий одна кнопка заменяется другой. Однако пользователь такую замену не всегда замечает. Будет правильнее уведомить его о произошедшем. Весело и ненавязчиво привлечь внимание юзера к важному элементу интерфейса позволит анимация.

Микровзаимодействия в дизайне приложений

Микроинтеракции в дизайне приложений

Услиление UX с помощью микровзаимодействий

3) Используйте возможности среды

В эпоху смартфонов, смарт-часов и прочих устройств с малыми экранами сложно представить всю важную информацию на одном экране. Сложно, но возможно. Например, установив интерактивную навигацию между различными страницами. Так чтобы пользователь понимал, откуда куда он попадает, и как вручную может вернуться обратно.

Микровзаимодействия в мобильной среде

Использование микровзаимодействий в мобильном приложении

4) Сопроводите инструкцией нестандартные лейауты

Если у вашего приложения или сайта нестандартная схема дизайн-макета (лейаут), подскажите пользователям, как с ним взаимодействовать. Используйте те же микроинтеракции, чтобы избежать путаницы и повысить удобство пользования ресурсом. Ниже вы можете увидеть такие примеры микровзаимодействий, как листающийся вперёд каталог фотографий, сменяющие друг друга при прокрутке графики, ротация героев мультфильмов.

Инструктаж с помощью микроинтеракций

Инструктаж в виде микроинтеракций

Анимированные инструкции по использованию приложений

5) Призывы к действию

Помимо оказания помощи во взаимодействии с приложением, микроинтеракции могут использоваться для призыва к совершению целевого действия. Посредством этих мелких анимированных элементов вы можете мотивировать юзера «продолжить просмотр», «лайкнуть контент», «поделиться в соцсетях» и т.д. Пользователи обязательно сделают то, что вы от них хотите, хотя бы потому, что сам процесс вызывает интерес.

Призывы к действию с помощью микровзаимодействий

микроинтеракции для призыва к действию

Анимированный призыв к действию

6) Визуализируйте процесс ввода данных

Ввод данных — критически важный элемент любого приложения. Качество результатов, которые получают пользователи, напрямую зависит от грамотности запросов, которые они вбивают. Ввод данных — скучное занятие, но микровзаимодействиям под силу оживить даже его.

Анимированная поисковая строка в приложении

Инструктаж по вводу данных с помощью микровзаимодействий

7) Сделайте обучение интерактивным

Обучить аудиторию пользоваться только что запущенным приложением также можно с помощью анимации. Микровзаимодействия позволят обозначить ключевые функции и элементы управления сервисом, проинструктируют юзеров по вопросам его эксплуатации.

Анимированная инструкция по использованию приложения

Интерактивная инструкция по использованию приложения

 

Добавить комментарий


Защитный код
Обновить