Изображения в дизайне: как выбрать и использовать их правильно

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

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

#1 Выбирайте или создавайте релевантные картинки

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

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

❌ Эта страница налоговых консультантов Jackson Hewitt содержит нерелевантную фотографию счастливой семьи с бенгальскими огнями. Изображение плохо соотносится с содержанием и никак не упрощает восприятие и запоминание услуги

✅ На этой странице TurboTax нас встречает визуализация созвона с сертифицированным налоговым бухгалтером и уведомления о возврате налога. Сообщение и изображение усиливают друг друга. Страница легко воспринимается и запоминается

#2 Избегайте стоковых фотографий

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

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

❌ *Стоковые изображения на сайте Lenovo не отражают возможности каждого уровня поддержки*

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

✅ Функции Notion представлены уникальными скриншотами. Эти изображения сделали возможности более конкретными и повысили их запоминаемость

#3 Показывайте продукты в реалистичном контексте

Покажите ваш продукт в том контексте, в котором он будет использоваться на практике. Такие изображения помогут людям понять и запомнить его.

Что можно включить в изображение продукта:

Окружающая обстановка: где и когда будет использоваться продукт (например, место, время суток, в компании или в одиночку).
Целевая аудитория: кому он будет полезен.

✅ На странице массажных очков SmartGoggles от компании Therabody размещена фотография человека, который использует продукт

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

#4 Располагайте изображения рядом с релевантным текстом

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

На сайте компании Cigna изображение пожилого человека с праздничным тортом сопровождает текст «Turning 65?» (Исполнилось 65 лет?). Расположение фото способствует восприятию контента.

✅ *Фото пожилого человека с праздничным тортом располагается рядом с сопровождающим текстом “Turning 65?”*

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

❌ *В мобильной версии изображение отделилось от заголовка*

#5 Не используйте слишком много изображений

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

Первый экран сайта Hallmark содержит 9 однотипных изображений. Такое обилие визуальных образов нарушает иерархию и мешает посетителям сфокусироваться.

❌ *Hallmark.com: из-за 9 однотипных изображений первый экран выглядит перегруженным*

Интернет-магазин The Paper Store нашел правильный баланс — мы видим на главной странице 5 разных изображений, каждое из которых соответствует конкретной категории товаров. Страница имеет четкую визуальную иерархию.

✅ *PaperStore.com: каждое из 5 изображений передает четкое сообщение, при этом композиция не выглядит перегруженной*

#6 Выбирайте фотографии хорошего качества

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

На сайте Hewlett-Packard пользователей встречало размытое изображение офисных сотрудников. Разрешение было слишком низким, чтобы определить, являются ли ноутбуки на фото продуктами HP или это просто стоковое изображение.

❌ Изображение было слишком плохого качества, чтобы определить, используют офисные сотрудники устройства Hewlett-Packard или нет

#7 Подумайте о том, как визуальные образы могут быть интерпретированы в разных культурах

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

Например, в январе на китайской версии сайта H&M были представлены фотографии одежды, подходящей для празднования китайского Нового года. Эти изображения были культурно релевантны для пользователей из Китая.

✅ На китайской версии сайта H&M (слева) были представлены изображения, связанные с китайским Новым годом, а на американской версии (справа) — нет. Эти изображения отражали культурные особенности разных стран

Тестируйте изображения

Качественное юзабилити-тестирование — лучший способ определить, понятны ли ваши визуальные образы аудитории. Вот несколько лучших практик:

Покажите изображения внутри макета: Картинки не существуют в вакууме. Они сопровождают и дополняют остальной контент. По возможности тестируйте визуальные элементы внутри макета или хотя бы в паре с текстом.

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

Проследите, заметили ли пользователи изображение. Например, они могут задержаться возле него или снизить скорость прокрутки. Если участник обратил внимание на картинку, но не упомянул ее, задайте уточняющий вопрос: «Что вы узнали на этой странице?». Важно выяснить, какую информацию они смогли извлечь из изображений.

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

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

5-секундный тест: Покажите пользователю макет на 5 секунд (или другой короткий промежуток времени), а затем попросите его описать, что он увидел и какое сообщение, по его мнению, транслировало изображение. Это поможет вам понять, смог ли участник правильно распознать визуальный образ. Чтобы узнать о первом впечатлении больше, спросите: «Что вам бросилось в глаза и особенно запомнилось?».

Открытый выбор слов: Участникам показывают изображение и просят описать его (устно или письменно). Отсутствие ограничения по времени позволяет исследователям собрать как можно больше ассоциаций. Проанализируйте, насколько последовательны и точны полученные слова и описания. Расхождения в интерпретации визуального образа могут свидетельствовать о том, что он недостаточно конкретен и узнаваем.

A/B-тестирование: Если у вас есть функционирующий сайт с достаточным трафиком, вы можете сравнить 2 версии дизайна с разными изображениями. Так вы узнаете, какое влияние оказывает визуальный ряд на важные метрики, например, конверсию. Поскольку это количественный метод, вы выясните, какие изображения работают лучше, но не узнаете почему.

Заключение

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

Больше классных проектов в uprock.design

Источник

Nielsen Norman Group