Аудит юзабіліті інтернет-магазину: Чеклист зі 170+ пунктів для перевірки інтерфейсу

Ключові елементи для юзабіліті аудиту сайту

• Оформлення головної сторінки має транслювати тематику сайту, тобто користувач повинен розуміти, чому присвячений сайт (інтернет-магазин електроніки, ювелірних виробів, дитячих товарів, і т.д.), а також відображати УТП
• У вас є 1-3 секунди, щоб зацікавити і залучити користувача на сайт.
• Дизайн інтернет-магазину має бути унікальним і незабутнім.
• Найважливіша інформація розташована на першому екрані.
• Користувач може спробувати всі основні функції без реєстрації.

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

Навігація по сайту

• Користувач інтернет-магазину знає, в якому розділі він перебуває.
• Структура категорій каталогу добре продумана.

• Ключові точки навігації сайтом (каталог, кошик та інше) доступні користувачеві в будь-який момент, на будь-якій сторінці інтернет-магазину.
• Максимально просте і зрозуміле оформлення критично важливих точок шляху користувача (реєстрація, купівля, підписка, тощо).
• Користувач має доступ до важливої інформації з будь-якої сторінки інтернет-магазину.
• Сайт не містить "тупикових" сторінок.
• Тобто користувач з будь-якої сторінки може перейти за посиланням на іншу сторінку. Наприклад, статті в блозі перелінковані між собою, в описах послуг і товарів є CTA для замовлення, на 404 сторінці є посилання на основні розділи сайту або пошук тощо.
• Кнопка back браузера не блокується сайтом.

Головне меню

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

Структура сторінок сайту

• Шапка інтернет-магазину має бути лаконічною і містити важливу інформацію та посилання (логотип, назву, контакти, меню).

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

Пошук по сайту і видача

• Рядок пошуку, його розмір і оформлення мають відповідати бізнес-цілям.
• Рядок пошуку знаходиться на видному місці і доступний на будь-якому екрані.
• Тільки один рядок пошуку на всю сторінку.
• Є автодоповнення і доречні підказки.
• Підказки в рядку пошуку виводяться за пріоритетами і параметрами вибору (категорія — підкатегорія — товари/контентний заділ).
• Пошук відпрацьовує помилки і помилкові запити, шукає синоніми.
• Якщо запит вводиться з іншої розкладки, то рядок пошуку автоматично замінює пошуковий запит.

Пошукова видача

• Результат пошуку відповідає пошуковому запиту.
• Є можливість відфільтрувати товари за певними ознаками.
• У разі, якщо за пошуковим запитом нічого не було знайдено (пошук не дав результатів), то з'являється підказка як можна відредагувати пошуковий запит або пропонується альтернативний товар.
• Виводиться кількість товарів знайдених за пошуковим запитом.
• Пошук товару відбувається по всьому сайту в цілому, в разі якщо немає можливості пошуку за розділами.

Текст і його оформлення на сайті

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

Абзаци

• Кегль для основного тексту, призначеного для читання, — в ідеалі 16 px.
• Вирівнювання тексту зроблено по лівому краю.
• Довжина рядка має бути не більше 80 символів. Якщо рядок занадто короткий або довгий, то це негативно впливає на сприйняття тексту.

Заголовки

• Заголовки дають зрозуміти користувачеві "про що далі", а краще "що там сказано".
• Заголовки оформляються за типом ближче до "свого" абзацу.
• Кегль для заголовків більший за кегль підзаголовка в 1,5 раза, кегль підзаголовка, своєю чергою, в 1,5 раза більший за кегль для тексту.

Шрифт тексту, кегль і колір

• Верхній регістр використано по мінімуму. Використання верхнього регістру має бути виправданим, оскільки він ускладнює читання і сприйняття тексту.
• Шрифти мають бути одні й ті самі для всіх сторінок сайту інтернет-магазину. Вони мають бути читабельними і контрастними.
• Колір основного тексту і посилань повинен відрізнятися один від одного і бути контрастним.
• Використання різних кольорів тексту має бути виправданим.
• Усі довгі числа розбиті пропуском для спрощення сприйняття (1 524 733, наприклад).

Оформлення посилань і кнопок

• За текстом посилання користувачеві має бути зрозуміло, куди воно приведе.
• Колір і стиль посилань повинен візуально відрізнятися від решти тексту (підкреслені або виділені кольором).
• Якщо користувач перейшов за посиланням, воно змінює свій колір.
• Усі посилання, які не перезавантажують сторінку, — виділені пунктиром.
• Довжина тексту посилання досить довга, щоб користувачеві було зручно і легко по ньому клікнути.
• Посилання для скачування файлів мають візуально відрізнятися від тих, які ведуть на інші сторінки сайту.

Кнопки та посилання типу "Що зробити"?

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

Антиприклад:

А в інтернет-магазині косметики Mon Amie також реалізовано кілька кнопок заклику до дії, але їхній дизайн виконано так, що візуальний акцент спрямований тільки на один основний call to action — купити.

• Заклик до дії або текст на кнопці — це дієслово в інфінітивній формі. Наприклад, знайти, купити, підписатися тощо.
• Кнопка реагує на курсор, наприклад, змінює колір для спонукання користувача зробити клік.
• У разі, якщо дія недоступна, то кнопки і посилання не зникають з екрана, а деактивуються і блокуються.

Форми для заповнення

Оформлення форм в цілому

• Форми мають бути максимально простими й лаконічними. У разі, якщо це оформлення замовлення, реєстрація, або будь-яка цільова форма, то в ній містяться тільки обов'язкові поля.
• Якщо це поле необов'язкове, то воно має бути аргументованим й обґрунтованим.
• Якщо це велика форма з великою кількістю полів, то вона має бути структурована, поля згруповані за змістом і мають підзаголовки у кожної групи.
• Курсор автоматично переміщується в перше поле під час відкриття форми.
• Активне поле візуально виділено.
• Підказка залишається на місці під час переміщення фокусу на поле.
• Є покрокова інструкція і рядок прогресу, якщо форма складається з декількох кроків. Користувач має бути поінформований, на якому кроці він зараз перебуває і скільки кроків ще залишилося.
• Усі заповнені поля зберігаються до завершення процесу, щоб користувачеві не довелося повторно вводити дані в разі, якщо він випадково пішов зі сторінки форми.
• Користувач може послідовно переводити курсор з поля на поле за допомогою клавіші tab.

Елементи форми — поля та їхні значення

• Назва кнопки завершення заповнення форми повинна відповідати меті заповнення, наприклад, "зареєструватися" або "перейти до оплати", тощо)
• Є підказки, приклади, або уточнення для полів, заповнення яких може викликати питання у користувача.
• Усі поля, обов'язкові до заповнення, мають маркування або виділення і візуально відрізняються від необов'язкових.
• Назви полів мають відповідати змісту та меті полів.
• Деякі поля заповнені за замовчуванням із найімовірнішими значеннями. Наприклад, для букінгу за замовчуванням 2 дорослих у полі пошуку.
• Підписи полів мають бути в єдиному стилі.

Валідація, помилки та підказки

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

Каталог і його функції

Фільтри на видачі

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

Надсилання відфільтрованого списку

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

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

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

Додавання товару до кошика з каталогу

• Користувач може додати будь-який товар у кошик.

• Є візуальне підтвердження додавання позиції з каталогу в кошик.

Кількість одиниць товару:

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

Міні-кошик:

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

Картка товару

• У заголовку вказано назву товару.
• Вся інформація про товар актуальна і виводиться коректно.
• Є посилання для повернення в каталог або хлібні крихти.

Додавання товару до кошика:

• Користувач може додати товар у кошик, у потрібній кількості.
• Є візуальне підтвердження додавання товару в кошик.

Виведення додаткових блоків:

• Якщо передбачено виведення upsell і cross-sale блоків, таких як "З цим товаром також купують", "Рекомендуємо", "Ви переглядали", в них виводяться правильні товари.

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

А в картці товару різні варіанти cross-sale і upsell інструментів від цукерок і тортів, до схожих і переглянутих товарів.

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

Кошик

• У кошику інтернет-магазину сума замовлення повинна розраховуватися автоматично з урахуванням усіх знижок, акцій, купонів, вартості доставки, комісій та іншого.
• При введенні некоректний даних, з'являється попередження, повідомлення про помилку і скидання значень.
• Якщо користувач ввів число або змінив значення в полі "Кількість", відбувається негайний перерахунок як вартості товару, так і загальної суми замовлення. Якщо було введено нуль, то позиція видаляється. У цьому випадку бажано підтвердження дії, щоб унеможливити випадкове введення.

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

Оформлення замовлення

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

• Сума за доставку перераховується автоматично залежно від обраного способу, при цьому змінюється і загальна сума замовлення.
• У разі, якщо для зареєстрованих користувачів адреси доставки зберігаються, то користувач повинен мати можливість вибрати збережену адресу або додати нову. Якщо користувач вибрав нову адресу, то поля адреси автоматично очищаються.
• Користувачеві надається актуальна інформація про способи доставки та варіанти оплати.
• Для зареєстрованих користувачів усі дані для чекаута автоматично зберігаються і використовуються як автозаповнення.
• Після оформлення замовлення, на вказану email адресу автоматично надсилається лист з інформацією про замовлення і посиланням на історію замовлень.
• Відбувається автоматична реєстрація нових користувачів під час оформлення замовлення.

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

Подяка за замовлення

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

Особистий кабінет

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

Юзабіліті аудит сайту — перший крок, який варто зробити при проблемах користувачів взаємодії з інтернет-магазином, або при низькому показнику конверсії. У статті ефективні способи перевірки юзабіліті сайту ми ділимося web-інструментами для виявлення недоліків інтерфейсу.

Адаптивна версія інтернет-магазину

Існує список вимог Google page speed insight щодо оптимізації інтернет-магазину. Дотримуючись вимог, сайт має бути в зеленій зоні. Так юзабіліті-аудит сайту допомагає знайти й усунути помилки в інтерфейсі, максимально оптимізувати роботу сайту, вплинути на ключові KPI, тобто є першим кроком до збільшення вашого доходу.

Головна сторінка інтернет-магазину

• Для мобільної версії сайту варто відключити всі зайві блоки для оптимізації швидкості завантаження сторінки.
• Всі маркетингові банери повинні бути оптимізовані під мобільні пристрої і весь текст повинен бути читабельний текст. Для цього варто готувати пару банерів різного розміру для 1366-1920 і 320.
• Для проектів де домінують користувачі мобільних пристроїв, то варто в дизайні рухатися від mobile-first (320-768-1024-10280-1366-1920).

Навігація по сайту

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

Рядок пошуку

• Рядок пошуку має достатній розмір і пріоритет залежно від бізнес-цілей.
• Пошук має бути доступний на будь-якому екрані, якщо це гіпермаркет або інтернет-магазин, для якого це пріоритетний інструмент.
• У полі пошуку працюють розширені підказки, водночас підказки виводяться за пріоритетами (категорія — підкатегорія — товари/контентний заділ).
• Пошук відпрацьовує помилки, транслітерацію, шукає синоніми та інше.

Клавіатура

• Враховано висоту панелі клавіатури для всіх станів введення і заповнення полів.
• Клавіатура не повинна перекривати поле, в яке здійснюється введення.

Каталог товарів

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

Картка товару

• Є галерея товару і кожне фото можна наближати жестами.
• У користувача є швидкий доступ до ключової цільової дії.
• Всі блоки і вся інформація така ж як і в десктопі.

Кошик

• Кнопка для оформлення замовлення має бути доступна з першого екрана.

• Інтуїтивно зрозуміло де і як додати промокод.
• Для адаптивної версії кошика є вся інформація і блоки як і для десктоп.

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

‍