Артем Охрей, seo-аудитор, веб-розробник

21.11.2018 в 15:34

Як застосовувати евристики Нільсена для покращення юзабіліті свого сайту

238 0

Якоб Нільсен – це один із засновників компанії Nielsen Norman Group, визнаний експерт у галузі юзабіліті. У 1990 році він сформулював 10 евристик – загальних правил, яким повинен відповідати будь-який інтерфейс для ефективної та комфортної роботи. Незважаючи на те, що минуло вже майже три десятиліття, ці рекомендації досі актуальні в різних сферах, у тому числі і в розробці сайтів.

Евристики Нільсена складалися без огляду на сайти або інші конкретні інтерфейси: оригінальна стаття оперує більш широким поняттям «система». Проте, практично усі правила, наведені в ній, з успіхом застосовуються до сучасних веб-ресурсів, допомагаючи зробити їх більш зручними та інтуїтивно зрозумілими користувачам.

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

1. Інформованість користувача про стан системи

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

Що потрібно перевірити? Переконайтеся, що користувачі вашого сайту завжди отримують повідомлення про результати своїх дій, про те, що потрібно робити далі. Відвідувач не повинен залишатися «наодинці з собою». Особливо важливо це, коли мова йде про фінансові операції, наприклад, покупки в інтернет-магазині.

Якщо користувач здійснив будь-яку дію, наприклад, відправив повідомлення, зробив замовлення або залишив контактні дані, але не отримав жодної відповіді, то він може здивуватися, а то й запанікувати: чи все було зроблено правильно? Раптом я десь помилився при введенні, на сайті виникла помилка або магазин взагалі не працює?

Слідкуйте за тим, щоб сайт повідомляв про поточний статус, наприклад: «Ваше повідомлення відправлено! Ми відповімо вам найближчим часом »; «Замовлення відправлено! Наш менеджер зв'яжеться з вами у найближчі 10 хвилин і уточнить деталі покупки».

Інший приклад вдалого індикатора статусу – повідомлення про завантаження файлу на Google Drive:

2. Подібність системи до реального світу

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

Що потрібно перевірити? Вам, як власнику сайту і бізнесу, що постійно працює в цій сфері, може здаватися простим і зрозумілим абсолютно все, що написано на сторінках. Але спробуйте поглянути на сайт очима сторонньої людини «з вулиці»: чи все буде ясно для неї при першому ж прочитанні? Якщо ні, то спробуйте перефразувати текст, уникаючи термінів і складних конструкцій.

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

3. Свобода дій і можливість скасування дії

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

Що потрібно перевірити? При роботі з сайтом помилкові дії практично неминучі, і користувачам завжди потрібно надавати можливість «повернути як було».

  • На сайті є форма коментування? Переконайтеся, що є і можливість відредагувати помилки в коментарі або зовсім видалити його.
  • Користувач заповнює форму замовлення, де може випадково вказати неправильну адресу або телефон? Додайте кнопку «Назад», яка дозволить все виправити, не вводячи інші дані заново.
  • впроваджувати функцію видалення профілю? Забезпечте можливість протягом деякого часу відновити акаунт, якщо користувач передумав і т.д.

Приклад функції редагування повідомлення на форумі

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

Не плутайте користувача, описуючи різними словами одні і ті самі речі, ситуації, дії. Елементи системи повинні відповідати єдиному стандарту.

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

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

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

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

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

  • В імені користувача при реєстрації дозволяються англійські букви і цифри, але не дозволені кирилиця і розділові знаки? Напишіть про це поруч з полем або у підказці.
  • Телефон потрібно вводити, починаючи з +380? Вкажіть ці символи прямо у полі вводу за замовчуванням, або додайте поруч з полем зразок номера, записаного правильно.
  • Якщо потрібно ввести адресу, то раціонально буде зробити вибір країни і міста у форматі списку: так користувач точно не помилиться при введенні.

Приклад вдалих підказок, що дозволяють уникнути помилок при реєстрації:

6. Максимум інформації на очах, а не в пам'яті користувача

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

Що потрібно перевірити? Важливі для користувача відомості, наприклад, коротку інформацію про варіанти доставки товару, краще дублювати на різних сторінках: у самій картці товару, на сторінці оформлення заявки. Таким чином, користувачу не доведеться переходити на окрему сторінку «Оплата і доставка», щоб дізнатися, як він зможе забрати товар.

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

Інший цікавий приклад – вибір шрифту при редагуванні тексту: буде набагато зручніше, якщо пункти меню будуть одразу відображені потрібним шрифтом, як у Microsoft Word, а не просто містити його назву.

Крім того, слід використовувати форми і символи, вже знайомі більшості користувачів. Не варто «винаходити велосипед», створюючи дизайн кнопки «Кошик» або «Завантажити». Ось приклад невдалого оформлення функції входу – кнопка нехай і виглядає оригінально, але дуже схожа на логотип сайту і помітна далеко не одразу:

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

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

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

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

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

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

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

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

Особливо важливо перевірити форми: величезна кількість полів, обов'язкових для заповнення, просто відлякує клієнта, який уже готовий був зробити замовлення. Приберіть або хоча б об'єднайте ті поля, які не є критично важливими для обробки заявки.

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

9. Розпізнавання і вирішення проблем

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

Що потрібно перевірити? Як би ви не оптимізували інтерфейс сайту, повністю уникнути помилок при роботі з ним все-таки не вдасться. Переконайтеся, що, якщо користувач зіткнувся з помилкою, він отримає чітке і зрозуміле повідомлення про те, чому виникла несправність і як її вирішити. У першу чергу це стосується сторінок помилки 404 або порожніх результатів пошуку ( «за вашим запитом нічого не знайдено»). Такі сторінки варто доповнити рекомендаціями: що можна зробити далі? Наприклад, запропонувати альтернативні варіанти пошукових запитів або посилання на сторінки, які можуть зацікавити відвідувача. Інакше він просто піде з сайту, залишившись незадоволеним.

10. Наявність допомоги та довідкових матеріалів

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

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

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

Підводячи підсумок

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

Важливо пам'ятати: правила Нільсена створені на основі досвіду, а не строгих розрахунків і досліджень; вони значною мірою суб'єктивні. Евристики не є панацеєю для сайту, і не завжди дотримання їхніх порад приносить помітний і сильний ефект.

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

КОМЕНТУВАТИ
УВІЙТИ
  • Facebook
  • Twitter
  • Google