19 головних проблем у юзабіліті сайту: як виправити та зробити сайт кращим
Юзабіліті сайту – це показник логічності, зручності, очевидності та швидкості використання сайту. При користуванні сайтом з хорошим юзабіліті ми знаходимо потрібну інформацію без проблем, швидко здійснюємо потрібні дії та добре орієнтуємося в контенті як всього сайту, так і окремих сторінок.
Чим краще юзабіліті сайту – тим більш задоволений відвідувач, тим більше часу він буде на сайті, тим вірогідніше він здійснить потрібні вам дії (наприклад, покупки).
Створити сайт із високим юзабіліті – означає передбачати поведінку користувача та звести до мінімуму дратівливі фактори. Для цього вам потрібно продумати структуру і навігацію вашого сайту, а дизайн робити послідовним і гармонійним.
Втім, у юзабіліті є найпоширеніші проблеми. Вони часто повторюються, сильно знижують комфорт користувача, але їх легко виправити. У цій статті ми розповімо про ці проблеми, а також додатково розповімо, як самотужки покращити юзабіліті за допомогою юзабіліті-тесту.
Перевантаженість текстом
Можливо, ви відчували натхнення, коли наповнювали сайт текстовим контентом. Можливо, ви не зовсім розуміли, як скоротити свої тексти на сайті. Але якщо тексту буде багато – користувач не пробачить це вам.
Вам потрібно залишати у тексті найважливіше. Вибираючи між додаванням у текст характеру відповідно до інтонації бренду (tone of voice) з одного боку та лаконічністю та зрозумілістю з іншого – завжди вибирайте простоту.
Надмірний дизайн
Чим менше ви використовуєте елементів оформлення, тим простіше сприймати контент на сторінках. – тим краще юзабіліті сайту. Вам потрібно вибрати гармонійну палітру з обмеженою кількістю кольорів і створити набір максимум з двох шрифтів.
Поєднання різних розмірів двох шрифтів (а краще взагалі одного) вирішить всі завдання на вашому сайті. А чергування кольорів у блоках зробить дизайн цікавим не на шкоду юзабіліті вашого сайту.
Заплутане вивчення
Вам потрібно робити сайт таким, щоб для його вивчення користувачу не було потрібно надмірно занурюватись у текст і роздивлятись зображення. Тобто щоб для розуміння змісту певного блоку сторінки вистачило одного погляду.
Для цього вам потрібно зробити заголовки змістовними (бажано не виходити за межі 35-75 символів). Базовий текст при розміщенні його на всю ширину сторінки повинен займати не більше 2 рядків. Текст карток, іконок або окремих елементів повинен розміщуватися не більше ніж у 3-4 рядки. Заголовки та візуальний контент повинні виділятися та бути опорними точками у вивченні сторінки, а елементи взаємодії (кнопки та посилання) – помітними одразу.
Унікальний дизайн
Привабливий та цікавий дизайн сайту важливий. Він допомагає запам'ятатися користувачеві та виділитися серед конкурентів. Але дизайн насамперед вирішує завдання. Функція (корисність та зручність використання) завжди важливіша за форму (естетичного наповнення).
Тому робіть дизайн таким, щоб він повторював досвід користувача на інших сайтах. Не встановлюйте, наприклад, вирівнювання заголовків за правим краєм або не робіть кнопки круглими.
Довге завантаження сайту
Ваш користувач не може чекати. Якщо він 3 секунди не бачить і натяку на інтерфейс сайту – шанси втратити відвідувача стрімко зростають. Коли вибираєте контент, обов'язково оптимізуйте його: зменшуйте розмір зображень, використовуйте сучасні формати стиснення відео. Якщо сторінка дуже велика – можливо, варто логічно розділити контент на кілька сторінок
Пам'ятайте, що ваш сайт відкривають не тільки користувачі зі швидким інтернетом. Подбайте і про тих, хто завантажує сайт із мобільного в умовах нестабільного сигналу. Швидкість роботи сайту – основа юзабіліті.
Занадто багато анімацій
Ви можете додати динаміку у ваш дизайн та проанімувати всю сторінку. Але якщо ви так зробите – відвідувач гірше концентруватиметься на інформації.
Користувач не обов'язково вивчатиме сторінку вдумливо і послідовно. Можливо, він захоче швидко її проскролити. Довгі повноекранні анімації не дадуть відвідувачеві отримати інформацію швидко.
Низька продуктивність сайту
Ваша сторінка повинна не тільки завантажуватись швидко, але й бездоганно працювати. Користувач не повинен помітити підгальмовування. На швидкість роботи сторінок сайту може впливати якість коду сайту, наявність складних анімацій, велика кількість відео як контенту, особливості хостингу та його пропускна спроможність.
Перевіряйте, як ваш сайт працює одразу на кількох пристроях (наприклад, на ноутбуці з поширеними характеристиками та мобільних 2-3 річної давності випуску) та одразу в кількох браузерах (наприклад, у Safari, Chrome, Edge). Сайт має працювати добре усюди.
Неадаптивний дизайн
Завжди оцінюйте юзабіліті й мобільної версії сайту. У мобільній версії сайту звертайте увагу на доступність до перегляду тексту та змісту фотографій на невеликому екрані смартфона. Елементи дизайну потрібно переробити відповідно до особливостей вертикального формату екрана.
Також ви можете використовувати спеціальні для мобільних пристроїв блоки або не використовувати в мобільній версії сайту блоки, які є в десктопній версії.
Недостатня навігація на сайті
Завжди давайте користувачеві можливість перезавантажити свій досвід. Можливо, клієнт не знає, на що звернути увагу. Або напрям вивчення сайту став йому нецікавим. Або він хоче отримати інформацію, яку не побачив під час природного вивчення сайту. Шляхів багато – спосіб покращення юзабіліті сайту один: створіть функціональні хедери (шапку сайту) та футер (підвал сайту).
У хедер бажано розміщувати 4-7 елементів меню. Так користувач не заплутається в пропозиціях до подальшого дослідження сайту. Списки, що випадають, використовуйте обмежено (щонайбільш 2 списки). Футер може вмістити таку кількість посилань, скільки вам потрібно. Головне робіть його корисним.
Відсутність сервісних сторінок
Додаючи сервісні сторінки (про нас, доставка, гарантія, оплата, повернення, команда, відгуки тощо), ви досягаєте одразу двох цілей. Є корисними, оскільки користувач може отримати максимум інформації про взаємодію з вами. Показуєте свою надійність, оскільки клієнт точно знає, хто ви і чому з вами можна мати справу.
Всі ці сторінки потрібно обов'язково розташувати у футері (підвалі) вашого сайту. І в залежності від важливості для користувача у хедері вашого сайту.
Некорисний контент
Додайте на ваш сайт лише корисну інформацію. Вам потрібно відштовхуватися відразу від трьох сценаріїв під час роботи над контентом вашого сайту: користувач вперше потрапляє до вас на сайт і йому потрібно дізнатися більше про вас, користувач час від часу відвідує ваш сайт, користувач часто користується вашим сайтом. У контенті вам потрібно передбачити всі ці сценарії: новачки мають дізнатися про все потрібне швидко, повторні відвідувачі – швидко знаходити потрібне.
Зверніть особливу увагу на головну сторінку вашого сайту. У ній має бути продумана система посилань, і вона повинна послідовно розповідати про вас загалом та про ваші переваги.
Посилання у нікуди
Завжди перевіряйте, чи посилання працюють, – користувач повинен потрапляти на вибрану сторінку. Обов'язково передбачайте сторінку 404 помилки, яка з'являється за наявності проблем на сервері. Із цієї сторінки користувач має розуміти, що проблеми тимчасові та їх скоро усунуть.
Якщо деякі сторінки ще в розробці, ви можете створити спеціальну сторінку, яка повідомляє про те, що ця сторінка скоро з'явиться.
Непостійний дизайн
Завжди оформлюйте однаково схожі елементи. Наприклад, якщо ви вирішили використовувати кнопки жовтого кольору, потрібно робити кнопки такого ж кольору на всіх сторінках. Тоді користувач одразу розпізнає структуру та вивчає сторінки швидше.
Ці ж правила поширюються на інші аспекти сайту: структуру перших екранів, побудову форм, колір посилань, варіанти відкриття спливаючих вікон (у повноекранному режимі чи у невеликому вікні).
Нав'язливі спливаючі вікна
Щоразу, розміщуючи додаткові рекламні повідомлення, намагайтесь відчути себе на місці користувача. А чи цікаво це відвідувачеві, а чи не відволікатиме банер від вивчення сайту, а чи не надто багато вікон під час однієї сесії відвідування? Відчули дискомфорт від надмірності інформації – зменшуйте кількість банерів, інакше постраждає юзабіліті сайту.
Якщо ви вирішили використати банери, робіть їх лаконічними текстово та привабливими візуально. Текст на кнопках повинен ємно вказувати на дію (наприклад, "купити по акції"), а елементи закриття вікна повинні бути зручними для кліку (тобто достатньо великими).
Перевантажені форми
Під час оформлення покупок, підписки на новини або бронювання послуг вимагайте від користувача мінімум дій. Ми розуміємо, що збирати інформацію про аудиторію важливо, але коли ви прохаєте розповісти про себе багато, ви тим самим відштовхуєте користувача.
Використовуйте обов'язкові елементи з вибором опцій у формах лише тоді, коли у цьому є значна користь для відвідувача. Серед таких елементів чек-бокси і списки, що випадають.
Оманливі дії
Будьте етичними з вашими користувачами. Ніколи не розміщуйте посилання, які ведуть до несподіваних у контексті дій.
Наприклад, ви пропонуєте дізнатися більше про якусь послугу за посиланням. У такому разі вам не можна замість переходу на сторінку з поясненнями відкривати форму, в якій запропонуйте звернутися до вашої підтримки.
Відсутність допомоги від підтримки
Користувача не потрібно надмірно підштовхувати до спілкування або прямого зв'язку з вами, але така опція у нього завжди має бути. Додайте в хедер та футер сайту ваші контактні дані для швидкого зв'язку.
Зверніть увагу на використання віджетів чату на вашому сайті. Вони дозволяють як спілкуватись безпосередньо на сайті, так і написати вам у чати месенджерів або швидко перейти до дзвінка.
Глухий кут на шляху користувача
Шлях користувача – це передбачувані сценарії поведінки відвідувача на вашому сайті. Як він переходить із однієї сторінки на іншу. Що йому важливо дізнатись і в якій послідовності. Яка кількість кліків потрібна для здійснення потрібної вам цільової дії (наприклад, надсилання заявки щодо надання послуг). Безперервність шляху користувача – основа юзабіліті.
Не позбавляйте сторінки дій повністю. Пропонуйте альтернативні шляхи дослідження сайту, демонструючи, наприклад, рекламні банери, переходи на інші пов'язані сторінки, сервісні сторінки з описом умов доставки, оплати, повернення, сторінки “про нас”. Також пропонуйте пов'язані товари та послуги у спеціальному меню наприкінці сторінки.
Неінформативні сторінки товару
Якщо вашому клієнту не вистачає інформації на сторінці товару, він може залишити сайт або додатково зв'язатися з вами. Друге він зробить лише якщо альтернатив немає. Щоб не втрачати клієнтів, робіть додаткові описи у вкладках і прикладайте технічні специфікації у файлах.
Також не забувайте про хлібні крихти – ієрархічну структуру, яка наочно показує категорії товарів. Хлібні крихти допомагають користувачеві краще зрозуміти, до якої групи товарів входить кожен окремий товар.
Як перевірити юзабіліті – тестування
Малоймовірно, що у вас є великий відділ маркетингу, можливість замовити юзабіліті-аудит або довго і ретельно перевіряти сайт на відповідність критеріям юзабіліті. Але ви своїми невеликими силами можете покращити сайт за допомогою тестування. Для цього вам потрібно:
- Створити декілька груп користувачів відповідно до сегментації вашої аудиторії. У групах має бути 3-5 осіб.
- Попросити їх вивчити сайт, а про враження повідомити у невеликих опитувальниках: сподобалося, не сподобалося, не вистачає, зайве.
- Також оцінити зручність та зрозумілість вчинення важливих дій та отримання потрібної інформації за п'ятибальною шкалою та вказати на недоліки цих дій.
Вибирайте як основу для тестування мобільну версію сайту, а десктопну версію використовуйте як додаткову.
Вже в процесі використання відвідувачами сайту ви можете покращувати юзабіліті на основі теплових мап. Вони показують, на яких ділянках сторінок користувачі фіксують свою увагу і куди припадає більшість кліків.
Юзабіліті сайтів на Weblium
З Weblium ви менше думаєте про дрібниці, які розчаровують користувача. Код сайту оптимізовано для максимальної швидкодії, а хостинг Google Cloud забезпечує максимальну швидкість завантаження. Дизайн сайтів буде послідовним завдяки глобальним стилям, які налаштовуються (кольори, шрифти і кнопки сайту). Всі елементи сайту поєднуються між собою. Після створення десктопної версії, ви автоматично отримуєте мобільну версію без зайвих дій. Вона працює і виглядає так само, як і повна версія сайту.