Как спроектировать хороший таббар?
Лучшие практики UX/UI мобильных приложений
67
гайдлайнов
Таббар – элемент интерфейса, упрощающий навигацию в приложении. Причем достаточно популярный: для этой статьи я скачал 500 аппов и лишь в 14 его не было.
Может показаться, что таббар – это просто. Но, как показывает практика, это ощущение обманчиво, и классный таббар от убогого отличает множество деталей.
Сегодня будет много анти-примеров – все для того, чтобы вы не наступали на грабли, на которые кто-то уже наступил.
И, как всегда, подписывайтесь на канал и делитесь с коллегами – я это очень ценю.
Может показаться, что таббар – это просто. Но, как показывает практика, это ощущение обманчиво, и классный таббар от убогого отличает множество деталей.
Сегодня будет много анти-примеров – все для того, чтобы вы не наступали на грабли, на которые кто-то уже наступил.
И, как всегда, подписывайтесь на канал и делитесь с коллегами – я это очень ценю.
Структура статьи
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
1. Наличие и расположение
Таббар используется
Во многих случаях таббар более эффективен по сравнению с меню, т.к. до него не приходится тянуться через весь экран, а разделы доступны в 1 касание.
OBI
Если таббар, то без меню
Решили использовать таббар? Отказывайтесь от бургер-меню вверху экрана, иначе они начнут конкурировать за внимание пользователя.
АМИД
Не слишком большой
Таббар фиксирован и перекрывает собой часть контента на экране. Поэтому будет лучше, если он не будет занимать слишком много места по высоте.
Love Republic
Не слишком мелкий
При этом не стоит перегибать палку и делать его слишком мелким – иначе может возникнуть риск промахов при нажатии на элементы.
Не сливается с экраном
Спроектируйте таббар так, чтобы он воспринимался, как отдельный элемент и не сливался с остальными элементами интерфейса.
IKEA Qatar
Выделение тенью
Часто можно встретить выделение таббара ненавязчивой тенью, которая не привлекает к себе внимания, но дает понять, что таббар – отдельный элемент.
Комус
Выделение линией
В качестве менее броской альтернативы тени таббар на фоне остальных элементов экрана можно выделить за счет тонкой разделительной линии.
Ozon
Объект поверх контента
У некоторых компаний таббар реализован в виде отдельного объекта, расположенного поверх контента и не прилипающего к границам экрана.
РивГош
Выделение цветом?
Чаще всего цвет фона таббара нейтральный. Но если вы решили выделить таббар цветом, убедитесь, что это не будет смотреться слишком «кричаще».
МПР
Таббар с эффектом размытия?
Такое исполнение может смотреться достаточно интересно. Но важно отработать риск, что из-за полупрозрачного фона текст элементов не всегда будет легко считываться.
Быстроном
2. Состав элементов таббара
Элементов не слишком много
Не стоит перегружать таббар большим числом элементов, иначе они начнут смотреться слишком скомкано. Порог в 5 элементов лучше не превышать.
lamoda
Элементов не слишком мало
И наоборот, если таббар используется для размещения буквально пары элементов, могут возникнуть вопросы к его целесообразности.
AviaSurf
Ключевые разделы
В таббар лучше вынести лишь ключевые разделы. Все вторичные разделы могут со временем вызвать раздражение, т.к. при использовании они будут видны постоянно.
Эльдорадо
Раздел «Ещё»
Если все требуемые разделы не помещаются в таббар, их можно собрать в общем элементе верхнего уровня, при тапе по которому будут доступны все остальные.
Тинькофф
Привязка к контексту
Элементы таббара могут быть динамическими: например, если пользователь еще не авторизовался, вместо элемента «Профиль» его может встретить элемент «Войти».
FlowWow
3. Иконки разделов
Репрезентативны
Сделайте иконки репрезентативными разделам, которые за ними скрываются. Не создавайте дополнительную когнитивную нагрузку на пользователя.
Сантехника Онлайн
Понятны
Даже если иконка отражает суть раздела, убедитесь, что сама по себе она понятна пользователям. Например, здесь сразу не догадаешься, что имел в виду автор.
The Dubai Mall
Подстраиваются под контекст
Некоторые специально обновляют иконки таббара под контекст. Например, под праздники. Главное, чтобы новый дизайн не затруднял восприятие.
OneTwoTrip
В едином стиле
Как и в случае с быстрыми действиями, иконки в таббаре отображаются в 1 ряд, и лучше, если они будут реализованы в едином стиле.
Духи.РФ
Контрастны
Хоть серые иконки разделов – это частая практика, не стоит делать их слишком блеклыми, иначе у клиента может возникнуть ощущение, что они неактивны.
Дром
Единая толщина
В частности, если иконки выполнены линиями разной толщины, конечно же, большинство пользователей это не заметят, но такого лучше не допускать:
Cozy Home
В хорошем качестве
Гигиенический момент: иконки должны быть загружены в хорошем качестве, не должны пикселить или размываться. В идеале – в векторном формате.
Подружка
Без мелких деталей
Задача иконки – облегчить восприятие раздела. Добавляя в нее мелкие и трудно различимые детали, мы можем достичь противоположного эффекта.
Elyts
Не слишком крупные
Опять же, везде важна золотая середина. Слишком крупные иконки могут смотреться неэстетично. Анти-пример, разумеется, есть в наличии:
Питание
Без разделителей
Разделители между иконками в таббаре – крайне редкая практика. Вероятно, этому есть причина. Но я просто не мог обойти такое исполнение стороной:
Магнолия
Реализованы с отступами
Таббар должен «дышать»: иконки не должны прилипать к его границам. Поэтому лучше снабдить элементы отступами.
Рив Гош
4. Названия разделов
Добавлены
Особенно если в таббаре есть нестандартные разделы, снабдите иконки подписями, чтобы облегчить их восприятие.
Pepper.ru
Контрастны
Сделайте текст разделов достаточно контрастным по отношению к фону таббара. Иначе, опять же, можно вызвать проблемы с его читаемостью.
Дром
Размер шрифта не мелкий
Из-за ограничений размера самого таббара размер шрифта в нем будет небольшим. Но не стоит уходить в крайности и делать его нечитаемым:
DetMir.kz
Толщина шрифта достаточна
Из-за ограничений размера самого таббара размер шрифта в нем будет небольшим. Поэтому лучше не воздержаться от слишком тонких начертаний шрифта.
Pull & Bear
Краткие
Пространство в таббаре сильно ограничено. Поэтому будет лучше, если тексты подписей к разделам будут максимально краткими.
Zepp Life
Понятные
Возможно не всем клиентам будут понятны ваши изначальные формулировки разделов и целевых действий. Поэтому не поленитесь – подключите к задаче UX-редактора.
Krisha.kz
С отступами
Будет лучше, если тексты разделов не будут прилипать вплотную к иконкам и между ними будут отступы.
Spar
Выровнены
Подписи должны быть выровнены относительно друг друга. Иначе может возникнуть ощущение, что к разработке и дизайну относились спустя рукава.
Travelata.ru
Видны полностью
Разместите тексты в таббаре так, чтобы они не перекрывались системной полоской iOS. От такого исполнения лучше воздержаться:
Магнолия
Локализованы
Если вы делаете локализацию приложения на другие языки, не забудьте перевести текст разделов в таббаре.
TikTok
Локализация корректна
Лучше не ограничиваться Google Translate и привлечь к переводу носителей языка / сервисы локализации. Иначе тексты могут быть не совсем понятны аудитории:
WearFit Pro
Единый размер шрифта
Некоторые при локализации решают сэкономить ресурсы и вместо проработки текстов сделать размер шрифта динамическим. Получается так себе:
Худеем за 30 дней
Тексты не обрезаются
А некоторые открывают для себя волшебные возможности обрезания текста, если он не впишется. Аудитория и в этом случае будет разработчикам «благодарна»:
Way of Life
5. Бейджи и маркеры
Используются
Размещение бейджей и маркеров поверх иконок таббара позволяет привлечь внимание к разделу или целевому действию.
Ozon
Визуализация стандартна
Используйте стандартную визуализацию бейджей. Лучше если они будут схожи по дизайну со стандартными бейджами на иконках приложений в iOS.
Maps.Me
Не перекрывают иконки
Хоть бейджи и созданы для привлечения внимания, они не должны визуально «кричать» – в том числе слишком сильно перекрывать собой иконки таббара.
Way of Life
Осторожнее со знаком «!»
Восклицательный знак в кружке чаще всего ассоциируется с ошибкой, и привлекать таким образом внимание к тому, что пользователь просто не авторизован, не стоит.
Fitness Online
Число в бейдже корректно
Базовый момент: число в бейдже должно соответствовать числу уведомлений или «задач», стоящих перед пользователем.
Mango
Изначальное число минимально
Встречаются кейсы, когда сразу после установки приложения клиент сталкивается с тем, что у него несколько десятков задач. Как говорится, «добро пожаловать!»
Bosco Outlet
Точка vs. бейдж
Если вам требуется лишь привлечь внимание к разделу без фокуса на количестве уведомлений, бейдж можно заменить точкой – смотреться будет более лаконично.
ИВИ
6. Переключение разделов
Моментально
Спроектируйте подгрузку данных так, чтобы переключение между разделами при тапе было моментальным и не возникало никаких значимых задержек.
М.Видео
Реакция на касание
Добавление незначительной реакции элементов таббара на касание при переключении разделов может сделать интерфейс более отзывчивым.
Clan VI
Микро-анимация
С помощью микро-анимации можно сделать переключение между разделами более явным и визуально приятным.
СберМаркет
Переход из быстрых действий
Если в быстрых действиях в приложении вы используете ссылки на разделы из таббара, убедитесь, что он корректно реагирует и выделяет нужный раздел.
Духи.РФ
Тактильная обратная связь
Также при переключении разделов таббара можно добавить незначительную вибрацию, дополнительно подтверждающую это действие.
7. Highlight активного раздела
Активный раздел подсвечен
Одна из основных задач таббара – это навигация. Поэтому активный раздел лучше всегда подсвечивать.
Буквоед
Без визуальной конкуренции
Некоторые, помимо разделов таббара также выделяют цветом какой-то основной. В результате это усложняет навигацию: в каком разделе сейчас находится клиент?
СпортМастер
Изменение цвета иконки
Выделить активный раздел в рамках таббара можно просто за счет изменения цвета его иконки. Смотреться будет неплохо:
KuchenLand
Заливка vs. контур
Можно пойти дальше и добавить к иконке активного раздела заливку, в то время как остальные будут отображаться лишь в контуре:
No One
Градиентная заливка
Интересный пример выделения элемента – это заливка иконки не одним цветом, а градиентом в соответствии с корпоративными цветами:
tutu.ru
Разноцветные иконки?
Иногда иконки можно встретить в 2 и более цветах. Что думаете по этому поводу? Хорошо или не очень? Что стоит учесть? Напишите в комментариях.
Major Auto
Фоновая подсветка
Особенно если интерфейс приложения темный, фоновая подсветка раздела может стать хорошей альтернативой выделению иконки и текста цветом.
ИВИ
Текст виден
Некоторые выделяют иконку, но скрывают текст текущего раздела, тем самым затрудняя восприятие на уровне пользователя.
La Redoute
Форматирование текста
Также в активном разделе часто можно встретить изменение цвета текста по аналогии с цветом иконки и незначительное увеличение толщины шрифта.
Сантехника Онлайн
Цвет текста vs. иконки
Возможно, это вкусовщина. Но делать подпись в другом цвете по отношению и к иконке, и к неактивному состоянию – перебор. Что думаете по этому поводу?
ЗооЗавр
Подчеркивание?
Также спорная практика: активный элемент становится менее заметен, а полоска подчеркивания начинает перекликаться с системной полоской внизу.
Cozy Home
Без выделения фона
Выделение фона активного элемента встречается очень редко, и высоки шансы, что такой способ подсветки активного раздела будет выглядеть «не очень» изящно:
Магнолия
Выделение заметно
Основная цель выделения должна выполняться: активный элемент должен быть хорошо заметен как на фоне других элементов, так и на фоне таббара в целом.
Холодильник.ру
Легко воспринимается
Выделяя активный раздел на фоне остальных, убедитесь, что он будет визуально легко восприниматься и не будет «резать глаз»:
Акушерство
8. Пара интересных идей
Контекстное меню
При зажатии элемента таббара (long press) можно вызывать контекстное меню с релевантными действиями. Главное, чтобы пользователи знали об этой функции.
Telegram
Настройка таббара
Ну и последнее. Есть техническая возможность дать клиенту самому настроить состав таббара. Как считаете, где бы это могло пригодиться? Напишите в комментариях.
To be continued...
Хоть таббар и кажется достаточно простым, при его проектировании можно совершить много ошибок. Избежать их позволяет именно насмотренность. Надеюсь, что помогаю вам ее прокачивать.
Следующие статьи будут с таким же уровнем детализации. Продолжаем создавать базу знаний по UX/UI мобильных приложений.
Не забудьте подписаться на канал в Telegram и поделиться этим постом с друзьями и коллегами. Будем на связи.
Все статьи по e-commerce