типы навигации в мобильных приложениях
Как создать удобную навигацию в мобильных приложениях
Хороший дизайн мобильной навигации должен быть интуитивно понятным и простым, чтобы помочь пользователю как можно легче найти то, что ему нужно. Чтобы создать мобильное приложение, дизайнер использует много инструментов для разработки системы навигации, но только часть из них действительно выполняет свою функцию.
В статье разбираем самые эффективные компоненты пользовательского интерфейса и объясняем, почему они работают.
Что такое навигация в мобильном приложении
Навигация — это то, как пользователи взаимодействуют с приложением, дизайном и переходят от одного пункта интерфейса к другому. Ее можно сравнить с дорожной системой: в приложении есть десятки магистралей, которые направляют пользователей в нужное им направление.
Дизайн навигации любого продукта — один из главных пунктов разработки. В качестве цели навигации многие прописывают перемещение пользователей за минимально возможное время, но путь пользователя должен быть не только быстрым, но ещё логичным и простым.
Какой должна быть мобильная навигация
Наглядной и интуитивно понятной
Люди не хотят думать о том, для чего нужны кнопки и куда ведут ссылки. С точки зрения удобства им достаточно, чтобы навигация была простой и понятной. Создать такую навигацию помогут проведенные исследования, сформированный портрет пользователей и знания паттернов поведения.
Удобной
Приложение должно быть удобным для пользователей с любым размером пальцев. Никто не должен тратить время на то, чтобы по несколько раз нажимать значок, пытаясь зайти на нужную страницу. Поэтому ссылки и кнопки в приложении должны быть достаточно большими, чтобы большинство людей могло с первого раза нажать любую из них. Универсальный размер кнопки — 10 мм.
Еще важно учитывать расстояние между элементами навигации. У пользователей должно быть достаточно свободного места, чтобы не нажимать на другие кнопки рядом.
С разборчивым контентом
Экран телефона намного меньше экрана компьютера, поэтому могут возникнуть проблемы с удобочитаемостью, так как во многих приложениях даже значки из гамбургер-меню сопровождаются текстом. Не заставляйте пользователей терять зрение в попытках прочитать текст на ссылках и кнопках.
Размер в мобильной навигации действительно имеет значение, поэтому нужно потратить время на тестирование и проверить, как пользователи взаимодействуют с приложением. Вложите время и силы на создание прототипов, чтобы воссоздать реалистичную навигацию и заранее исправить все ошибки.
Статья о том, что такое прототипы.
С упорядоченной и визуальной иерархией
На маленьких экранах намного проще устроить беспорядок, поэтому дизайн мобильных приложений требует отказаться от второстепенных элементов (или разместить их в меню). В случае с мобильными приложениями дизайнеры выбирают минималистичный дизайн, который не загромождает интерфейс лишними графическими элементами.
Компоненты пользовательского интерфейса для мобильных приложений
Гамбургер-меню
В ограниченном пространстве мобильного интерфейса гамбургер-меню поможет скрыть сложную навигацию, чтобы избежать отвлекающих элементов. К тому же, гамбургер-меню знакомо почти всем пользователям и имеет свои преимущества: они уже знают, что это такое, как работает и чего ожидать. Знакомые элементы в интерфейсе продукта помогают пользователю расслабиться и легче воспринимать что-то новое.
Пример скромного гамбургер-меню в приложении telegram. Приложением легко пользоваться, потому что гамбургер-меню предлагает все ключевые параметры навигации, которые могут понадобиться. И все это с помощью простой иконки, которая почти не занимает места в интерфейсе.
Нижняя навигация в приложении
Нижняя навигация помогает свободно использовать приложение и удобно держать телефон в руках, поэтому позволяет добраться до определенных пунктов одним нажатием пальца. А если использовать не более пяти пунктов, снижает утомляемость пользователей и сохраняет место на экране.
Навигация мобильного приложения Twitter сосредоточена на нижней панели, охватывающей четыре основных пункта приложения.
Верхняя навигация в приложении
Она также состоит из панели навигации, но расположена в верхней части экрана и обычно используется в сочетании с другими инструментами. Например, ее используют для основных ссылок, которые остаются видны при прокрутке, а для вторичных — нижнюю панель или гамбургер-меню.
Навигация в приложении на основе жестов
Навигация на основе жестов позволяет пользователям быстро проводить пальцем в нужном направлении для навигации по приложению или выполнять определенные действия. Как шаблон навигации пользовательского интерфейса он существует уже несколько десятилетий, но популярность к нему пришла только с появлением популярного дейтинг-приложения Tinder, где можно смахнуть вправо или влево, выбирая себе пару.
Навигация с помощью жестов помогает перемещаться между сценами в приложении, а жесты касаться и перетаскивать элементы по горизонтали и вертикали, увеличивать и уменьшать масштаб. Это создает интерактивный и динамичный пользовательский опыт.
Такой шаблон интерфейса легко понять даже неопытному пользователю, поскольку жесты часто интуитивно понятны и требуют малого количества действий, чтобы добиться правильного результата.
В приложении Treep используется классический шаблон смахивания влево или вправо. Это делает процесс выбора активности динамичным, легким и интересным.
Полноэкранная навигация мобильных приложений
Если предыдущие шаблоны в списке сводятся к минимальному использованию пространства экрана, то полноэкранная навигация предполагает противоположный подход: тут почти вся часть экрана отводится только мобильной навигации. Этот подход хорошо помогает направлять пользователей от общих разделов продукта к конкретным.
Такая навигация может немного утомлять, но дизайнеры используют четкую визуальную иерархию, чтобы не перегружать пользователя. У этого способа есть свои минусы, но он помогает человеку сразу увидеть все функции продукта и варианты выбора.
Карточки
Карточки в пользовательском интерфейсе могут сделать приложение еще удобнее. Они бывают разных форм и размеров и являются отличным способом показать в одном месте разные элементы: текстовые блоки, ссылки или фотографии. А ещё они помогают пользователям сразу заметить, когда экран можно прокручивать по горизонтали, что улучшает общее удобство использования. Еще один плюс — их можно легко подстроить под любые размеры экрана, что отлично подходит для адаптивных приложений.
Spotify превратился в гиганта в сфере потоковой передачи музыки, и их дизайн пользовательского интерфейса отражает это. Мобильная навигация посвящена карточкам на домашней странице, которые помогают находить музыкальный контент. Spotify известен тем, что мотивирует пользователей открывать новые музыкальные горизонты: это улучшает весь пользовательский опыт. В качестве бонуса есть нижняя панель навигации, которая помогает разобраться в основной навигации приложения. За счет этого Spotify легко понять и изучить даже новым пользователям.
3D Touch
Впервые 3D Touch был представлен компанией Apple. Компания стала использовать ярлык, который отражает основные действия для выбранного приложения.
Еще одно распространенное использование такой мобильной навигации — предварительный просмотр контента. При работе со списком вариантов содержимого, например, в электронной почте или списке статей, это может быть хорошим способом обеспечить пользователю предварительный просмотр.
3D Touch удобен, но доступ к центральным функциям не должен проходить только с помощью него. Мобильная навигация по-прежнему должна обеспечивать четкий путь, чтобы пользователи могли находить основные функции, не открывая опцию 3D Touch.
Назначение навигации – помочь пользователям достичь той цели, ради которой они пользуются приложением. Зная их предпочтения и учитывая ограниченное пространство экрана вы сможете создать удобную навигацию и качественный UX.
Как улучшить интерфейс с помощью иконок
Иконки есть на всех интернет-ресурсах и без них не обходится ни одно приложение. Зачем они нужны и как с их помощью улучшить интерфейс?
Свяжитесь с нами
Хотите получить бесплатную консультацию о разработке мобильного приложения?
Мы сможем сразу дать ориентировочную оценку проекта по стоимости и срокам, если Вы кратко опишите его основную идею и функции.
Как продумывать навигацию в мобильных приложениях
Важно располагать кнопки только там, где они будут востребованы, чтобы не засорять интерфейс и визуально не перегружать его для пользователей. Важно предоставлять пользователю информацию, необходимую для принятия решения нажимать по имеющейся кнопке или нет. Теперь про навигацию. Я попыталась порассуждать почему те или иные элементы в приложениях реализованы так.
Гамбургер
В раскрывающееся меню типа “гамбургер” имеет смысл размещать редко востребованные, не целевые пункты меню, так как для доступа к этим пунктам нужно нажать на кнопку. Это уменьшает вероятность того, что про наличие тех пунктов меню, которые находятся за кнопкой в принципе узнает пользователь (если это не единственная кнопка в интерфейсе). Также многое начинает зависит от того насколько заметна эта кнопка в контексте экрана. В гамбургере часто можно увидеть Политику и Пользовательские соглашения, Помощь, FAQ и подробную техническую информацию, которая редко востребована пользователем. В то время, как целевые кнопки располагаются в нижнем меню — в максимально быстром доступе для пользователя.
Всего один клик — несколько секунд, если делаешь его всего один раз. А когда этот клик нужно делать каждый раз когда хочешь использовать целевую функцию приложения, то это может вылиться в несколько часов напрасно потраченного времени в сумме. Заботимся о наших пользователях.
Рис. 1. Пример меню гамбургера
Профиль
Пользователи любят персонализацию. Поэтому наличие профиля достаточно распространено в приложениях, в которых есть толика социальной направленности. Т.е. если в приложении подразумевается обмен информацией или еще что-то, что подразумевает идентификацию тебя как личности перед другим человеком — автоматически подразумевается, что в приложении обязательно должен быть и профиль, с возможностью его гибкой настройки. Если у пользователя не будет возможности исправить опечатку, образовавшуюся при регистрации в личных данных типа логина или e mail, или поменять аватарку, которая высвечивается другим пользователям, это принесет боль и страдания. Профиль принято обозначать иконкой человека или установленной пользователем аватаркой.
Следует обратить внимание на то, как это делает инстаграм. Для того, чтобы не отвлекать пользователя с одним подключенным аккаунтом цветной иконкой профиля — профиль обозначается стандартной иконкой того же цвета что и основное меню. Когда же подключено несколько аккаунтов, то то с какого аккаунта ты совершаешь действия — становится достаточно важным, чтобы сделать больше акцента на то, из под какого профиля сейчас действует пользователь. Поэтому в меню уже видно иконку “активного” профиля.
Рис. 2. Скриншоты из инстаграма нижнего меню. Слева — один профиль у пользователя, справа — два подключенных профиля к одному аккаунту
Также отмечу, что видела некоторые приложения, которые не предполагают идентификацию пользователя перед другими людьми, но при этом, аватарке пользователя уделено слишком много места и внимания. И, естественно, в таких случаях редко люди напрягаются, чтобы ее заменить на что-то персонализированное, ведь кроме них самих эту аватарку никто не видит. Это часто бывает в технически ориентированных системах, типа приложений для учета чего-либо на каких-нибудь складах или отслеживания какой-либо статистики. В таких случаях стоит действительно задаваться вопросом “а нужен ли этот функционал здесь или нужен ли он в таком объеме?”.
Нижнее меню
Самая распространенная форма меню на данный момент. И эта популярность имеет под собой почву.
Оно удобное, легко читается, описано в гайдах к дизайну андроид и айоса. Оно себя зарекомендовало и подтвердило продолжительным использованием, как удобное и понятное.
Вообще, я бы отметила несколько этапов этого меню. Для совсем инновационных приложений, которые используют еще непривычные пользователи иконки для обозначения пунктов меню, следует первое время, пока собирается аудитория приложения агрессивным маркетингом, использовать подписи под пунктами меню, как это делает Тикток, например. Подписи под пунктами меню стоит оставлять и приложениям со сложной навигацией или широким ассортиментом функционала, в которых сложно однозначно трактовать ту или иную иконку.
Когда же большая часть аудитории у приложений с узкой направленностью сформировалась и дальше дело за сарафанным радио и менее агрессивным маркетингом, можно убирать надписи пунктов меню и больше места уделять основному контенту приложения. Сокращая пространство выделенное раньше под меню, как Инстаграм, например. Для стандартных типовых приложений, или приложений уже собравших свою постоянную активную аудиторию, можно использовать меню без подписей.
Рис.3. Скриншот приложения Тикток
В некоторых случаях, самое основное целевое действие принято выделять визуально. Находясь в каждом из разделов меню, мы можем перейти в создание контента, потому что каждый из пунктов меню так или иначе связан с контентом, и вся суть приложения — это именно создание и обмен контентом. Примером может служить скриншот Тиктока.
Отмечу меню, которое выглядит непривычно и пользуется некоторой популярностью на дизайнерских сайтах, но при этом в реальных приложениях, рассчитывающих на большую аудиторию, оно, скорее всего, не возымеет популярности. Потому что не удобно читать пункты меню.
Рис.4. Вертикальное меню
Табы в разделе
Если данные относятся к одному разделу, но при этом имеют некоторые различия.
Например, в приложении Дрибл для дизайнеров есть переключение в ленте между тем на кого ты подписан, популярными и свежими публикациями. Т.е. информация одна и та же, но сортируется и фильтруется, соответственно и подается иначе. Аналогичным примером служит переключение между подписками и рекомендуемыми видео в Тикток.
В инстаграме табы использованы несколько иначе. С помощью табов можно переключаться между подразделами в профиле. В целом это тоже логично, мы ведь заходим в профиль чтобы провзаимодействовать с каким-то конкретным объектом — будь то мой пост, упоминания меню в чужих публикациях или что-то еще.
И на примере инстаграма так же легко продемонстрировать, что некоторые разделы не нужно отображать всем пользователям. Конкретно на примере раздела масок. Пока я не знала про их существование и что их можно создавать самому, у меня и не было такого раздела. Как только я загрузила свою первую маску в эту социальную сеть, то этот раздел начал у меня отображаться. Он ни к чему людям, которые не знают про маски, а используют инстаграм в других целях. Ни к чему этим пользователям перегружать экран лишней информацией. А тем, кто узнал про такую возможность — этот раздел соответственно нужен.
Рис. 5. Инстаграм, когда загрузила маску и до того, как загрузила первую маску
Стрелочка назад/ Крестик
Если мы, например, в рамках какого-то раздела, раскрыли детальную информацию, было бы отлично показать анимацией, что вот раздел раскрылся. И крестик, либо стрелочка назад служат для сворачивания детальной информации и возвращения обратно на предыдущий экран.
Это часто имеет смысл при переходе из списков или карточек товаров, чтобы пользователь понимал, что он вернется на то же место, с которого перешел из списка. А также что пользователь сможет продолжить просмотр ассортимента дальше, без необходимости пролистывать до нужного уровня каталога, с которого перешел в детальный раздел. Примеры можно легко посмотреть в приложениях Wildberries, Ozon, Lamoda и т.д.
Рис. 6. Анимация открытия детальной информации карточки и через стрелочку назад возврата к списку
Выезжающая снизу панель
Работает аналогично переходу на детальную информацию, но используется в случаях, когда нужно оставить визуальный доступ к разделу, из которого совершается переход. Поэтому он часто используется в картах, где пока ты решаешь куда пойти и по тому расстоянию которое тебе нужно преодолеть и по какой-то более детальной информации указанной в описании места. Также такой прием используется в приложениях еды. Когда ты оставляешь доступ к информации размещенной до вызова формы куда нужно ввести количество заказываемой еды. Также удачным примером может послужить выезжающая панель комментариев в Тиктоке. Мы оставляем возможность “помнить” про какую публикацию идут комментарии, буквально оставив видимым кусочек этого видео, когда разворачиваем панель с комментариями.
Рис. 7. Скриншоты Гугл карты слева, Яндекс еда посередине и Тикток справа
Кнопки быстрого доступа к действиям
Идет много рассуждений по поводу того какое влияние они оказывают и насколько много от них зависит. Но пока люди ищут социальное одобрение и иной формы сего не придумали, в приложениях будут оставаться кнопки социального одобрения.
Некоторые из кнопок выполняют само действие, а некоторые прокручивают до места, где это действие можно выполнить. Фокус при этом перемещается непосредственно на пространство, в котором выполняется действие. В качестве примера в первом случае — это лайк. Мы нажали и сразу увидели, что их количество увеличилось, а сердечко окрасилось. В качестве примера второго варианта — это комментарии. При нажатии на комментарий мы либо разворачиваем комментарии к публикации, либо сразу фокусируемся на поле ввода, чтобы оставить свой комментарий. Т.е. происходит небольшое, но перенаправление.
Вывод
Выстраивать навигацию в приложении — это дело которое требует внимательности, усидчивости и присутствия логики.
Пишите с чем согласны, с чем не согласны и может быть стоит дополнить чем-то статью.
Урок 11. Принципы навигации внутри и между андроид-приложениями
Более подробно на практике познакомиться и увидеть применение компонентов и технологий андроид-разработки вы можете в наших продвинутых курсах. Каждый продвинутый курс позволяет разработать полностью функциональное андроид-приложение или игру. Информацию о том, как подписаться на курсы, ищите на нашем сайте по ссылке.
Принципы навигации
Навигация между различными экранами и приложениями является основной частью пользовательского опыта. Следующие принципы устанавливают основу для согласованного и интуитивно понятного взаимодействия пользователя с приложениями. Компонент Navigation разработан для реализации этих принципов по умолчанию, гарантируя, что пользователи могут применять те же алгоритмы и шаблоны в навигации, когда они перемещаются между экранами в одном приложении и разными приложениями на устройстве.
Фиксированный пункт назначения
Каждое создаваемое вами приложение имеет фиксированный начальный пункт назначения. Это первый экран, который видит пользователь, когда запускает ваше приложение из панели запуска. Этот пункт назначения также является последним экраном, который видит пользователь, когда он возвращается к панели запуска после нажатия кнопки «Назад». Давайте рассмотрим приложение Sunflower в качестве примера.
Рисунок 1: Экран списка — это начальный пункт назначения приложения Sunflower.
Примечание. Приложение может иметь одноразовую настройку или серию экранов входа в систему. Эти условные экраны не должны рассматриваться как начальные пункты назначения, поскольку пользователи видят эти экраны только в определенных случаях.
Состояние навигации представлено в виде стека пунктов назначения.
Когда ваше приложение запускается впервые, на устройстве пользователя создается новая задача (task), и приложение отображает стартовый пункт назначения. Он становится базовым пунктом назначения так называемого стека переходов назад, или бэкстека (back stack), который является основой навигации вашего приложения. Вершина стека — это текущий экран, а предыдущие пункты назначения в стеке представляют историю посещенных экранов. Начальный пункт назначения приложения всегда находится в нижней части бэкстека.
Активити, которые запускаются, изменяют бэкстек, и всегда работают на вершине стека, либо помещая новый пункт назначения на вершину стека, либо выталкивая самый верхний пункт назначения из стека. При переходе к пункту назначения выбранный пункт оказывается на вершине стека.
Компонент Navigation управляет всеми вашими бэкстеками, хотя вы также можете сами ними управлять.
Подробнее о бэкстеке можно посмотреть урок по ссылке.
Кнопки «Вверх» и «Назад» идентичны в рамках задачи вашего приложения
Рисунок 2: Кнопки «вверх» и «назад»
Кнопка «Назад» появляется в системной навигационной панели внизу экрана и используется для навигации в обратном хронологическом порядке по истории экранов, с которыми пользователь недавно работал. Когда вы нажимаете кнопку «Назад», текущий пункт назначения выталкивается из верхней части бэкстека, а затем вы переходите к предыдущему пункту назначения.
Кнопка «Вверх» появляется на панели приложений в верхней части экрана. В задачах вашего приложения кнопки «Вверх» и «Назад» ведут себя одинаково.
Кнопка «Вверх» никогда не выходит из приложения
Если пользователь находится в начальном пункте назначения приложения, кнопка «Вверх» не появляется, поскольку кнопка «Вверх» никогда не должна позволять выход из приложения. Однако кнопка «Назад» отображается и при нажатии выполняет выход из приложения.
Когда ваше приложение запускается с использованием Deep Links на задачу другого приложения, кнопка «Вверх» переводит пользователей обратно на задачу вашего приложения через имитированный синтетическимй бэкстек, а не на приложение, которое вызвало ссылку Deep Links. Однако кнопка «Назад» возвращает вас к другому приложению.
Глубокие ссылки Deep Links имитируют ручную навигацию
Будь то Deep Links или ручная навигация к определенному пункту назначения, вы можете использовать кнопку «Вверх» для навигации к предыдущему пункту назначения.
При глубокой привязке к месту назначения в рамках задачи вашего приложения любой существующий бэкстек для задачи вашего приложения удаляется и заменяется бэкстеком с Deep Links.
Снова используя приложение Sunflower в качестве примера, давайте предположим, что пользователь ранее запустил приложение с экрана запуска и перешел на экран детализации яблока. Если посмотреть на экран списка последних приложений, это означает, что существует задача, верхним крайним экраном которой является экран детализации яблока.
Рисунок 3: Пользовательская навигация по приложению Sunflower и получающемуся бэкстеку.
На этом этапе пользователь может нажать кнопку «Домой», чтобы перевести приложение в фоновый режим. Далее, скажем, это приложение имеет функцию глубоких ссылок, которая позволяет пользователям попадать из поиска по имени растения прямо на конкретный экран с подробным описанием. Открытие приложения через эту глубокую ссылку полностью заменяет текущий бэкстек Sunflower, показанный на рисунке 3, новым бэкстеком, как показано на рисунке 4:
Рисунок 4: Переход по глубокой ссылке заменяет существующий бэкстек для приложения Sunflower.
Компонент Navigation поддерживает Deep Links и воссоздает реалистичный бэкстек для вас при связывании с любым пунктом назначения в вашем графе навигации. В последующих уроках мы на практике подробно разберем компонент Navigation набора инструментов Android Jetpack.