Поширені помилки юзабіліті сайту
У цій статті мова піде про те, які “фішки” можна впровадити на сайт.
Розглянемо, що і як потрібно робити для перевірки юзабіліті сайту, що потрібно прописувати і в якому форматі.
Помилки у створенні дизайну веб-сайту
Юзабіліті елементів
Перше, що заслуговує на увагу при виборі дизайну сайту – хороше юзабіліті всіх його елементів.
Смислові блоки мають бути візуально розділені.
Відступи між елементами мають бути оптимальними, не надто маленькими, але й не надто великими. Занадто маленькі відступи призведуть до нашарування смислових блоків один на одного, вони губитимуться і їх не буде видно.
Ці несуттєві, на перший погляд, деталі, сильно впливають на користувачів.
Ще одна поширена помилка на більшості сайтів – нашарування фотографій на зображення. Ця помилка трапляється найчастіше, тому що в більшості випадків не враховується факт того, що дисплеї бувають різних розмірів.
Сторінка може розтягнутися або стиснутися до розміру будь-якого дисплея, якщо під час створення сайту цей момент не було враховано, фотографії можуть нашаруватися як завгодно.
Залежно від розміру екрана нашаруватися на якийсь із елементів може і білий текст на білому тлі, тому що тільки так користувач зможе його прочитати.
Грамотним рішенням цієї проблеми буде проста підкладка.
Стилі
Друге, на що слід звернути увагу – кількість стилів. Різні стилі допомагають у виділенні тексту шрифтами та фільтрами, але це призводить до навантаження всієї сторінки, бо всі ці стилі потрібно довантажувати.
Спростить процес використання різної насиченості – нормального і жирного шрифтів. Для виділення контенту цього буде цілком достатньо.
Кольоровий блок
Ще одна поширена помилка – вузький кольоровий блок. Такий блок належить до попередніх смислових блоків і негативно виділяється. Користувач не розуміє, до чого належить цей блок.
Унікальна торговельна пропозиція (УТП)
УТП занадто великого розміру, складні для прочитання. Особливо важко читається довгий текст, вирівняний по центру. Оптимальними будуть УТП розміром у 100-150 символів. Краще, звісно, вкластися в 100, оскільки 100 – це ідеальний розмір description на мобільному пристрої. Коли текст меншого розміру, читати його стає легше.
Крім того, як і у випадку з фотографіями, текст не повинен нашаровуватися на об’єкт зображення. Таке нашарування дратує користувачів. Зображення мають бути відокремлені від тексту, щоб за будь-якої роздільної здатності подібного не відбувалося.
Візуальна ієрархія
Розміри заголовків верхніх рівнів мають бути більшими, ніж нижніх. За аналогією мають бути витримані й усі інші внутрішньоблокові ієрархії. Заголовки рівня H3 мають бути меншими за заголовки рівня H2.
Смислові блоки не повинні розпадатися на дві частини.
Заголовки не мають бути занадто довгими і занадто великими. Під час складання заголовків слід пам’ятати SEO-правило: 60 символів – психологічна межа для будь-якого заголовка. Якщо заголовок виходить довшим – у ньому багато зайвих слів, його потрібно скоротити.
Обведення кнопок
Сьогодні це вже нікого не дивує і мало де зустрічається. Найкраще використовувати класичні кнопки. Найоптимальнішим варіантом будуть кнопки, що змінюють свій колір під час наведення курсору.
Кількість кольорів
Оптимально буде використовувати в дизайні сайту два кольори. Чорний і ваш фірмовий. Білий до уваги не береться. Три кольори – це вже багато, а чотири – перебір.
Меню
Меню має бути зроблено грамотно, у ньому не повинно бути нічого зайвого. Меню має розташовуватися таким чином, щоб елементи, які входять до його складу, були розташовані логічно за потрібними блоками, а зайві були відсутні.
Дизайн статей
Статті для сайту потрібно створювати на основі реальної роботи алгоритмів пошукових систем, таких як Google та інших, тобто на основі роботи з конкурентами. Текст статті має бути грамотно прописаний, кожне клікабельне посилання має бути підсвічене. Глави слід розбивати на блоки, а весь текст має містити списки, короткі абзаци, картинки.
Помилки у навігації сайту
Занадто велике меню
Наступна в списку помилок юзабіліті – помилки в навігації. Правильна навігація передбачає логічні переходи по меню, через пошук або інші елементи. Якщо меню велике, у ньому багато варіантів і списків, користуватися ним буде складно. Для сайтів-довгожителів, до яких користувачі вже звикли, таке можна пробачити, але для нових це буде погано.
Непродумане меню
Якщо меню було зроблено неправильно, то користувачеві буде незручно ним користуватися. Наприклад, з якоїсь категорії, в яку користувач перейшов, він не може повернутися назад. У користувача має бути можливість безпроблемного переходу на будь-який елемент. Если такой возможности нет, это говорит о том, что иерархия сломана, и, фактически, эти страницы тоже должны ранжироваться. Навігація рівнів і підрівнів має бути максимально продуманою, щоб усе мало свої місця і не виникало дублів. Щоб уникнути цього, потрібно продумувати семантичне ядро, і розташовувати все відповідно до нього у вигляді карти сайту.
Слід уникати плутанини, стежити, щоб одні й ті самі елементи не повторювалися і не перебували одночасно в кількох місцях. Елементів, які мають бути присутніми на десктопному сайті, не повинно бути в мобільній версії і навпаки.
Головне меню не повинно змінюватися в процесі переходів по сайту. Бувають ситуації, що в меню змінюється колір і навіть окремі елементи. Такого бути не повинно. Головне меню має залишатися статичним.
Ще однією помилкою стане меню, що випадає. Це дуже заважає користувачам з низки причин.
По-перше, на мобільній версії сайту меню має працювати інакше. Воно має відкриватися натисканням пальця і розгортати варіанти.
По-друге, на десктопі потрібно домогтися зручної і нормальної роботи меню, але вивірити його оптимальний розмір, оптимальну затримку вікон, що випадають, вкрай складно. Невірні розрахунки призведуть до каскаду варіантів, що випадають, і роздратування користувачів.
Велика кількість навігаційних елементів – це теж не найкраще рішення для меню, а якщо таке меню буде ще й таким, що випадає, – це буде сильно впливати на юзабіліті та відштовхувати користувачів.
Категорії на сайті мають бути прописані правильно і чітко під ключові слова. Найгіршими варіантами ключової назви категорії будуть “Послуги” або “Товари”. Для таких послуг краще створити окремий блок.
Розташувати меню потрібно зверху або збоку. Виняток робиться для сайтів, створюваних для арабських країн, оскільки там люди читають справа наліво.
Під час створення сайту орієнтуйтеся на те, за якими принципами вони робляться у вашій сфері, і дотримуйтесь їх.
"Підвал" (Footer) сайту
На кожній сторінці сайту підвал повинен залишатися однаковим
Помилки в коді
Ще одна помилка, яка може негативно позначитися на роботі сайту – не надто чистий код. До цього може призвести заміна одних елементів іншими, багато доналаштувань, додавання великої кількості плагінів.
У цій ситуації в пріоритеті будуть сайти, створені з нуля. Якщо вам потрібен сайт на WordPress – не купуйте тему, краще заплатіть веб-розробникам, щоб вони написали вам усе з нуля відповідно до вашого технічного завдання.
Переробка готових рішень буде не найкращим варіантом, адже навіть після вимкнення того, що на сайті не потрібно, ці елементи все одно залишаться в коді. Вони будуть на сторінці, завантажуватимуться на сайт, обтяжуватимуть його і не найкращим чином позначатимуться на юзабіліті. Їхній вплив може проявитися показом елемента, що веде в нікуди, поломкою кнопки, сильним завантаженням PageSpeed.
Теплова карта
Наступне, на що слід звернути увагу – теплова карта. Аналіз теплової карти має включати клікабельність елементів меню сайту. Це дасть розуміння того, на які пункти на сайті натискають користувачі, як відбувається їхня взаємодія з контентом.
Подивитися ці дані можна на будь-якій сторінці, але не всі. Наприклад, кількість разів, коли користувачі промахувалися під час натискання на кнопки, робили так звані “мертві” та “люті” кліки тощо. Така інформація буде дійсно цікавою і корисною.
Для збору такого роду інформації існують спеціальні сервіси, наприклад, Microsoft Clarity.
Висновок
На сьогоднішній день юзабіліті сайту вимагає більшої кількості статистики, ніж раніше, і фактично стає аналізом великої кількості статичних даних. Вже не достатньо просто поміняти розташування елемента, змінити кольорове рішення тощо. Юзабіліті – це складний процес, що вимагає оцінки взаємодії користувача. Якщо сайт приносить мало конверсій, з нього мало продажів – потрібно перевірити юзабіліті. Перевірте, як працює сайт на різних пристроях, чи не викликає дискомфорту в користувачів; чи всі деталі коректно відображаються на десктопній і мобільній версії сайту; аналізуйте інформацію з теплових карт, відстежуйте взаємодію кліків, збирайте “баги”.
щоб нічого не пропустити
Курси зі Створення Сайтів
