Рекомендації по використанню зображень в дизайні

«Користувачі найчастіше звертають увагу на зображення, що містять тематичне наповнення і ігнорують різного роду« няшная »зображення, які використовують для« оживлення »веб-сайту.» - Jakob Nielsen.

Керівництво по юзабіліті - робота із зображеннями

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

  • Основи зображення - розмір, наповнення, якість і вплив - чотири важливих фактора оцінки хорошого зображення. Люди насправді шукають якісні зображення.
  • Ефективність - якщо зображення створює інтерес, то воно потрібно. Ефектність зображення характеризується трьома ознаками:

Емоційна привабливість ь - добре чи виглядає продукт на зображенні і збільшує чи воно попит?

Раціональна привабливість - показує чи зображення переваги продукту?

Привабливість бренду - картинка відповідає бренду?

  • Передана інформація - передача правильної інформації за допомогою зображення читачам сайту.
  • Очікувана реакція користувача - цей пункт трохи складніше реалізувати на практиці, але основна ідея полягає в тому, що картина повинна сприяти ухваленню потрібних рішень і створити бажання володіти продуктом. Про це буде сказано трохи пізніше.

Чисто декоративні зображення, як правило, ігноруються підсвідомістю нашого мозку. Це працює за принципом радара - якщо картинки існують на сайті тільки в якості наповнювача, мозок буде їх ігнорувати. У дослідженні робиться висновок, що картинки і фото реальних людей або реальних продуктів автоматично класифікуються як важливі і повинні бути детально вивчені людським мозком.

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

Якщо ви власник компанії, хорошою ідеєю буде приділити трохи часу для створення образу компанії за допомогою зображень. Це дає перевагу над іншими, «безликими» компаніями, і люди це помічають. Клієнти насправді хочуть знати (або, принаймні, бачити), які люди представляють компанію. Якщо ви можете собі це дозволити, найміть хорошого фотографа і намагайтеся уникати використання дешевих фотографій (особливо фотографій, які не мають ніякого відношення до вашого контенту). Це буде коштувати грошей, але такого роду внесок обов'язково окупиться.

Дослідження айтрекінга (процес визначення координат погляду ( «точки перетину оптичної осі очного яблука і площині об'єкта, що спостерігається або екрану на якій ставиться деякий візуальний стимул»)) доводять, що більш детальні зображення ваших продуктів зроблять найкращий ефект на клієнта. Люди хочуть бачити деталі, покажіть їм їх!

Якість і актуальність

Нижче наведені деякі результати різних досліджень. Ви побачите кілька веб-сайтів із зазначеними тепловими зонами. Червоні області показують ділянку, де очі користувачів були зосереджені найчастіше, в той час як сині області показують протилежне, вказуючи області, які ігноруються.

Крім того, що це дуже застарілий дизайн, ви можете помітити, що на зображення не припадає жодна гаряча зона. Це викликано тим, що всі зображення, вкладені в даний веб-сайт виключно як наповнювачі. Якби використовувалися більш тематичні зображення, гарячі зони, можливо, були б розміщені саме на них, але в даному випадку чітко видно, як багато витрачається простору для розміщення такого роду зображень на сайті.

Інший яскравий приклад можна побачити нижче. Сайт ресторану New York Magazine так само був частиною дослідження, і воно показало, що навіть якщо шеф-кухар всесвітньо відомий, якість його фотографії і раніше важлива. Так що навіть якщо зображення відповідають контенту, через низьку контрастності зображення і маленьких розмірів, воно просто ігноруються.

Керівництво для користувачів

Чи не забагато дизайнерів за сумісництвом ще мають дипломи по психології, тому мало хто знає, як працює людський мозок. Ті ж дослідження айтрекінга показали, що в центр нашої уваги може легко потрапити також зображення. Ми, очевидно, говоримо про високоякісних, відповідних картинках, а не наполнителях.

У дослідженні під назвою «Дивіться, куди ми дивимося," James Breeze показав, як відповідні зображення можуть бути центральними на сайті. Він досліджував теплі зони за допомогою 106 осіб і сайту виробника дитячих підгузників в якості прикладу. Як ви можете бачити на двох зображеннях нижче, коли дитина дивиться на відвідувачів, більшість людей вважають за краще дивитися на його обличчя. Коментарі «який він чарівний, миленький і солодкий», ймовірно, були досить популярними.

Однак, коли 106 відвідувачів подивилися на іншу сторінку (той же дитина, але вже дивиться в іншу сторону), результати явно покращилися. Ви можете помітити підвищення уваги і зосередженість на бренді, а також на невеликих шматках тексту, де мова йде про повернення грошей (досить важливий аспект бізнесу).

Цей приклад показує, наскільки великий вплив може мати картинка.

JCDecaux і THiNK. кілька років тому працювали разом і придумали таке дослідження. Воно також підтверджує результат вище. За допомогою зображень можна контролювати ключову інформацію та елементи, на які повинні звернути увагу відвідувачі.

У цифрах дослідження показує ще більш очевидні результати. На початковому зображенні (зліва) дуже мало уваги зосереджується на бренд і продукт - тільки 6% людей подивилися на ці елементи. Однак після того, як зображення було змінено і знову перевірено - н е менше 84% людей подивилися на продукт і бренд (навіть логотип внизу). Відсоток був збільшений в 14 разів, що є величезною різницею.

Праве зображення може допомогти дизайнерам зосередити увагу користувачів на потрібному елементі.

У зображень повинна бути мета

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

Це блискучий приклад ефективного використання зображень!

ключ довіри

У разі, якщо у вас є інтернет-магазин, майте на увазі, що вирішальне значення має довіру. Ніхто не буде купувати товар в Інтернеті, якщо він не довіряє продавцю. Причина, по якій Amazon і eBay- крім того, що вони величезні світові бренди і пропонують різні гарантії повернення грошей, вони також мають безліч різних функцій безпеки. Якщо у вас є інтернет-магазин, переконайтеся, що клієнти довіряють вам. Яке це має відношення до фотографії? Це просто! За даними дослідження, зробленим Paras Chopra, довіра може бути досягнуто шляхом використання зображень.

Зміцнення довіри неймовірно важливо при роботі з онлайн-відвідувачами.

Дуже цікаво було почитати про досягнення інтернет-магазину з продажу бразильських і карибських картин. Вони змогли збільшити конверсію свого сайту більш ніж на 95%, з 8,8 до 17,2. Як? Замість того щоб показувати ескізи картин, вони показали фотографії художників, які зробили їх. Якість картини ніколи не було проблемою, проблемою було, що відвідувачі не довіряли магазину. Просто показуючи обличчя художників, відвідувачі зрозуміли, що вони купують картини від реальних людей. Висновки, що у клієнтів виникає емоційний зв'язок з художниками, фото яких вони бачать на сайті.

оптимізація

Щоб підвести підсумки, також потрібно згадати про деякі технічні аспекти використання зображень на сайтах.

По-перше, потрібно відзначити, наскільки насправді важлива оптимізація. 61,9% веб-сторінок заповнені зображеннями, при цьому їх середній розмір 1.29MB. Зображення займають багато часу для завантаження.

Ширина і висота

Але це досить старий метод, і він не дуже ефективний для мобільних браузерів. Тому потрібно не забувати вказувати розміри для різних дозволів екрану.

Правильне використання зображень є вирішальним моментом при створенні успішного веб-сайту. Як ви бачили в попередніх прикладах, погано підібрані зображення ігноруються відвідувачами. Але якщо вам вийти знайти правильну фотографію і вставити її в правильне місце, вона може творити чудеса.

Але також потрібно пам'ятати, що якісні зображення не завжди можуть вирішити проблеми вашого сайту. Дуже важливим в цьому питанні також є тестування.

Переклад - Вартівня

Схожі статті