Закони UX, котрі корисно знати кожному дизайнеру (1 частина)
Вступ
Не існує жорстких правил у створенні кращого користувацького досвіду. Проте, існують певні закони та принципи, що базуються на психології та поведінці людей, які допомагають дизайнерам створити інтерфейс, що є зручним та забезпечує якісний користувацький досвід.
У цій статті я розглянув 16 законів та пояснив їх на прикладах, використовуючи своє бачення та розуміння. Метою є поглиблене розуміння та використання цих законів у практичній роботі з дизайном.
Сподіваюся, що ця стаття буде цікавою та корисною. Бажаю приємного читання та вдосконалення ваших знань у сфері UI/UX дизайну 🧐
Частина 1
- Закон Якоба
- Закон Фіттса
- Закон Хіка
- Закон Близькості
- Ефект естетики
- Закон Прегнанца
- Закон подібності
- Закон Міллера
1. Закон Якоба
Користувачі проводять більшу частину свого часу на інших веб-сайтах, і вважають за краще, щоб ваш сайт працював так само, як інші сайти, які вони вже знають
Коли користувач відвідує вебсайт з певною ціллю, він проходить певний потік дій, що відображається в його розумінні та моделі мислення щодо взаємодії з сайтом.
Незнайомий та складний потік викликає додаткові зусилля, щоб пройти його, і може спричинити когнітивне перевантаження та відхід користувача.
Наприклад усі інтернет-магазини функціонують майже за однаковими принципами, щоб якщо користувач вже здійснював покупки десь раніше, він мав у своєму досвіді "шаблон" або стандартний підхід до процесу покупок.
Таким чином, коли він відвідує інший сайт, він вже має загальне розуміння того, як здійснити покупку та які кроки потрібно виконати.
У дизайні користувацького інтерфейсу елементи стараються максимально наблизитися до реальних об'єктів для поліпшення зрозумілості. Наприклад, елементи інтерфейсу, такі як перемикачі та чекбокси, моделюють фізичні об'єкти з реального світу. Це робиться з метою створення знайомого середовища для користувачів і сприяє більш легкій навігації та взаємодії з інтерфейсом.
Використання елементів дизайну, що нагадують реальні об'єкти, сприяє зменшенню бар'єрів для розуміння та використання веб-сайту. Такий підхід також забезпечує більш інтуїтивну взаємодію з інтерфейсом, оскільки користувачі вже мають знайомство та досвід з реальними об'єктами, що подібні до елементів дизайну інтерфейсу
Поради
- Використовуйте знайомі шаблони UX
Користувачі повинні зосередитися безпосередньо на продуктах, послугах, пропозиціях та іншому вмісті, а не на складних і творчих інноваціях в UX. - Зберігайте баланс
Сайти, перевантажені креативом і нестандартними елементами, спантеличують користувачів. Намагайтеся обмежити кількість незнайомих елементів. - Допоможіть користувачам
Дайте їм підказки, коли справа доходить до неочевидних шаблонів. - Відповідайте очікуванням
Користувач повинен відчувати повний контроль над вашим сайтом. Нехай очікування користувачів виправдаються, і вони довірятимуть сайту і, можливо, повернуться знову. - Не заперечуйте досвід користувачів
Пам'ятайте про минулий досвід користувачів, зосередьтеся на ньому і використовуйте його. Це краще, ніж створювати щось нове лише тому, що ви хочете відрізнятися.
2. Закон Фіттса
Закон Фіттса — це один з основних принципів UX-дизайну, який стосується того, як швидко користувачі можуть взаємодіяти з інтерфейсом. На відміну від порогу Доерті, який визначає швидкість реакції інтерфейсу, закон Фіттса — часу необхідний користувачам для розуміння інтерфейсу та виконання відповідних дій.
Якщо вебсайт погано спроєктований, це може суттєво уповільнити реакцію користувача, особливо через невеликі або погано розташовані елементи, такі як кнопки, які треба натиснути. Такі проблеми можуть збивати з пантелику користувачів і зробити їх досвід менш задоволеним.
Поради
- Зробіть інтерактивні елементи відповідного розміру
Кнопки мають бути достатньо великими, щоб користувачі їх легко бачили та натискали. - Розміщуйте елементи, які можна натискати, у доступних місцях
Кнопки слід розміщувати в логічних місцях і розташовувати так, щоб мінімізувати час пошуку користувача. Зручними є кути, тому, що рух мишкою до них максимально швидкий, сторони екрана, центр екрана.
Якщо дизайн робиться для мобільних пристроїв, варто не забувати про зони екрана і не розташовувати CTA в “червоних” зонах.
Використовуйте узгоджені шаблони проєктування
Узгоджені шаблони дизайну можуть допомогти користувачам швидко зрозуміти, як взаємодіяти з інтерфейсом, зменшуючи когнітивне навантаження.Використовуйте чітку та лаконічну мову
Інструкції та CTA мають бути легкими для розуміння та використовувати просту мову.Застосовуючи ці поради, Ви можете допомогти зменшити розчарування користувачів і підвищити загальну задоволеність інтерфейсом.
3. Закон Хіка
Час, необхідний для прийняття рішення, залежить від кількості можливостей вибору, доступних людині. Чим більше можливостей, тим більше часу нам потрібно
Таким чином, дуже важливо переконатися, що ваш інтерфейс не є надто складним або наповненим занадто великою кількістю опцій. Якщо необхідно, подумайте про розділення процесу на менші, менш складні частини.
Цей принцип особливо актуальний для вебсайтів електронної комерції, де для завершення замовлення часто потрібна кілька частин інформації, як-от адреса, спосіб оплати, реєстрація тощо.
Спрощуючи процес і зменшуючи кількість варіантів на кожному кроці, ви можете зробити роботу користувача плавнішою та ефективнішою.
Як ним користуватися
- Зменшити кількість варіантів
Коли час відповіді має вирішальне значення для збільшення часу прийняття рішення. Наприклад, це важливо для систем керування середовищами та меню. Пам’ятайте, що чим менше варіантів ви надаєте користувачеві, тим більша ймовірність, що він виконає дію. - Розбийте складні та тривалі процеси на менші кроки
Наприклад, ви можете розділити процес реєстрації користувача на кілька екранів. Це зробить інтерфейс більш зручним для користувача. - Зберігайте баланс між зменшенням складності та надмірним спрощенням
Розбиття вибору на низку дрібних фрагментів може змусити користувача піти, не досягнувши мети.
Є два правила, щоб маленькі кроки спрацювали: покажіть, скільки кроків у вас є, і спробуйте обмежити їх максимум 5 кроками.
Використовуйте підсвічування, щоб допомогти користувачам уникнути перевантаження та швидше зробити вибір
Ви можете виділити важливі для користувачів опції серед захаращеного інтерфейсу.Класифікуйте вибір для навігації користувачів на вебсайті
Якщо одне меню пропонує прямий доступ до кожного посилання, це може швидко перевантажити користувача.
Бувають ситуації, коли нескінченний вибір працює чудово. Наприклад, нескінченна прокрутка в Instagram або Tik Tok. При цьому в обох випадках дії настільки прості, що користувачі дійсно можуть повторювати їх багато разів.
З Netflix, наприклад, все інакше. Зменшення варіантів тут працює набагато краще: людям подобаються різні списки, як-от « Популярні» , «10 найкращих у вашій країні» , «Найкращі комедії» тощо. Такі списки допомагають користувачам прийняти складне рішення — як вибрати один фільм чи серіал серед тисяч.
4. Закон Близькості
Гештальт-закон близькості встановлює, що "об'єкти або форми, розташовані в безпосередній близькості один до одного, сприймаються як група".
Навіть якщо ці форми, розміри та об'єкти значно відрізняються, вони будуть сприйматися як єдність, якщо вони розташовані близько один до одного.
Цей закон пояснює, як наше сприйняття спрямоване на групування та організацію окремих об'єктів, що мають схожі характеристики. Він використовується в дизайні для створення візуальної структури, де наближеність елементів вказує на їх взаємозв'язок та приналежність до певної групи. Це допомагає полегшити сприйняття та розуміння інформації користувачами.
5. Ефект естетики
Естетичний та мінімалістичний дизайн викликає позитивні враження у користувачів і визнається як більш функціональний та зручний. Згідно з законом сприйняття, люди часто припускають, що привабливі продукти працюють краще за менш привабливі аналоги. Естетично привабливий дизайн може впливати на те, що користувачі не помічають дрібні недоліки в зручності використання.
Хоча ефект естетичної зручності може мати значний вплив на сприйняття користувачами інтерфейсу, дизайнери не повинні вводити в оману думку, що естетика може компенсувати основні проблеми зручності використання.
Наприклад, в електронній комерції, якщо користувачам важко знайти продукт або зробити покупку, ніякий візуальний дизайн не зможе компенсувати такі помилки зручності використання.
Таким чином, зручність використання та естетичність — це два комплементарні аспекти, які слід розглядати разом під час розробки інтерфейсу.
Інвестиції у візуальний дизайн можуть покращити зовнішній вигляд інтерфейсу, зробивши його вишуканим, професійним і привабливим. Однак розробники також повинні переконатися, що інтерфейс простий у використанні, ефективний і не містить помилок.
Зрештою, мета полягає в тому, щоб створити продукт, який не тільки добре виглядає, але й ефективно функціонує, забезпечуючи позитивний досвід користувача, який відповідає потребам і очікуванням користувачів.
6. Закон Прегнанца
Закон Прегнанца, відомий також як закон спрощення, стверджує, що люди сприймають складні об'єкти та речі шляхом спрощення їх до більш зрозумілих форм, що дозволяє нам легше розпізнавати та розуміти навколишній світ. У контексті сприйняття, ми маємо тенденцію розглядати об'єкти як єдність або як сукупність простих елементів. Це пояснює, чому наш розум та зорова система намагаються спростити все, що ми сприймаємо.
Закон Прегнанца відіграє важливу роль у дизайні та взаємодії з користувачем.
- Інформація та інтерфейси повинні бути організовані таким чином, щоб легко сприймалися та розумілися людьми, забезпечуючи їм зручну навігацію та ефективне використання.
- Використання простих та зрозумілих елементів та структур допомагає зменшити складність і покращує сприйняття інформації.
7. Закон подібності
Закон подібності, вказує на те, що люди мають тенденцію сприймати об'єкти зі схожим зовнішнім виглядом як пов'язані або належачи до однієї групи.
У контексті дизайну, використання схожих елементів може допомогти створити візуальну єдність та визначити зв'язки між різними елементами інтерфейсу. Наприклад, виокремлення посилань або навігаційних елементів за допомогою візуальних змін може покращити їх сприйняття та розпізнавання серед звичайного тексту.
Застосування закону подібності у дизайні допомагає забезпечити консистентність та логічність інтерфейсу. Це сприяє поліпшенню зручності використання та навігації для користувачів, створюючи візуальну структуру та організацію інформації.
Отже, рекомендується використовувати візуальну відмінність для виділення та групування важливих елементів, що сприяє зрозумінню та полегшує сприйняття інтерфейсу користувачами.
8. Закон Міллера
У нас є когнітивні здібності, які починають діяти щоразу, коли ми стикаємося з новим інтерфейсом. З цього моменту починається процес навчання, і наш мозок починає розуміти, як використовувати цей інтерфейс.
Крім того, у нас обмежена пам'ять. Тобто наша здатність зберігати нову інформацію обмежена.
У цьому плані, працюючи з законами UX, ми доходимо до закону Міллера.
Закон Міллера описує, що наша миттєва пам'ять обмежена, середньостатистична людина може зберігати у своїй робочій пам’яті лише 7 (±2) елементів
Як наслідок, для розробки інтерфейсу вкрай важливо розглянути способи уникнути перевантаження когнітивних можливостей і оперативної пам’яті користувача. Інакше користувач може почуватися збентеженим і це може негативно вплинути на досвід роботи.