Email *

Навигация для мобильных устройств

Навигация для мобильных усройств

Навигация для мобильных устройств

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

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

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

Итак, какие элементы могут быть необходимы, и как правильно оформить их внутри интерфейса?

Поиск

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

Мобильный поиск

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

Главное меню

Основной элемент навигации практически любого сайта — это главное меню. Оно содержит ссылки на основные разделы сайта, а значит без него не обойтись. Но что если меню имеет множество пунктов, и все они должны в обязательном порядке присутствовать, в том числе и в мобильной версии. Одна из идей — разделить его на две части. Взгляните на этот пример.Адаптивное меню

Основное меню на этом сайте вызывается по клику на соответствующую кнопку. Кроме того, с любой загруженной страницы можно перейти на форму обратной связи (заказать проект), на страницу о проекте (учебный центр) или на главную по клику на логотип.

Если же меню сайта ограничивается 5-6 пунктами, можно ограничится одной кнопкой-гамбургером, как на предыдущем примере. При нажатии на эту кнопку можно вызывать боковое меню (sidebar) или всплывающую панель (popover) — здесь у нас масса возможностей. Главное, чтобы пункты отстояли друг от друга на достаточном расстоянии для попадания пальцем.

Кнопки «Поделиться»

Кнопки обмена ссылками — одна из важнейших деталей, особенно при проектировании интерфейсов для мобильных. Нажатие этих кнопок стало привычкой многих пользователей — они уже делают это автоматически. Причем конечной целью не всегда является обмен информации с друзьями в соцсетях — многие делают это просто чтобы не забыть адрес ссылки. Однако, данная ссылка становится заметной другим потенциальных посетителям сайта! Такой возможностью нельзя пренебрегать, особенно если вы занимаетесь интернет-коммерцией.

Внешний вид иконок опять же диктуется удобством нажатия пальца. Если вы рассчитываете на аудиторию лишь определенных двух-трех соцсетей, иконки можно разместить в один ряд. Если же кнопок «Поделиться» много, их необходимо спрятать. Используйте иконку такого вида для вызова выпадающего списка, который будет содержать все нужные кнопки соцсетей:

Кнопка Поделиться

Отзывчивый — не значит мобильный.

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

Кроме непосредственно дизайна, имеется другой немаловажный фактор UX — скорость загрузки сайта. Без скоростной оптимизации не стоит и говорить об удобстве интерфейса для мобильных. Об этом мы более подробно рассказали в этой статье.