Вебдизайн Блог

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

Дослідження

Фахівці «Nielsen Norman Group» опублікували кейс компанії Marketade з розвантаження відділу продажів і поліпшення сайту. Таку практику можна використовувати і на інших ресурсах.

За рахунок вдосконалення навігаційної системи сайту B2B - компанії Baileigh Industrial, пошук товарів полегшився на 85%. Продаж через дистриб'юторів, або безпосередньо. Ціна обладнання становить від 11-80тис доларів. Нижче наведено проблеми сайту, і способи їх вирішення компанією Marketade.

Дзвінки від нецільових клієнтів

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

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

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

Пошук проблеми

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

Інструмент юзабіліті-тестування Treejack показує взаємодію людини зі структурою ресурсу. Додаткове використання системи оцінок дозволило проаналізувати ситуацію з категоріями на сторінці. Тільки 34% користувачів впоралися з поставленим завданням. Середній показник дорівнював 4 за десятибальною шкалою. Для вирішення завдання фахівці Marketade запропонували доопрацювання архітектури і зміну навігації по сайту.

Типові помилки навігації

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

• Нестандартна структура. Для користувачів більш звичне розташування навігації по верхній лінії або на лівій стороні сайту. Не потрібно ускладнювати завдання, змушуючи людей блукати в пошуку інформації. Клієнтам набридне шукати товар, і вони просто покинуть сайт.
• Загальні назви розділів. Написи меню несуть інформаційне навантаження. Стандартні фрази «Про нас», «Чим ми займаємося» і т. д. - безликі, шаблонні. Конкретний напис для кожного розділу меню спростить завдання користувача.
• Спадне меню. Незважаючи на популярність віджета, потрібно бути обережніше. Юзер тільки наводить курсор на меню, як воно тікає. Додаткові варіанти дій створять ще більше складнощів. Чи потрібно нервувати потенційного клієнта? Спадне меню впливає на відвідуваність і глибину перегляду інших сторінок сайту. Виняток - великі сайти з безліччю розділів.
• Пункти меню. Скоротити число пунктів до п'яти. Другорядні пункти (підпункти) також відволікають користувача. Правило підходить і для загального контенту. Видалення непотрібних елементів дозволить сконцентруватися на решті. Користувач переходить за посиланням на головну сторінку, тому пошукові системи визначають її авторитетною. Багато посилань на головну призведе до зниження авторитетності домашньої сторінки.
• Неправильне розташування меню. Відвідувачі запам'ятовують перше і останнє значення зі списку. Висока концентрація уваги спочатку пояснюється ефектом первинності, а в кінці - ефектом новизни. Правильно розставлені пункти підштовхнуть клієнта до покупки. Розділ «Контакти» потрібно закріпити по краю правого кута в самому кінці.

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

Методи покращення навігації

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

Меню і навігація

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

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

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

Навігація потрібна і для лединга, «односторінника». Користувача втомить нескінченне прокручування сторінки в пошуках інформації. Посилання у вмісті допоможуть швидко перейти до фрагментів тексту, або групи товарів.

Посилання на логотип

У навігаційній системі застосовують пункт «Головна» в меню. Однак, ця схема йде з 90-х. Замість цього можна запропонувати користувачеві клік за логотипом. Клікабельний логотип спрощує завдання на великих сайтах з десятками розділів. Практика досить поширена, але фахівці не рекомендують повністю виключати посилання «На головне».

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

Хлібні крихти

Хлібні крихти - це навігаційний ланцюжок, що відображає шлях юзера до поточної сторінки. Назва елемента інтерфейсу - відсилання до казки братів Грімм, в якій діти розсипали крихти хліба, щоб знайти зворотний шлях з лісу. Ланцюжок дозволяє повернутися в попередній розділ, або відразу на головний. У стандартному вигляді ланцюжок виглядає так: Головна - Розділ - Розділ - Сторінка.

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

• Визначення поточного розташування клієнта.
• Демонстрація структури ресурсу.
• Швидке переміщення, не використовуючи кнопку «Назад».

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

Футер

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

Використання інструментів

Биті посилання (гіперпосилання на відсутні сторінки) негативно впливають на поведінкові фактори користувачів. Для їх виявлення потрібні програми: Screaming Frog, Xenu, DeepCrawl та інші. Аналіз існуючих посилань визначить недоліки і опише архітектуру сайту. Для візуалізації підходить ПО DYNO Mapper, або сканер PowerMapper.

Биті посилання бувають зовнішніми і внутрішніми. Перші функціонують в межах ресурсу, зовнішні ведуть на інші сайти. При переході на неіснуючу сторінку користувач бачить вікно «Помилка 404». Таке може відбутися в разі некоректної роботи сервісу, видалення документа або при помилці, змінах в URL. Всі внутрішні сторінки сайту взаємопов'язані. Видалення хоча б однієї веде до того, що інші стають неробочими. Тому потрібно регулярно сканувати сайт.

Рекомендуємо:

Створення сайтів

Перевірка ефективності нової навігації

Повернемося до кейса Marketade. Після внесених змін, компанія провела такий же тест, як і на початку, з урахуванням нових назв. В результаті вдосконалення навігаційної системи, зручність пошуку товару підвищилася на 85%. Це призвело до зростання продажів і прибутку.

Тренди в дизайні веб-навігації

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

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

Повноекранна навігація - поєднання тексту з графікою. Сторінка заповнюється навігаційною панеллю на 100%. Зручне рішення для спеціалізованих ресурсів. Єдине, перевантажена сторінка знизить швидкість завантаження. Нераціонально для сайтів, які мають складну навігаційну карту.

Ув'язнення

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