Психологія сприйняття у дизайні — що потрібно знати, якщо працюєш з візуальною комунікацією
Мене звати Марія Короткова, я працюю UX\UI дизайнером в компанії TRIARE. Пʼять років тому, коли почала заглиблюватись у дизайн і вивчати UX, мене почали хвилювати питання: як люди мислять? Як вони приймають рішення? Що спонукає людину натиснути кнопку і купить будь-що? Та й взагалі, як змусити людей робити те, що потрібно вам?
Досліджуючи відповіді на ці питання, я зрозуміла, наскільки сильно повʼязані дизайн, психологія та маркетинг, і що ці різні, здавалося б, сфери користуються схожими інструментами впливу на візуальне сприйняття людини. Звісно, кожен проєкт — це завжди щось особливе, окрема задача зі своєю специфікою. Але у дизайні ми користуємось схожими патернами, які тісно повʼязані з природою сприйняття людини і вони незмінні.
Тому ця стаття буде цікава не тільки дизайнерам, щоб освіжити в памʼяті базові речі, а й усім, хто працює з візуальною комунікацією.
Інформаційний шум
Величезний обсяг інформації щодня сиплеться на людину. Виникає питання: як пробитись через весь цей потік інформації, як проторувати стежку до свідомості свого цільового користувача, а головне — обійти фільтри і закарбуватися в його голові на довгі роки? Чим складніша мета, тим продуманішою та винахідливішою має бути робота дизайнера.
Спираючись на потреби замовника, вимоги маркетингу, психологію цільової аудиторії та багато інших аспектів, досвідчений дизайнер може розрахувати оптимальний варіант дизайну.
Щоб скласти перше враження про продукт/ компанію/ сайт людина, як правило, витрачає 0,02 секунди. Компанія зацікавлена у високому трафіку, тому шукає варіанти, як зачепити потенційного клієнта.
Критерії сприйняття, які враховують при аналізі зацікавленості аудиторії — розуміння та довіра. Розуміння формується на першому екрані сторінки, дискрипті, що показує, про що взагалі сайт і які послуги він пропонує. Якщо сайт зрозумілий, вступає другий критерій — довіра.
Довіра — це візуальна частина сайту, дизайн. Якщо порівнювати дві різні вебсторінки зі схожим показником розуміння, але у першому випадку вебсторінка була створена у 2011 році і більше не оновлювалася, а в другому — дизайн відповідає усім трендам сьогодення, то користувач більше довірятиме другій сторінці. Адже про яку високу якість послуг можна говорити, якщо візитівка компанії, сайт, тривалий час не змінювалась або виконана неякісно? Споживач поглинає інформацію очима, й візуальних тортур не терпітиме.
Як людина бачить
Зір є основним каналом сприйняття. Відомо, що через очі надходить близько 90% інформації з навколишнього світу. Половина ресурсу мозку використовується для обробки зорової інформації. Тобто те, що сприймають наші очі, є лише частиною загального процесу. Зображення, що надходять, змінюються та інтерпретуються мозковими процесами. А картинка, яку ми бачимо — пласка, не об’ємна.
У нас є два види зору: центральний та периферичний. Центральний зір відповідає за розрізнення деталей, а периферичний охоплює решту видимого поля — області, які ми бачимо, але не дивимося на них прямо.
Дивлячись на екран комп’ютера, люди зазвичай приймають рішення, на якій сторінці зупинитися, на основі першого враження, яке дає їм периферичний зір. Незалежно від нашого бажання, він фіксує рух.
Наприклад, якщо ви читаєте текст, а на екрані є анімація або постійна зміна яскравості та кольору на краях екрана, ви не зможете не звернути на це увагу. Відповідно, якщо ви хочете, щоб користувачі були зосереджені на центральній частині екрана, не використовуйте анімацію або миготливі елементи на периферії.
Далі розглянемо інструменти дизайнера, які використовуються, щоб досягти бажаної реакції користувача. Але перш ніш заглибитись в цю тему, давайте швидко згадаємо базові правила при проєктуванні інтерфейсу:
Закон Хіка
Чим більше варіантів ми даємо користувачеві, тим довше він робитиме вибір.
Вибір має бути, але помірний,
Концепція вибіркового ігнорування
Вона пов’язана з тим, що користувачі сприймають інформацію на сайті дуже швидко, і схильні ігнорувати дані, які вважають несуттєвими. Тому важлива інформація на онлайн-ресурсі має бути грамотно структурована, а в ідеалі — бути мінімалістичною і не мати навколо себе декоративних елементів, які відволікають.
Закон Міллера
Середньостатистична людина не здатна запам’ятати більше 7±2 елементів за один раз. Враховуючи прискорене сприйняття інформації з екрана монітора, цю цифру можна скоротити до
Інакше кажучи, не варто будувати інтерфейс таким, щоб користувачеві доводилося запам’ятовувати якусь інформацію довше
Ментальні моделі
Принцип пов’язаний з тим, що кожна людина має своє уявлення про будь-який об’єкт взаємодії, виходячи з попереднього досвіду. Так, якщо користувач заходить на сайт, він очікує, що кошик буде намальовано у вигляді реального кошика, а поле для реєстрації/ авторизації буде у верхньому правому куті екрану.
Людина завжди будує ментальні моделі. Розуміння цих моделей цільової аудиторії — запорука успіху вашого сайту чи продукту.
Створюйте концептуальну модель цілеспрямовано. Не забувайте про технологію. Секрет дизайну, що відповідає інтуїтивним очікуванням користувачів у тому, щоб зробити концептуальну модель продукту відповідною, наскільки це можливо, ментальним моделям вашої аудиторії.
Якщо ви зробите це правильно, ваші користувачі отримають позитивний та корисний досвід. Коли ви пропонуєте новий продукт і знаєте, що він ще не має ментальної моделі, необхідно провести навчання, щоб підготувати аудиторію до створення нової ментальної моделі.
Ви можете переконати людей бачити речі потрібним для вас чином
Зорова кора працює активніше в тому випадку, коли ви щось уявляєте, а не коли ви насправді сприймаєте об’єкт. Коли ми даємо волю нашій уяві, збудження відбувається на тій самій ділянці зорової кори, але активність вища.
Подивімося, чим зайнятий мозок користувача, поки той розглядає візуальний об’єкт.
Мозок перевіряє об’єкти на безпеку
У першу секунду мозок сканує загрози, а не милується дизайном. На його думку, небезпечний дизайн існує. Так, ламані лінії сприймаються як агресивні та неспокійні, викликають відчуття тривоги та небезпеки.
Це не означає, що від них треба відмовитись. Все, що здається загрозливим та динамічним, миттєво привертає увагу, а це у дизайні дуже цінно. Однак використовувати такі елементи потрібно дозовано, обережно та продумано.
Мозок шукає асоціації
Асоціації повинні викликати емоції. Саме в цьому полягає секрет привабливого дизайну. Бо емоції викликає не форма, а асоціації, пов’язані з нею. Тому вибір форми повинен залежати від асоціацій, які ви хочете викликати у користувачів.
У режимі пошуку добра і зла мозок порівнює об’єкт з тим, з чим мав справу раніше, і що зберіг у пам’яті. Чим слід керуватися під час вибору візуальних асоціацій? Частіше використовуйте відомі образи, оскільки люди автоматично звертають на них увагу.
Якщо ви хочете, щоб люди пізнавали об’єкт (наприклад, значок), використовуйте прості геометричні форми. Це полегшує розпізнавання базових геонів і дає можливість швидше та легше пізнавати об’єкт.
Двовимірні елементи переважають над тривимірними. Очі передають інформацію мозку у вигляді двовимірних об’єктів. Тривимірне зображення на екрані може суттєво уповільнити впізнавання та розуміння.
Люди розпізнають малюнки чи об’єкти швидше і запам’ятовують їх краще, якщо вони представлені у канонічній перспективі. Якщо на сайті або окремій вебсторінці ви плануєте використовувати піктограми, малюйте їх у канонічній перспективі.
Чим простіше форма, тим легше вона читається, за умови, що її сприйняттю не заважають інші елементи або фон, який відволікає. Чим більше користувач витрачає часу на візуальне читання форми, тим складніше вона здається йому. Однак занадто прості та очевидні асоціації не запам’ятовуються. Якщо ж у формах є якась особливість, ідея, то вони чіпляють погляд і врізаються в пам’ять.
Якщо ціль дизайну — привернення уваги, можна використовувати несподівані асоціації. Важливий характер ліній та наявність кутів. Кожен кут приковує до себе погляд і уповільнює час «читання» зображення. 90% складності форми визначається кількістю кутів у фігурі. Погляд гальмує, чіпляючись за кожен злам.
Також, при сприйнятті складних форм ми, як правило, «реорганізовуємо» їх до набору простих компонентів або простої цілої форми. Інакше кажучи, люди візуально сприймають групу об’єктів як щось ціле.
Мозок «домальовує»
Щоб розпізнати предмет, нам не потрібна деталізація. Наш мозок із задоволенням «заповнює прогалини», подумки домальовуючи відсутні частини зображення. Чим лаконічніший малюнок, тим швидше він впізнається. Тому в дизайні часто використовують прості мінімалістичні ілюстрації.
При розробці дизайну цільової сторінки пам’ятайте, що відвідувачі спочатку розпізнають елементи лендингу в їхньому загальному вигляді. Простий об’єкт, що добре виділяється, швидше залучить користувача в конверсійну дію, ніж складний об’єкт з безліччю дрібних деталей і складним контуром.
Мозок любить новизну
Мозок любить новизну та сюрпризи. Все нове нас радує, викликає позитивні емоції. Передбачуваний дизайн, в якому немає хоча б невеликої «родзинки» та новизни, позбавляє користувача задоволення. Грайте з формами, створюйте цікаві комбінації зі звичних геометричних фігур та ліній.
Мозок шукає взаємодію
Люди дивляться на речі матеріалістично, і це проявляється навіть у віртуальному світі. Ми подумки торкаємося всього, навіть якщо це неможливо фізично. Ми дивимося на зображення предмета та ментально взаємодіємо з ним.
Наприклад, дивлячись на намальовану дверну ручку, ми подумки повертаємо її. Дивлячись на морозиво, уявляємо собі солодкий смак та холодок на язиці. Дивимося на фото гантелі та прикидаємо її важкість. «Що я можу зробити з цим предметом?» — Щоразу цікавиться мозок.
У дизайні дуже важливе розуміння цієї особливості нашого сприйняття. Всі знають про кнопки, які хочеться натиснути. Але це працює для всього дизайну, всіх його форм та елементів. Форми, яких користувачеві так і хочеться торкнутись — найкращі форми.
Принцип «фігура — фон»
Цей принцип визначає, як наш мозок інтерпретує взаємозв’язок між переднім планом і фоном. Зазвичай ми сприймаємо область меншого розміру як передній план, а більшого — як фон. Однак ситуація змінюється, якщо і там, і там містяться різні об’єкти чи зображення. Сприйняття будь-якого зображення починається з того, що око відокремлює фігури (об’єкти) від фону.
Чим стабільніше співвідношення «фігура та фон», тим простіше ми можемо сфокусувати увагу нашої цільової аудиторії саме на тому, що ми хочемо їм показати (кнопка заклику до дії, головний заголовок лендингу та інші елементи, що конвертують).
У збільшенні стабільності нам можуть допомогти два взаємопов’язані принципи сприйняття:
- площа. З двох об’єктів, що перекриваються, «гачковою» фігурою (незалежно від кольору) буде та, чия площа менша;
- випуклість. Не увігнуті, а опуклі форми зазвичай сприймаються як фігури.
Принцип близькості
Об’єкти, розміщені близько один до одного, сприймаються як пов’язані між собою, на відміну від тих, які розташовані на великій відстані. Причому це правило діє, незалежно від кольору та форми елементів.
Наприклад, коли ми читаємо текст, то сприймаємо групу літер, які розташовані близько, як одне слово. В UX цей принцип може використовуватися скрізь, де потрібно підкреслити пов’язаність елементів, наприклад:
- текст + кнопка заклику до дії;
- текст + ілюстрація;
- декілька елементів меню, що належать до одного підрозділу;
- заголовок + підзаголовок;
- група зображень, що належать до одного пункту.
Принцип близькості можна використовувати і для полегшення сприйняття великої кількості інформації. Наприклад, якщо у формі для заповнення занадто багато полів, користувачеві складно охопити їх поглядом (пам’ятаємо про правило 7±2). Та якщо поєднати поля для введення в групи по
При цьому потрібно уникати небажаного угруповання. Наприклад, якщо розташувати в одному кутку інтерфейсу блогу кнопки «Назад», «Вперед», «Додати», «Зберегти» та «Видалити», то користувач може заплутатися. У цьому випадку краще виділити одну групу як кнопки навігації, а другу — кнопки редагування.
Інший спосіб показати зв’язок між елементами — розташувати їх особливим чином. Все, що знаходиться всередині замкненої області, сприймається як пов’язане між собою. Все, що виходить за її межі — сприймається як набір окремих об’єктів.
Принцип подібності
Об’єкти, що мають аналогічні візуальні характеристики (наприклад, форма, колір, розмір), сприймаються як взаємоповʼязані, на відміну від елементів, які не мають цих характеристик.
Очевидне застосування принципу подібності у вебдизайні — колір посилань. Як правило, посилання у змісті сторінки оформлюються однаково, найчастіше синім кольором та підкресленням. Це допомагає відвідувачу аналогічним способом використовувати всі слова/ фрази, виділені подібними характеристиками: кольором і підкресленням.
Принцип спільної долі
Об’єкти, що рухаються в одному напрямку, навіть якщо вони дуже різні, сприймаються як більш пов’язані, ніж елементи нерухомі, або ті, що рухаються в різних напрямках.
Незалежно від того, як далеко один від одного розміщені елементи, або наскільки вони несхожі, вони все одно сприйматимуться як пов’язані один з одним, якщо рухаються і змінюються синхронно.
Продовження
«Елементи, розташовані на лінії або кривій, сприймаються як тісно пов’язані, на відміну від елементів, що не знаходяться на лінії або кривій». Суть цього принципу в тому, що людське око переміщається розташованими у лінію подібними об’єктами і сприймає їх як єдине ціле.
Це інстинкт — дотримуватись певного напряму. Варто вам подивитись чи піти у вибраному напрямку, ви будете робити цю дію, доки не побачите щось значне, або ж не визначите, що там немає нічого цікавого, на що варто подивитися.
Інша інтерпретація цього принципу така: ми продовжуватимемо наше сприйняття форм за їх кінцевими точками.
Висновки
Візуальне сприйняття — це активний процес. Щойно щось потрапляє в наше поле зору, мозок включає сканування об’єкта у фоновому режимі: шукає у пам’яті досвід взаємодії з ним, збирає асоціації, перевіряє загрози, оцінює шкоду чи користь. Визнавши об’єкт безпечним, мозок практично обмірковує можливості його застосування.
Наш мозок цікавиться цим об’єктом: активно шукає щось новеньке та любить розгадувати загадки, звертаючись до памʼяті і готових схем. Якщо у людини вже є схема, що має відношення до інформації, яку ви хочете їй повідомити, переконайтеся, що саме ви маєте достатнє уявлення про цю схему. Бо вивчати та запам’ятовувати інформацію легше, якщо вона вкладається у вже існуючу схему.
Якщо ви хочете, щоб люди запам’ятали щось, повторюйте це знову і знову. Повторення дає свої плоди.
Наостанок додам корисні, на мою думку, джерела: стаття на Medium про візуальне сприйняття у дизайні та книга Сʼюзен Вайншенк про комп’ютерну графіку.
Artyom Novikov
Mark III
2 коментарі
Додати коментар Підписатись на коментаріВідписатись від коментарів