Как иллюстрации влияют на UX

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

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

Как иллюстрация влияет на пользовательский опыт (UX)

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

  • Привлекают внимание посетителей и предоставляют важную информацию в простом к восприятию формате.
  • Способны привнести ясность при подаче сложной концепции. Нет нужны выдумывать слова, если вы можете объяснить всё визуально.
  • Вовлекает пользователей. Красивая иллюстрация не только привлекает внимание, но и также вызывает интерес к самому продукту.
  • Позволяют играть с воображением пользователя. Иллюстрация помогает размыть границы между воображением и реальностью.

Мне удалось выделить 6 основных факторов, как иллюстрация улучшает пользовательский опыт:

1. Позволяет быстрее раскрыть суть

Как уже было отмечено ранее, у иллюстраций огромный потенциал с точки зрения пояснения и разъяснения. В контексте веб-сайтов и мобильных приложений существует множество способов применения иллюстраций для того, чтобы сделать UX лучше. Например, можно сделать процесс знакомства с продуктом намного привлекательнее. Этот метод даёт дополнительные преимущества мобильным приложениям, так как позволяет сэкономить место на экране.

Источник картинки: Divan Raj

Иллюстрации можно использовать для демонстрации различий между тарифами.

Источник картинки: Dribbble

Последнее, но не менее важное, иллюстрации можно использовать с юмором, чтобы нивелировать важность возникшей проблемы.

Страница ошибки в сервисе Flights от Google. Источник картинки: Dribbble

2. Более запоминающийся опыт

Мы регулярно используем множество различных продуктов, но лишь некоторые из них оставляют по-настоящему запоминающийся опыт.

Если мы как дизайнеры хотим создавать более запоминающиеся продукты и опыт, но нужно для начала понять, как работает человеческий мозг. Барбара Фредриксон и Даниэль Канемен предложили «правило оценок пик/конец» из отрасли психологической эвристики, которое описывает, как наш мозг работает с информацией. Это правило предполагает, что люди часто судят о полученном опыте по ощущениям в пиковый момент и в самом конце, а не в целом и не по первому впечатлению. Это правило работает как при положительном, так и при негативном опыте.

Другими словами, когда мы запоминаем какой-то опыт, впоследствии мы воспроизводим не событие или полученный опыт в целом, а лишь ключевые его моменты. Хорошая иллюстрация может потенциально стать таким ключевым моментом во взаимодействии посетителя с вашим продуктом.

Silverback, приложение для Mac, которое облегчает процесс Gorilla-тестирования юзабилити, использует картинку с гориллой.

 

3. Иллюзия прямого взаимодействия с пользователем

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

Иллюстрации могут выступать в роли буфера между пользователем и приложением.

Хорошим примером является Omono. Приложение использует сову, которая знакомит посетителей с интерфейсом и в целом оставляет дружественное впечатление.

Иллюстрации придают посетителям уверенности в себе и в том, что они хотят доделать всё до конца.

4. Усиление существующей стилистической концепции

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

Источник картинки: Zurb Foundation

5. Оживляет процесс взаимодействия

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

Хороший пример Readme.io – сервис, предоставляющий документацию со всего мира, который заставляет пользователей улыбнуться при каждом вводе пароля. Людям нравятся такие мелкие штрихи.

6. Элементы гамификации в UX

Гамификация – популярная техника, которая используется продакт-дизайнерами для улучшения вовлечённости пользователей. Дизайнер может использовать иллюстрацию в интерфейсе, когда пользователь заслуживает вознаграждения за некоторые достижения.

Рассказать:


Навигация по записям