10 евристик юзабіліті для дизайну інтерфейсу користувача

10 загальних принципів проектування взаємодії Якоба Нільсена. Їх називають «евристичними», тому що це широкі емпіричні правила, а не конкретні рекомендації щодо зручності використання.

1. Видимість стану системи

Дизайн повинен завжди інформувати користувачів про те, що відбувається, шляхом відповідного зворотного зв’язку протягом розумного періоду часу.,0

Коли користувачі знають поточний стан системи, вони дізнаються результат своїх попередніх взаємодій і визначають наступні кроки. Передбачувана взаємодія створює довіру як до продукту, так і до бренду.

Приклад евристики юзабіліті №1:

Індикатори виконання переконують користувача в тому, що більш тривале очікування – це нормально, і система все ще працює

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

2. Відповідність між системою та реальним світом

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

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

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

Приклад евристики юзабіліті №2:

Елементи інтерфейсу користувача в додатку компаса (ліворуч) схожі на компас в реальному світі (праворуч) і спрощують користувачам розуміння використання і функцій програми.

3. Користувальницький контроль та свобода

Користувачі часто виконують дії помилково. Їм потрібний чітко означений «аварійний вихід», щоб вийти з небажаної дії без необхідності проходити розширений процес.

Існує кілька елементів управління інтерфейсу користувача, які зазвичай дозволяють людям повернутися до попереднього стану системи :

Зворотне посилання, яке повертає користувачів до попередньої сторінки або екрана .

Посилання «Скасувати» , яке дозволяє користувачеві вийти із завдання чи багатоетапного процесу.

Посилання «Закрити» , яке дозволяє користувачам закрити нову виставу.

Параметр «Скасувати» (і відповідний параметр «Повторити»), що дозволяє користувачам скасувати зміну елемента інтерфейсу користувача.

Приклад евристики юзабіліті №3:

Коли користувачі починають складати твіт, вони можуть легко скасувати завдання, вибравши «Скасувати» у лівому верхньому куті екрана. Після цього Twitter надає користувачеві можливість видалити повідомлення або зберегти чернетку. Цей вибір гарантує, що користувачі не втратить роботу.

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

4. Послідовність та стандарти

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

Приклад евристики юзабіліті №4:

Незважаючи на те, що на знімках екрану нище представлені різні галузі (IKEA, Target, Etsy та Grainger), ці веб-сайти електронної комерції дотримуються одних і тих самих стандартів навігації з утиліт. Помітна панель пошуку, зручний доступ до облікового запису та зрозумілий кошик відображаються однаково.

Пам’ятайте, що розробка чогось, що суперечить загальноприйнятим правилам, додасть когнітивного навантаження вашим користувачам. Ви захочете зробити це тільки якщо це абсолютно необхідно для завдання або підвищить ефективність. У більшості випадків підтримка узгодженості та задоволення очікувань користувачів переважують порушення умовностей.

5. Запобігання помилкам

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

Помилки бувають двох видів: промахи та помилки. Промахи – це несвідомі помилки, спричинені неуважністю. Помилки – це свідомі помилки, що базуються на невідповідності між ментальною моделлю користувача та дизайном.

Приклад евристики юзабіліті №5:

Користувачам, які шукають високоякісні навушники, важко запам’ятати, як пишеться Etymotic Research, а точність друку, швидше за все, також буде низькою. Інтерактивні пошукові підказки Amazon дозволяють користувачам вводити менше тексту, тим самим роблячи менше помилок або помилок, які не призведуть до результатів.

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

6. Впізнавання, а не пригадування

Мінімізуйте навантаження на пам’ять користувача, зробивши видимими елементи, дії та параметри. Користувач не повинен запам’ятовувати інформацію з однієї частини інтерфейсу до іншої. Інформація, необхідна для використання дизайну (наприклад, мітки полів або елементи меню), повинна бути помітна або доступна при необхідності.

У людей обмежена короткочасна пам’ять. Інтерфейси, які сприяють розпізнаванню, скорочують кількість когнітивних зусиль, потрібних від користувачів.

Приклад евристики юзабіліті №6:

Коли користувач повертається на Amazon.com, персональна домашня сторінка містить список нещодавно переглянутих товарів.

Наскільки легко інформація може бути вилучена з пам’яті, залежить від того, як часто ми стикалися з цією інформацією, як нещодавно ми використовували її та наскільки вона пов’язана із поточним контекстом. Більш багаті контексти (наприклад, ті, які є, коли ми використовуємо розпізнавання, а не пригадування) полегшують вилучення пам’яті. Інтерфейси, які сприяють розпізнаванню, допомагають користувачам краще запам’ятовувати інформацію, будь то завдання та елементи, які вони бачили раніше, або функціональність інтерфейсу.

7. Гнучкість та ефективність використання

Як і на кухні, в UX ми повинні враховувати людей із різними компетенціями. Наші системи повинні бути досить гнучкими, щоб користувачі могли виконувати завдання, використовуючи різні методи. Гнучкі системи ефективні, тому що люди можуть вибрати найбільш підходящий для них метод. 7-а з 10 евристик юзабіліті каже, що ми маємо віддавати перевагу гнучкості та ефективності використання за рахунок використання ярликів та прискорювачів, невидимих для новачка, які прискорюють взаємодію для досвідчених користувачів. Такий підхід дозволяє системі обслуговувати як недосвідчених, і досвідчених користувачів.

Приклад евристики юзабіліті №8:

Клавіатура iOS дозволяє перегортати букви слова, а не натискати їх окремо. Цей жест є прискорювачем: він допомагає досвідченим користувачам, але не ускладнює навчання новачкам.

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

8. Естетичний та мінімалістичний дизайн

Інтерфейси не повинні містити неактуальну або рідко використовувану інформацію. Кожна додаткова одиниця інформації в інтерфейсі конкурує з відповідними одиницями інформації та зменшує їхню відносну видимість.

У той час як певні візуальні ефекти загальновизнані та вітаються, чим конкретніше ваше повідомлення у вашому інтерфейсі, тим менш універсальними будуть ваші візуальні ефекти. Зрештою, щоб інформація була актуальною для однієї аудиторії, вона, можливо, є неактуальною для інших аудиторій. Те, що може бути модним або цікавим для однієї групи людей, може бути непотрібним для інших. Це означає, що ви повинні знати своїх персонажів дуже добре і створіть дизайн спеціально для того, що можуть цінувати ваші високопріоритетні персонажі. Крім того, не забувайте про культурні відмінності (наприклад, весільні сукні в Західній Європі, як правило, повністю білі, тоді як в Індії біла сукня символізує смерть та похорон і може не викликати такої ж емоційної реакції у цієї аудиторії). Хоча це може вимагати додаткової роботи для вашої UX-команди, пам’ятайте, що для обслуговування глобальної аудиторії ви повинні відображати красу у глобальному контексті та розповідати про глобальні історії.

Приклад евристики юзабіліті №8

Програма Smart Countdown Timer має режим дзен, в якому дуже мало дизайнерського шуму: в стані очікування (ліворуч) час, що залишився до зворотного відліку, є єдиною доступною інформацією, але в стані наведення (праворуч) всі елементи управління недоступні. зробити видимими: текстове поле для введення бажаного часу або тривалості та значки для призупинення/відновлення таймера, перезапуску таймера та блокування таймера від редагування.

Юзабіліті – це і мистецтво, і наука. У той час як когнітивна та поведінкова наука диктує багато принципів юзабіліті, естетика відіграє важливу роль і впливає на сприйняття та запам’ятовування ваших проектів. Мінімалізм йде набагато глибше, ніж зовнішній вигляд чи тенденції: він максимізує корисність та зручність використання, дозволяючи людям знаходити те, що їм потрібно, коли їм це потрібно. Зрештою, зображення може сказати тисячу слів… але тільки якщо це корисне зображення.

9. Допоможіть користувачам розпізнавати, діагностувати та усувати помилки

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

Сообщения об ошибках должны быть заметными и узнаваемыми для пользователей.

Приклад евристики юзабіліті №9

Amazon використовує кілька методів для позначення помилки: виділення кордонів, іконографію та червоний текст.

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

10. Довідка та документація

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

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

Приклад евристики юзабіліті №10

Інформаційні кіоски в аеропортах легко впізнавані та вирішують проблеми клієнтів у контексті та негайно.

Справка и документация являются важным элементом взаимодействия с пользователем. Они часто необходимы, но редко доставляют удовольствие. В общем, пользователи не любят читать, и особенно не любят читать инструкции. Но любые проблемы во взаимодействии также являются возможностью обучения для пользователя и, таким образом, возможностью для дизайнера влиять на информацию и развивать ментальную модель пользователя способами, которые не произошли бы без импульса этой проблемы. Предвидьте, когда вашим пользователям понадобится помощь, и предоставьте соответствующую информацию, которая поможет им в достижении их цели. Дополните свою упреждающую помощь репозиторием документации, к которому пользователи могут обращаться по мере необходимости. И не забывайте, что содержание справки должно быть кратким, по существу и легко читаемым.

Взято з Нильсен Норман Групп