Навигация в виде вкладок: когда использовать и как оптимизировать

Posted on by riasevastopol

«Жизнь подобна беседе. Веб-дизайн также должен быть таким. В сети вы рассказываете с кем-то, кого, вероятнее, ни при каких обстоятельствах не видели, исходя из этого принципиально важно быть ясным и правильным.

Прекрасно структурированные организация и навигация контента идут рука об руку с красивым диалогом».

Начальник направления по компании и оптимизации Nest Чакези Иджиази (Chikezie Ejiasi).

Может ли навигация в виде вкладок быть ясной и правильной? Само собой разумеется, да, и потому она есть жизнеспособной формой организации и навигации контента. Но, как и с большинством вещей, касающихся пользовательского опыта (User Experience либо UX), имеет значение, как вы ее внедрили и оптимизировали.

Навигация мобильных приложений и сайтов: базисные правила юзабилити

Во-первых, что такое навигация в виде вкладок?

Хорошее объяснение дал Мэтт Кроунин (Matt Cronin), фриланс-разработчик и дизайнер:

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

Во-первых, комплект вкладок прикрепляется к более неспециализированному блоку либо легко выдается из него, как в примере ниже:

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

Глядя на такую навигацию в различных источниках, вы увидите пара неспециализированных черт:

1. Углы вкладок закруглены;
2. Вкладки разделяются посредством пространства либо линии;
3. На вкладках употребляются ховер-эффекты;
4. Для большей глубины задания и цвета размера вкладок используется плавный переход цветов (градиент).

Вкладочная навигация имеет в собственной базе метафору с папками, образ, привычный любому человеку, трудившемуся в офисе либо видевшему его обстановку. Вот как это сравнение осознаёт Джастин Мифсад (Justin Mifsud), основатель UsabilityGeek:

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

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

Так, данное представление делается более интуитивным для людей, осознающих, что вкладки разделяют контент по секциям. Они смогут, как и в реальности, прикоснуться к нужной рубрике (в сетевом контексте — кликнув на вкладку), дабы открыть соответствующий контент».

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

Как каждая вторая качественная навигационная совокупность, навигация с вкладками разрешает:

  • Разносить контент по различным секциям в соответствии с его значением;
  • Показывать, какой контент дешёв и как его возможно взять;
  • Визуально демонстрировать людям, в каком месте сайта они находятся.

Из-за чего хорошая навигация действеннее функции поиска на сайте?

В то время, когда направляться использовать навигацию с вкладками?

Таковой вид навигации самый оправдан, в то время, когда:

  • У вас имеется от 2 до 9 категорий контента;
  • Заглавия категорий довольно маленькие и предсказуемые, это относится как размещения, так и самого текста (другими словами они должны сочетаться с прототипной версией);
  • Число категорий не будет довольно часто изменяться;
  • Категории похожи по сути, и потому логично их размещение вблизи друг от друга;
  • Все категории умещаются в один последовательность.

По словам Джейкоба Нильсена (Jakob Nielsen), руководителя и основателя Nielsen Norman Group, в тех случаях, в то время, когда вкладочная навигация делается такой сложной, что требует пара последовательностей, начинают появляться неприятности:

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

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

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

Элементы управления вкладками во втором последовательности смогут показаться менее серьёзными если сравнивать с «родительскими» вкладками (Tab 1 и Tab 2)

Не следует включать в дизайн навигацию с вкладками, в то время, когда:

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

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

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

Проектирование пользовательского опыта: мега-экскурсовод по навигации сайта

Неоднозначность

Не смотря на то, что современная практика дизайна предполагает наличие громадного количества лендингов, выглядящих следующим образом:

кое-какие компании все же применяют панель с вкладками в качестве главного вида навигации.

Люк Вроблевски (Luke Wroblewski), начальник отдела по разработке новых продуктов в Гугл, отмечает, что пионером тренда был Amazon:

«Во второй половине 90-ых годов двадцатого века у сайта было 2 категории наибольшего уровня: книги и музыка.

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

Вот так смотрелась вкладочная навигация на сайте Amazon на ранних стадиях:

Сайт набирал популярность, и число вкладок росло:

Во второй половине 90-ых годов двадцатого века Джейкоб Нильсен из Nielsen Norman Group назвал это «нехорошим дизайном, отражающим злоупотребление метафорой»:

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

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

И все-таки многие сайты последовали примеру Amazon, и концепт навигации в виде вкладок начал отклоняться от нильсеновского «переключения между другими данными».

В 2016 году, как и в 1999-м, Нильсен все еще придерживается собственной точки зрения:

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

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

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

Юзабилити-тестирование: пошаговая инструкция на примере Yelp

Внедрение

Многие большие компании, включая Air Canada, удачно применяют подобную навигацию:

Если вы также решили внедрить навигацию с вкладками (на любом уровне), имейте в виду следующее:

  • Сперва создайте информационную архитектуру (Information Architecture, IA) сайта — так вы сможете принимать более продуманные решения относительно вкладок.
  • Вся поверхность вкладки должна быть дешёвой для нажимания, а не только содержать наименование категории (текст).
  • Не применяйте вкладку «Домашняя страница», в случае если используете навигацию для всего сайта. Вместо этого включите логотип, приводящий визитёров на соответствующую страницу.
  • Вкладка должна быть связана с тем контентом, к которому относится ее наименование, дабы был понятен тип информации, озвученный в тексте вкладки.
  • Наименование категории должно укладываться в 1-2 слова и быть написано простым шрифтом, без кэпс-лока, потому, что это усложняет чтение вкладок.
  • Не нагромождайте последовательности вкладок. В случае если имеется необходимость, применяйте подкатегории (другими словами вторую горизонтальную строчок под вкладками). Если вы так сделаете, убедитесь, что существует визуальная связь между выбранной линейкой и вкладкой подкатегорий под ней. Не включайте чрезмерное количество подкатегорий, все должно быть емко и просто.
  • Выбранная вкладка обязана выделяться, определяя расположение пользователя сейчас. Остальные вкладки наряду с этим не должны «заглушаться» так, дабы их забыли либо не увидели.
  • Принципиально важно выдерживать однообразный порядок вкладок на всех страницах, дабы визитёр осознавал, как вкладки относятся одна к второй.

Джейкоб направляться разъясняет значимость постоянства в этом вопросе:

«1. Узнаваемость. В то время, когда вещи выглядят одинаково, вы понимаете, что искать и в то время, когда вы это нашли.

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

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

4. Эффективность. Устраняется необходимость тратить время, обучаясь новому либо волнуясь об эффекте непоследовательного функционала».

Из-за чего навигация неудобна для визитёров вашего сайта?

Примеры успешного дизайна

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

1. Album Art Collection

Тут внимание на себя обращают 2 вещи:

1. Навигация вертикальна.
2. Она включает иконки.

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

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

Увидьте, что не смотря на то, что Album Art Collection применяет навигационные иконки, они не отказываются и от текстовых описаний. В отечественном блоге вы имеете возможность отыскать отдельную статью, посвященную юзабилити иконок, но на данный момент отметим основное: обычно текстовые описания трудятся лучше одних иконок без текста. Из-за чего это происходит, поведал Джейкоб Гьюб (Jacob Gube), главред ресурса для разработчиков и веб-дизайнеров Six Revisions:

«Избегайте замены текста иконками, поскольку знаки смогут иметь различное значение для различных людей. Самый надёжный путь — это несложный текст, раскрывающий данные окна».

2. The Invoice Machine

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

3. Buffer

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

Вот так выглядит контент для физлиц:

Присоединяйтесь к 3+ миллионам людей, уже применяющих Buffer

А так начинается контент для бизнеса:

Присоединяйтесь к 2 500+ компаний, уже применяющих Buffer

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

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

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

Согласно точки зрения эксперта по разработке и дизайну компании UX Booth Дэвида Легета (David Leggett), навигация с вкладками в праве на существование и кроме первичного и вторичного уровней навигации а также возможно использована под линией сгиба, как у Buffer:

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

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

Из-за чего гамбургер-меню и скрытая навигация вредят вашему юзабилити?

3 лучшие практики на заметку

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

1. Общедоступность имеет значение

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

  • Разрешить визитёрам перемещаться между вкладками, применяя кнопку «Tab» на клавиатуре.
  • Дать выбирать вкладку, нажимая кнопку «Enter».
  • Включить разную индикацию выбранной вкладки. К примеру, возможно подсветить маленькую надпись со словом «Активна».

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

2. Чанкинг имеет значение

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

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

Просмотрите целый собственный контент и сгруппируйте его в 4-5 сегментов. После этого повторите это упражнение, возможно, вам удастся сократить число групп до 2-3. Совершите пользовательское тестирование, дабы заметить, на какой тип навигации люди реагируют лучше. Кроме всего другого вы должны убедиться, что:

  • Контент разбит на части так, что это представляется логичным, ожидаемым и ясным для визитёров.
  • Текст на ваших вкладках отличается предметностью и логичностью.
  • Вкладки следуют существующему прототипу. К примеру, SaaS-сайты довольно часто дробят контент одним методом, а e-Commerce — вторым.

3. Скорость имеет значение

Скорость серьёзна неизменно, а также касаемо навигации в виде вкладок.

Джейкоб Гьюб, Six Revisions:

«Цель применения модульных вкладок — достижение стремительной и интерактивной презентации контента. Дабы достигнуть этого, вам направляться встроить в HTML-документ контент неактивных окон, а после этого применять CSS и JavaScript, дабы создать стиль окна и визуально скрыть его, что разрешит устранить ожидание загрузки страницы либо запроса данных с удаленных источников.

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

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

Как ускорить время загрузки сайта

Заключение

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

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

Подводя результат:

1. Навигация в виде вкладок возможно использована как в качестве главной навигационной совокупности, так и вне первичного/вторичного уровней навигации.

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

3. Не применяйте ее, если вы вспоминаете над тем, дабы добавить ссылку «Больше информации».

4. Вы имеете возможность направляться лучшим практикам, но

5.основное — это ваши пользователи. Проводите юзабилити-тесты, чтобы выяснить, не есть ли навигация через чур сложной для визитёров.

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

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

Высоких вам конверсий!

По данным: conversionxl.com

Случайные статьи:

CSS3: вкладки(tabs) на чистом CSS


Подборка похожих статей:

riasevastopol

More Posts