UX-аудит сайту: що перевірити і в якому порядку

UX-аудит сайту це перевірка того, чи може відвідувач зрозуміти вашу пропозицію, знайти потрібне і завершити дію: залишити заявку, записатись, оплатити. Результат аудиту це список конкретних проблем з пріоритетом і виправленням для кожної. Загальні враження на кшталт «сучасніший дизайн» у такий список не потрапляють.

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

Принцип: пройти шлях повністю

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

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

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

Жодна з цих проблем не була видна на головній сторінці.

Порядок аудиту

1. Цілі і сценарії

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

2. Перший екран кожного типу сторінки

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

3. Шлях до дії з кожної сторінки

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

4. Форми

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

5. Мобільна версія на реальних телефонах

Більшість відвідувачів приходить з телефона, і частина з вбудованих браузерів соцмереж. У нашому чат-віджеті на iPhone у вбудованому браузері Telegram і Instagram поле вводу ховалось під клавіатурою, а шапка з перепискою зникала. У звичайному мобільному Safari все працювало. Перевіряйте в тих браузерах, з яких приходять ваші люди.

6. Тексти і мова

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

7. Контраст і читабельність

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

8. Що бачить пошуковик

Відкрийте сторінку без виконання скриптів або подивіться її HTML. Каталог агентів на нашому сайті віддавав пошуковику слово «Завантаження…» замість сторінки. Людина в браузері бачила все, і тому проблему довго не помічали. Докладніше у статті Next.js для бізнес-сайту.

9. Швидкість

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

Хто має проводити аудит

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

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

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

Як оформити результат

Кожна знахідка записується в одному форматі:

Пріоритет ставте за впливом на головні дії. Проблема на шляху до оплати важливіша за невирівняну іконку.

Після аудиту: захистіть виправлення

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

Чек-лист UX-аудиту

• Кожен головний сценарій пройдено до кінця з тестовими даними.
• З кожної сторінки є шлях до заявки або покупки.
• Форми показують зрозумілі помилки і доставляють заявки.
• Мобільна версія перевірена на iPhone і Android, у вбудованих браузерах соцмереж.
• Мова сторінки однорідна, числа узгоджені зі словами.
• Контраст тексту достатній.
• HTML сторінки містить повний текст без виконання скриптів.
• Ключові сторінки швидко завантажуються на мобільному.
• Знахідки оформлені з пріоритетом і виправленням.
• Важливі виправлення захищені автоматичними перевірками.

Що замовити

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