В Sparkbox написали о мобильной навигации по большим контентным сайтам [English].

— Иконку бургера стоит подписывать «Меню», если у сайта широкая аудитория с разным опытом и культурными особенностями;
— В главном меню разделяйте основные и второстепенные пункты визуально. Пункты (например, в меню второго уровня) можно группировать с помощью заголовков;
— Дайте возможность раскрыть несколько подменю одновременно. Отображайте иконки раскрытия и скрытия;
— Если навигация по дочерним страницам отображается на родительской, проверяйте, насколько она заметна и понятна пользователям (они склонны уходить в главное меню);
— В меню выделяйте страницу, на которой пользователь находится. На мобильных устройствах меню закрывает текущую страницу, пользователь теряет контекст и может выбрать её повторно (и расстроиться);
— Хлебные крошки помогают понять, где в структуре расположена текущая страница;
— Если ссылка или пункт меню ведёт на другой сайт с отличающейся навигацией, добавьте такой идентификатор. Открытие такого сайта в новой вкладке на мобильных устройствах сбивает с толку;
— Люди могут вообще не пользоваться вашей навигацией и идти через поисковые системы. Изучите, как люди ищут опубликованную вами информацию (какие слова используют и так далее), и оптимизируйте содержимое и метаданные страниц.

Так себе перевод со слетевшими картинками. #navigation

Виталий Фридман написал о кнопке «Назад».

— Чем визуально сильнее новое содержимое экрана отличается от предыдущего, тем больше вероятность, что пользователи будут воспринимать его как новую страницу и ожидать, что кнопка «Назад» вернёт их к «предыдущей странице». Хотя технически это может быть одна и та же страница;
— Например: список товаров после фильтрации или сортировки, отдельные шаги заказа в виде аккордеона, дополнительно открываемый на странице контент (особенно, если его много);
— Не надо возвращать пользователя к предыдущим фотографиям в галерее, предыдущим слайдам карусели, а также связывать кнопку «Назад» с переключением просмотра и динамическими секциями, так как они лишь меняют состояния страницы;
— Если нажатие «Назад» может привести к потере пользовательских данных, стоит сообщать об этом и предлагать подтвердить действие;
— Можно добавить отдельную кнопку «Назад» в интерфейс — специфичную для конкретной формы. Поведение браузерной кнопки не всегда очевидно, а кнопку в интерфейсе можно подписать, например, «К предыдущему шагу»;
— Чтобы избежать ошибок, кнопки «Назад» и «Далее» лучше разнести подальше друг от друга;
— Пользователям может и не потребоваться эта кнопка, если им будет доступен предыдущий контент. Например, снапшоты параметров гитары в конфигураторе в магазине Fender Mod Shop.

In English. #navigation

Эдвард Скотт написал о навигации по функциям личного кабинета.

— 81% интернет-магазинов, исследованных Baymard Institute, для навигации по функциями личного кабинета использует большое количество текстовых ссылок (в том числе разделённых на блоки);
— Такой объём текста пугает пользователей, не позволяет быстро находить нужные функции;
— Чтобы улучшить сканируемость страницы, каждый блок ссылок можно дополнить иконкой (Staples) или небольшой иллюстрацией (Microsoft). Это меняет пользовательское поведение: сначала они сканируют страницу в поисках подходящей иконки, а затем читают текстовую подпись, чтобы удостовериться, что это нужная им функция;
— Не стоит оставлять одни иконки без текстовых подписей, так как не все метафоры можно понять однозначно;
— Также не стоит совмещать на одной странице блоки с иконками и без (Amazon), так как пользователи будут игнорировать последние.

In English. #ecommerce #navigation

Фрэнк Рауш написал о шаблонах навигации в iOS-приложениях.

— Чаще всего архитектура приложений — иерархическое дерево с несколькими уровнями вложенности;
— Навигация происходит по структуре дерева. Из списка пользователь переходит к новому списку или конечным экранам, а возвращается назад по кнопке «<»;
— Плоская структура: шаблон предназначен для навигации между ключевыми экранами с помощью нижней панели на телефоне и боковой на планшете;
— Ключевых экранов может быть не более 5, один из пунктов меню всегда выбран, панель доступна всегда, когда не перекрыта модальным окном;
— Пирамидальная структура: шаблон позволяет быстро перемещаться между элементами одного уровня иерархии (например, свайпами), не возвращаясь на родительский экран;
— Модальная навигация: высокоприоритетные окна (требуют принятия решения, диалоги), низкоприоритетные (не требуют принятия решения, подсказки, попапы, всплывающие меню);
— Немодальная навигация: уведомления, интерактивные элементы вроде индикатора настройки громкости;
— Внутренняя навигация: изменение состояния (пользователь остаётся на том же экране), пошаговая навигация (ряд экранов объединены в линейный флоу и размещены в модальном окне).

In English. #mobile #navigation

Тесс Гэдд написала о сочетании предварительного просмотра и полного отображения.

— Превью (предварительный просмотр) — релевантные данные, позволяющие быстро составить общее представление и показывающие, что на них можно нажать для перехода к полному отображению (все данные);
— Варианты превью: карточки (включая вариант с одной карточкой в строке), список (может выглядеть как таблица), обрезка (заголовок и часть текста с кнопкой «Читать дальше»);
— Полное отображение: модальное окно (позволяет сохранить контекст), отдельная страница (больше места для информации, минимизирует отвлекающие факторы), боковая панель (может располагаться рядом с содержимым страницы и поверх него, удобно для работы с большим количеством данных), аккордеон (полное отображение появляется под элементом, на который нажал пользователь);
— Сочетание «карточка + отдельная страница» встречается чаще всего;
— «Карточка + модальное окно» подходит для развлекательных проектов, галерей, соцсетей;
— Сочетание «список + боковая панель + отдельная страница» реализовано в Notion. Можно открыть боковую панель и расширить её до всей страницы, чтобы список не отвлекал.

In English. #navigation

Юрий Марьенко написал об основных типах навигации на сайтах.

— Статичное меню в начале страницы. Если на странице содержимого много, пригодится кнопка возврата наверх, чтобы удобно было возвращаться к меню;
— Фиксированное меню — всегда остаётся на виду при скроле страницы. С ним в любой момент можно перейти в другой раздел сайта, но оно может мешать изучать содержимое страницы;
— Сочетание большого статичного и небольшого фиксированного меню — фиксированный вариант отображается при скроле, не занимает много места по вертикали и даёт быстрый доступ к самым важным разделам;
— Бургерное меню (статичное или фиксированное) — по нажатию на иконку бургера отображает список разделов. Хорошо работает на мобильных сайтах за счёт компактности. Часто используется на популярных сайтах (с большими каталогами), так что паттерн должен быть хорошо знаком пользователям;
— Многоуровневое меню — отображает основные разделы (4–7 пунктов), по нажатию на которые можно увидеть подменю с большим количеством подразделов. Подходит компаниям с несколькими направлениями бизнеса, узкоспециализированным интернет-магазинам;
— Меню помогает посетителям быстро понять, о чём сайт.

#navigation #menu

Стас Мельников написал о некоторых паттернах, повышающих доступность сайтов.

— Автофокус — автоматическая фокусировка на первом поле, которое пользователь должен заполнить в форме;
— Если главная задача страницы — заполнение формы, автофокус помогает пользователям сразу ей заняться. Особенно полезно тем, кто использует только клавиатуру или скринридер. Не нужно проходить через шапку и навигацию страницы;
— Но важно учитывать контекст. Если незрячий пользователь перешёл к форме со стороннего ресурса, скорее всего, он захочет изучить, куда попал и прочитать хотя бы шапку;
— Skip link — ссылка «Перейти к основному содержимому» — самый первый элемент страницы, отображается тем, кто для перемещения по странице использует клавишу Tab или скринридер, позволяет пропустить шапку с навигацией и перейти к основному содержимому страницы;
— Кнопка «Наверх» — ссылка, которая приводит в меню, аналог клавиши PageUp. С её помощью удобно просматривать одну страницу за другой;
— Но важно, чтобы в коде она располагалась в конце блока с основным содержимым страницы.

#accessibility #navigation

Ксения Толокнова написала о навигации в мобильных приложениях.

— Ограничения таббара: все сценарии приложения приходится раскладывать в 3–5 условных папок; бывает непросто придумать короткие и понятные названия разделов;
— Эффект размытия сложно реализовать в Андроиде, поэтому таббар в одном и том же приложении на разных платформах может отличаться. Пример — Revolut;
— Где отображается: 1) только на основных экранах, 2) на основных и внутренних экранах, 3) на внутренних экранах при прокрутке вверх;
— Первый вариант выбирают, например, мессенджеры, чтобы не отвлекать пользователя от открытого чата;
— Во втором случае таббар не отображается только тогда, когда что-то открыто поверх: полноэкранные модальные окна (например, просмотр видео), шторки, экранные клавиатуры;
— Такая навигация запоминает положение пользователя в разделе. Если из выбранной в разделе Fitness+ тренировки перейти в Summary, нажатие на Fitness+ вернёт к тренировке. Повторное нажатие на Fitness+ откроет главный экран раздела;
— Применяется реже и для приложений со сложной структурой разделов;
— Третий тип больше подходит для контентных лент и статей. Фейсбук вообще комбинирует варианты 2 и 3;
— Интересные решения, которые легко реализовать: градиентный фон с прозрачностью, если есть только тёмная тема (Spotify), выделение центральной иконки, по нажатию на которую поднимается шторка с основными действиями в приложении (Binance);
— Sidebar для навигации рекомендуют использовать в мобильных приложениях с 5 и более разделами или с 2 и более уровнями иерархии в навигации. Но в iOS это будет кастомная разработка;
— В приложениях с большой базой информации часто используют навигацию через поиск. Этот вид навигации редко является единственным, но часто бывает ключевым;
— Top bar (Top app bar в Андроиде) важен для навигации, так как позволяет разместить кнопку для возвращения назад или открытия сайдбара и иконки дополнительных действий (в гайдлайнах Material Design рекомендуют до 3);
— В Андроиде заголовок текущего экрана располагают близко к кнопке «Назад». Люди, которые раньше использовали iOS, могут думать, что это название предыдущего экрана.

#navigation #tab_bar