Навигация мобильных приложений и версий сайтов должна быть наглядной, понятной к тому же занимать минимум места на экране. По сути, она обязана дополнять собой инструменты поиска, а время от времени — и заменять их, и этому имеется пара обстоятельств:
- Пользователи иногда не знают, что они желали бы обнаружитьвашем сайте, исходя из этого ваша цель — оказать помощь им узнать это, разграничив область поиска, к примеру, указав категории товаров.
- Сформулировать верный поисковый запрос — не такая несложная задача, как может показаться, а люди по природе собственной еще и ленивы. Значительно действеннее будет предложить им готовые ответы в виде навигационных ссылок.
- Наконец, строка поиска на сайте довольно часто трудится не так действенно, как того ожидают пользователи.
На мобильных устройствах верная навигация еще более актуальна: занимая значительную часть экрана, она завлекает намного больше внимания, чем на десктопе. Из-за нехватки места ссылки и строка поиска меню в верхней части страницы смогут помешать скоро взять необходимую информацию. Не заставляйте пользователей скроллить, обращайте внимание на эти элементы — они должны быть заметны с первого взора, но наряду с этим не нарушать фундаментальный принцип юзабилити мобильных сайтов: приоритет контента перед интерфейсом.
На сегодня это важная проблема мобильных интерфейсов: как сделать навигацию заметной и удобной для применения, и наряду с этим не отвлекать от содержимого. Разглядим основные принципы построения навигации мобильных приложений и сайтов на конкретных примерах.
Верхняя панель навигации
Верхняя панель навигации досталась мобильным сайтам в наследство от десктопных устройств. Эта полоса в верхней части экрана, на которой размещены главные навигационные ссылки — популярный и достаточно действенный инструмент, но имеет два значительных недочёта. Во-первых, он оптимален, лишь в то время, когда на сайте довольно мало вторых элементов навигации, и во-вторых — занимает через чур полезное пространство в верхней части экрана.
Вот, к примеру, как выглядят главные страницы мобильной версии сайта BBC и приложения Гугл Play Apps:
Обратите внимание, что Гугл Play смог уместить больше элементов в панели навигации, применяя «карусель»
- Из-за чего хорошая навигация действеннее функции поиска на сайте?
Панель вкладок
Панель вкладок — ближайший родственник верхней навигационной панели, что довольно часто употребляется в приложениях. Она может размещаться как в верхней части
страницы (по большей части, Android), так и в нижней (IOS).
Панели вкладок, в большинстве случаев, присутствуют в большинстве мобильных приложений и имеют те же недочёты, что и панель навигации. Значительное их отличие в том, что панель вкладок закреплена, другими словами неизменно видна на экране, кроме того в то время, когда пользователь прокручивает страницу вниз, а панель навигации, в большинстве случаев, совместно содержанием страницы. Не смотря на то, что время от времени используется и так называемая «липкая навигация» (sticky navigation), в то время, когда навигационная панель остается в верхней части экрана или машинально появляется в том месте, в то время, когда пользовать начинает скроллить страницу вверх.
В качестве примеров возможно привести ленту новостей Facebook на мобильных платформах. Facebook на iPhone (слева) и Android (справа) применяет панель вкладок для главной навигации по приложению. Вкладки находятся в соответствии с официальными правилами данных операционных совокупностей: внизу — на iPhone и в верхней части страницы — на Android. Наряду с этим навигационные иконки на IOS еще и подписаны:
навигации и Панели вкладок прекрасно подходят для сайтов, в которых довольно немного разделов меню.
Твитнуть цитату
В случае если их более пяти, становится весьма проблематично уместить их все на панели, сохранив наряду с этим оптимальный для сенсорного экрана размер. Само собой разумеется, возможно применять «карусель», как в примере с Гугл Play — другими словами разбить пункты навигации по категориям, но это не всегда уместно. Пользователь не всегда может додуматься, что за пункты прячутся за следующим элементом карусели, и не всегда начнёт проверять их.
Пример — ветхая версия приложения Weather Channel: тут панель вкладок реализована так, что не сходу ясно, что любая вкладка внизу скрывает под собой еще пара. И тем более сложно предугадать, какие конкретно как раз пункты в том месте находятся:
Если вы решите применять панель навигации либо панель вкладок, они должны быть главным элементом интерфейса, но еще мало места стоит отвести на другие инструменты — к примеру, на окно поиска.
В случае если на сайте 4-5 главных вариантов навигации, быть может, имеет суть сделать их видимыми неизменно, в особенности если они ведут к довольно часто применяемым опциям и страницам. Но, помните, что навигация обязана соответствовать контексту приложения. Так, в случае если имеется другие необходимые элементы — к примеру, иконка корзины, вход в учетную запись и т. д, то их также необходимо учитывать, дабы в целом интерфейс не занимал через чур много места.
К примеру, вот как выглядит страница результатов поиска сайта AutoZone:
Не смотря на то, что в панели навигации содержится всего четыре главных пункта (Магазин, Консультации по ремонту, Заказ и Отыскать магазин), кроме них на страницу выводится еще пара элементов интерфейса (логотип, корзина, строка поиска, вкладки с результатами поиска и т. д.), так что суммарно они занимают около трети экрана.
- 5 обычных неточностей навигации сайта
Скрытые меню (другие варианты и сэндвич)
Сэндвич-меню, либо меню-гамбургер — это навигационное меню, содержащее в себе пара пунктов либо кроме того пара подменю и разворачивающееся, лишь в то время, когда пользователь кликает по нему. В свернутом состоянии оно занимает минимум места, и в этом в один момент его недостаток и преимущество, поскольку этот элемент навигации менее заметен, чем простое меню.
Пример применения сэндвич-меню — сайт США Today. Тут оно используется для главных навигационных опций. Раскрывается нажатием на значок в левом верхнем углу экрана:
Еще один вариант скрытой навигации — меню обнаруживается, лишь в то время, когда пользователь проводит пальцем по экрану. К примеру, в приложении Sephora на внутренних страницах меню возможно позвать, совершив пальцем слева направо:
Но самой кнопки меню не видно, исходя из этого многие пользователи, вероятнее, не выявляют эту функцию и ограничивают себя в функционале, применяя лишь видимые кнопки.
В целом, как уже говорилось выше, скрытое меню имеет одно значительное преимущество перед навигационной панелью — оно занимает минимум места. Но имейте в виду, что солидную часть времени навигационные ссылки будут скрыты. Дабы воспользоваться ими, юзер обязан целенаправленно зайти в меню и выбрать один из пунктов, к чему он еще не совсем привык, не обращая внимания на то, что в мобильных предположениях сайтов гамбургер-меню видятся уже частенько.
В связи с этом, стоит доработать совокупность навигации посредством дополнительных инструментов — к примеру, перекрестных ссылок.
- Из-за чего навигация неудобна для визитёров вашего сайта?
Навигационный хаб
Так именуют страницу (в большинстве случаев это основная страница сайта), на которой размещены все главные навигационные элементы. Это узловая точка, перекресток всех дорог, куда пользователь возвращается любой раз, в то время, когда ему необходимо перейти в второй раздел.
Недочёт данного подхода в том, что домашнюю страницу приходится всецело дать под потребности навигации, а пользователя заставить делать лишний ход (возвращение на основную) при перемещении по сайту.
Навигационный хаб подходит для ресурсов, где пользователи ограничиваются одной ветвью навигации за цитату и
время визита
Это, в первую очередь, приложения и сайты, применяемые не для просмотра контента, а с целью достижения весьма конкретных задач — к примеру, регистрации на рейс либо трансформации тарифа сотовой связи. В таких случаях пользователь редко делает более одной задачи за посещение, исходя из этого необходимость возвращаться на основную страницу для выбора второй ветви навигации его не будет злить.
Наглядный пример — мобильная версия сайта компании United. На основной странице расположены главные навигационные элементы, а на внутренних в верхней части страницы предусмотрена кнопка «Home» для возврата на основную. Причем пользователи редко совершают два типа действий (к примеру, регистрацию и покупку билета на рейс) за одно посещение.
Так что практически всем из них эта кнопка не пригодится.
- Пого-стикинг: что делать, в случае если пользователи «прыгают» по вашему сайту?
Выводы
Сделать мобильную навигацию несложной и эргономичной не так легко из-за ограничений, которые связаны с маленьким размером экрана. Возможно по-различному пробовать решать эту задачу, но практически в любое время вы станете сталкиваться с проблемами юзабилити.
Сущность в том, дабы выбрать такие решения, недочёты которых меньше всего будут проявляться конкретно на вашем сайте:
- Сэндвич-меню вмешают много навигационных ссылок, но наряду с этим они становятся заметны, лишь в то время, когда пользователь вызывает меню. Данный подход актуален для сайтов, ориентированных по большей части на просмотр контента.
- панель вкладок и Панель навигации съедают часть места на экране, но прекрасно трудятся, в то время, когда вариантов для выбора мало.
- На сайтах, ориентированных на решение конкретных задач, возможно применять стартовую страницу в качестве навигационного хаба.
Высоких вам конверсий!
По данным nngroup.com, image source: Georgie Pawlers
Случайные статьи:
014. Мобильная версия сайта и принципы юзабилити – Алексей Иванов
Подборка похожих статей:
-
Мобильный ux: навигация внизу экрана
Любой разработчик знает, что дизайн — это не только приятный внешний вид, но да и то, как пользователи взаимодействуют с продуктом. Не имеет значения,…
-
5 Фундаментальных принципов юзабилити интернет-магазинов
Актуальным трендом последних лет стало массовое создание онлайн-витрин простыми оффлайновыми магазинами. К сожалению, часть таких сайтов электронной…
-
Навигация с клавиатуры как оптимизация юзабилити сайта
Краткое резюме: для визитёров, не пользующихся мышью, нужно создать дешёвые ответы по навигации с клавиатуры. Многие люди пользуются интернетом…
-
Ключевой принцип навигации, или «скажите, где вы находитесь»?
Качественная навигационная структура складывается из знаков и элементов, помогающих пользователям ориентироваться в ходе изучения ресурса. Многие…