Часто люди думають, що веб-дизайн – це творча робота зі створення красивого сайту. Однак, не все так просто й однієї творчості та фантазії тут замало. Щоб отримати дійсно хороший результат, необхідно розуміти, як користувач думатиме, сприйматиме і діятиме під час користувальницького шляху.
UX-дизайн (UX – User Experience, досвід користувача) – це процес, за допомогою якого визначається, який досвід отримає користувач, використовуючи продукт. UX дизайнери так проєктують свої продукти, щоб вони були корисні, прості та приємні у використанні.
Дослідження користувачів та розуміння основних правил дизайну – те, без чого не обійдеться жоден UX дизайнер. Для кращого аналізу аудиторії фахівці часто вдаються до широко відомих психологічних трюків та законів.
Ми розглянемо 7 законів UX-дизайну, яких дотримуються великі компанії. Ми також використовуємо їх у своїй роботі.
Закон Якоба
Якоб Нільсон — фахівець із юзабілі та керівник компанії Nielsen Norman Group, заснована спільно з Дональдом Норманом (колишнім віцепрезидентом з досліджень в Apple Computer).
Закон звучить так:
Користувачі проводять більшу частину свого часу в інших програмах. Це означає, що користувачі воліють, щоб ваша програма працювала, так само як інші, які вони вже знають.
Тобто користувачі вже настільки звикли до деяких елементів на сайті, що їм уже складно сприймати їх по-новому. Наприклад, люди завжди знають, де шукати кошик чи де знаходиться пошуковий рядок.
Існує єдина система, за якою користувач намагається зчитувати сайт автоматично: зайшовши на сторінку, він швидко знайде навігаційне меню, перейде по вкладці, знайде потрібний товар та оформить замовлення.
Тому дизайнерам необхідно використати традиційні шаблони. Структура й розташування спільних елементів, навігація сторінками – для всіх цих складових підійдуть звичні зразки. Таким чином, користувачам не доведеться розбиратися з новою моделлю вашого сайту.
Наприклад, кошик завжди знаходиться у верхньому правому кутку.
Закон Міллера
Джордж А. Міллер – американський психолог, один з основоположників когнітивної психології.
Закон звучить так:
Середньостатистична людина може утримати у своїй короткочасній пам’яті лише 7±2 елементів. Тому люди можуть запам’ятати близько семи елементів інформації за один раз. В іншому випадку мозок буде перевантажений.
Щоб уникнути навантаження на користувача, дизайнери поділяють елементи інформації на групи та підгрупи для кращого сприйняття та запам’ятовування. Наприклад, спрощують меню на сайті, виводячи частину розділів у меню, що випадає. Або роблять підказки у формі для замовлення, щоб мінімізувати помилки користувача.
Також дизайнери часто упорядковують поля для введення даних картки, розділяючи 16-значні цифри, а також поля місяць/рік терміну дії картки.
Закон Фіттса
Пол Фіттс – психолог, досліджував рухову систему людини. Він показав, що час, необхідний для переміщення до мети, залежить від відстані до неї, але обернено пропорційно її розміру.
Закон звучить так:
Час для досягнення мети визначається відстанню до мети та її масштабом. Швидкі рухи + малі цілі призводять до більшої кількості помилок.
Цей закон допомагає дизайнерам, маркетологам та керівникам бізнесу зрозуміти: щоб користувач оформив замовлення на сайті, він повинен легко знайти маніпулятор, тобто кнопку. Часто дизайнери, користуючись цим законом, збільшують область натискання меню, щоб мінімізувати можливість промаху користувача.
Тому, якщо ви хочете, щоб ваші ключові елементи можна було легко вибрати, зробіть їх більшими та розташуйте ближче до користувача.
Наприклад, на сайті Rozetka можна натиснути не тільки по тексту в меню, а й по всій ширині блоку.
Закон Хіка
Закон Хіка (або закон Хіка-Хаймана) названий на честь британської та американської команди психологів Вільяма Едмунда Хіка та Рея Хаймана. У 1952 році ця пара приступила до вивчення взаємозв’язку між кількістю наявних стимулів та часом реакції людини на будь-який даний стимул. Як і слід очікувати, чим більше стимулів для вибору, тим більше часу потрібно користувачеві, щоб ухвалити рішення про те, з ким взаємодіяти.
Закон звучить так:
Час, необхідне для прийняття рішення, збільшується зі збільшенням кількості та складності вибору.
Ви могли спостерігати таке явище, коли в магазині хочете купити каву чи макарони та не можете вибрати. Здається, що всі однакові. Також відбувається при виборі фільму: пошук відповідного займає набагато більше часу, ніж його перегляд.
У веб-дизайні наочний приклад – це вибір міста доставки в інтернет-магазині. У першому варіанті дизайнер додав великі літери по алфавіту до стовпців, щоб користувач міг швидше знайти потрібне місто. Але це все одно не дуже зручно. У другому прикладі дизайнер показує 10 найпопулярніших міст, а решту можна знайти через пошуковий рядок. Набагато зручніше.
Рекомендації дизайнерам при використанні закону Хіка:
- Розділіть довгі процеси на невеликі етапи. Кожен етап для користувачів має мати чітку мету.
- Класифікуйте варіанти вибору для легшого пошуку та розпізнавання.
- За потреби поступово надавайте додаткову інформацію.
Закон «Бритва Оккама»
Закон «Бритва Оккама» отримав назву від імені англійського ченця-францисканця, філософа-номіналіста Вільяма Оккама.
Закон звучить так:
Слід уникати створення нових понять, термінів, визначень, сутностей, якщо без них можна обійтися. Найпростіші пояснення – найкращі.
Цей закон набув великої популярності та потрапив у сучасні тренди. Все більше й більше великих компаній починають відсікати, прибирати зайве зі своїх логотипів та фірмових стилів, максимально скорочують і наголошують на важливому в їхньому бренді. Логотип бренду має розповісти про компанію та запам’ятатися, передати суть. Бренди почали масово відмовлятися від засічок у шрифтовому написанні, вибирати плоску графіку, лаконічні кольори, з якими не виникає проблем під час друку. Так вони відсікають зайве, залишаючи лише суть, яку можна простіше та якісніше донести до споживача.
Дія цього закону у вебдизайн
Якщо від елемента можна відмовитися без втрати змісту, його необхідно прибрати. Кожен елемент на сайті повинен мати своє значення та бути обґрунтованим. Після того як ви намалювали дизайн, варто його переглянути та поставити собі запитання: «Навіщо тут знаходитись цей елемент? А що якщо його прибрати?
Закон близькості
Принципи гештальт-психології були відкриті у першій половині 20-го століття дослідниками, які намагалися дати раду тому, як візуально сприймають світ і як вирішують, чи відносяться елементи до однієї групи. Ці принципи включали наступне: близькість, подібність і завершеність.
Закон звучить так:
Елементи, розташовані близько один до одного, швидше за все, сприйматимуться як частини однієї й тієї ж групи, що має схожі функціональні можливості та характеристики.
Закон близькості є найважливішим із принципів угруповання і може отримати гору над конкуруючими візуальними принципами, такими як подібність, кольори або форми.
Де ми можемо побачити цей закон у вебдизайн?
Практично у будь-якому текстовому блоці: пропозиції групуються в абзаци, розділені між собою пробілами згори та знизу. Крім того, добре продумані прогалини до і після заголовків сигналізують про те, з якими параграфами ці заголовки пов’язані – текст з розділу зазвичай розташовується ближче до заголовка, ніж текст з попереднього розділу.
Завдяки такій структурі користувачі можуть сканувати сторінки досить швидко. Це підвищує зручність використання сайту або програми, допомагаючи їм швидко знаходити та фокусуватися тільки на тих елементах інтерфейсу, які безпосередньо пов’язані з поточним завданням.
Ефект Ресторофф
У 1933 році німецька лікарка, психологиня й володарка докторського ступеня Гедвіг Фон Ресторфф провела серію експериментів в університеті Берліна, в ході яких виявила закономірність: людина краще запам’ятовує об’єкт, який виділяється з однорідних об’єктів. Цю особливість людської пам’яті назвали “ефектом ізоляції” більше відомим як ефект Ресторфф.
Звучить так:
Серед ряду схожих елементів простіше запам’ятати той, який виділяється найбільше.
У дизайні, наприклад, об’єкт можна виділяти кольором, розміром, розташуванням, рамкою, тінню та іншими прийомами візуального виділення. Це дозволить зробити його не тільки помітнішим, а й більш запам’ятовуваним.
Один із прикладів виділення у дизайні – це застосування так званих мотиваційних тригерів або ай-стоперів. Ось як це реалізовано на сайті інтернет-магазину дитячих товарів. Тут один із товарів у каталозі виділений ай-стоппером із зазначенням знижки -20%, сам кружечок у червоному помітному кольорі та накладений поверх зображення, таке виділення складно не помітити.
В результаті користувачі з більшою ймовірністю помітять і запам’ятають такий товар у каталозі у порівнянні з іншими товарами розміщеними поруч.
Зворотний бік медалі
Застосовуючи ефект Ресторфф важливо розуміти, що обсяг робочої пам’яті людини обмежений і що більше уваги приділяється одному об’єкту – тим менше залишається для інших.
Якщо важливі кілька об’єктів одночасно в одному місці, то можливо не варто візуально виділяти один з них, щоб не забирати увагу в інших. Або навпаки, виділити все, але однаково і не надто помітно.
Висновок
Дизайн інтерфейсу користувача – це відповідальне завдання. Перелічені закони допомагають нам створювати більш ефективні та успішні проєкти та захищати їх перед клієнтами.