Навигация по сайту

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

 1. Завдання користувача: Потрапити на сайт

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

Інструменти:

• Перехід з пошукової системи;
• Ім’я сайту;
• Посилання на внутрішню сторінку;
• QR-код.

Ви впевнені, що ім’я вашого сайту підібрано добре? Спробуйте своєму другові, колезі або родичу продиктувати його по телефону:

– Алло, синку, а де я можу почитати твою статтю про залізяки?
– Мама, на Кабрі, я ж казав!
– Де-де?
– Кабрахабрточкауа.
– …

Це далеко не єдиний приклад виходу посилань в оффлайн, їх можна зустріти на рекламних плакатах, в метро, ​​в пресі, де завгодно. Усі ці випадки об’єднує одне: якщо користувач не зможе відтворити побачене  або почуте – ви втратили клієнта.

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

Якщо посилання надсилає друг або колега, і по ній хоча б приблизно можна зрозуміти, що очікує користувача на сторінці – це дуже і дуже добре. Тому що за посиланням:

http://kabrahabr.ua/events/coming/event564, отриманої в Skype, я можу визначити, що це якийсь опис майбутньої події, і вирішити, подивитися мені її зараз чи пізніше. А коли мені надсилають щось такого вигляду:

http://lite-mobile1246.ru/index.php??page=shop12.product_details&flypage=shop12.flypage&product_id=652&category_id=17&manufacturer_id=1&option=com_virtuemart44&Itemid=452 – навіть страшно туди заглядати.

 

QR-код – кращий спосіб дати користувачеві можливість швидко і без праці відкрити ваш сайт з мобільного пристрою.

Крім цього у QR-код є цікава особливість – з його вигляду незрозуміло, що за ним криється. І багато хто, у кого встановлений QR-сканер, зчитують код просто з цікавості. Чим не додаткова реклама?

2. Завдання користувача: Зрозуміти: “Де я?” та “Як сюди можна потрапити ще раз?”

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

Інструменти:

• Логотип (за сумісництвом швидкий перехід «додому»);
• Заголовок сторінки;
• Виділення поточного пункту меню (каталогу);
• Хлібні крихти.

Зовсім не обов’язково використовувати їх всі відразу.

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

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

• ХБЗ Колійовий -> Свіжий хліб -> Хліб Чорний 400 грам
• ХБЗ Колійовий -> Прострочений хліб -> Хліб Білий 400 грам

За те, як виглядатиме ваш сайт серед сусідів по вкладках (або закладок) браузера – відповідальні Favicon та заголовок (title).

3. Завдання користувача: Потрапити в особистий простір

Під особистим простором я маю на увазі все те, що стосується окремо взятого користувача і нікого іншого. Це може бути особистий кабінет, може бути кошик з товарами в інтернет магазині, навіть ретельно відібрані пісні Кобзона, зібрані в плейлист, можуть бути «особистим простором». Всі соціальні сервіси це один великий особистий простір. Отже, у користувача є завдання потрапити в особистий простір і підзадача зрозуміти що він вже там.

Інструменти:

• Форма авторизації;
• Зміна вигляду сайту (цілком, або частково) в залежності від того, авторизований користувач чи ні;
• Посилання на кошик або особистий кабінет.

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

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

4. Завдання користувача: Отримати актуальну інформацію

Практично всі сайти, що пропонують товари або послуги, мають ряд умов, наприклад:

• Регіон обслуговування (або залежність чогось від регіону);
• Час роботи;
• Обслуговування фізичних або юридичних осіб;
• Товари для певних груп.

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

• Чи можна цю смачну піцу замовити в Херсоні, та ще й у 3 годині ночі?
• Чи справді ціни на оренду квартири в центрі так сильно зросли? Або це ціни не мого міста?

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

Інструменти:

• Вибір регіону;
• Уточнення деталей, підказки;
• Фільтри.

Не змушуйте користувача спочатку вибрати товар, а потім зрозуміти, що доставка для нього неможлива, або що цей хліб доступний тільки для володарів картки “золота кредитка” від ПриватБанку? Невеликий приклад, на що може вплинути зміна регіону:

5. Завдання користувача: Знайти щось конкретне

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

– Чим я можу вам допомогти?

– Мені б бородинський житній з висівками.

– Хвилиночку, шановний пане!

на практиці найчастіше маємо наступні Інструменти:

• Пошук;
• Рубрикатор.

Користувач може або пройти по логічно вибудуваному каталогу, або скористатися пошуком.

Пошук починає неабияк партачити, якщо:

• Пошук потрібно шукати через Ctrl + F;
• Є подібні підказки: Для пошуку словосполучення помістіть його у лапки.

Не бійтеся використовувати велике поле пошуку, забезпечите його підказками і списком популярних запитів. Якщо результати пошуку потрапляють у різні «категорії» – не робіть купу, розділяйте видачу за категоріями.

При створенні рубрикатора важливо пам’ятати про наступне: рубрики повинні бути названі зрозумілою користувачеві мовою;

Якщо ви хочете торгувати кухонними причендалами, і при цьому сподіваєтеся, що купувати її будуть студенти мамам і дівчатам у подарунок, не варто робити розділи “Підставки”, “Шумовики”, “Мішалки” тощо, які не будуть забезпечені хоча б ілюстрацією. Молодь просто не зрозуміє, про що ви!

Рубрики одного рівня повинні бути рівнозначними;
Не варто в один рівень розміщувати “Пательні”,«Каструлі»,«Посуд зі скла». Уникнути таких помилок дуже просто – попросіть сторонню особу знайти зайві пункти у вашому ряду значень.

Послідовність уточнень у всіх рубриках повинна бути ідентичною.
Якщо є послідовність “Пательні -> З антипригарним покриттям -> Діаметр 20 см -> Пательня Тефлонова”, то не повинно бути послідовності «Каструлі -> 5 літриів-> алюміній -> Каструля Скляна»

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

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

Ще одна з найважливіших навігаційних завдань – дати користувачеві зрозуміти, що взагалі є на сайті.

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

Інструменти:

• Анонси категорій (дашборди);
• Меню (таби);
• Галереї, списки, інші способи подання інформації.

В ідеалі, основна частина головної сторінки повинна бути присвячена огляду вмісту сайту, в будь-якому прийнятному вигляді. Наприклад, у вигляді «анонсів» з коротким описом кожної категорії:

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

• таким чином меню виконує як функцію перемикання між розділами, так і просто дає зрозуміти користувачу, що є на сайті, куди ще можна пройти.

Не менш важливо те, як представлена ​​інформація «спискового» характеру. Користувач повинен розуміти, як організований список, скільки елементів він містить, як подивитися «наступні 50 позицій». Слід заздалегідь передбачити всі можливі види сортування, фільтрації. При цьому результат повинен відображати не можливості розробників, а потреби користувачів. Сортування хліба за кольором шкірки і кількістю внутрішніх порожнин діаметром більше 2 мм безумовно може бути реалізоване, але чи буде воно затребуване? Варто користувачеві запідозрити, що він заплутався, що він не може розібратися “чому так?” і “так де ж бородинський, – води три відра вам в піч!?”, як в ту ж мить ви опинитеся поза його милісті, а сайт в опалі.

7.  Задача користувача: “Знайти вас в реальному світі!”

Якщо Ваша діяльність не обмежується віртуальним простором, у вас є телефони, адреси, явки і паролі, які можуть знадобитися користувачеві -, не ховайте їх!

Інструменти:

• Контакти, адреси;
• Карти та посилання на них.

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

Якщо розміщуєте фізичні адреси:

• Забезпечте їх картою;
• Опишіть шлях для автомобілістів;
• Опишіть як дістатися пішки, на громадському транспорті.

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

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

Будь ласка, не залишайте людей без нагляду!