Важно располагать кнопки только там, где они будут востребованы, чтобы не засорять интерфейс и визуально не перегружать его для пользователей. Важно предоставлять пользователю информацию, необходимую для принятия решения нажимать по имеющейся кнопке или нет. Теперь про навигацию. Я попыталась порассуждать почему те или иные элементы в приложениях реализованы так.
Гамбургер
В раскрывающееся меню типа “гамбургер” имеет смысл размещать редко востребованные, не целевые пункты меню, так как для доступа к этим пунктам нужно нажать на кнопку. Это уменьшает вероятность того, что про наличие тех пунктов меню, которые находятся за кнопкой в принципе узнает пользователь (если это не единственная кнопка в интерфейсе). Также многое начинает зависит от того насколько заметна эта кнопка в контексте экрана. В гамбургере часто можно увидеть Политику и Пользовательские соглашения, Помощь, FAQ и подробную техническую информацию, которая редко востребована пользователем. В то время, как целевые кнопки располагаются в нижнем меню — в максимально быстром доступе для пользователя.
Всего один клик — несколько секунд, если делаешь его всего один раз. А когда этот клик нужно делать каждый раз когда хочешь использовать целевую функцию приложения, то это может вылиться в несколько часов напрасно потраченного времени в сумме. Заботимся о наших пользователях.
Рис. 1. Пример меню гамбургера
Профиль
Пользователи любят персонализацию. Поэтому наличие профиля достаточно распространено в приложениях, в которых есть толика социальной направленности. Т.е. если в приложении подразумевается обмен информацией или еще что-то, что подразумевает идентификацию тебя как личности перед другим человеком — автоматически подразумевается, что в приложении обязательно должен быть и профиль, с возможностью его гибкой настройки. Если у пользователя не будет возможности исправить опечатку, образовавшуюся при регистрации в личных данных типа логина или e mail, или поменять аватарку, которая высвечивается другим пользователям, это принесет боль и страдания. Профиль принято обозначать иконкой человека или установленной пользователем аватаркой.
Следует обратить внимание на то, как это делает инстаграм. Для того, чтобы не отвлекать пользователя с одним подключенным аккаунтом цветной иконкой профиля — профиль обозначается стандартной иконкой того же цвета что и основное меню. Когда же подключено несколько аккаунтов, то то с какого аккаунта ты совершаешь действия — становится достаточно важным, чтобы сделать больше акцента на то, из под какого профиля сейчас действует пользователь. Поэтому в меню уже видно иконку “активного” профиля.
Рис. 2. Скриншоты из инстаграма нижнего меню. Слева — один профиль у пользователя, справа — два подключенных профиля к одному аккаунту
Также отмечу, что видела некоторые приложения, которые не предполагают идентификацию пользователя перед другими людьми, но при этом, аватарке пользователя уделено слишком много места и внимания. И, естественно, в таких случаях редко люди напрягаются, чтобы ее заменить на что-то персонализированное, ведь кроме них самих эту аватарку никто не видит. Это часто бывает в технически ориентированных системах, типа приложений для учета чего-либо на каких-нибудь складах или отслеживания какой-либо статистики. В таких случаях стоит действительно задаваться вопросом “а нужен ли этот функционал здесь или нужен ли он в таком объеме?”.
Нижнее меню
Самая распространенная форма меню на данный момент. И эта популярность имеет под собой почву.
Оно удобное, легко читается, описано в гайдах к дизайну андроид и айоса. Оно себя зарекомендовало и подтвердило продолжительным использованием, как удобное и понятное.
Вообще, я бы отметила несколько этапов этого меню. Для совсем инновационных приложений, которые используют еще непривычные пользователи иконки для обозначения пунктов меню, следует первое время, пока собирается аудитория приложения агрессивным маркетингом, использовать подписи под пунктами меню, как это делает Тикток, например. Подписи под пунктами меню стоит оставлять и приложениям со сложной навигацией или широким ассортиментом функционала, в которых сложно однозначно трактовать ту или иную иконку.
Когда же большая часть аудитории у приложений с узкой направленностью сформировалась и дальше дело за сарафанным радио и менее агрессивным маркетингом, можно убирать надписи пунктов меню и больше места уделять основному контенту приложения. Сокращая пространство выделенное раньше под меню, как Инстаграм, например. Для стандартных типовых приложений, или приложений уже собравших свою постоянную активную аудиторию, можно использовать меню без подписей.
Рис.3. Скриншот приложения Тикток
В некоторых случаях, самое основное целевое действие принято выделять визуально. Находясь в каждом из разделов меню, мы можем перейти в создание контента, потому что каждый из пунктов меню так или иначе связан с контентом, и вся суть приложения — это именно создание и обмен контентом. Примером может служить скриншот Тиктока.
Отмечу меню, которое выглядит непривычно и пользуется некоторой популярностью на дизайнерских сайтах, но при этом в реальных приложениях, рассчитывающих на большую аудиторию, оно, скорее всего, не возымеет популярности. Потому что не удобно читать пункты меню.
Рис.4. Вертикальное меню
Табы в разделе
Если данные относятся к одному разделу, но при этом имеют некоторые различия.
Например, в приложении Дрибл для дизайнеров есть переключение в ленте между тем на кого ты подписан, популярными и свежими публикациями. Т.е. информация одна и та же, но сортируется и фильтруется, соответственно и подается иначе. Аналогичным примером служит переключение между подписками и рекомендуемыми видео в Тикток.
В инстаграме табы использованы несколько иначе. С помощью табов можно переключаться между подразделами в профиле. В целом это тоже логично, мы ведь заходим в профиль чтобы провзаимодействовать с каким-то конкретным объектом — будь то мой пост, упоминания меню в чужих публикациях или что-то еще.
И на примере инстаграма так же легко продемонстрировать, что некоторые разделы не нужно отображать всем пользователям. Конкретно на примере раздела масок. Пока я не знала про их существование и что их можно создавать самому, у меня и не было такого раздела. Как только я загрузила свою первую маску в эту социальную сеть, то этот раздел начал у меня отображаться. Он ни к чему людям, которые не знают про маски, а используют инстаграм в других целях. Ни к чему этим пользователям перегружать экран лишней информацией. А тем, кто узнал про такую возможность — этот раздел соответственно нужен.
Рис. 5. Инстаграм, когда загрузила маску и до того, как загрузила первую маску
Стрелочка назад/ Крестик
Если мы, например, в рамках какого-то раздела, раскрыли детальную информацию, было бы отлично показать анимацией, что вот раздел раскрылся. И крестик, либо стрелочка назад служат для сворачивания детальной информации и возвращения обратно на предыдущий экран.
Это часто имеет смысл при переходе из списков или карточек товаров, чтобы пользователь понимал, что он вернется на то же место, с которого перешел из списка. А также что пользователь сможет продолжить просмотр ассортимента дальше, без необходимости пролистывать до нужного уровня каталога, с которого перешел в детальный раздел. Примеры можно легко посмотреть в приложениях Wildberries, Ozon, Lamoda и т.д.
Рис. 6. Анимация открытия детальной информации карточки и через стрелочку назад возврата к списку
Выезжающая снизу панель
Работает аналогично переходу на детальную информацию, но используется в случаях, когда нужно оставить визуальный доступ к разделу, из которого совершается переход. Поэтому он часто используется в картах, где пока ты решаешь куда пойти и по тому расстоянию которое тебе нужно преодолеть и по какой-то более детальной информации указанной в описании места. Также такой прием используется в приложениях еды. Когда ты оставляешь доступ к информации размещенной до вызова формы куда нужно ввести количество заказываемой еды. Также удачным примером может послужить выезжающая панель комментариев в Тиктоке. Мы оставляем возможность “помнить” про какую публикацию идут комментарии, буквально оставив видимым кусочек этого видео, когда разворачиваем панель с комментариями.
Рис. 7. Скриншоты Гугл карты слева, Яндекс еда посередине и Тикток справа
Кнопки быстрого доступа к действиям
Идет много рассуждений по поводу того какое влияние они оказывают и насколько много от них зависит. Но пока люди ищут социальное одобрение и иной формы сего не придумали, в приложениях будут оставаться кнопки социального одобрения.
Некоторые из кнопок выполняют само действие, а некоторые прокручивают до места, где это действие можно выполнить. Фокус при этом перемещается непосредственно на пространство, в котором выполняется действие. В качестве примера в первом случае — это лайк. Мы нажали и сразу увидели, что их количество увеличилось, а сердечко окрасилось. В качестве примера второго варианта — это комментарии. При нажатии на комментарий мы либо разворачиваем комментарии к публикации, либо сразу фокусируемся на поле ввода, чтобы оставить свой комментарий. Т.е. происходит небольшое, но перенаправление.
Вывод
Выстраивать навигацию в приложении — это дело которое требует внимательности, усидчивости и присутствия логики.
Пишите с чем согласны, с чем не согласны и может быть стоит дополнить чем-то статью.
