Обычно иллюстрациями на сайтах заведуют маркетологи, а рисуют графические и бренд-дизайнеры, и решают они только маркетинговые задачи. А продуктовые дизайнеры часто относятся к этим картинкам как к необязательному украшательству. Не используют их совсем или оставляют места в вайрфрейме с подписью "здесь мы вставим какую-нибудь картинку". Однако с помощью графики можно значительно улучшить пользовательский опыт, и решить многие задачи, которые встают перед дизайнером интерфейса. В этой статье я приведу примеры использования иллюстраций из своего опыта и опыта коллег.
Я их рисовал сам для своих же интерфейсов, но это не обязательно. Вы можете найти на стоках, или заказать иллюстратору, в том числе внутри команды. Здесь же могу посоветовать другую мою статью, о том как быстро научиться рисовать нужные картинки.
Раскрытие содержания сайта / статьи / страницы
Заглавная картинка страницы может раскрыть всю суть контента ниже. Не только показать юзеру о чем эта страница в целом, но и детально описать чем занимается компания или что делает приложение.
Иллюстрация пошагового процесса
Картинки, добавленные для блоков "как это работает" делает его прочтение удобнее и быстрее. Визуализация текстовой информации помогает пользователю быстрее понимать сложные схемы, особенно если речь идет о сложном пошаговом процессе.
Визуализация товара
Часто бывает, что фотографии товара отсутсвуют, или они слишком плохого качества. В этом случае можно нарисовать иллюстрации. Даже схематические контурные картинки могут помочь показать товар лицом, и снять множество вопросов у пользователя. Если речь идет о множестве однотипных товаров, иллюстрации помогут и различить их между собой в списке, и показать их сходства/различия.
Изображение сложной схемы
Вместо сложной блоксхемы процесса (например, производства) можно нарисовать иллюстрацию где схематично показаны все этапы и связь между ними. Это делает схему понятнее для пользователя, даже не имеющего профильных знаний.
Улучшение экрана ошибки
Можно добавить иллюстрации на экранах ошибок "ничего не нашлось", такой строинцы не существует", "что-то пшло не так". Они не только заполняют пустое пространство, показывая что страница загрузилась полностью, но и смягчают разочарование от самих ошибок.
Брендирование декстоп-приложения
Картинки на сплеш-экранах десктопных приложений не только их брендируют и создают настроение, но и позволяют пользователю лучше понимать что за приложение он сейчас открыл, не ошибся для кликнув на другую иконку. Безликие текстовые сплеш-экраны в этом смысле работают плохо.
Иллюстрация тезисов лендингов
Естественно, не стоит забывать про привычные функции картинок. На лендингах они могут помочь легче воспринимать блоки текста на отдельных экранах, иллюстрируюя эти тезисы.
Инструкция по использованию
Картинки помогут для создания понятной инструкции для пользователя, которая будет удобнее чисто текстовой. Особенно если речь идет о взаимодествии с физическим предметом
Онбординг приложений
В онбординге приложения иллюстрации помогут показать все его функции и преимущества. Быстрее чем текстовое описание дать пользователю понять о чем это приложение, и как оно работает.