10 - Паттерн нижней панели навигации на мобильных веб-сайтах, исследование
Дизайон тапбара от Mengyuan Sun

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

Когда вы слышите словосочетание «мобильная навигация», что первым приходит на ум? Я бы подумал о выдвижном гамбургер-меню. Этот паттерн дизайна использовался с первых дней адаптивного дизайна, и, хотя с тех пор многое изменилось, он остался неизменным. Почему?

Как мы начали использовать верхнюю панель навигации с гамбургер-меню? Есть ли лучшая альтернатива? В этой статье я попытаюсь рассмотреть эти вопросы.

История верхней панели навигации и гамбургер-меню

Первые иконки гамбургер-меню начали появляться в 80-х годах. Они были разработаны Нормом Коксом для Xerox Star – первого в мире графического пользовательского интерфейса. Он также разработал иконку документа для того же интерфейса. Эту историю описал Geof Allday (который написал на email Норму). Вы можете прочитать их переписку, нажав здесь. Позже они появились в Windows 1 и DOS.

Нынешняя мобильная навигация, как мы ее знаем, была популяризирована книгой Итана Маркотта «Отзывчивый веб-дизайн» еще в 2011 году. С тех пор верхняя панель навигации и гамбургер-меню стали отраслевым стандартом.

За последние 10 лет размер экрана мобильного телефона увеличился вдвое

Со времен оригинального iPhone, мобильные продажи росли год от года. 2019 год – это первый год, когда рынок достиг точки насыщения, и продажи начали снижаться. Но это не значит, что люди не пользуются телефонами. По данным Quartz и Ciodive к 2020 году мы будем тратить 80% времени, проведенного в Интернете на мобильных телефонах. Сравните это с 2010 годом, когда только четверть интернет-пользователей пользовались телефоном.

По мере роста продаж телефонов размеры их экранов также увеличились более, чем в два раза. Средний размер экрана смартфонов увеличился с 3,2 дюйма до 5,5 дюймов. В 2017 году производители устройств начали использовать более высокое соотношение сторон 18: 9 для 5,7-дюймовых и 6-дюймовых дисплеев. Теперь мы видим, что 6-дюймовые дисплеи с соотношением сторон 18: 9 становятся новым стандартом во флагманском и среднем ценовом сегментах, поскольку имеют большую площадь экрана, чем 5,5-дюймовые дисплеи с соотношением сторон 16: 9, сообщает XDA-Developers.

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование
Обзор того, как изменились размеры экрана мобильных телефонов (Источник изображения: Scientamobile)

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

Дизайн, управляемый большим пальцем

Впервые я услышал термин «дизайн, управляемый большим пальцем» (thumb-driven design) от Виталия Фридмана. Он основан на исследованиях Стивена Хубера и Джоша Кларка о том, как люди держат свои устройства.

Суть в том, что почти в каждом случае три основных хвата были наиболее распространенными. 49% пользователей держали свои телефоны одной рукой, 36% держали телефон одной рукой и тыкали указательным или большим пальцем другой руки, а оставшиеся 15% приняли молитвенную позу BlackBerry держа телефон двумя руками, и набирая текст большими пальцами, утверждает Джош Кларк. Стивен Хубер обнаружил, что 75% пользователей касаются экрана только одним большим пальцем. Отсюда и термин, «управляемый большим пальцем».

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование
Есть три основных способа, которыми мы держим наши телефоны

В 2016 году Саманта Ингрэм написала статью под названием «Зона большого пальца: проектирование для мобильных пользователей», в которой подробно рассматриваются эти идеи. Она определила легкодоступные, труднодоступные и промежуточные зоны.

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование
Карта зоны большого пальца, объясненное Самантой Ингрэм

Тем не менее, я бы сказал, что с увеличением размера телефона эта карта немного изменилась:

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование
Новая карта зоны большого пальца для дисплеев больших размеров

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

Паттерн нижней панели навигации

Время от времени в сети появляется концепт паттерна нижней панели навигации. Сама идея довольно проста: переместить панель навигации вниз экрана.

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование
Веб страница сайта Slack с картой зон большого пальца

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

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

Первичные и вторичные элементы

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

Я предлагаю две идеи для решения этой проблемы:

  1. Поместить панель поиска или любые второстепенные элементы наверх;
  2. Кнопки призыва к действию должны оставаться внизу рядом с пунктами меню, так как это важная часть навигации.
Паттерн нижней панели навигации на мобильных веб-сайтах, исследование
Вайфрейм переосмысленных первичных и вторичных элементов навигации

Как это повлияет на скролл в больших меню?

Некоторые веб-сайты имеют обширные меню, подменю и все, что между ними. Естественно, будет задействована прокрутка. Как работает переключение первичных и вторичных элементов в этом сценарии?

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование
Вайрфрейм переосмысленного большого меню

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

Где размещать логотип?

У вас могут возникнуть вопросы с размещением логотипа. Есть два способа сделать это:

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

Как видите, я использовал в вайфрфрейме метку меню. Кевин Робинсон обнаружил, что размещение метки рядом с иконкой увеличило вовлеченность на 75%:

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование
Вайрфрейм логотипа расположен вверху, а меню – внизу

Как это работает с Handlebars?

Некоторые операционные системы и браузеры, как правило, используют нижнюю часть экрана для своих собственных целей. iOS handlebars могут мешать нижней навигации. Убедитесь, что панель навигации достаточно просторная чтобы вместить безопасную область iOS.

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование
iOS Handlebars и безопасные зоны

Если вы разместите логотип в центре, ссылка может конфликтовать с функциональностью handlebar. В этом случае поможет внутренний отступ.

Будут ли пользователи приспосабливаться к этому паттерну или посчитают его дезориентирующим?

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

В качестве контраргумента закону Якоба я бы хотел предложить Закон Фиттса. В нем утверждается, что время для достижения цели зависит от расстояния и размера цели. По сути, чем меньше и дальше цель, тем выше стоимость взаимодействия. У NN/g есть замечательное видео, объясняющее это более подробно:

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

Как это будет интегрироваться с паттерном тапбара?

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

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование
Дизайон тапбара от Mengyuan Sun

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

Nielsen утверждает, что скрытая навигация (гамбургер-меню) значительно снижает удобство работы как для мобильных устройств, так и для декстопных. На мобильных устройствах люди использовали скрытую навигацию в 57% случаев, а комбинированную – в 86% случаев, то есть в 1,5 раза больше! Комбинированная навигация, на которую ссылается Nielsen, представляет собой шаблон панели вкладок в сочетании с гамбургер-меню – вот пример:

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование
Пример приложения Samsung от Ризки Рахмат Ридха для Muzli

Может показаться, что тапбар – идеальное решение, но у него тоже есть свои проблемы. Фабиан Себастьян отметил, что это подходит только для представлений верхнего уровня. Это не работает с дополнительными элементами навигации. Чтобы решить эту проблему, появился гибрид гамбургер / тапбар. Если вы обратите внимание на приложение Samsung, то увидите, что последний пункт меню – это кнопка «More», которая вызывает гамбургер-меню.

По сути, паттерн нижний панели навигации довольно хорошо интегрируется в паттерн тапбара, если вы хотите объединить их оба. Вы можете найти много хороших примеров в мире мобильных приложений.

Переосмысление некоторых популярных сайтов

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

Давайте сначала посмотрим на Bloomberg:

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование
Сайт Bloomberg с переосмысленной нижней навигацией

Далее, давайте посмотрим на Invision:

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование
Сайт Invision с переосмысленной нижней навигацией

И последнее, но не менее важное: старый добрый Reddit:

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование
Сайт Reddit с переосмысленной нижней навигацией

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

Это звучит замечательно, но как мне убедить своих клиентов?

Вы, как дизайнер, можете увидеть потенциал этого паттерна, но что, если ваш клиент или начальник его не понимают? В этом случае я бы привел пару аргументов:

  • Мобильные приложения уже много лет размещают важные пункты меню в нижней части экрана. Просто отправьте им эти две статьи для начинающих:
  • «Золотые правила дизайна нижней навигации» от Nick Babich
  • «Базовые шаблоны для мобильной навигации: учебник для начинающих», от Raluca Budiu
  • Я заметил случаи, когда популярные мобильные приложения начали сдвигать важные элементы навигации вниз. Хорошим примером является Uber. В их приложении строка поиска является одним из самых важных элементов на экране. В старом дизайне она располагалась вверху. Теперь ее переместили вниз.
Паттерн нижней панели навигации на мобильных веб-сайтах, исследование
Старый и новый дизайн панели поиска Uber

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

Выводы

Факты таковы: телефоны становятся больше, и с одними частями экрана легче взаимодействовать, чем с другими. Наличие гамбургер-меню в верхней части обеспечивает слишком большую стоимость взаимодействия, и у нас есть огромное количество потрясающих дизайнов мобильных приложений, которые используют нижнюю часть экрана. Может быть, настало время начать использовать эти идеи на мобильных веб-сайтах?

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

Оригинал: Arturas Leonovas

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Как упростить свой дизайн, большое руководство

Свыше 20 понятных иллюстрированных примеров Компании постоянно стремятся создавать простые и полезные…

Модальность – одна из концепций UX, которую большинство дизайнеров не до конца понимают

В этой статье мы собираемся изучить общий стандарт модальности в пользовательских интерфейсах.

5 способов сделать кнопку призыва к действию интуитивно понятной

Нажать или не нажать – это вопрос, который приходит в голову пользователю,…