Зачем нужны иллюстрации на сайте. Как они улучшают юзабилити

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

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

Заглавная картинка страницы может раскрыть всю суть контента ниже. Не только показать юзеру о чем эта страница в целом, но и детально описать чем занимается компания или что делает приложение.

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

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

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

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

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

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

Картинки помогут для создания понятной инструкции для пользователя, которая будет удобнее чисто текстовой. Особенно если речь идет о взаимодествии с физическим предметом

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