Закони/ефекти/принципи, які потрібно знати дизайнеру. Це концентрат зі спостережень за поведінкою користувачів - бери на озброєння і використовуй у своїх проєктах. Стаття велика, тому сьогодні перша частина, а друга буде опублікована окремо.

Ми не тільки обговоримо різні закони і принципи, а й особливості їх застосування на практиці при створенні дизайну для твоїх проектів. Без довгих передмов, погнали.

1. Закон Міллера

У робочій пам'яті людини може зберігатися 7 елементів. Плюс/мінус ще два. 

Закон Міллера було сформульовано при дослідженнях людської пам'яті та психології на початку 1950-х років. Цей закон передбачає, що кількість інформації, яку людина здатна утримувати у своїй короткочасній пам'яті (робочій пам'яті), обмежена. Він стверджує, що людина в середньому здатна запам'ятовувати приблизно 7 ± 2 елементи інформації (наприклад, цифри, слова або об'єкти) в момент. Якщо елементів більше, людина починає втрачати інформацію або перевантажуватися.

У контексті UX/UI-дизайну закон Міллера має важливе значення, оскільки він підкреслює обмеження людської здатності опрацювання інформації. Ось кілька способів, як застосовувати цей закон:

  • Обмеження інформації: під час проектування веб-сайтів, мобільних застосунків та інших інтерфейсів намагайся обмежити кількість інформації на одній сторінці або екрані. Зосередься на ключових елементах і функціях, щоб уникнути перевантаження користувача інформацією.
  • Групування: групуй пов'язані елементи і функції в логічні блоки або розділи. Це допомагає користувачам легше орієнтуватися й утримувати інформацію в пам'яті.
  • Послідовність: розбий складні завдання на послідовні кроки або етапи. Поступове подання інформації може зробити процес взаємодії з інтерфейсом більш інтуїтивним і керованим.
  • Не грузи - стеж, щоб пунктів/іконок/плашок було до семи, якщо ти хочеш, щоб інформацію запам'ятали. І роби більше елементів, якщо в тебе зворотна мета - наприклад, написати нічого, одна вода, але потрібно створити враження, що у фірми багато переваг. У цьому випадку варто "завантажити" читача купою фактів, які він не буде запам'ятовувати.


2. Закон Якоба (закон знайомості)

Люди віддають перевагу знайомим конструкціям і шаблонам.

Закон Якоба, також відомий як "закон знайомості", пояснює, чому різні застосунки часто мають однаковий дизайн. Користувачі віддають перевагу інтерфейсам, які їм знайомі і відповідають їхнім раніше накопиченим знанням і досвіду. Цей закон передбачає, що користувачі почуваються комфортніше і впевненіше під час взаємодії з інтерфейсом, який слідує загальноприйнятим очікуванням.

Застосування закону Якоба в UX/UI-дизайні включає такі аспекти:

  • Дотримання стандартів: використовуй стандартні елементи інтерфейсу та дизайн-рішення, які користувачі очікують бачити. Наприклад, кнопки "OK" і "Скасування" або іконки для загальновідомих функцій.
  • Інтуїтивність: роби дизайн інтерфейсу так, щоб він був інтуїтивним і зрозумілим. Користувачі повинні легко знаходити і використовувати функції, не заглядаючи в інструкції. Це стосується стандартних видів меню, кошика, скролінгу та інших дій, які ми робимо не замислюючись.
  • Іконографіка: використовуй впізнавані іконки і символи, які відповідають загальноприйнятим угодам. Наприклад, значок будинку для переходу на головну сторінку або дискети для збереження.
  • Зрозумілі метафори: застосовуй метафори з реального світу, щоб допомогти користувачам розуміти функції інтерфейсу. Наприклад, кошик для додавання товарів в інтернет-магазині. Це називається скевоморфізм і ми писали про це докладно в статті про ментальні моделі, там ще багато цікавого, прочитай.
  • Вивчення конкурентів: переглянь популярні інтерфейси в конкретній галузі та врахуй, що користувачі звикли бачити. Необґрунтовані відхилення від очікувань можуть викликати невдоволення. Але тут є місце поліпшенням - якщо в конкурентів незручні незграбні застосунки, то можна зробити свій проєкт інакше, краще. Але без винаходу велосипеда, тим не менш. Наприклад, твоя ніша - підбір фільтрів для води. І конкуренти такого не роблять. Візьми за основу хороший приклад підбору інших побутових приладів, які вже звичні для користувача.


Тестування в цьому моменті буде дуже доречним. Тільки реальне застосування допоможе зрозуміти, наскільки твій інтерфейс зручний і простий у використанні.

3. Закон Фіттса

Що ближча і доступніша мета - то швидше її виконає користувач.

У контексті веб-дизайну застосування закону Фіттса означає, що інтерфейс потрібно розробити так, щоб цілі (кнопки, посилання та інші інтерактивні елементи) були досить великими і легко доступними, щоб забезпечити легкість і швидкість виконання завдань. Конкретніше, ось як це має бути:

  • Розмір цілей: роби інтерактивні елементи (кнопки, посилання, іконки) досить великими, щоб користувачі могли легко натискати на них навіть на пристроях із маленькими екранами. Зазвичай рекомендується, щоб мінімальний розмір таких елементів становив 7-10 мм у діаметрі.
  • Розташування елементів: розміщуй інтерактивні елементи в зручних і доступних місцях, щоб користувачі могли швидко і легко отримати до них доступ. Елементи, які користувачі часто використовують, мають бути ближче до зон активного використання, як, наприклад, краї екрана. 
  • Візуальні підказки: використовуй візуальні індикатори, як-от колір, текст і анімація, щоб підкреслити інтерактивні елементи і зробити їх помітнішими.
  • Мінімізація помилок: збільш відстань між інтерактивними елементами, щоб зменшити ймовірність випадкових натискань, особливо на сенсорних пристроях.


Застосування закону Фіттса допомагає збільшити зручність використання і знизити ймовірність помилок під час взаємодії користувачів з інтерфейсом. Дотримуватися цього принципу особливо важливо на сенсорних пристроях, таких як смартфони та планшети, де розмір і доступність інтерактивних елементів відіграють критичну роль у досвіді користувачів. 

Це працює і навпаки. Ну ти розумієш, хрестик закриття реклами не просто так роблять мікроскопічним, а щоб користувач не влучив по ньому і випадково перейшов за рекламним посиланням.

4. Закон Хіка

Що більше варіантів вибору - то більше часу необхідно для ухвалення рішення.

Закон Хіка говорить нам про те, що якщо ти хочеш скоротити термін ухвалення рішення користувача, то потрібно мінімізувати кількість варіантів, з яких користувачеві доводиться вибирати. 

Задоволеність користувача зростає зі збільшенням складності та глибини взаємодії аж до певного моменту, після чого вона починає знижуватися. Тобто, згідно з цим законом, користувацька задоволеність досягає максимуму, коли інтерфейс надає достатню кількість функціональності та можливостей, але не перевантажує юзера надлишковими деталями або складністю.

У контексті UX/UI-дизайну застосування закону Хіка означає таке:

  • Помірна складність: дизайн інтерфейсу має бути достатньо складним, щоб надавати корисні функції та можливості, але не настільки складним, щоб зробити взаємодію заплутаною і незрозумілою. Користувачі повинні легко знаходити і використовувати необхідні функції.
  • Інтуїтивність: дизайн має бути інтуїтивним, щоб користувачі могли швидко освоїти інтерфейс і почати використовувати його без зайвих зусиль.
  • Прогресивне розкриття функціональності: надавай базовий набір функцій і поступово розкривай більш складні функції в міру просування користувача всередині додатка або на сайті. Це дає змогу новим користувачам почати з мінімуму і заглиблюватися в міру необхідності.
  • Фокус на завданнях користувача: функціональність і дизайн повинні бути побудовані на потребах і завданнях користувачів. Надай їм доступ до тих функцій, які вони найчастіше використовують, уникай надлишкової інформації або функціональності.


База закону Хіка - наявність на сторінці тільки одного або максимум двох варіантів СТА. Якщо пропозицій багато, то юзер починає обирати між ними, думати і сумніватися. Не змушуй відвідувача напружуватися зайвий раз. Якщо тобі потрібно привести його до цільової дії, то вона має бути чітко єдиним очевидним вибором.

5. Ефект Зейгарник

Люди краще запам'ятовують незавершені завдання, ніж завершені.

Блума Зейгарник вперше описала цей ефект у своїй докторській дисертації 1927 року. Цей ефект вплинув на психологію і пізніше на галузі, такі як маркетинг і UX/UI-дизайн. Розсилка на імейл з повідомленням про товари в кошику і незавершене замовлення - це теж застосування ефекту.

Якщо два завдання завершені, а одне - ні, ти краще запам'ятаєш те, що не завершене. Люди часто відчувають тиск на завершення незавершених справ. 

Як ефект Зейгарник застосовується в контексті UX/UI-дизайну?

  • Просування користувача: створюй інтерфейси та застосунки так, щоб вони підтримували користувача в завершенні завдань. Наприклад, якщо користувач почав процес оформлення замовлення, але не завершив його, надай йому можливість продовжити з того ж моменту, де він зупинився, щоб знизити відчуття незавершеності.
  • Повідомлення і нагадування: використовуй повідомлення і нагадування, щоб допомогти користувачам повернутися до незавершених завдань або дій. Це може включати в себе нагадування про незавершені реєстрації або знижку, яку можна отримати тільки зараз.
  • Показ прогресу: надай користувачам інформацію про прогрес виконання завдання. Наприклад, впровадь індикатори виконання, кроки або відсотки, щоб користувачі могли бачити, наскільки близькі вони до завершення завдання. Це маст-хев у квізах і покрокових формах.
  • Спрощений процес завершення: прагни зробити завершення завдання або дії якомога простішим та інтуїтивнішим, щоб користувачі могли легко завершити їх. Уникай зайвої складності та необхідності заповнювати багато полів.


Свідоме використання ефекту Зейгарник в UX/UI-дизайні може допомогти поліпшити задоволеність користувачів і збільшити ймовірність завершення завдання або дії. Це працює також як гачок, на який ловляться тривожні юзери, адже їм конче треба закрити гештальт.

6. Принцип KISS: "Keep It Short and Simple"

Дизайн має бути простим та інтуїтивно зрозумілим, щоб знизити когнітивне навантаження.

Принцип KISS (ще одна версія розшифровки: "Keep It Simple, Stupid") у контексті UX/UI-дизайну передбачає, що інтерфейс має бути максимально простим і зрозумілим для користувачів. Цей принцип закликає уникати зайвої складності та спрощувати процеси й елементи інтерфейсу. Що потрібно робити, щоб дотримуватися цього принципу у своїх проєктах:

  • Спрощення дизайну: уникай надлишкових елементів, декорацій і складних графічних елементів. Простий і мінімалістичний дизайн зазвичай більш привабливий та інтуїтивний для користувачів.
  • Ясність і навігація: використовуй легко впізнавані та інтуїтивні іконки, метафори і маршрути, щоб користувачі могли легко переміщатися сайтом або додатком.
  • Зменшення шуму: не ліпи зайвих повідомлень, банерів і реклами, які можуть відволікати користувачів від основних завдань. Зосередь увагу на наданні інформації, яка дійсно важлива для користувача.
  • Чіткі заклики до дії (CTA): написи на кнопках мають бути чіткими та легко впізнаваними. Користувачі мають миттєво розуміти, які дії можуть виконати.


Спрощення інтерфейсу допомагає зменшити помилки користувачів, збільшити швидкість виконання завдань і, відповідно, підвищити конверсії, що і є найчастіше основною метою створення продукту.


Далі буде...

Нову порцію законів і принципів читай у наступній статті, буде ще багато цікавого. Або не чекай, одразу йди вчитися - у програмі онлайн-курсу "UX/UI легенда" всі ці тонкощі розбирати ти будеш на практиці! Подай заявку зараз, щоб потрапити в найближчий потік.