Юзабіліті — це зручність використання сайту: наскільки легко людина може знайти товар, порівняти варіанти, записатися на послугу, оформити замовлення або надіслати заявку.
Зручність сайту залежить від багатьох деталей. Зрозуміле меню швидше приводить до потрібного розділу, форма показує, де допущена помилка, а після натискання кнопки людина одразу бачить, що сталося. Якщо на кожному кроці доводиться щось шукати, перевіряти або робити повторно, користуватися сайтом стає складніше.
Юзабіліті оцінюють за всім шляхом людини до потрібної дії: від першого переходу на сайт до заявки, покупки, бронювання чи іншого результату. На цьому шляху видно, де виникають зайві кроки, помилки або незрозумілі моменти.
Що таке юзабіліті сайту
На практиці юзабіліті видно в звичайних діях користувача. В інтернет-магазині він відкриває категорію, застосовує фільтри, вибирає характеристики товару, додає його до кошика та оформлює замовлення. Якщо після переходу скидається вибраний розмір, фільтри доводиться налаштовувати заново або після натискання кнопки незрозуміло, чи товар уже в кошику, шлях до покупки стає довшим.
На сайті послуг людина зазвичай хоче швидко зрозуміти умови, ціну, знайти контакти й залишити заявку. Якщо потрібна інформація розкидана по кількох сторінках, кнопку зв'язку складно помітити, а форма запитує дані, сенс яких незрозумілий, навіть проста заявка потребує зайвих дій.
Зовнішній вигляд теж впливає на зручність. Велика яскрава кнопка може привертати увагу, але вести до другорядної дії. Акуратно оформлене меню може містити назви розділів, які зрозумілі команді компанії, але нічого не говорять клієнту. Тому під час оцінки юзабіліті враховують і вигляд сторінки, і те, наскільки легко на ній виконати потрібну дію.
Чим UI, UX і юзабіліті відрізняються
У розмовах про зручність сайтів поруч часто звучать UI, UX і юзабіліті, тому ці поняття легко змішати. UI — це сам інтерфейс: кнопки, поля, меню, іконки, кольори та інші елементи, з якими взаємодіє людина. Юзабіліті показує, наскільки зручно за допомогою цього інтерфейсу виконати потрібну дію. UX охоплює ширший досвід: від очікувань перед входом на сайт до враження після покупки, заявки або іншого результату.
Наприклад, кнопка може добре виглядати з погляду UI, але бути непомітною в потрібний момент — це вже проблема юзабіліті. Якщо через такі труднощі вся взаємодія з сайтом залишає негативне враження, проблема зачіпає і UX.
Навігація та структура сайту
Власник бізнесу добре знає свої послуги, внутрішні назви напрямів і професійну термінологію. Людина, яка вперше зайшла на сайт, цього контексту не має.
Через це в меню можуть з'явитися назви на кшталт «Сервісні рішення» або «Технічний напрям», хоча клієнт шукає конкретне — наприклад, ремонт ноутбука. Назва розділу має підказувати, що людина знайде після переходу.
Те, як на сайті згруповані сторінки, категорії та розділи і як людина переходить між ними, називають інформаційною архітектурою сайту . Якщо потрібна послуга захована на четвертому рівні меню або одна й та сама річ називається по-різному в меню, на сторінці та у формі заявки, знайти потрібну інформацію стає складніше.
Під час розробки сайту ми перевіряємо це ще на етапі структури та прототипу: чи легко знайти основні послуги, скільки переходів потрібно до заявки або покупки, чи є сторінки, з яких незрозуміло, куди рухатися далі. Саме тому структура й прототип входять до ключових етапів створення сайту .
Форми, кнопки та повідомлення про помилки
Форма часто є останнім кроком перед заявкою. Людина вже прочитала сторінку, зацікавилася пропозицією й готова залишити контакти, тому помилка саме тут може зірвати звернення.
Наприклад, людина вводить ім'я, телефон та електронну пошту, натискає кнопку й бачить «Помилка 422» . Для розробника цей код має значення, клієнтові він нічого не пояснює. Незрозуміло, яке поле заповнене неправильно і що саме потрібно виправити.
Помилка має з'явитися біля конкретного поля й коротко пояснити, що потрібно змінити. Уже введені в інших полях дані при цьому не повинні зникати. Якщо номер телефону потрібно вводити у певному форматі, приклад краще показати одразу біля поля.
У простій формі зворотного зв'язку немає сенсу одразу запитувати адресу, посаду, назву компанії та інші дані, якщо для першої розмови вони ще не потрібні. Кожне обов'язкове поле повинно мати зрозумілу причину.
Текст на кнопці має прямо називати наступну дію. На останньому кроці оформлення «Перейти до оплати» одразу пояснює, що станеться далі. «Продовжити» такої інформації не дає.
Після надсилання заявки сайт має одразу показати, що її прийнято: наприклад, повідомити «Заявку отримано, ми зв'яжемося з вами протягом робочого дня» . Без підтвердження людина не знає, чи спрацювала форма, і може натиснути кнопку повторно.
Мобільна версія та доступність сайту
На смартфоні людина робить ті самі речі: відкриває меню, шукає товар, заповнює форму або оформлює покупку. Менший екран і сенсорне керування можуть зробити звичні дії значно складнішими.
В інтернет-магазині панель фільтрів може займати майже весь екран, а кнопка застосування параметрів — опинитися нижче видимої області. Покупець уже вибрав розмір, бренд і ціну, але не бачить кнопки, яка покаже відфільтровані товари.
На сайті послуг закріплений банер, чат або нижня панель можуть перекрити кнопку відправлення форми. На великому моніторі цього дефекту взагалі не видно.
Перевірити лише вигляд головної сторінки на смартфоні недостатньо. Потрібно спробувати знайти товар, скористатися фільтрами, заповнити форму або пройти оформлення покупки.
На мобільному екрані швидше проявляються і проблеми з читабельністю: дрібний шрифт, слабкий контраст, довгі суцільні абзаци та нечітка ієрархія заголовків. Людині доводиться довше шукати потрібний фрагмент тексту або збільшувати сторінку вручну.
Частина рішень одночасно впливає і на юзабіліті, і на доступність сайту. Наприклад, слабкий контраст може заважати читати текст на сонці, а маленькі кнопки, розташовані впритул, складніше натискати людям із порушеннями моторики. Чіткі підписи та зрозумілий порядок елементів також полегшують роботу із сайтом за допомогою допоміжних технологій.
Швидкість сайту та реакція інтерфейсу
Користувач відчуває швидкість сайту за тим, як швидко з'являється потрібний контент і як сайт реагує на його дії.
Під час оплати людина натискає кнопку, але кілька секунд на екрані нічого не змінюється. Вона не знає, чи сайт прийняв дію, тому може натиснути ще раз. Індикатор завантаження або тимчасово заблокована кнопка показують, що оплата вже обробляється.
Сторінка вже відкрилася, людина збирається натиснути посилання, але в цей момент завантажується банер або зображення й контент зміщується вниз. У результаті вона може натиснути зовсім на інший елемент.
Під час аналізу швидкості ми дивимося і на технічні показники, і на поведінку самої сторінки. Причини повільного завантаження — важкі зображення, скрипти та інші ресурси — детальніше розібрані в матеріалі про швидкість сайту . Тут же перевіряємо, коли з'являється основний контент, чи можна одразу користуватися кнопками та чи зрозуміло, що відбувається після натискання.
Тестування юзабіліті після змін
Люди, які щодня працюють із сайтом, уже знають, де знаходяться потрібні кнопки, розділи й функції. Новий відвідувач цього не знає, тому може зіткнутися з труднощами, яких команда просто не помічає.
Під час тестування юзабіліті людині дають конкретну задачу. Наприклад:
Знайдіть чоловічі кросівки 43 розміру, виберіть чорний колір, додайте товар до кошика та перейдіть до оформлення.
Людині не пояснюють, куди натискати. Під час виконання завдання видно, чи легко вона знаходить потрібну категорію, користується фільтром, розуміє вибрані характеристики та доходить до оформлення. Якщо виникає помилка або пауза, спочатку дивляться, що саме викликало труднощі.
Що вимірювати під час тестування юзабіліті
Щоб порівняти результат до та після змін, можна оцінити:
-
скільки людей успішно виконали завдання;
-
скільки часу на це знадобилося;
-
де виникали помилки або повернення назад;
-
скільки зайвих дій довелося зробити;
-
як людина оцінює зручність виконання завдання.
Так видно конкретне місце, де виникає проблема: людина не знаходить кнопку, неправильно розуміє назву розділу або повертається назад, бо не знає, що робити далі.
Після редизайну таку перевірку теж повторюють. Навіть якщо функції сайту залишилися тими самими, нове розташування кнопок, меню або блоків може змінити звичний шлях користувача.
Результати тестування варто зіставляти з даними реальних відвідувань сайту. Воронка в системі вебаналітики показує, на якому кроці найбільше людей припиняють оформлення покупки, заявки або іншої цільової дії. Карта кліків показує, з якими елементами взаємодіють найчастіше, карта прокручування — до яких частин сторінки доходять відвідувачі, а записи сесій відтворюють послідовність окремих дій.
Теплова карта показує, де відбувається багато взаємодій, але не пояснює їх причину. Наприклад, часті кліки по фотографії товару можуть означати інтерес до неї, а можуть показувати, що люди очікують збільшити зображення, хоча така функція не працює. Тому дані карти звіряють зі сторінкою, записами сесій та результатами тестування.
Коли потрібен аудит юзабіліті сайту
Аудит юзабіліті потрібен, коли проблема помітна за результатом, але незрозуміло, де саме вона виникає. Наприклад, люди заходять на сайт послуг, переглядають сторінки й цікавляться пропозицією, але рідко залишають заявку. Причина може бути в навігації, формі, мобільній версії або в тому, що потрібну інформацію чи спосіб зв'язку складно знайти.
У такій ситуації перевіряють увесь шлях до потрібної дії. Іноді проблема знаходиться на одній сторінці, а іноді кілька дрібних незручностей накопичуються в різних частинах сайту й разом заважають дійти до результату.
Аудит починають із головної дії, заради якої людина приходить на сайт: покупки, заявки, запису, бронювання чи іншого результату. Далі перевіряють, що заважає її виконати і які труднощі повторюються на різних сторінках. На цьому принципі побудований і аудит юзабіліті в SEO-Evolution: пріоритет отримують проблеми, які реально ускладнюють користування сайтом.
