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

Одна из моих любимых цитат о UX принадлежит Чикези Эджиаси, руководителю отдела студий и систем дизайна в Google.

Он писал: «Жизнь разговорчива. Веб-дизайн должен быть таким же. В Интернете вы разговариваете с кем-то, кого, вероятно, никогда не встречали, поэтому важно быть ясным и точным. Таким образом, хорошо структурированная навигация и организация контента идут рука об руку с хорошим общением».

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

Что важно, как и в большинстве вещей, связанных с UX, так это то, как вы его реализуете и как оптимизируете.

Что такое навигация с вкладками?

Навигация с вкладками — это стиль навигации и пользовательского интерфейса, в котором информация организована во вкладках, разделяющих контент на разные разделы.

Как правило, при просмотре навигации с вкладками вы заметите некоторые общие характеристики:

1. Закругленные углы вкладок;
2. Разделение вкладок, будь то пробел или одна строка;
3. Эффекты наведения на вкладках;
4. Градиент для добавления глубины и размера вкладкам.

Навигация с вкладками основана на метафоре папки, с которой должен быть знаком каждый, кто работает в офисе или смотрит телевизор. Как объясняет Мифсуд из UsabilityGeek…

Джастин Мифсуд, UsabilityGeek :

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

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

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

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

Как и любая хорошая навигационная система, вкладки позволяют:

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

Когда полезно использовать навигацию с вкладками?

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

• У вас есть от двух до девяти различных категорий контента.
• Имена категорий относительно короткие и предсказуемые, как с точки зрения позиции, так и текста (т.е. они соответствуют прототипу).
• Количество категорий вряд ли будет меняться на регулярной основе.
• Категории похожи по своей природе; Логично предположить, что они совмещены.
• Категории помещаются в один ряд.

Как объясняет Джейкоб Нильсен из Nielsen Norman Group, когда навигация с вкладками становится настолько сложной, что требует нескольких строк, начинают возникать проблемы…

Якоб Нильсен, Nielsen Norman Group :

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

Кроме того, несколько строк — верный признак чрезмерной сложности: если вам нужно больше вкладок, чем может поместиться в одной строке, вы должны упростить свой дизайн». (через NN/г)

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

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

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

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

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

Противоречие

В то время как современные практики дизайна имеют много сайтов, похожих на это…

…некоторые люди используют навигацию с вкладками в качестве основной навигации.

Как отмечал Люк Вроблевски из Google много лет назад, Amazon действительно стала пионером этой тенденции…

Люк Вроблевски, Google :

«В 1998 году на сайте было две категории верхнего уровня: книги и музыка.

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

Вот как Amazon раньше использовала навигацию с вкладками…

По мере того, как популярность сайта росла, росло и количество вкладок, необходимых Amazon…

В 1999 году Джейкоб назвал это «плохим дизайном и злоупотреблением метафорой табуляции»:

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

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

Якоб Нильсен

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

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

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

Как реализовать навигацию с вкладками

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

При самостоятельной реализации навигации с вкладками (на любом уровне) следует помнить о некоторых вещах:

• Во-первых, спроектируйте информационную архитектуру (IA) вашего сайта, чтобы вы могли принимать более разумные решения, связанные с вкладками.
• Вся вкладка должна быть кликабельной, а не только название категории (текст).
• Не используйте вкладку «Главная», даже если вы используете навигацию с вкладками для всего сайта. Вместо этого пусть ваш логотип перенаправит посетителей на главную страницу.
• Вкладка должна быть связана с областью содержимого, которой она управляет, чтобы область вкладки была четкой.
• Названия категорий должны состоять из одного или двух слов и написаны простым английским языком. Избегайте использования всех заглавных букв, так как это затрудняет чтение вкладок.
• Не располагайте несколько рядов вкладок. Если необходимо, используйте подкатегории (т. е. вторую горизонтальную полосу под вкладками). Если вы используете подкатегории, убедитесь, что существует визуальная связь между выбранной вкладкой и панелью подкатегорий ниже. Убедитесь, что количество используемых вами подкатегорий не слишком велико; сжать и упростить.
• Выбранная вкладка должна быть отмечена на видном месте, чтобы указать текущее местоположение. Однако невыбранные вкладки не следует отключать настолько, чтобы о них забывали или пропускали.
• От страницы к странице должен поддерживаться последовательный порядок вкладок, чтобы пользователь полностью понимал, как вкладки связаны друг с другом.

Джейкоб объясняет, почему такая согласованность важна…

1. Узнаваемость. Когда что-то всегда выглядит одинаково, вы знаете, что искать, и знаете, что это такое, когда находите это.

2. Предсказуемость. Когда что-то всегда работает одинаково, вы знаете, что произойдет, когда вы начнете действовать.

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

4. Эффективность. Нет необходимости тратить время на изучение чего-то нового или беспокоиться о влиянии несогласованных функций.

Якоб Нильсен

Примеры правильной навигации с вкладками

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

1. Коллекция альбомов

Коллекция обложек альбомов — довольно популярный пример навигации с вкладками…

Здесь интересны две вещи…

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

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

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

Обратите внимание, что несмотря на то, что в коллекции обложек альбомов используются навигационные значки, они не отказываются от текстовых описаний. Тестирование юзабилити иконок — это отдельная статья, но чаще всего текстовые описания более удобны, чем сами иконки. Джейкоб Губе из Six Revisions объясняет…

Джейкоб Губе, шесть редакций :

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

2. Инвойс-машина

Invoice Machine — это ваша основная навигация с вкладками в качестве основного примера навигации…

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

3. Буфер

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

Вот так и начался контент для частных лиц…

И вот начался контент для бизнеса…

Это позволило им обратиться к двум разным аудиториям, не создавая совершенно отдельный сайт или опыт.

Позже страница продукта Buffer претерпела глубокие изменения, включая «Опубликовать», «Ответить» и «Анализ» среди других предложений (все они говорят сами за себя). Вот навигация по вкладкам, которую они использовали для своих страниц:

Помимо разных тарифных планов, на этих вкладках, основанных на продуктах, отображались разные отзывы, относящиеся к продукту на вкладке:

Как объясняет Дэвид Леггетт из UX Booth, навигация с вкладками актуальна не только на первичном и вторичном уровнях навигации. Их можно использовать даже ниже сгиба, как в случае с Buffer…

Дэвид Леггетт, UX стенд :

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

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

3 лучшие практики, которые нужно помнить

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

1. Доступность имеет значение

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

• Разрешить пользователям перемещаться по вкладкам с помощью клавиши «Tab» на клавиатуре.
• Разрешить людям выбирать вкладку с помощью клавиши «Ввод» на клавиатуре.
• Укажите, какая вкладка выбрана, используя альтернативный метод. Например, вы можете включить атрибут title со словом «активный».

Упрощение использования вашего сайта для большего числа людей никогда не повредит конверсиям.

2. Разделение на части имеет значение

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

Джастин объясняет, почему правильная организация жизненно важна…

Джастин Мифсуд, UsabilityGeek :

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

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

Прежде всего, вы хотите убедиться, что…

1. Ваш контент разбит на части таким образом, чтобы он был логичным, ожидаемым и понятным для посетителей.
2. Порядок вкладок осмысленный и логичный.
3. Ваши вкладки следуют существующим прототипам. Например, сайты SaaS часто делятся определенным образом, а сайты электронной коммерции — другим.

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

Мы снова и снова писали о важности скорости. Поэтому неудивительно, что скорость также играет роль в эффективности навигации с вкладками.

Джейкоб объясняет это довольно хорошо…

Джейкоб Губе, шесть редакций :

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

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

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

Заключение

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

С помощью юзабилити-тестирования и оптимизации этот разговор становится еще лучше.

Однако, как и во всем, обязательно проводите исследование (в данном случае исследование информационной архитектуры) и тестируйте, тестируйте, тестируйте.

В итоге…

1. Навигация с вкладками может использоваться в качестве основной навигационной системы, а также за пределами основного или вторичного уровней навигации.
2. Попробуйте навигацию с вкладками, когда у вас есть от двух до девяти сплошных похожих категорий с короткими названиями, которые помещаются в одну строку.
3. Не используйте навигацию с вкладками, если вы хотите, чтобы люди сравнивали контент или задумались о добавлении ссылки «Подробнее…».
4. Вы можете следовать рекомендациям по внедрению, но…
5. Важны ваши данные. Вашим посетителям трудно перемещаться по сайту с помощью вкладок? Проведите юзабилити-тестирование, чтобы выяснить это.
6. Исправьте возникающие проблемы. Или, если есть много дорогостоящих вопросов, рассмотреть другую навигационную систему.
7. Доступность, фрагментация и скорость имеют значение, когда дело доходит до навигации с вкладками, поэтому будьте внимательны.

Работаете над чем-то связанным с этим? Разместите комментарий в сообществе CXL !