Підвищення юзабіліті веб-сайту: як зробити сайт зручним для користувачів
Зрозумів, прибрав усі розділювачі. Ось чистий текст перекладу:
Що таке юзабіліті
Зачастую під час просування сайтів — та й що там казати, навіть під час розробки — юзабіліті сайту відводять вкрай малу роль. Однак зручність ресурсу є далеко не останній фактором (особливо якщо врахувати те, що вона безпосередньо впливає на збільшення продажів). Тому я коротко викладу важливість зручності сайту, а також наведу невеликий, але змістовний чек-лист юзабіліті. Та все ж, перед тим як давати будь-які рекомендації щодо покращення ресурсу, розгляньмо, що таке юзабіліті.
Юзабіліті — це ступінь якості загальнокористувацького досвіду, набутого в результаті комунікації з пристроєм або системою, наприклад, веб-ресурсом, програмним забезпеченням чи додатком.
Іншими словами, usability сайту — це простота у використанні, зручність та корисність для відвідувачів. Це міра, яка оцінює якість використання ресурсу, його привабливість та придатність до взаємодії з користувачами.
Метою юзабіліті є досягнення максимальної зручності ресурсу. Для чого все це потрібно? Відповімо на це запитання графічно.
Як бачимо, в основі піраміди лежить зручний у використанні веб-ресурс із дружнім інтерфейсом. Наслідком цього є позитивна реакція з боку його відвідувачів, а також здійснення цільових дій: дзвінок, замовлення тощо. За інших сприятливих умов з боку компанії (швидка доставка, грамотне консультування, висока якість послуг) користувач залишається задоволеним і повертається на майданчик знову (а можливо, навіть приводить друзів). Таким чином, абсолютну вигоду та щастя отримує власник інтернет-майданчика з опрацьованим юзабіліті.
Вигідний ланцюжок взаємодії зручного ресурсу з користувачем, чи не так? Тому визначимо основні критерії зручності веб-ресурсу (насправді їх дуже багато, у цій статті ми розглянемо 5 факторів, що впливають на юзабіліті).
Оцінити та перевірити юзабіліті сайту можна за допомогою таких пунктів:
- Структура.
- Важлива інформація.
- Дизайн.
- Навігація.
- Швидкість завантаження.
Розберемо докладніше кожен із наведених пунктів.
Структура сайту
Про це слово можна говорити вічно, оскільки грамотна, але водночас проста і зручна структура відіграє основоположну роль у взаємодії порталу з відвідувачами. Користувачеві, коли він потрапляє на сайт, має бути відразу інтуїтивно зрозуміло, куди натискати і що станеться після натискання, на яку сторінку він перейде і що там побачить. Грамотно пропрацьована структура піде вашому ресурсу лише на користь: користувач не буде безцільно блукати розділами, поки не залишить сайт, так нічого й не знайшовши.
Важлива інформація на сайті
Важлива та корисна, на ваш погляд, інформація має відразу впадати в око (протягом перших 3 секунд перебування на майданчику). Ви ж не хочете, щоб відвідувачі обійшли весь сайт у пошуках сторінок «Контакти» чи «Оплата і доставка», доклали стільки зусиль, що вже й телефонувати перехотілося? Таку інформацію необхідно розміщувати на помітних місцях — у хедері (шапці), а деяку контактну інформацію навіть дублювати у футері (підвалі).
Дизайн сайту
Дизайн включає безліч критеріїв юзабіліті:
- Легке сприйняття: ресурси зі складним дизайном сприймаються гірше.
- Прості графічні елементи: їхнє розташування має бути продуманим.
- Приємні кольори: відтінки, що поєднуються між собою, не мають бути агресивними.
- Логічність: елементи керування розташовані послідовно.
- Відповідність тексту: зміст і форма подачі тексту мають бути єдиним цілим.
- Сучасність: користувач довше затримається на стильному ресурсі, ніж на сайті з дизайном «а-ля 1980-ті».
Навігація по сайту
Навігація по сайту
Вкрай важливо, щоб вона була простою та зручною. Також рекомендується, щоб навігація була однаковою на всіх сторінках. Це покращить як її сприйняття, так і юзабіліті. Людині не доведеться на кожній новій сторінці звикати до розташування будь-яких кнопок або елементів ресурсу. Ось деякі рекомендації щодо підвищення зручності та простоти навігації:
1. У хедері розміщувати логотип компанії. При цьому:
- логотип знаходиться на кожній сторінці сайту;
- клікабельний на всіх сторінках (навіть на головній);
- бажано має бути розташований ліворуч у шапці (у крайньому разі по центру шапки, якщо того вимагає дизайн);
- хедер з логотипом фіксований на всьому сайті (робиться це для підвищення юзабіліті, щоб у будь-який момент часу з будь-якої точки ресурсу користувач міг повернутися на головну простим натисканням на лого компанії);
- рекомендується дублювати логотип у футері (або розміщувати у підвалі посилання «На головну»).
2. Розміщувати на всіх сторінках ресурсу меню 1-го рівня. Оскільки місце в меню досить обмежене, в ньому мають бути дійсно важливі розділи, такі як, наприклад, «Про компанію», «Оплата», «Доставка», «Контакти», «Відгуки», а також основні розділи каталогу компанії. Звісно, таке меню найкраще робити фіксованим і розміщувати безпосередньо в шапці — це покращить юзабіліті. Хочу зазначити, що деякі ресурси, аби не захаращувати шапку, розміщують усі службові сторінки над нею, а вже в самому хедері — тільки основні розділи каталогу. Виходить ніби дві шапки сайту, але в цьому певно щось є. Звісно, краще бачити наочно, тому ось приклад такого подвійного хедера:
А тепер подивимося на шапку, яка включає всю інформацію в одному меню:
Зручнішим є другий варіант, оскільки у відвідувача ресурсу не розбігаються очі та думки через наявність двох рівноправних за важливістю рядків з розділами, а його погляд фіксується на єдиному меню. Тим не менш, обидва варіанти мають право на життя при оцінці юзабіліті. Все залежить від тематики проєкту, а також від його обсягу (якщо ресурс великий, то, звісно, є сенс службові сторінки винести окремо від основних розділів каталогу). Як то кажуть, до всього потрібно підходити індивідуально та з розумом.
3. На всіх сторінках посилання виглядають як посилання — підкреслюються, виділяються іншим кольором або шрифтом. Користувач повинен відразу бачити, що з усього розташованого на сторінці є клікабельним посиланням, це, безперечно, підвищить юзабіліті. Звісно, я не маю на увазі сайти, які за певну плату розміщують у себе статті з посиланнями на інші ресурси. У таких випадках посилання якраз найчастіше зовсім не виглядають як посилання. Щобільше, вони настільки замасковані, що навіть якщо ви захочете їх знайти, то не знайдете. Приклад помітного посилання, виділеного іншим кольором:
4. У хедері та футері розміщувати розділ «Контакти». Всілякі контактні дані компанії (адреса, телефони, електронна пошта, Skype, Viber тощо) мають бути абсолютно прозорими для відвідувачів ресурсу і ставати помітними протягом перших секунд перебування на сайті (тут маються на увазі не підставні організації, а реально існуючі компанії, які зацікавлені в наданні послуг та/або продажу товарів клієнтам). Сторінка з контактами належить до основних сторінок у структурі вебсайтів компаній. Саме тому для підвищення юзабіліті рекомендується, щоб цей розділ знаходився як у шапці, так і в підвалі. Також хочеться зазначити: якщо у футері є вільний простір, його можна використовувати для того, щоб розмістити там усі контакти без переходу у відповідний розділ. Приклад реалізації такого підвалу:
5. На всіх сторінках ресурсу вказується назва поточного розділу, зазвичай це заголовок H1. Щоб уникнути непорозумінь між користувачем і ресурсом, людина повинна чітко розуміти, у якому розділі вона зараз перебуває.
6. Хлібні крихти. На додаток до попереднього пункту окремо варто виділити найважливіший навігаційний елемент, наявність якого буде величезним плюсом — це хлібні крихти. Це шлях, який відвідувач пройшов від головної сторінки до поточної. Рекомендації:
- реалізуються на кожній сторінці (крім головної);
- помітні та розташовуються на видному місці (бажано ближче до лівого краю або по центру, безпосередньо над/під назвою поточного розділу);
- реалізуються в загальному стилі ресурсу і не вибиваються з дизайну;
- останній розділ ланцюжка (поточний) має бути неклікабельним;
- важливо, щоб назва розділів у точності збігалася з розділами, вказаними в ланцюжку (бувають випадки, коли виводяться не назви розділів, а заголовки сторінок, що може заплутати користувача та знизити юзабіліті).
Приклад якісно оформлених хлібних крихт:
Швидкість завантаження сайту
У цьому підрозділі буду максимально короткою: користувачі в наш час є дуже нетерплячими, вони погано сприймають повільні майданчики й не хочуть витрачати свій дорогоцінний час на те, щоб бездумно дивитися на всім знайомий кружечок завантаження сторінки, що крутиться у вкладці браузера. Тому від власників вебсайтів очікується (скоріше навіть вимагається) зробити свій ресурс максимально швидким для завантаження. Це в рази підвищить юзабіліті.
У визначенні швидкості завантаження сторінок онлайн-майданчика можуть допомогти наступні безкоштовні інструменти:
1. PageSpeed Insights — https://developers.google.com/speed/pagespeed/insights/ (показує швидкість завантаження для мобільних пристроїв, а також для комп’ютерів, дає пропозиції щодо оптимізації);
2. Pingdom Website Speed Test — https://tools.pingdom.com/ (показує час завантаження сторінки, її розмір та ін.);
3. Load Impact — https://loadimpact.com/ (моделює зміну часу завантаження залежно від збільшення активних користувачів на майданчику).
За допомогою таких інструментів, а також багатьох інших, ви можете оцінювати швидкість завантаження і працювати над її збільшенням. Висока швидкість завантаження, безперечно, підвищить зручність перебування на майданчику. Як наслідок, відвідувачі залишаться задоволеними.
Для чого потрібен юзабіліті-аналіз сайту
Покращення юзабіліті — значущий аспект просування. Оскільки люди стають дедалі вимогливішими, головна мета — зацікавити відвідувача за ті кілька секунд, поки завантажується сторінка. Якщо людина не зрозуміє за цей час, де вона і яка її вигода, вона просто піде до конкурента. Робота над usability — це спосіб заробити інтерес людини та утримати її на своєму ресурсі.
Усі питання, які не розкриті у статті, залишайте у коментарях нижче.