Юзабіліті сайту і чекліст по ним

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

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

Що таке чек лист юзабіліті сайту? Це список пунктів, на які треба звертати увагу. Або, інакше кажучи, покрокова інструкція – проста і зрозуміла навіть новачкам.

Основні вимоги до юзабіліті сайту

1. Швидке завантаження сторінок. Користувачі не будуть довго чекати відкриття сайту. Підождуть пару секунд – і покинуть його. Перевірити швидкість завантаження веб-ресурсу можна за допомогою будь-якого спеціалізованого сервісу. Наприклад, PageSpeed ​​Insights від Google.
2. Кросбраузерна верстка. Сайт повинен нормально відображатися в будь-якому браузері. І на будь-якому моніторі незалежно від розміру екрану.
3. Адаптивність під мобільні пристрої. Сайт повинен коректно відображатися на будь-якому смартфоні чи планшеті. Адже частка мобільних користувачів становить понад 50% (тобто, користувачі частіше відвідують сайти зі смартфонів, ніж з ПК).
4. Однаковий стиль. Інтерфейс веб-ресурсу (шапка, меню, підвал) зроблений в одному стилі.
5. Перезавантаження сторінки при виборі мови. Відмовтеся від перенаправлення на головну при виборі іншої мови на мультимовному сайті. Сторінка повинна просто перезавантажуватися в тому ж вікні.
6. Розташування логотипу фірми. Оптимальне місце розміщення – верхній лівий кут. Причому логотип повинен бути клікабельним.
7. Структура сторінок. Кожна сторінка повинна бути заповнена так, щоб користувачі визначали тематику сайту на першому екрані (по слогану, зображенням, заголовкам).
8. Контакти компанії. Вони обов'язково вказуються в шапці та футері сайту.
9. Фавікон, що легко запам’ятовується. Він відображається не тільки у вкладці браузера, але й у видачі Яндекса.
10. Легке закриття спливаючих вікон. Це мінімізує роздратування користувачів.
11. Відсутність музики у фоновому режимі. Відмовтеся від автоматичного включення музики. Це тільки дратує.
12. Кнопка «Вверх». Вона обов'язково повинна бути на сайті – для можливості швидкої прокрутки вгору.
13. Налагоджена сторінка 404. Чим краще вона оформлена – тим вище ймовірність, що користувач продовжить вивчення сайту.

Оцінка візуального сприйняття

Оцінка зручності сайту для користувачів виконується наступним чином:

1. Визначте загальне враження про веб-ресурс. Дизайн повинен бути приємним та не викликати відторгнення.
2. Перевірте, чи немає занадто яскравих кольорів. Їх використання дозволяється, але в помірній кількості.
3. Переконайтеся, що сторінки не завалені різними елементами. Але при цьому і не порожні.
4. Перевірте відображення блоків. Переконайтеся, що вони не з'їжджають, не вилазять за рамки і розташовані приблизно на одному рівні по відношенню один до одного.
5. Перевірте, що між блоками відсутній порожній простір. Особливо в нижній частині. Інакше відвідувачі вирішать, що сторінка закінчилася, і прокручувати її далі немає сенсу.
6. Переконайтеся, що кнопки і блоки мають оптимальний розмір.
7. Перевірте кількість елементів с анімацією. Від неї рекомендується відмовитися (або використовувати її по мінімуму).
8. Переконайтеся, що вся важлива інформація знаходиться у верхньому лівому кутку. Згідно зі статистикою саме туди найчастіше дивляться користувачі.

Аналіз юзабіліті веб-ресурсу по навігаційним інструментам і пошуку

Чек лист по оцінці юзабіліті кнопок і лінків:

1. Якщо навести курсор на активний елемент, він зміниться на «руку».
2. Кожна кнопка клікабельна, має зрозумілий опис.
3. Кнопки скасування дії знаходяться на відстані від кнопок, що підтверджують дію (щоб виключити випадкове натискання).
4. Користувач повинен розуміти, куди веде конкретне посилання (за рахунок його анкору або тексту поруч з ним).
5. Посилання повинні мати оптимальну довжину і стандартний зовнішній вигляд (синій колір, після кліка – змінюється на фіолетовий).

Чек-лист з перевірки юзабіліті веб-ресурсу по навігації:

1. Меню доступно з будь-якої сторінки. І розташоване воно завжди в одному місці.
2. У мобільній версії сайту меню приховане, і з'являється при натисканні на спеціальну іконку.
3. На сайті є «хлібні крихти», за якими користувачі зрозуміють, де знаходяться. І при необхідності зможуть повернутися на попередні рівні.
4. Сторінки «Умови оплати», «Умови доставки», «Контакти» легко доступні.
5. Пункти меню лаконічні і починаються з великої літери.
6. За назвою заголовка H1 відвідувачі повинні зрозуміти, про що ця сторінка.
7. Внутрішня перелінковка продумана грамотно, без тупиків. Для цього на кожній сторінці повинно бути мінімум 2-3 посилання, що ведуть на інші товари, розділи, статті.

Чек-лист з перевірки юзабіліті форми пошуку:

1. Пошукове поле всього одне. І розміщено воно в правому верхньому куті.
2. При натисканні ЛКМ, поле стає активним. А всередині нього відображається курсор.
3. Пошуком зручно користуватися (він починається при натисканні спеціальної іконки або кнопки Enter; запити з помилками виправляються автоматом і т.п.).
4. При введенні перших букв відображається перелік релевантних запитів.
5. Показується повна інформація про результати (кількість сторінок і т.п.).
6. При відсутності результатів пошуку відвідувачеві пропонуються альтернативні рішення (ввести інший запит і т.п.).
7. На сайті є розширений пошук (якщо він потрібен).

Чек-лист для перевірки юзабіліті текстового контенту

1. Текст розділений на абзаци, має підзаголовки, маркіровані або нумеровані списки. Загалом, легко читається. Окремим плюсом буде наявність зображень і таблиць.
2. Колір шрифту не зливається з фоном.
3. Текст написаний не заради SEO, а для людей. Містить максимум корисної інформації.
4. Числа в тексті пишуться цифрами. А надто великі – розділяються пробілами для кращого сприйняття (наприклад, 1 200 500).
5. Заголовки лаконічні, зрозумілі, передають суть сторінки.
6. Якщо в блозі публікується різноманітний контент, його треба розділяти по темам.
7. Після тексту йде блок з іншими статтями, щоб зацікавити користувачів залишитися на сайті.
8. У тексті проставлені лінки на інші статті або товарні картки, категорії, підкатегорії.
9. Для всіх сторінок застосовується однаковий шрифт (в ідеалі 12-16 пікселів).
10. Шрифт зручно читається при будь-якому масштабі сторінки.

Чек-лист з перевірки юзабіліті зображень і відеороликів:

1. Використовуються тільки якісні картинки.
2. Фото підбираються під вміст сторінки і несуть певне смислове навантаження.
3. Зображення повинні бути однаковими (за розміром, фону, ракурсу).
4. Фото можна дивитися в повній роздільній здатності (при необхідності).
5. Відеороликами на сайті можна управляти на свій розсуд: включати, ставити на паузу, вимикати звук.

Аналіз юзабіліті засобів зворотного зв'язку та комунікації з покупцями

1. Контактні дані вказуються в текстовій формі, а не у вигляді зображення (щоб їх можна було скопіювати при необхідності).
2. На сторінці «Контакти» дозволено копіювати інформацію (тобто відсутній захист від копіювання).
3. Контактні дані розміщуються в шапці і підвалі (щоб вони були видні на будь-якій сторінці).
4. Обов'язково є засоби для швидкого зв'язку (online-консультант, форма зворотнього дзвінка, месенджери).

Також треба переконатися, що на сторінці «Контакти» є:

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

Юзабіліті форми зворотного зв'язку

1. Форма знаходиться в зручному місці на сторінці «Контакти».
2. Для відправки повідомлення не треба реєструватися – достатньо вказати пошту або номер телефону, куди прийде відповідь. Якщо користувач випадково закриє форму – текст повинен зберігатися.
3. На пошту/телефон приходять оповіщення про відповідь користувача.

Online-консультант

1. Іконка чату добре помітна, але при цьому не закриває основний контент.
2. Відправляти повідомлення можна в будь-який час доби (користувач бачить, в мережі консультант чи ні).
3. Якщо консультанта немає в мережі, користувачеві пропонується залишити свої дані для зв'язку з ним в робочий час.
4. В онлайн-чаті відображається реальне фото співробітника магазина.

Коментування

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

Аналіз юзабіліті товарних категорій онлайн-магазину

1. На сторінці відображається не більше 15-20 товарів.
2. У відвідувача є можливість вибрати кількість товарів, які будуть відображатися в списку.
3. Рекомендується наявність окремих розділів з популярними/новими моделями.
4. Товар повинен містити фото, назву, ціну, кнопку «Замовити» і іконку розпродажі, якщо така є.

Перевірка юзабіліті фільтрів

1. Відвідувач може вибирати різні параметри фільтрації, а тільки потім дивитися результат.
2. Кнопка «Показати» або «Застосувати» добре помітна.
3. Взаємозалежні фільтри синхронізуються досить швидко. І без перезавантаження сторінки.
4. Фільтри, за якими немає результатів, неактивні (щоб виключити нульовий результат).
5. Користувач бачить кількість товарів, що підходять під вибрані фільтри.
6. URL сторінки динамічно змінюється при виборі фільтрів.
7. Обов'язково є кнопка «Відмінити все» (щоб відобразити стандартний перелік товарів).

Коректність сортування

1. Популярні товари відображаються першим у списку, відсутні – останніми.
2. Користувач може створювати індивідуальне сортування (від дешевих до дорогих, новинки і т.п.).
3. Відвідувач повинен бачити, яке сортування застосовується в даний момент.

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

Перевірка юзабіліті реєстраційних форм та кошику

Чек-лист з перевірки зручності форми замовлення:

1. Кількість обов'язкових для заповнення полів має бути мінімальною (і всі вони розміщуються в одну колонку).
2. Обов'язкові для заповнення поля повинні виділятися на фоні інших.
3. У полі для заповнення паролю має відображатися кількість введених символів.
4. Заповнення форми повинне бути зручним (переходити на інші поля можна курсором або клавішами, заповнені рядки візуально відрізняються від незаповнених).
5. Всі пункти детально описані, при необхідності є підказки.
6. Обов'язково перевіряється введена користувачем інформація. При неправильному заповненні якогось поля виводиться повідомлення, де і яка помилка допущена.
7. При наявності помилок введені в інших полях дані не видаляються.
8. До відправки форми користувач має можливість редагувати будь-яке поле.

Юзабіліті реєстраційної форми

1. Користувач повинен розуміти, які плюси дає реєстрація на сайті.
2. Ідеально, якщо замість логіна буде автоматично «запам’ятовуватися» e-mail користувача.
3. Обов'язково повинна бути можливість авторизації через популярні соціальні мережі.
4. Відмова від поштової розсилки здійснюється за пару кліків.
5. Можна автоматично пройти реєстрацію при оформленні покупки (щоб не вводити однакові дані 2 рази).
6. Після реєстрації та оформлення покупки на e-mail приходить відповідний лист.

Оцінка юзабіліті кошику

1. Кошик має добре помітну іконку і знаходиться в звичному для всіх місці.
2. При додаванні продукції в кошик – він змінюється, з'являється цифра, що відображає кількість доданих до нього товарів.
3. На сторінці «Кошик» немає ніякої зайвої інформації.
4. Показується вся необхідна інформація про продукцію: найменування, фотографії, опис, кількість одиниць, ціна і підсумкова вартість до оплати.
5. Назви кожної моделі клікабельні. Клієнт може прямо з кошика відкрити будь-яку товарну картку.
6. Користувач може змінювати кількість товарів прямо в кошику, а не додаючи кожен з них поштучно.
7. Відвідувачу надається можливість додати або видалити товар. Підсумкова вартість перераховується без перезавантаження сторінки.
8. Після оформлення покупки кошик очищається.

Підсумки

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

Публікація була пізнавальною? Тоді поділіться нею в соціальних мережах і додавайтеся в наш Telegram канал. Нагадаємо, що замовити дешевий хостинг ви можете у хостинг-компанії CityHost. З технічних питань звертайтесь до онлайн чату або по телефону ☎️ 0 800 219 220.

Сподобалася стаття? Розкажіть про неї друзям: