Юзабіліті Головної сторінки, або як не вдарити в бруд обличчям

by Степан Лютий · 19 Червня, 2019

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

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

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

Що повинно бути на сторінці

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

Шапка сайту

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

Блок з інформацією про сайт повинен бути візуально відокремлений від інших елементів і містити наступні елементи:

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

Варто втратити хоча б один елемент, і користувач може заплутатися.

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

А ось така шапка сайту відразу зорієнтує нового відвідувача сайту, гранично зрозуміло, чим займається компанія:

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

Читайте також Google Lens допоможе знайти підходящу за стилем одяг

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

Головне меню

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

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

Краще не перевантажувати меню, достатньо вказати 5-7 основних посилань. Якщо розділів більше, то рекомендуємо розділити меню на два: над шапкою сайту вказати посилання на допоміжні розділи (наприклад, сторінку про компанії, блог, розділ для партнерів тощо), а під шапкою сайту залишаться посилання на розділи каталогу або послуги. Приклад:

Також рекомендую прочитати статті про основні елементи навігації на сайті і форми.

Перший екран

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

Зробити це можна двома способами:

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

Можна комбінувати варіанти, наприклад, в даному прикладі вказали переваги компанії і додали інформацію про акції при оформленні заявки з сайту:

Зазвичай у другому екрані найуспішніше відпрацьовує розміщений каталог товарів або послуг.

Список послуг або категорій товарів

Потрібно показати, що ви продаєте через сайт. І краще зробити це яскраво, додавши привабливі зображення або іконки. Приклад списку товарів:

Для послуг можна додатково вказати вартість:

Якщо список категорій занадто великий, то інформацію можна об’єднувати в групи:

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

Крім блоку зі списком товарів, для інтернет-магазину можна окремо показати товари зі знижкою, новинки або популярні товари. Показати краще 3-4 товару (або використовувати слайдер) і додати посилання на відповідний розділ каталогу. Приклад такого блоку:

Переваги для клієнта

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

Додаткові послуги та можливості

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

Чи можна розповісти про мобільному додатку окремо:

Схема роботи

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

І ще один приклад:

Приклади робіт

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

Ще приклад у вигляді слайдера з роботами до і після:

Чи можна оформити роботи у вигляді кейсів:

Про компанію

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

Для Головної сторінки варто додати короткий анонс даного розділу з невеликим описом і парою фотографій. Приклад:

Відгуки клієнтів

Також для підвищення довіри можна додати кілька відгуків і краще доповнити їх посиланням на відповідний розділ. Відгуки з фотографіями клієнтів виглядають краще:

Для B2B-сегменту можна розмістити відгуки у вигляді відсканованих документів:

Якщо тематика бізнесу дозволяє, додатково можна показати логотипи партнерів:

Статті, новини, корисні матеріали

Про користь блогу для комерційного сайту говорили не раз, для тих, хто пропустив, докладніше в статті. На Головній даний розділ слід проанонсувати коротко, показавши кілька статей і посилання на розділ:

Приклад для блоку новин:

Якщо у вас кілька розділів зі статтями, можна оформити їх наступним чином:

Форма консультації

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

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

Підвал сайту

І завершити перегляд сторінки слід підвалом сайту, в якому продублювати контактну інформацію та посилання на основні розділи. Можна додати посилання на соцмережі. Цей елемент полегшить навігацію по сайту. Приклад інформативного підвалу сайту:

Ось і всі основні інформаційні блоки, які варто розмістити на Головній сторінці.

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

Часті помилки

Незважаючи на те, що ми вже обговорили основну інформацію, поговоримо ще про часті помилки при оформленні Головної сторінки:

Немає тексту. Часто на головній сторінці або зовсім відсутня, або, навпаки, займає надто багато місця.
Взагалі, щоб користувачеві було комфортно, текст повинен бути рівномірно розподілений по сторінці і поступово розповідати про компанії і можливості сайту.
Додатково рекомендуємо прочитати ці матеріали: статтю про тексти на Головній і тексти для B2B-сегменту.
Кілька слайдерів поруч. Ще часто зустрічаю, що на головній сторінці розміщують два слайдера – один за іншим.
Так інформація виглядає неохайно і погано сприймається, особливо, якщо слайдери анімовані. Краще чергувати відображення у вигляді слайдера, то в статичному варіанті.
Приклад, де слайдери розміщені один за іншим:
Якщо потрібно поспіль розмістити кілька слайдерів, можна об’єднати слайдери в один блок з вкладками. Так інформація виглядає компактніше і вам буде зручніше вибрати потрібну категорію:
Кілька інформаційних колонок. Вже давно неактуальні сайти з розбиттям контенту на 3 стовпця.
Щоб сторінки не візуально виглядали переобтяженими і користувачу було легше орієнтуватися в блоках, рекомендуємо розмістити інформацію в одну-дві колонки.
Приклад перевантаженою сторінки:
Приклад сучасного послідовного розташування інформації в одну колонку:
Спливаючі вікна. Краще прибрати спливаючі вікна з Головної сторінки, особливо з’являються відразу при переході на сайт.
Корисний інструмент, але про те, як правильно його використовувати, детальніше розповіли тут.
Приклад дратівної спливаючого вікна:
Неякісні зображення псують враження про сайт і знижують довіру. Про те, як правильно вибирати зображення для сайту, читайте в статті. Гарні зображення допомагають продавати товари і послуги.
Подивіться хороший приклад – від таких соковитих картинок точно захочеться погортати меню і зробити замовлення:
Немає адаптації під мобільні. Все більше користувачів заходять на сайти зі смартфонів або планшетів, тому обов’язково враховуйте це при проектуванні сайту. Докладніше про це.
Сторінка довго завантажується. Ніщо так не відштовхує користувачів, як повільне завантаження сайту. Рекомендуємо перевірити свій сайт і виправити знайдені недоліки.