Даруємо!!!

Основні принципи юзабіліті і як їх застосувати на сайті


Принципи юзабіліті web-ресурсу

Розробка юзабіліті сайту базується на головному правилі: «чим простіше – тим краще». Чим більш звичну структуру і інтерфейс бачить користувач – тим легше йому зорієнтуватися і тим менше часу він витратить, щоб знайти потрібний розділ, тому що буде почувати себе більш впевнено.

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

1. Дизайн – запорука довіри до сайту

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

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

image3.png

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

2. Логічний структурований контент

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

image5.png

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

3. Важлива інформація – в лівому кутку

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

image4.jpg

4. Спілкування з користувачем

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

image7.jpg

Потрапивши на таку сторінку 404, користувач не розгубиться і, швидше за все, не відразу покине ресурс.

5. Скасування дії

У людини повинна бути можливість передумати. Наприклад, соціальна мережа ВКонтакте дозволяє відновити сторінку після її видалення. Деякі інтернет-магазини – змінити або видалити замовлення після його оформлення, відкоригувати спосіб доставки і оплати. Все це – складові частини юзабіліті веб сайту.

6. Ненав’язливе пропозицію допомоги

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

image6.png

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

image9.png

7. Розмова на зрозумілій мові

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

image11.png

image10.png

8. Відмова від різких змін

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

Те ж саме відноситься до веб-дизайну: користувач не тільки витратить більше часу, але і розчарується, помітивши, що замість значка кошика тепер – «Додати товар», замість «Каталог» – «Продукція», а звичні об’ємні кнопки обтічної кнопки стали плоскими і рубаними. Тому задумавши «перестановку», не шокує відвідувача – зміни повинні бути поступовими і не міняти кардинально звичну структуру.

9. Всі можливості – на увазі

Вдале рішення – коли користувач бачить всі розділи, в які може перейти, тому що в будь-який момент може швидко зорієнтуватися, де знаходиться і як повернутися назад. Якщо на сайті планується багато контенту – резонно передбачити горизонтальне верхнє, вертикальне меню (і те, і інше – можливо, з підрозділами), а також «підвал». Якщо мова йде про минималистичной «візитці» або landing page – досить тільки верхнього горизонтального меню.

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

image12.pngПриклад успішної карти сайту

10. Форма реєстрації та замовлення: чим лаконічніше – тим краще

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

image2.png
image1.png

11. Помітне довге поле пошуку

Відповідна кнопка – найкращий помічник відвідувача. Особливо якщо мова йде про великому ресурсі. Рядок пошуку користувач повинен виявити без праці. Щоб при першому знайомстві він не витрачав на виявлення відповідного рядка навіть кілька секунд.

Ще один важливий момент – довжина поля пошуку. Згідно з дослідженням Якоба Нільсена, в середньому туди вміщається 18 символів, а оптимальна довжина – 27 символів. У 90% випадків сюди поміститься навіть довгий запит, щоб користувач його повністю побачив і виправив при потребі. Для установки потрібної ширини використовуйте відносну одиницю «em», яка дорівнює розміру використовуваного шрифту.

image13.png

Рядок пошуку – не в шапці сайту, а під презентацією, внизу сторінки. Чи не найзручніший варіант, враховуючи, що користувач автоматично шукає цю опцію у верхній частині сайту.

12. Більше вільного простору

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

image14.png

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

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