Зображення в дизайні: як вибрати та використовувати їх правильно

#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 версії дизайну з різними зображеннями. Так ви дізнаєтеся, який вплив має візуальний ряд на важливі метрики, наприклад, конверсію. Оскільки це кількісний метод, ви дізнаєтеся, які зображення працюють краще, але не дізнаєтеся чому.

Висновок

Грамотно підібрані, якісні зображення доповнюють текст і роблять контент більш зрозумілим і таким, що запам'ятовується. Вони повинні бути релевантними та вписуватися в контекст, супроводжуватися текстом пояснення і не перевантажувати користувачів. Тестуйте візуальні елементи, щоб переконатися, що вони дійсно працюють, а не просто займають місце на екрані.

🖤

Сподобався цей матеріал? Приєднуйся до дизайн спільноти Pleex і разом ми зробимо нашу дизайн-культуру кращою.