Деякі початківці переконані, що мають виконувати тільки функціональне тестування. Насправді в полі зору тестувальника повинно бути все, зокрема UI/UX-дизайн продукту. Так ви зможете ще на етапі створення макета пояснити дизайнеру і клієнту наявні проблеми, а в дечому навіть покращити взаємодію користувачів із сайтом.
Про основні підходи до тестування дизайн-макетів розповідає Олексій Дивінець, General QA в ІТ-команді NIX.
Невже це не завдання дизайнера?
Зовнішній вигляд сайту – досить суб’єктивна річ. Проте його стиль не має порушувати принципи UI-дизайну (User Interface). Йдеться не лише про інтерфейси сайтів чи застосунків, але й вигляд побутової техніки, автомобілів, інших речей та пристроїв.
Раніше діяло правило «трьох кліків»: зробити так, щоб користувач за три кліки досягнув мети. Сьогодні ж застосунки настільки розростаються, що і трьох кліків замало. Тому головне в дизайні інтерфейсів – переконатися, що шлях юзера зрозумілий йому за будь-яких умов. Це задача UI/UX-дизайнера. Та якщо такого спеціаліста немає в команді, тестувальник цілком може взяти на себе цю роль.
Для початку дізнаємося, як користувачі взаємодіють із дизайном
Не існує єдиного способу сприйняття макета. Є багато шаблонів поведінки юзерів. Ці сценарії можуть змінюватися залежно від стилю та контенту на сайті або в застосунку залежно від конкретної сторінки, на якій перебуває користувач, від його цілей, розмірів екрана девайсу юзера, наявності анімації чи відео на сторінці, особливостей сприйняття інформації окремої людини. Але орієнтуватися все-таки є на що.
Зазвичай фахівці користуються паттернізованими схемами розробки сайтів, приділяючи увагу розміщенню елементів інтерфейсу там, де найбільше сконцентрована увага користувачів. Це пов’язано з дослідженнями UI/UX-експерта Якоба Нільсена, засновника компанії Nielsen Norman Group. Він з’ясував, як люди переглядають сторінки сайтів. Виявилося, ми не читаємо сторінки по вертикалі. Замість цього швидко «скануємо» їх, шукаючи необхідні ключові слова і фрази.
Згодом на основі досліджень Нільсена сформували основні типи поведінки користувачів під час переглядання сайтів: F-патерн, Z-патерн та Діаграма Гутенберга.
- F-патерн. Рух погляду в цьому випадку переміщується за осями літери F, як на ілюстрації нижче. Цей шаблон актуальний передусім для сторінок із текстовим наповненням та монотонною сіткою з блоків (наприклад, із товарів в інтернет-магазині). Але F-патерн не працює з екранами смартфонів. Тобто він стосується лише десктопних версій застосунків. Під час тестування UI варто оцінити, наскільки легко можна охопити основну інформацію на сторінці. Для цього заголовок має бути великим і влучним, відображати суть тексту. Ключову інформацію слід подавати в перших абзацах. Інше структурувати: зі списками, розбитими на невеликі абзаци, з підзаголовками.
- Z-патерн. Тут погляд користувача рухається по екрану за осями літери Z, від точки 1 до 2, потім 3 та 4, як показано на ілюстрації нижче. При цьому максимум уваги зосереджується на перших трьох точках. Під час тестування треба переконатися, що головні елементи розміщені саме у точках 1, 2 і 3 (плюс 4). Якщо якийсь блок випадатиме з «маршруту» погляду людини, то може залишитися непоміченим.
- Діаграма Гутенберга. Цей патерн схожий на попередній, але тут поведінка користувачів складніша: вони ніби сканують поглядом сторінку, пересуваючись із пункту до пункту, звертаючи увагу на ключові слова і фрази, які виділяються на фоні решти тексту. Зона А – головна, сюди люди дивляться найчастіше. Тож переконайтеся, що тут знаходяться логотип і назва компанії чи заголовок. Далі за пріоритетом йде зона B. Тут варто розташувати контакти, форму замовлення дзвінка та інші подібні елементи. Зона C, на відміну від 3-ї точки у Z-патерні, не варта уваги, оскільки сюди мало хто дивиться. Перевірте, що тут немає дійсно важливої інформації та кнопок. Зона D є блоком ухвалення рішення або виходу. Тут можна розміщувати, наприклад, кнопку замовлення, щоб підштовхнути юзера до покупки.
Цими прикладами патерни поведінки користувачів не обмежуються. Насправді їх безліч. Але принаймні ці можуть слугувати орієнтирами та допоможуть оцінити структуру макета.
Що тестувальник перевіряє на макеті сторінки
Розташування елементів на сторінках має відповідати принципам дизайну та досвіду користувача (UX). Тобто всі елементи повинні розташовуватися таким чином, щоб люди швидко знаходити потрібну їм інформацію та взаємодіяти із сайтом без зайвих зусиль.
Основні принципи розташування елементів на сайті:
- Ієрархія. Елементи на сторінці повинні розміщуватися відповідно до значущості. Найважливіші, скажімо, головне меню, мають бути на видноті. Не надто важливі елементи, наприклад, інформацію про користувача, можна розмістити у менш видимих місцях.
- Рівномірність. Це про зручність користування вебресурсом. Наприклад, якщо важливі кнопки розташовані з одного боку, то решта елементів відповідно повинні бути розміщені з іншого боку, що візуально створюватиме баланс.
- Простота. Простий і лаконічний дизайн не заважатиме користувачам сприймати інформацію з сайту. Це стосується таких зайвих елементів, як анімація чи великі зображення.
Оцініть, що в наявному дизайні може знижувати конверсію. Найбільш поширеними помилками вважаються:
- Відсутність адаптивності. Це чи не перший фактор, який знижує конверсію. Сайт повинен коректно відображатися і працювати на екранах різного розміру та на різних пристроях (комп’ютери, смартфони, планшети тощо), забезпечуючи користувачам зручність і задоволення від використання.
- Складна навігація. Критичне порушення принципів UI/UX. Користувачу відразу мають бути зрозумілі основні розділи сайту, меню, назва компанії, контакти. Навіть найбільш креативний дизайн не повинен конфліктувати з наочністю. Якщо користувач не розумітиме, як знайти потрібний розділ чи фільтрувати товари, то ресурс не буде перетворювати відвідувачів сайту на клієнтів.
- Перенасиченість рекламою. Нерозбірливо розміщені оголошення будь-де лише відштовхують потенційних покупців. До того ж заважають користувачам зрозуміти функціонал сайту та виконувати цільові дії (вибір товару, оформлення замовлення, коментування на сторінці відгуків тощо). Крім того, наявність великої кількості банерів, модальних вікон та popup-ів впливає на ставлення до бренду або продукту.
- Автоматичне програвання рекламних банерів. Анімаційна реклама здебільшого викликає у користувачів вкрай негативну реакцію. Максимальне роздратування – це коли аудіо раптово автоматично вмикається на сторінці. Нашою природною реакцією є спроба якнайшвидше закрити подібний елемент чи встановити блокувальник реклами у браузері. Тож переконайтеся, що на сайті, з яким ви працюєте, немає анімаційної реклами або за замовчуванням вимкнено звук.
- Слабка диференціація реклами. Банери повинні біти візуально відокремленими від основного контенту на сайті та позначеними як реклама (цього вимагають інструкції Google Ads). Інакше користувач, клікаючи на оголошення, перейде на інший ресурс. А це може знизити довіру до першого. Переконайтеся, що рекламні блоки не виглядають як елементи основної навігації на сайті (тематичні розділи, сніпети статті тощо).
- Некоректне використання каруселі. В цілому юзери позитивно ставляться до каруселі, але за умови, що все працює коректно. Часто слайди змінюються надто швидко. Користувачі не встигають натиснути на банер і вимушені гортати карусель назад. Або ж запізно клікають і переходять на іншу сторінку. Слід перевірити, чи встигаєте ви прочитати все необхідне для розуміння інформації та натиснути на рекламу. В ідеалі карусель зупиняється при наведенні на неї курсором.
- Відсутність елементів-підказок. Сучасні сайти, особливо онлайн-магазини, мають розгалужену структуру з десятками розділів, підрозділів, категорій, підкатегорій. Шлях покупця до кінцевої сторінки може бути заплутаним. Тож рекомендовано виносити популярні внутрішні розділи на вищі рівні меню. Наприклад, на сторінку «Побутова техніка» додати лінки на популярні пропозиції цих товарів. Це дозволить користувачеві швидко перейти до вибору.
- Неочевидне поле пошуку. Якою б логічною не була організація меню, багатьом легше набрати запит у пошуковому полі. Подекуди на сайтах не завжди просто знайти цей елемент. Пошук може загубитися серед інших блоків або мати вигляд прихованої іконки, яка збільшується до рядка лише після натискання на неї. Краще обрати для пошуку помітний розмір та розмістити на видному місці на кожній сторінці.
- Погана стилізація клікабельних елементів. Інколи юзер не розуміє, де клікати або тапати: по всій зоні картки товару, по його назві чи зображенню або ж по кнопці «Детальніше». Людей це часто плутає. Починаються повторні натискання, зайвий час на це і на додачу роздратування. Щоб уникнути таких проблем, клікабельні елементи варто стилізувати – зробити так, аби їхній дизайн змінювався при наведенні або натисканні курсором. Допоможуть із цим CSS чи подібні технології верстки.
Як виміряти вплив UI-дизайну на конверсію
Тестування дизайну макетів не може спиратися на особисті оцінки QA або ж тільки на роботу з чек-листами, за якими фіксується наявність чи відсутність певних елементів. Необхідно використовувати інструменти, які дають змогу відстежувати поведінку юзерів і точно вимірювати конверсію.
- Системи аналітики. Тут головний – Google Analytics. Це один із найпотужніших інструментів аналізу поведінки відвідувачів. Він надає інформацію про те, як люди взаємодіють із сайтом, чи досягають цілей, де виникають проблеми. Втім, існують і аналоги, більш спеціалізовані інструменти, як-от SimpleReach. Він дозволяє відстежувати поведінку юзерів онлайн, вимірювати час на реєстрацію чи пошук чогось на сайті.
- Теплова карта. Цим терміном називають різновид графічного представлення даних за допомогою кольору. У випадку сайтів теплова карта показує, куди відвідувачі клікають найчастіше. Такі зони будуть червоними, інші – жовтими чи зеленими. Це допомагає зрозуміти, які елементи є важливими або такими, що викликають хибні кліки. Для створення теплової карти можна використати застосунки Plerdy або Hotjar.
- A/B-тестування. Його мета – за допомогою контрольних груп порівняти різні варіанти дизайну, функціоналу, контенту тощо. Наприклад, одна аудиторія взаємодіє зі старим дизайном (група A), інша – з новим (група B). У результаті можна побачити, яке рішення дає кращі показники конверсії та підвищує рівень задоволеності користувачів.
Якщо тестувальники все-таки беруться оцінювати дизайн-макет, то здебільшого покладаються на аналіз за чек-листами. Адже не завжди у проєктах вистачає бюджету та людських ресурсів для використання додаткових інструментів. Є можливість взяти більше? Радимо по максимуму розібратися в темі. Звісно, всіх тонкощів UI/UX не охопити. Проте як мінімум базово оцінити дизайн-макет здатен кожен QA.
Тестування дизайну допоможе покращити інтерфейс та підвищити показники досягнення цілей вашими користувачами. Будь-який бізнес схвально поставиться до такої ініціативи QA-команди.
Підписуйтеся на ProIT у Telegram, щоб не пропустити жодної публікації!
Редакція не несе відповідальності за інформацію, викладену у блогах. Це особиста думка автора.
