Лучшие практики: микровзаимодействия

  • Подтверждение добавления предмета в корзину
  • Использование жеста потяните вниз для обновления содержимого
  • Анимация интерфейса, которая подтверждает действие (например, кнопка переключения)

1. Формируйте петлю привычки

  1. Предпосылка/стимул — триггер, который инициирует действие.
  2. Поведение/действие — оно совершается в ответ на стимул.
  3. Поощрение — польза, которую вы получаете в итоге и причина завершения действия.

2. Свяжите воедино

  • Непрерывность. Анимируйте переход между разными состояниями объекта таким образом, чтобы переход был плавным и непрерывным.
Изображение: Cam Runcie
  • Изображение: Cam Runcie
  • Предсказуемость. Хорошо проработанные микровзаимодействия позволяют формировать ожидания и делать информацию понятной пользователям.
Изображение: Leo Zakour
  • Изображение: Leo Zakour
Изображение: Matt D. Smith

3. Анимируйте фидбек

  • Функциональная анимация снижает когнитивную нагрузку, предотвращает слепоту к изменениям и улучшает способность пользователя реагировать в интерфейсе.
Изображение: Tamino Martinius
  • Изображение: Tamino Martinius
  • Приятная анимация микровзаимодействий лучше вовлекает пользователей, а движение направляет внимание и оживляет пользовательский интерфейс.
Изображение: Chris Bannister
  • Изображение: Chris Bannister
Изображение: Tubik

4. Не забывайте про чувство юмора

Иконка подтверждения отправки рассылки MailChimp использует юмор, чтобы разрядить напряжение во время процесса работы

5. Избегайте нежелательных взаимодействий

Передвигающееся по экрану пятно при прокручивании чата, через какое-то время может начать раздражать пользователя. Изображение: Jakub Antalík

Вывод

--

--

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. http://blog.aic.ru/

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
aic blog

aic blog

1.2K Followers

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. http://blog.aic.ru/