Почему стоит избегать гамбургерных меню и как это сделать? Иконка-гамбургер: новые способы использования

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

А затем случились две вещи, которые заставили меня передумать. Во-первых, я наткнулся на . Это статья, которая действительно помогает понять последствия использования гамбургер-меню. В частности, сайты с таким меню терпят серьезное уменьшение вовлеченности пользователей. Обзор такой статистики как раз и начал менять мое мнение.

Следующий инцидент случился, когда я наблюдал за коллегой, пытающимся использовать новое веб-приложение, в котором как раз было такое меню. Это был разработчик, который очень хорошо знаком с интерфейсом гамбургер-меню, но когда дело дошло до использования приложения для своих нужд, он громко вслух спросил: “Как мне туда попасть?”. Учтите, это один из умнейших людей, которых я знаю, и он даже не подумал о том, чтобы коснуться значка гамбургер-меню. Если у кого-то настолько умного возникают проблемы с навигацией, что это говорит о типичном пользователе? Мое мнение окончательно приобрело твердое обоснование.

Поиск решения

Все, хватит о причинах моего неверия в силу гамбургер-меню – настало время поговорить о решении. Для начала я изучил особые преимущества использования гамбургер-меню:

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

И если уж создавать альтернативу гамбургер-меню, она должна как-то решать связанные с ним проблемы:

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

Сложная часть: мобильная

Я решил начать с самой сложной проблемы и проверить, подойдет ли мое решение для мобильных дизайнов. После обдумывания массы идей я пришел к выводу, что меню панели вкладок iOS является одним из лучших решений для мобильных интерфейсов. Масса людей пытались сделать панель вкладок прокручиваемой (чтобы вмещалось более пяти опций) или добавить “more” в навигацию – что-то вроде Плюшкина, у которого есть дополнительная комната, которая быстро заполнится хламом. Также, обе эти опции все еще не выполняют главного требования – понятность, видимость всех возможностей отсутствует. Так что же можно сотворить с меню вкладок, чтобы это исправить?

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

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

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

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

Применение к планшетам

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

А как на счет десктопа?

Приготовьтесь… выдвижное меню. Все верно – примерьте этот подход к десктопному интерфейсу и вы столкнетесь с неоспоримой реальностью: этот вариант совсем не нов. Выдвижное меню использовалось годами, и практически любой пользователь (даже ваша мама) знает, как оно работает. В этом и есть прелесть такого подхода – ничего нового.

Полное раскрытие

Я не знаю, как назвать эту штуку. Вкладочный выдвижник? Или TABurger (TAB “вкладка” + бургер)? Более того, я не знаю, создавал ли кто-либо подобное решение раньше. Учитывая простоту такого меню, я не могу допустить мысль, что я был первым. Знаю, что несколько приложений используют выдвижные меню на некоторых кнопках вкладок (например, Tweetbot), но обычно они реализованы как быстрый доступ к функциям для продвинутых пользователей, а не с целью наращивания иерархии навигации. Если у вас есть такой пример, дайте знать в комментариях.
Неважно, является ли такое меню новым или уже давно придуманным. Важно то, является ли оно лучшим, более креативным решением для навигации по сравнению с гамбургер-меню. Перестаньте говорить себе “В этом крутом сайте есть такое меню, значит, оно должно быть лучшим” или “Все так делают, значит это правильно”. Дизайн заслуживает лучшего, более внимательного подхода.
ОБНОВЛЕНИЯ
Коллин Эбергардт отметил в ТВиттере, что такой же UI реализован в Windows Phone. Я сам пользователь Windows Phone, и он прав. Хотя такой тип взаимодействий используется в Windows Phone только для опции “more” в панели вкладок.

Джеймс Перих привел еще один пример в Твиттере. Посмотрите на AHTabBarController, созданный Артуром Хеммером.

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

Можно сделать как в приложении Jawbone Up: показывать иконку, отражающую суть уведомления рядом с кнопкой бокового меню.

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

А вот противоположный пример - панель вкладок Твиттера, которая показывает пользователю контекст уведомления и дает возможность сразу перейти на соответствующий экран.

Осознание проблемы

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

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

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

Решение

Мы много говорили о проблеме, но решение до сих пор не ясно.

Когда можно использовать гамбургерное меню?

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

IRCCloud - пример оправданного (в какой-то мере) использования кнопки-гамбургера: с ее помощью осуществляется навигация между каналами и участниками каналов.

Это приемлемо, так как у основного экрана нет никаких дочерних экранов, которым нужна иерархическая навигация; все содержимое представлено в модальном виде.

Но даже в этом случае видно, что интерфейс перегружен, а информационная архитектура требует пересмотра.

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

Это плавно подводит нас к следующему разделу статьи:

Чем заменить кнопку-гамбургер?

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

“Решение - в обновлении информационной архитектуры”.

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

Выводы:

1. Состояние представлено на вкладке Сообщения
2. Элементы интерфейса всегда видны и доступны
3. Нет конфликта между жестами навигации

В дополнение к тому, что мы решили основные проблемы, мы можем выиграть немного вертикального пространства, если спрячем панель навигации приложения при скроллинге вниз (см. пример Facebook, но это также используется и в Safari). Панель вкладок остается на своем месте, что позволяет нам пользоваться навигацией, даже когда панель навигации приложения спрятана.

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

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

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

Как это все масштабируется?

Я здесь привожу примеры iOS интерфейсов - лучшим решением на них является использование панели со вкладками или инструментами.

Но что, если на вашей панели вкладок больше 5 элементов?

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

Такая реализация сталкивается другой проблемой: после прокрутки панель инструментов остается в неопределенном состоянии. Rookie прячут панель после того, как пользователь выбирает одно из действий - обрезать, повернуть и т.п. Таким образом, неопределенное состояние панели “обнуляется”, и при повторном открытии она отображается в изначальном состоянии.

Заключение

Итак, вы прочитали статью о проблемах паттерна боковой панели и о их решении в рамках iOS, которые были заложены в систему с самого начала.

Надеюсь, статья была вам полезна и понятна. Если у вас есть комментарии, пишите мне

От Виталия Рубцова и не мог удержаться от желания её реализовать.

В этом уроке я расскажу, как сделать такое с помощью одного CSS, без какого-либо использования JavaScript. Итак, мы увидим некоторые трюки CSS (и SCSS), которые позволят нам добиться почти такой же плавной анимации, как и этот анимированный gif.

Вот пример того, что мы будем делать:

Разметка

Начнём со структуры HTML, которую мы будем использовать. Смотри комментарии для лучшего понимания.

Начальные стили SCSS

Теперь добавим некоторые базовые стили, чтобы получить желаемый внешний вид. Код довольно простой.

/* Базовые стили */ * { box-sizing: border-box; } html, body { margin: 0; } body { font-family: sans-serif; background-color: #F6C390; } a { text-decoration: none; } .container { position: relative; margin: 35px auto 0; width: 300px; height: 534px; background-color: #533557; overflow: hidden; }

Работа переключателя

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

Нужный нам HTML уже на месте. А стиль, который заставляет его работать, примерно такой:

// Прячем чекбокс #toggle { display: none; } // Стили для «открытого» состояния, когда чекбокс выбран #toggle:checked { // Любой элемент, стиль которого вам нужно изменить при открытии меню, идёт здесь с селектором ~ // Стили для открытия навигационного меню, к примеру & ~ .nav { } }

Создание закрытого состояния

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

И вот код, который это реализует.

$transition-duration: 0.5s; // Отображение пунктов навигации в виде линий, составляющих иконку гамбургера.nav-item { position: relative; display: inline-block; float: left; clear: both; color: transparent; font-size: 14px; letter-spacing: -6.2px; height: 7px; line-height: 7px; text-transform: uppercase; white-space: nowrap; transform: scaleY(0.2); transition: $transition-duration, opacity 1s; // Добавление ширины для первой линии &:nth-child(1) { letter-spacing: -8px; } // Добавление ширины для второй линии &:nth-child(2) { letter-spacing: -7px; } // Настройки для элементов, начиная с четвёртого &:nth-child(n + 4) { letter-spacing: -8px; margin-top: -7px; opacity: 0; } // Получение линий для иконки гамбургера &:before { position: absolute; content: ""; top: 50%; left: 0; width: 100%; height: 2px; background-color: #EC7263; transform: translateY(-50%) scaleY(5); transition: $transition-duration; } }

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

Создание открытого меню

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

$transition-duration: 0.5s; #toggle:checked { // Открываем & ~ .nav { // Восстанавливаем пункты навигации из «линий» в иконке меню.nav-item { color: #EC7263; letter-spacing: 0; height: 40px; line-height: 40px; margin-top: 0; opacity: 1; transform: scaleY(1); transition: $transition-duration, opacity 0.1s; // Скрываем линии &:before { opacity: 0; } } } }

Магия в мелочах

Если мы посмотрим ближе на gif, то увидим, что все пункты меню перемещаются не одновременно, а в шахматном порядке. Мы можем сделать такое и в CSS! В принципе нам нужно выбрать каждый элемент (с помощью :nth-child ) и задать постепенное повышение значения transition-delay . Это, безусловно, повторяющаяся работа. А что если у нас будет больше элементов? Не волнуйтесь, мы можем сделать всё лучше, используя немного магии SCSS:

$items: 4; $transition-delay: 0.05s; .nav-item { // Задаём задержку для пунктов навигации при закрытии @for $i from 1 through $items { &:nth-child(#{$i}) { $delay: ($i - 1) * $transition-delay; transition-delay: $delay; &:before { transition-delay: $delay; } } } }

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

$delay: ($items - $i) * $transition-delay;

Вывод

Вот мы и закончили с нашим причудливым меню! Мы также включили некоторые фиктивные элементы как в анимированном gif, и вы можете увидеть .

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

Надеемся, этот урок оказался вам по душе и вы сочли его полезным!

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

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

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

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

Сегодняшняя коллекция включает в себя 20 различных вариаций иконки-гамбургера.

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

А эту иконку с океанскими волнами разработал Мэт Уокер. Она отлично будет чувствовать себя на различных проектах, посвященных морю. Голубой в качестве основного цвета и рамка вокруг делают этот значок эксклюзивным.

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

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

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

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

Бургер меню от Питера Тваури – это прекрасно иллюстрированная версия иконки. Ключевая особенность этого значка заключается в выборе цветов, имитирующих разрезанную булочку и мясную котлету.

Серия имеет различные варианты гамбургеров, которые реализуются с помощью стиля линии. Тут вы найдете двойной гамбургер, гамбургер с сыром и салатом, открытый бутерброд и некоторые другие. Найти идеальное решение для вашего аккуратного, плоского интерфейса будет просто, чтобы добавить пикантности и «вкуса».

Художник демонстрирует три забавные версии кнопки: классический гамбургер, чизбургер и хот-дог. В основе каждого лежит один или два цвета, что делает его пригодным для различных крошечных интерфейсов. Здесь цвет создает правильный вид бутерброда.

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

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

Меню анимация значка-ниндзя от Эндрю Ковардакова отличается от большинства кнопок-гамбургеров, и предлагает интересное и незаурядное решение, с таинственным и привлекательным подтекстом. Здесь каждая линия – ниндзя в векторе.

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

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

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

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

До сих пор мы рассматривали иконки отдельно, но они прекрасно сотрудничают со словами, особенно, когда это слово «Меню». Хотя это может показаться излишним, вместе они выглядят изысканно. Ультратонкие линии шириной в 1px, которые используются в этом случае, совмещаются как части головоломки.

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

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

Итоги

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

В котором предложил пять альтернатив меню-«гамбургеру» для организации навигации в мобильном приложении..

«Если вы работаете над цифровыми продуктами, то наверняка прочли десятки статей о том, как и почему меню-"гамбургер" вредит пользовательскому опыту на мобильных устройствах из-за его непонятности и неэффективности. Всё больше и больше проектов экспериментируют с альтернативными вариантами представления меню», - пишет Золтан Коллин.

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

1. Вкладки

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

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

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

2. Вкладки с вариантом «Другое»

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

«Кажется, что такой вариант не лучше, чем меню-"гамбургер", однако если подобрать вкладки таким образом, чтобы почти вся необходимая пользователю информация находилась в первых четырёх разделах, UX почти не пострадает», - объясняет Коллин.

3. Разворачивающееся меню

Вариация вкладок с разделом «Другое» - меню, которое адаптируется под размер экрана и показывает различное количество вкладок на каждом разрешении. Те вкладки, которые не помещаются на экране, оказываются в разделе «Другое».

4. Прокручивающееся меню

«Если у вас есть несколько разделов, а выделить среди них основные не получается, использовать вкладки с дополнительным разделом может оказаться неэффективным решением. Тогда можно перечислить в меню все элементы и сделать панель прокручивающейся», - пишет Коллин.

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

При этом дизайнерам следует убедиться, что пользователям ясно, как применять прокрутку - и установить визуальные подсказки. Например, применить эффект «выцветания» для последнего элемента.

5. Выпадающее меню

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