Хороший дизайн — це не зовнішній прояв. Хоча аспект візуальної привабливості залишається важливим. Його можна порівняти з айсбергом — усі бачать те, що на поверхні, себто оформлення. Але більша й набагато важливіша частина залишається невидимою. В основі дизайну — психологія людської природи, патерни сприйняття, завдяки яким візуал подобається користувачам та спонукає їх до певних дій.
Перше враження, або як «залишити» користувача на сайті
«У вас не буде другого шансу справити перше враження». Слова Коко Шанель валідні й для вебдизайнерів. Усього пів секунди потрібно, щоб користувач оцінив ваш сайт. За цю мить людина формує перше враження на основі дизайну. Одне із досліджень показало, що візуально привабливий сайт юзери однаково високо оцінюють як до користування ним, так і після. Естетика інтерфейсу відволікає від проблем зручності. У маркетингу цей феномен пояснюється «ефектом ореолу». Тобто користувачі шукають докази початкової гіпотези та ігнорують факти, які її не підтверджують. Якщо сайт викликав позитивне перше враження, то його недоліки можуть не сприйматися людською психікою.
Якщо на рівні підсвідомості людина прийняла рішення залишитися на сайті, не варто покладатися на ефект ореолу. Покажіть, що в центрі вашого дизайну — людина, тобто саме цей користувач. Навіть під час першого знайомства, їй має бути тут комфортно. Неначе вдома. Таке сприйняття забезпечує відчуття контролю над вашим ресурсом. Є кілька способів досягти цього:
- Забезпечте зручну навігацію. Обирайте прості терміни для деталізації меню. Користувачі мають розуміти, де та за яким запитом знайти необхідний контент.
- Давайте можливість повернутися назад та швидко залишити сайт. Зробіть ці кнопки видимими. Не потрібно навмисно збільшувати час перебування користувачів на сайті.
- Не ускладнюйте пошук інформації або виконання певної дії. Якщо є можливість зменшити шлях до цілі користувача, зробіть це.
Як допомогти користувачам виконати потрібну їм (вам) дію
Завдання вебдизайну — перетворити користувача в клієнта. Для цього сайт повинен мати чіткі шляхи взаємодії, які «проведуть за руку» до контактної форми чи кошику. Зелене світло виконати заклик до дії «увімкнуть»: швидкий доступ до кнопок замовлення, фільтрів, пошуку інформації; передбачуване розташування всіх елементів інтерфейсу;
клікабельні елементи в навігаційному ланцюжку.
Червоним світлом на шляху стають:
- Непродуманий user experience design. Якщо людина плутається в кнопках меню, не розуміє, як купити/оплатити товар тощо, вона залишить сайт.
- Застарілий дизайн. Рівень довіри падає, якщо зовнішній вид сайту нагадує тренди 2010 року.
- Немає адаптивного дизайну. Наприклад, сайтом незручно користуватися зі смартфона. Очікуйте збільшення відмов виконати заклик до дії та повторного користування ресурсом.
Сприйняття вебдизайну користувачами: психологічні принципи
Користувачі сприймають дизайн через свої «фільтри», пов’язані з накопиченим досвідом, знаннями, оточенням, упередженнями та навіть настроєм. Виокремити щось спільне в них допомагають принципи психології у вебдизайні.
Ментальні моделі. Вони засновані на переконаннях, а не фактах. Тобто це те, що користувачі знають (або думають, що знають). До того ж ці моделі змінюються в процесі життя. На це впливає спілкування, новий досвід, навчання. Під час створення інтерфейсу UX дизайнер керується своїми переконаннями, які, ймовірно, відрізняються від ментальних моделей користувачів. Подолати цю розбіжність можна, збираючи фідбек від своєї аудиторії (звісно, і враховуючи його).
Увага. Людина на екрані спочатку фіксує точки та об’єднує їх у лінії. Із ліній формує вектор уваги. Далі починає діяти принцип «діаграми Гутенберга» (названа на честь одного з винахідників друкарства). Точка входу — лівий верхній кут, з якого починається «сканування» очима. Потім погляд переходить у правий верхній кут. По діагоналі — вниз ліворуч. Точкою виходу стає нижній правий кут. Знаючи принцип фокусування уваги, дизайнер може розташовувати акценти в інтерфейсі так, щоб вони сформували правильний кістяк.
Пам’ять. Психологи виокремлюють сенсорну, короткочасну та довготривалу пам’ять. Не враховуючи ці особливості, ваш сайт навряд чи залишиться надовго в думках (і серцях) споживачів. Психологічний дизайн може допомогти «запам’ятати» себе: використовуйте повторення — нагадуйте споживачам про те, що хочете донести до них. Вибудовуйте асоціативні зв’язки, бо нова інформація запам’ятається краще, коли виникнуть асоціації із чимось знайомим.
Як розуміти користувачів?
Дизайнерам не потрібно вміти читати думки споживачів, щоб створити те, що їм сподобається. Достатньо розуміти патерни людського сприйняття, під які легко адаптувати design UX.
Проблема вибору. Так, людині важливо мати вибір. Але коли варіантів багато, вона може розгубитися та відкласти рішення, наприклад, зробити замовлення на «потім». Або піти на сайт конкурентів, де можна швидше виконати дію. Щоб не відлякати користувача, допоможіть йому орієнтуватись у вирі пропозицій. Наприклад, зберіть товари за найвигіднішими цінами, графічно виділіть це. Поділіть їх за категоріями, додайте фільтри.
Ефект знайомства. Чим частіше людина бачить когось/щось, тим привабливішим їй здається цей хтось/щось. Цей патерн людського сприйняття можна інтегрувати в психологію вебдизайну. Наприклад, ви впроваджуєте мобільний застосунок для якоїсь країни. Оберіть кольори національної символіки, щоб користувачі побачили в ньому щось знайоме і близьке.
Прокляття знань. У спілкуванні з іншими людина несвідомо припускає, що знань інших достатньо, щоб її зрозуміти, але це помилкове судження. Для дизайнера це сигнал, що треба дослідити свою аудиторію. Наприклад, візуальні елементи, зрозумілі розробникам, ймовірно, не будуть сприйнятті людьми зі сфери охорони довкілля.
Принцип подібності. Об’єкти з аналогічними візуальними характеристиками (колір, форма, розмір) сприймаються як взаємопов’язані. У мобільному дизайні чи web завдяки цьому патерну сприйняття показують групи товарів чи однакові за важливістю твердження/характеристики.
Принцип близькості. Розміщені близько один до одного об’єкти сприймаються як пов’язані між собою. Це правило діє без прив’язки до кольору, форм та розміру елементів. В UX design цей принцип може використовуватися, щоби показати пов’язаність елементів. Наприклад, заголовок і підзаголовок, текст і ілюстрація до нього, текст і кнопка call to action.
Патернів сприйняття набагато більше. Ці знання вже стали за важливістю в один ряд зі знаннями графічних редакторів й інструментами прототипування. Початківцям можна піти шляхом самостійного навчання або здобути освіту. Наприклад, обрати курс UX Design, в якому психологія сприйняття вивчається в контексті роботи дизайнера цифрових продуктів.
Як підвищити конверсію вебсайту
Споживач стає більш вимогливим. Він знає, що є багато сайтів, які пропонують одну й ту саму послугу/товар, надають інформацію на однакову тему. Рішення про те, залишитися чи закрити сайт, приймаються миттєво. У синергії вебдизайн і психологія можуть позитивно вплинути на бажання залишитися.
Візуальна ієрархія. Взаємодія користувача із сайтом має відбуватися без зайвих перешкод. Допоможіть йому легко орієнтуватися на вашому ресурсі: переконайтеся, що панель навігації легко знайти, використовуйте контрастні кольори, щоб відокремити різні думки, створіть липку навігаційну панель, щоб користувачі постійно мали доступ до меню.
Чіткі заклики до дії. Дайте одразу знати, що може зробити на вашому сайті споживач. Вкладіть цю думку приблизно в п’ять слів. Не пишіть загадками та не зловживайте метафорами. Такий заклик має бути одним із перших елементів дизайну, який бачать юзери.
Швидкість завантаження сторінки. Не змушуйте споживача чекати контент. Усі ваші сторінки мають завантажуватися менше ніж за три секунди. Краще «принести в жертву» якісь візуальні елементи, але зберегти швидкість завантаження.
Мінімалізм і простота. Менше — означає більше. Цей вислів «працює» в дизайні. Люди заходять на сайт не для того, щоби почитати. Їм потрібно швидко отримати реакцію на свій запит і вирішити його. Увесь контент має підпорядковуватись певній меті та не відволікати від неї. Людський мозок здатен «домальовувати». Мінімалістичні ілюстрації легко ним зчитуються. Навіть швидше за деталізовані фото.
Послідовність. Дотримуйтеся стилю дизайну. Якщо в споживача виникне відчуття, що сторінки сайту візуально між собою не поєднуються, з’явиться і відчуття недовіри. Будьте послідовними у виборі шрифтів, зображень, кольорів.
Психологія та дизайн: створення приємного користувацького досвіду
Психологія дизайну вебсайту має свої закони. Дотримання цих правил дозволить уникнути порушень взаєморозуміння з користувачами.
Закон № 1. Зробіть ваш сайт подібним до інших. Користувачі вже мають усталені уявлення, як усе має працювати. Такий закон Якоба. Люди шукають зрозумілі їм рішення в цифровому просторі. Цей принцип і є керівною силою UX дизайну.
Закон № 2. Візуально виділяйте те, чому потрібно надати більшої вагомості. Тобто застосовуйте ефект ізоляції, відомий як ефект фон Ресторф. Цей принцип дає користувачам конкретний заклик до дії — треба звернути увагу на виділений об’єкт.
Закон № 3. Не перевантажуйте дизайн. Закон Міллера говорить, що середньостатистична людина може утримувати в пам’яті 7 (+/– 2) елементів. Якщо їх більше, поділіть інформацію на групи й підгрупи. Наприклад, частину елементів можна виводити в меню, що випадає, або подавати у формі підказок.
Закон № 4. Обирайте простіше рішення, якщо є кілька варіантів. Бритва Оккама — принцип не використовувати більше речей ніж потрібно. Слово «бритва» — метафора. Тобто позбудьтесь зайвого в дизайні.
Закон № 5. Зосередьте увагу на ключових функціях. Принцип Парето стверджує, що 80 % наслідків походять від 20 % причин. У вебдизайні цей принцип трактується так: оптимізуйте головні функції, а не розпорошуйте свої ресурси на дрібниці.
Вплив кольорів на сприйняття дизайну: інсайти з психології
Психологія в дизайні припускає, що деякі відтінки мають символічне значення. Так, червоний заведено асоціювати з пристрастю і коханням, зелений — зі свіжістю і природою, жовтий — із сонячними променями, а білий — із чистотою. Дослідження, в якому взяли участь понад 4.5 тисячі респондентів із 30 країн світу виявило такі емоційні асоціації від кольорів:
- Червоний — кохання.
- Чорний — смуток.
- Білий — полегшення.
- Жовтий, помаранчевий — радість.
- Зелений, фіолетовий — задоволення.
Сприйняття кольорів є суб’єктивним. Усе залежить від особистого досвіду людини, її культури й національності. Наприклад, для європейців білий колір символізує життя, а на Сході має протилежне значення. Для американців зелений — це безпека, для французів — злочинність. Вплив кольору на настрій має і тимчасовий ефект. Не виключено, що спочатку певний відтінок заспокоює, потім — дратує.
Від тематичної спрямованості можуть змінюватися колірні асоціації. Так, червоний в інструктажі з техніки безпеки викликає відчуття загрози, а в галузі моди його сприймають як символ сміливості й сексуальності. Психологія вебдизайну передбачає, що колірні рішення будуть базуватися на усталених асоціаціях, щоб викликати потрібні емоції.
Вимоги до дизайну змінюються під впливом моди, трендів, обставин. Незмінним залишається природа людського сприйняття. Орієнтуючись першочергово на людину, дизайн сподобається своїй аудиторії.