Юзабіліті сайту: 10 принципів оптимізації

Юзабіліті сайту: 10 принципів оптимізації

Юзабіліті (англ. usability) сайту – це зручність та простота використання сайту. У нашому світі співрозмовником клієнтів часто стає сайт, а слова перетворюються на дії на сторінці. Діалог виникає при кожному кліку, але буває і так, що сайт не йде на контакт і впритул не бачить дії користувачів, наприклад, реєстрацію або згоду на розсилку. Так він, користувач, сидить у ступорі і знати не знає: підписався він на щотижневі листи чи ні…

Наша стаття про те, як не допустити фрустрації клієнта та створити йому комфортні умови для покупок на вашому сайті.

Що таке юзабіліті сайту?

Юзабіліті — здатність вибудовувати діалог із клієнтами так, щоб вони відчували зв’язок та робили цільові дії, навіть якщо ви за тисячі кілометрів.

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

Не плутайте юзабіліті із дизайном. Юзабіліті – про сценарії використання сайту та логіку розташування елементів; не про стиль та естетику, а про функціонал, зрозумілість та зручність.

Навіщо потрібно оптимізувати юзабіліті?

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

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

Основні фактори, які прямо вказують, що настав час щось робити з юзабіліті:

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

Принципи юзабіліті сайту

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

Розуміння статусу системи

Дайте користувачеві зрозуміти, що система сприймає його дії на сайті. Це реакцію кожне дію користувача: виведення помилки на екран комп’ютера чи смартфона, зелена галочка чи фраза про успішно минулої реєстрації тощо. Зворотній зв’язок має бути — так людина знатиме, чи рухається вона у правильному напрямку, чи ні, чи правильно вводить дані, скільки їй залишилося чекати на завантаження. Будь-який фідбек від сайту створює діалог та демонструє працездатність системи загалом.

Подібність до реального світу

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

Контроль та свобода дій

Функція скасування будь-якої дії на сайті як кнопка 1 поверху в ліфті – вона необхідна. Найчастіше на будь-яких сайтах користувачі роблять саме скасування своїх кроків. Так дозвольте їм це робити і не ховайте клікабельне посилання, кнопку або хрестик – цей трюк змусить користувача залишити сайт і ніколи не повернутися, замість змиритися з безвихіддю і придбати товар. Крім функції скасування, підключіть функцію дублювання дії.

Стандарти та послідовність

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

Інтуїтивно ясна система краще в реалізації і простіше у створенні вам не потрібно нічого вигадувати. Дотримуйтесь вигляду категорій, розділів і підрозділів, колір кнопок, розташування товарів та іншого – робіть сайт в єдиному стилі.

Упередження помилок

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

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

Наочність

Не забувайте про простоту елементів: дозвольте користувачам розслабитись! Нехай вони інтуїтивно гуляють сайтом, а не додумують сенс позначень. Просте схематичне зображення краще складного і хитромудрого – не плутайте користувача, навіть якщо ви хочете створити щось дуже гарне; краще говорити прямо та однозначно.

Гнучкість та ефективність

Машинальні дії у всіх різні: одні звикли закривати спливаючі вікна натисканням на хрестик у правому верхньому кутку, а інші – на кнопку «Закрити» у правому нижньому. Дайте користувачам усі варіанти здійснення дій на сайті.

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

Естетика та простота

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

Розгляньте як варіант створення лендинг під особливий продукт або окрему цільову дію. На посадочних сторінках правило мінімалізму «менше означає більше» дотримується як ніде.

Розуміння проблем та вирішення

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

Довідки та документи

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

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

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

Аналіз даних перед юзабіліті-тестуванням

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

  • Статистика. Зберіть усі можливі дані щодо роботи вашого сайту за допомогою сервісів, наприклад Google Analytics та Яндекс.Метрика. Сервіси покажуть поведінку користувачів на сайті та відвідуваність: джерела отримання трафіку, теплові карти, глибину перегляду сторінок тощо.
  • Відгуки. Найлогічніший і найчесніший спосіб визначити проблемні місця — запитати. Створіть загальні прості опитувальники на сайті, в соцмережах, розсилках.
  • Експертна думка. Можна звернутися до компанії, яка займається юзабіліті-тестуванням: експерти складають фокус-групи та роздають їм завдання з певними діями на сайті, а потім аналізують отримані результати.

Інструменти для юзабіліті-тестування

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

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

Google Analytics та Яндекс.Метрика

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

Google Analytics та Яндекс.Метрика показують карту скролінгу – дають вам подивитися на ваш сайт очима користувачів. Так ви зрозумієте, які банери взагалі не помітні, які матеріали та які формати більше приваблюють.

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

Hotjar

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

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

UsabilityHub

Сервіс тестує сайти так само, як і попередні програми: теплові карти, кліки, карта скролінгу та інше, але у нього є свої фішки:

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

OptimalWorkshop

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

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