6 секретів створення ефективної навігації у мобільній версії сайту

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

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

Не ускладнюйте

Ширина екрану багатьох смартфонів у портретному режимі становить лише 720 px. І на це треба зважати. При такій обмеженій кількості вільного місця варто уникати безладу і «креативу». Тому відразу переходьте до справи і безжально позбавляйтеся всього зайвого.
Назви сторінок та розділів повинні бути якомога коротшими, але при цьому зрозумілими. Якщо пунктів більше 7-8, варто замислитися над тим, щоб взагалі скоротити меню в мобільній версії.

Запитайте себе: які посилання об'єктивно потрібні, щоб користувач міг виконати пріоритетні завдання? Якими елементами навігації можна знехтувати в мобільній версії?
Оптимальний варіант – від 4 до 8 пунктів. Логотип у верхній частині можна зробити активним, перетворивши його на аналог кнопки «Головна».

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

Спочатку перерахуйте найважливіші сторінки

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

Які сторінки сайту є найважливішими?

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

Які дії найчастіше роблять відвідувачі сайту за допомогою смартфонів?

Які сторінки вашого сайту найефективніше задовольняють потреби мобільного користувача?

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

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

Інший варіант — додати корисні заклики до дії та посилання на пов'язані сторінки в нижню частину сторінки або в основний текст, там, де це доречно.

Сприймайте пошук по сайту як частину навігації

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

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

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

Маючи систематизований, але величезний каталог Amazon не чекає, що користувачі будуть метатись по меню, щоб знайти те, що їм потрібно. У більшості випадків людина просто вводить назву продукту і відразу бачить відповідні товари.

Зробіть навігацію інтуїтивно зрозумілою

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

Наприклад, щоб позначити списки, що розкриваються, використовуйте знак плюса (+) або стрілку (>).

Інший приклад – використання піктограми збільшувального скла для позначення функції пошуку.

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

Оберіть зручний шрифт та правильне поєднання кольорів

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

Гарні варіанти шрифтів - Helvetica, Roboto, Open Sans, Proxima Nova.

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

Також переконайтеся, що текст контрастує з фоном. Відповідно до рекомендацій WebAIM, мінімальне рекомендоване співвідношення — 4,5 до 1. Визначити точне значення можна за допомогою розробленого компанією інструменту Contrast Checker: введіть коди двох кольорів — і одразу побачите результат.

Враховуйте специфіку сенсорних екранів

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

Google рекомендує створювати мобільні сторінки, де цілі торкання (в даному випадку посилання меню) розташовані один від одного не менш ніж на 32 px - як по горизонталі, так і по вертикалі. При цьому ширина і висота клікабельних елементів повинна бути не менше 40 px.