Навигационная панель google фото

Мобильная навигация на сайте: тенденции и решения

Мобильная навигация по сайту является важной частью каждого проекта разработки веб-сайта. Это требует полного внимания к дизайну. С ростом популярности мобильных устройств удобная в использовании навигационная система может повысить удовлетворенность пользователей и превратить новых посетителей в возвращающихся посетителей.

В 2012 году исследование Google показало, что 96 процентов пользователей столкнулись с сайтом, который не был мобильным, а 72 процента считали важным, чтобы бренды имели мобильный сайт.

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

Согласно недавнему отчету, смартфоны Apple отвечают за 68% продаж мобильных телефонов. Android-смартфоны составили еще 31,4 процента от этих продаж.

Существует множество различных решений для мобильной навигации, в зависимости от ваших потребностей, дизайна сайта и бизнес-целей. К ним относятся выпадающие меню, переключение навигации, нижний колонтитул / якорь и мобильная навигация-панель. Каждое решение имеет свои сильные стороны и недостатки.

Мобильная навигация ➦ решения

Window Shade
Стиль меню оттенков окна отображается на переднем плане, а основной контент находится за ним. Пользователи нажимают на горизонтальную полосу в качестве визуального сигнала и перетаскивают навигацию вверх (или вниз), чтобы просмотреть параметры меню.

Popover Drawer
Стиль меню выдвижного ящика работает хорошо, когда содержимое навигации светло. Это хорошо для веб-сайтов, где пользователь, вероятно, часто перескакивает между каждой секцией. Избегайте использования такого типа навигации, когда контент длинный, и требует много чтения.

Приложение Twitter для iPad фото
Приложение Twitter для iPad

Приложение Double Drawer Facebook iPhone использует решение с двумя ящиками. Это полезно использовать, когда есть отдельные типы навигации (например, главная навигация и инструменты / настройки), и позволяет пользователям перемещаться между этими областями без углубления в контент.

Панель инструментов
Решение панели инструментов отлично использует значки и отображает информацию высокого уровня, но это может быть очень ограниченным, поскольку для значков / текста на главном экране имеется только столько места. Содержимое должно охватывать только один экран. Если он охватывает более одного, найдите другое решение.

Мобильная навигация google фото

Меню карусели
Использует небольшое пространство для предметов поднавигации. Чтобы переключаться между элементами, пользователи прокручивают горизонтальную полосу, чтобы увидеть больше пунктов подменю. Эта опция полезна, если пользователи могут видеть элементы меню, выглядывающие с каждой стороны в качестве визуального сигнала для прокрутки.

Радиальное меню
Параметр радиального меню является относительно новым и действительно забавным. В радиальном меню есть значок, который при касании выдает меню ссылок. К сожалению, он ограничен количеством недвижимости в углу экрана и примерно 6 пунктами меню.

Быстрые советы-

  • Старайтесь не подавлять меню недвижимости с брендингом. Важное значение имеет постоянный обмен между вашим desktop сайтом и мобильным сайтом, но обязательно обрезайте содержимое и удалите постороннюю информацию.
  • Избегайте двух значков рядом друг с другом.
  • Избегайте использования кнопок, когда достаточно простых ссылок. Это избавит вас от столь необходимой экранной недвижимости.
  • Вкладки должны располагаться горизонтально. Это позволяет пользователям переключаться между различными видами контента, а не прокручивать, чтобы покрыть все вкладки, если они расположены вертикально.
  • Избегайте использования логотипа в качестве значка меню. Это может создать некоторую путаницу, поскольку логотип часто предназначен для того, чтобы вернуть пользователей на домашнюю страницу сайта.

Leave a Reply

Your email address will not be published. Required fields are marked *