Как иллюстрации бустят UX


16.11.2021 Время чтения - 4 минуты 558

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

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

Что такого особенного в иллюстрации?

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

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

Где их использовать?

Иллюстрации в пользовательском интерфейсе можно использовать в разных сценариях. Я остановлюсь на 5, для которых они идеально подходят:

Изображение темы и героя

Вот он, первый момент, когда пользователи взаимодействуют с дизайном вашего продукта. Как проще всего объяснить суть продукта? Без сомнения, используя иллюстративный язык!

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

Люблю эти иллюстрации на https://podcorn.com/

Онбординг

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

То, как https://www.headspace.com/ передает эмоции простыми формами

Графика геймификации

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

https://www.nike.com/ntc-app

Уведомления

С помощью уведомлений дизайнеры стремятся показать пользователям важную информацию, которая должна оставаться в их памяти. Исследование UX, проведенное Baymard Institute, доказывает, что информацию, поданную с картинкой, воспринимают 56%.

https://www.fiverr.com/

Маскоты

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

https://www.mintmobile.com/

Зачем использовать иллюстрации?

  1. Создавать привлекательные визуальные сообщения

Наш разум обрабатывает информативные изображения лучше, чем просто текст. Дизайнеры должны использовать это, чтобы объяснить пользователям, где они находятся, что происходит на этой странице и что делать дальше.

2. Чтобы пользовательский интерфейс вызывал глубокие эмоции.

Все мы эмоциональные существа, способные видеть красоту даже в уродливых вещах вокруг нас. Мне нравится эта цитата:

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

 Дональд А. Норман, «Эмоциональный дизайн: почему мы любим (или ненавидим) повседневные вещи»

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

3. Повышение узнаваемости бренда.

Яркая визуальная идентичность ключ к узнаваемости бренда. Дизайнеры активно используют иллюстрации в маркетинговых целях, привлекая внимание пользователя к конкретным триггерам в интерфейсе. Не секрет, что компании поддерживают согласованный стиль иллюстраций на сайтах и ​​в соцсетях, потому что пользователи подсознательно связывают визуальный стиль с брендом.

Жозефина Рэйс для кампании Adidas
Жозефина Раис «Повысьте уровень эндорфинов» для Adidas

Выводы

Подводя итог, иллюстрации в интерфейсе важны для того, чтобы:

  • Передать идею лучше, чем просто текстом;
  • Увеличить эстетичность интерфейса;
  • Создать эмоциональную связь с бренда;

Какие классные примеры иллюстраций в интерфейсе вас тронули? Поделитесь в комментариях.