Сегодня мы поговорим о навигационной структуре для мобильных сайтов.

В первую очередь, как вы уже поняли, создается десктопная версия веб-площадки. Оптимизация для мобильных гаджетов – это вторая стадия привлечения аудитории.

В рамках построения навигации для мобильных устройств ориентируйтесь на следующие нюансы:

— размера дисплея мобильного гаджета, как правило, не хватает для публикации большого объема информационных данных и размещения крупных графических элементов;
— в этом случае сложная навигационная структура не является оптимальным вариантом, поскольку пользователи могут параллельно выполнять несколько задач, что приведет к сниженной концентрации на вашем контенте;
— при ознакомлении с наполнением сайта в пределах мобильного гаджета аудитория пользуется пальцами, что значительно усложнит взаимодействие с мелкими компонентами навигационной структуры.

Базовые навигационные составляющие

Примечание

Указанные ниже элементы должны быть доступны для использования на всех страницах веб-ресурса. Причина: благодаря им посетители смогут быстро передвигаться между разделами сайта.

1. Шапка. В первую очередь она должна быть компактной и однополосной. Что в ней должно быть:

— название организации/бренда и логотип (совет: будет хорошо, если они будут размещены в левой части шапки);
— меню в свернутом виде (плюсы: занимает немного места; выглядит привычно для мобильной аудитории);
— поисковая форма (есть два способа ее визуализации: размещение значка с лупой в шапке и показ полноценной формы поиска с соответствующим текстом в ней (второй вариант подойдет, если ваш интернет-магазин предлагает широкий товарный ассортимент));
— ссылочный материал, ведущий к личному кабинету (если он, разумеется, присутствует; также желательно в этом же поле разместить значок ссылки на регистрацию нового пользователя);
— телефонный номер (у вас есть возможность опубликовать как полный номер телефона, так и значок, являющий собой телефонную трубку);
— корзина (является неотъемлемым компонентом любого интернет-магазина; корзину предпочтительнее всего расположить в правом сегменте шапки).

Второстепенные элементы шапки (их можно указать, если позволяет пространство):

— рекламный призыв (лозунг);
— уникальное торговое предложение;
— график взаимодействия с клиентами;
— региональная ориентированность в контексте обслуживания покупателей.

Примечание

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

2. Меню. Ключевые тезисы:

— альтернативой свернутому меню может стать горизонтальное расположение ссылочного материала, при этом ссылки (по необходимости) можно будет прокручивать (важно: такой формат подойдет для меню с ограниченным количеством разделов);
— в рамках ведения крупных площадок рекомендуем объединить горизонтальную (для ссылок на товарные категории) и свернутую (здесь можно расположить оставшиеся разделы) демонстрацию меню;
— свернутое меню должно быть структурированным (то есть разделенным на категории), ориентированным на оптимизацию процесса поиска необходимого раздела (совет: визуально разграничьте другим цветом разделы сайта с высокой посещаемостью), а также содержащим основные контактные данные (пояснение: их следует прописать под перечнем категорий меню).

3. Подвал. Мобильный сайт должен обладать небольшим подвалом. В него стоит включить:

— ссылочный материал на различные блоки сайта (совет: их стоит объединить в категории в рамках бокового меню);
— кнопки социальных сетей (их необходимо указать именно в подвале сайта, поскольку кнопки соцсетей – это вспомогательные информационные данные);
— ссылочный материал на десктопный сайт;
— иконку со стрелочкой «вверх» (с ее помощью посетитель сможет быстро переместиться в самое начало страницы).

На этом все. Следите за нашими новыми публикациями.