Йон Яблонські — старший продакт-дизайнер у General Motors. Він багато пише про дизайн digital-продуктів і пояснює, як зробити його «етичним та людяним».
Основний хаб із його думками — проєкт Humane by Design, за який Яблонські отримав нагороду Awwwards 2019. Але він має ще один корисний ресурс — компактний і простий сайт Laws of UX. Там Яблонські збирає та ілюструє основні закони психології, яким підпорядковується UX-дизайн.
Коли Laws of UX лишень запустився, на ньому було 10 законів, і їх перепостили майже всі галузеві ЗМІ. Зараз законів 20. Ми їх зібрали, переклали і до кожного підібрали приклад.
1. Ефект «естетика у юзабіліті»
Чим естетичніший дизайн, тим скоріше він вважається зручним.
Зустрічають все-таки по одежі. Ефект «естетики в юзабіліті» помітили в 1995 році дослідники Масаакі Куросу та Каорі Кашимура з Дизайн-центру Хітачі.
Вони провели експеримент: показали 26 варіантів дизайну екрана банкомату 252 користувачам та попросили оцінити зручність та красу кожного. З'ясувалося: чим естетичніше виглядав інтерфейс, тим вище оцінювали його функціональність (навіть якщо вона була не особливо крута).
Це працює і тепер. Сайт доволі популярного сервісу Tumblr симпатичний, але не дуже зручний. Наприклад, вибір інтересів у профілі виглядає хаотично. Розкладка гарна, але кнопка вибору темна і в самому кутку. А верхнє меню немов не провантажилося:
2. Поріг Доерті
Чим швидше реагує система, тим легше утримати увагу користувача.
Аби не здавалося, що система гальмує, вона повинна давати зворотний зв'язок менше ніж за 0,4 секунди.
До 1982 року стандарт був 2 секунди — вважалося, що протягом цього часу користувач обмірковує завдання. Але потім дослідники з IBM Research Уолтер Доерті та Арвінд Тадані з'ясували, що за 2 секунди людина швидше перейде на щось нове. Довелося будувати потужніші сервери, а інтерфейси робити зручнішими.
Ба більше: що швидший відгук системи, то швидше відповідає їй користувач. Наприклад, при відповіді системи 0,3 секунди людина реагує за 9 секунд. Коли система гальмує та відповідає за 3 секунди, людина думає 16 секунд.
3. Закон Фіттса
Чим ближчі і більші елементи, тим швидше їх вибирають.
За цей закон дякуємо психологові Полу Фіттсу, який у 1954 році досліджував рухову систему людини. Він визначив, що час досягнення цілі залежить не лише від відстані, на якій вона знаходиться, а й від її розміру.
Тобто чим далі і чим менша ціль, тим вищі шанси, що потрапляння в неї буде довгим і складним. Цей закон є особливо важливим при проєктуванні кнопок в інтерфейсі. Як мінімум, на них має бути зручно натискати, як максимум — швидко знаходити.
Наприклад, на сайті Patreon клікнути можна не лише на текст у меню, але й по всій ширині блоку:
4. Закон Хіка
Чим менше варіантів, тим швидше відбувається вибір.
Закон вивели психологи Вільям Хік та Рей Хіман у 1952 році. Коли варіантів багато, вибір ускладнюється — ти витрачаєш багато часу на «подумати». Якщо скоротити кількість варіантів неможливо, розбивай процес на декілька простих кроків. Закон Хіка використовують чимало сервісів підбору послуг або товарів.
5. Закон Якоба
Чим більше сайт схожий на інші, тим швидше сподобається користувачеві.
Користувачі проводять багато часу на інших сайтах. Тому очікують, що решта працюватиме за аналогічними принципами.
Принцип подібності вивів американський UX-фахівець Якоб Нільсен, а Яблонські пояснює, як ним користуватися: не навантажуй користувача новим і використовуй знайомі патерни.
Подивіться на сайти топових виробників ноутбуків: Asus, Acer і HP. Вони практично ідентичні:
6. Закон спільного простору
Елементи всередині загального кордону сприймаються як група.
Цей закон — із гештальтпсихології. Вчені цього напряму з'ясували, що мозок завжди прагне поєднувати об'єкти в групи. І тому він орієнтується на п'ять принципів: близькість, подібність, безперервність, замкнутість і зв'язність.
Найпростіший спосіб використовувати принцип групування в дизайні — обвести потрібні елементи рамкою, відокремивши їх від решти.
7. Закон прегнантності
Складний образ інтерпретується найбільш простою формою.
У 1910 році гештальтпсихолог Макс Вертхаймер зауважив, що миготливу серію вогнів ми сприймаємо як безперервний рухомий рядок. Усе тому, що мозок намагається не переповнюватися зайвою інформацією та спрощує складне. Це назвали прегнантністю (нім. «хороша, повна форма»).
Тому не перетворюй зображення та інтерфейси на загадку для користувача — він все одно спростить його до чогось свого. Краще твори те, що не потрібно довго інтерпретувати. Найкращий приклад — базові іконки. Наприклад, як на лівій панелі сайту Pocket:
8. Закон близькості
Близькі один до одного елементи сприймаються як група.
Цей закон є логічним продовженням закону загального простору. Якщо не хочеш обводити елементи, просто постав їх поряд. Або використовуй обидва закони: в межах кордону згрупуй підкатегорії. Принцип добре допомагає помітити взаємозв'язок із першого погляду.
За законом близькості будується будь-який інтерфейс. На вебсторінці та екрані за допомогою різних фонів легко виділити блоки. Ось як робить Apple:
9. Закон подібності
Елементи однієї форми сприймаються як група, навіть якщо вони розділені.
Продовжуємо двіж із гештальтом. За законом подібності, якщо об'єкти схожі за формою, мозок сприймає їх як взаємопов'язані. Цей прийом краще працює для виділення навігаційних елементів, аніж текстових блоків (як в ілюстрації вище).
Яскравий приклад — інстаграм. У рядку актуальних сторінок іконки йдуть в одному стилі — круглі та з підписами в одному форматі.
10. Закон зв'язності
Чим більше схожі елементи, тим сильніше вони сприймаються зв'язаними.
Закон зв'язності інтерпретує ще один принцип, за яким об'єднуються елементи: візуально схожі компоненти сприймаються як група. Використовуйте це, щоб пов'язувати схожі функції. Задайте елементам один колір, додавайте однакові лінії, рамки та інші форми.
Цей принцип круто працює для інтернет-магазинів, сервісів перегляду фільмів та інших ресурсів, де інформації дуже багато.
Наприклад, на головній сторінці магазину Uniqlo товари показані зазвичай на червоному або біло-сірому фоні, а пози моделей часто однакові:
11. Закон Міллера
Користувач запам'ятовує 7 (+-2) елементів за один раз.
У 1956 році американський психолог Джордж Міллер з'ясував, що людський мозок у середньому запам'ятовує 7 (+-2) об'єктів. Тому у груп в інтерфейсі має бути максимум 9 елементів. А краще 5 — щоб точно ніхто не заблукав.
Довгі списки втомлять, навіть якщо це корисне меню. Якщо треба, розбивай категорії.
12. Бритва Оккама
З однакових гіпотез вибирай ту, в якій менше припущень.
Бритва Оккама — це підхід, який назвали на ім'я англійського філософа Вільяма Оккамського. Суть у тому, щоб додавати до системи лише необхідне.
Коли дизайн готовий, проаналізуй всі елементи та видали ті, без яких можна обійтися. Наприклад, признач функції декількох кнопок одному випадному списку.
Принцип бритви Оккама часто використовують при апгрейдах інтерфейсів.
13. Принцип Парето
20% дій забезпечують 80% результату.
Принцип 80/20 вивів італійський економіст Вільфредо Парето, зауваживши, що 80% землі належить 20% населення. Потім цей принцип сформував цілий спосіб мислення.
У UX працюють кілька варіантів цього закону:
- — 80% уваги приділяється 20% інтерфейсу
- — 20% функцій відповідають за 80% дій
Приклад реалізації принципу Парето у дизайні є на сайті Amazon. У списку з країнами зверху розміщено 20%, які вибирають найчастіше:
14. Закон Паркінсона
Виконання будь-якого завдання можна розтягнути на весь час.
За законом Паркінсона, скільки б часу не дали на завдання, стільки його й виконуватимуть. Спочатку це був не закон, а жарт з есе 1955 року, але в кожному жарті є лише частка жарту.
Тепер правило застосовують як до дедлайнів, так і в UX: дають користувачам обмежений час для виконання конкретної задачі. Наприклад, на деяких сайтах на цільову дію дається 15 хвилин, і відразу починається зворотний відлік часу.
15. Пікове правило
Користувачі звертають основну увагу на найяскравіший момент і кінець.
У 1993 році команда дослідників роботи пам'яті провела серію експериментів із зануренням у холодну воду і з'ясувала: люди оцінюють досвід того, що відбувається в точці найяскравіших переживань і наприкінці процесу.
За результатом цього експерименту Яблонські зробив відразу три висновки:
Приділяй увагу піку інтересу і закінченню шляху користувача в інтерфейсі.
Визнач моменти, коли продукт найбільш корисний, цінний та цікавий, та покращ їх за допомогою дизайну.
Пам'ятай, що користувачі запам'ятовують негативний досвід краще за позитивний.
На сайті планувальника завдань Asana закриті таски відзначають симпатичною анімацією:
16. Закон Постела
Стався лояльно до користувачів і критично до себе.
Будь-який цифровий продукт повинен відповідати всім вимогам користувача, і завдання дизайнера передбачити їх та реалізувати. У людини має бути можливість здійснювати всередині продукту стільки дій, скільки їй хочеться.
Продумуй переходи, розставляй підказки — роби все для зручності, навіть якщо це важко і довго.
Закон сформулював Джон Постел — один із перших інженерів інтернет-сфери — насамперед для комп'ютерних мереж та протоколів. У дизайні виконувати його закон легко навіть у дрібницях. Наприклад, з будь-якої сторінки YouTube повернутись на головну можна через меню.
17. Ефект порядкового номера
Користувачі краще запам'ятовують перші та останні елементи зі списку.
Німецький психолог Герман Еббінгауз з'ясував, що з послідовності користувачі найкраще запам'ятовують перші та останні елементи, а середні здебільшого упускають.
Тому став ключові дії на початок і в кінець навігації.
Цього принципу дотримуються, наприклад, у презентаціях — акцентують увагу на перших та останніх слайдах. І часто використовують у меню застосунків та сайтів. Наприклад, на верхній панелі сайту Dribbble найважливіші — кнопка логотипу та реєстрація з пошуком, вони крайні:
18. Закон Теслера
Будь-яка система має обсяг складності, який не можна скорочувати.
Ларрі Теслер — інформатик, який вивчає взаємодію комп'ютера та людини — стверджував, що систему потрібно максимально спрощувати. Але його колега Брюс Тогнацціні, проєктувальник першого інтерфейсу Apple, з'ясував: надто просту систему користувач, навпаки, намагається ускладнити.
Тобто інтерфейс потрібно робити максимально простим, але у користувача має бути можливість ускладнити його під себе.
Приклад — будь-який сайт бронювання житла. Якщо прибрати з критеріїв пошуку місто, дату чи кількість осіб, він перестане бути корисним. Тому потрібно передбачити для користувачів можливість додавати свої характеристики пошуку.
Так, популярний сервіс бронювання Booking дозволяє «ускладнювати» пошук кастомними умовами — від місця призначення до мети поїздки або кількості номерів.
19. Ефект фон Ресторфа
Із багатьох схожих елементів помітять той, що відрізняється.
Не такі, як усі, привертають увагу — що й підтвердила 1933 року психіатриня Гедвіг фон Ресторф. Вона зауважила, що із групи однакових елементів краще запам'ятовуються ті, які ізольовані чи виглядають інакше.
Якщо хочеш на чомусь акцентувати — став ключові об'єкти інтерфейсу подалі від інших або оформлюй їх по-іншому. За допомогою цього принципу компанії часто виділяють вигідні тарифні плани.
20. Ефект Зейгарнік
Користувачі запам'ятовують те, що недоробили.
Радянська психологиня Блюма Зейгарнік, яка вивчала порушення пам'яті, у 1920-х з'ясовувала, як ми запам'ятовуємо завершені та незавершені завдання. Вона визначила, що другі ми пам'ятаємо краще.
Цей ефект є важливим і для UX-інтерфейсів. Тому в дизайні роби нагадування для незакінчених завдань та індикатори виконання складних процесів.
Наприклад, на сайті пошуку роботи такий прийом часто використовують, щоб показати ефективність профілю. Система нагадує, на скільки відсотків заповнений профіль і рекомендує, що ще додати.