Чек-лист з юзабіліті інтернет-магазину

У дослівному перекладі слово "юзабіліті" означає - "зручність у використанні", "можливість бути використаним". По відношенню до IT-сфери визначення «юзабіліті» можна інтерпретувати як розробку загальної концепції зручності інтерфейсів, простоту та логічність у розташуванні їх основних елементів.

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

• завантаження сайту швидке (0-1 с);
• логотип розміщений на кожній сторінці в тому самому місці. Поруч - короткий, чітко описує цілі та завдання компанії слоган;
• у верхній частині кожної сторінки розташований номер телефону, який стає помітним у перші 3 секунди;
• посилання в текстовому контенті сайту однаково виділені та клікабельні, ведуть на коректні сторінки;
• функція "Пошук" - у верхній частині кожної сторінки, він помітний у перші 3 с;
• на всіх сторінках колір шрифту та колір фону – контрастні, а вирівнювання тексту здійснено за загальним принципом;
• міжрядкова відстань менша за відстань між абзацами;
• тексти відображаються коректно за будь-якого масштабування сайту;
• всі елементи та посилання, що ведуть на форму зворотного зв'язку та будь-який інший спосіб зв'язатися з менеджерами, повинні забезпечуватись текстом, що закликає до дії: «Зв'яжіться з нами зараз», «Задайте нам питання» та ін;
• на кожній сторінці має бути комерційна пропозиція та можливість швидкого зв'язку з представниками компанії. Користувач не повинен шукати контактів для зв'язку, вони завжди повинні бути у нього на увазі. Це підвищить відгук аудиторії, отже, і кількість продажів;
• є сторінка з 404 помилкою, виконана в загальному дизайні магазину, звідси можна перейти на головну сторінку;
• у разі мінімального розширення сайту (1024×768) при перегляді у популярних браузерах (Internet Explorer, Mozilla Firefox, Opera) горизонтальна прокручування у нижній частині сторінок відсутня;
• сайт має фавікон;
• при наведенні курсору на будь-яке посилання/клікабельний елемент, він має виглядати у формі руки (cursor hand).

• верстка крос-браузерна;
• код сторінок валідний (відсутні непотрібні «закоменчені» елементи);
• скрипти розташовані у нижній частині сторінок, внесені окремими файлами.

• на головній сторінці представлений перелік основних послуг/продуктів компанії;
• на головній є УТП у вигляді слогану, банера або заклику до дії;
• пункти меню з описом вартості послуг/продуктів, способів оплати та доставки повинні легко знаходитись користувачами та ставати помітними у перші 2-3 з перебування на сторінці;
• на головній не повинно бути pop-up вікон та звукових ефектів, що активізуються без дій користувачів;
• на головній сторінці має бути контактна інформація: email-адреса, номери телефонів (мобільні, міські), форма зворотного зв'язку, скайп, посилання, що ведуть на сторінки компанії в соціальних мережах.

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

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

• поряд із кнопкою «Зареєструватися» користувачеві виводиться обґрунтування переваг реєстрації;
• зареєструватися можна як мінімум двома способами: більш коротким (тільки ім'я та email) та більш об'ємним, з великою кількістю полів;
• у разі помилкового введення даних поле підсвічується іншим кольором (зазвичай червоним), а форма не перезавантажується, тому вводити дані заново не треба;
• під час реєстрації виводиться текст із пропозицією підписатися на email-розсилку.

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

• основне меню магазину містить 10 пунктів;
• розділи, сформовані за одним принципом, оформлені однаково;
• у меню є посилання на сторінки "Новинки", "ТОП-продажів", "Знижки" та ін;
• на кожній сторінці каталогу представлені товари, а також пропозиція і можливість їх купити;
• на сторінці товарного каталогу блок із товаром містить такий мінімальний набір: назва, опис, зображення та ціна товару, логотипи акцій, знижок, СТА-кнопка;
• у розділах, підрозділах є посилання, що ведуть до популярних розділів магазину.

• блок/кнопка кошика є на кожній сторінці в однаковому місці (як правило – верхній правий кут);
• блок «Кошик» є помітним елементом сторінки, дизайн виконаний у яскравих кольорах;
• після того, як товар додається до кошика, поруч із кнопкою «Купити»/«Додати до кошика» (інший варіант СТА) виводиться текст-повідомлення «Товар доданий до кошика»;
• після того, як товар доданий до кошика, блок «Кошик» зовні видозмінюється – виводиться інформація про те, що у кошику N товарів;
• якщо кнопка «Купити»/«Додати в кошик» натискається повторно, виводиться попереджувальний текст про те, що такий товар вже є в кошику, а також пропозиція закінчити оформлення замовлення або вибрати ще один такий товар;
• при наведенні курсору на блок «Кошик» має виводитися текст, що описує зміст кошика та ціни на додані товари;
• на сторінці кошика немає новин, вітрини інших товарів, текстової та банерної реклами, анімаційних елементів та іншої відволікаючої інформації;
• сторінка кошика містить інформацію про декілька способів оплати та доставки, про способи зв'язку з менеджером або представником компанії у разі виникнення питань;
• способів оформити замовлення пропонується кілька: звичайним способом (після авторизації на сайті), в один клік після реєстрації;
• процес оформлення замовлення не припиняється у разі, якщо покупець не зареєстрований у магазині;
• якщо покупець не зареєстрований, від нього потрібно заповнити лише поле «Ім'я» та «Email»;
• поряд із товаром є пропозиції знизити його вартість (знижки, промокод, купон, бонусна система та ін.);
• після того, як процес купівлі завершено, покупцеві пропонується придбати додаткові товари (upsell).

• є фізична адреса магазину;
• є карта з чітко зазначеним місцезнаходженням компанії з описом того, як краще дістатися;
• є не одна робоча email-адреса;
• вказано час роботи магазину та служби тех. підтримки.

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