Возвращение в Китай совпало с мероприятием UXday, организованным отделом пользовательского опыта Baidu. Темой нашей групповой дискуссии были табу при использовании вкладок.
Тема, которую мы обсуждали, сосредоточилась на одном: как быть с огромными вкладками?
Для начала давайте рассмотрим историю Tab. Вкладка здесь — это общий термин для типа интерактивных элементов, включая навигацию в веб-дизайне и использование в настольных программах, таких как браузеры. Интерактивные элементы, называемые вкладками, обычно имеют следующие две характеристики:
Оно имеет как действие, так и статус. Одна из причин популярности вкладок заключается в том, что ими легко управлять, и в то же время они позволяют пользователям четко знать, где они в данный момент находятся (вкладка).
С точки зрения информационной архитектуры содержимое вкладок обычно не перекрывается. Причем отношения между вкладками должны быть равноправными и взаимной принадлежности быть не должно.
Таким образом, в широком смысле большинство навигационных меню можно свести к вкладкам.
Считается, что первым в использовании вкладок в веб-дизайне стала компания Amazon. Я думаю, что многие из вас читали классическую обзорную статью LukeW: «История навигации по вкладкам Amazon» (для просмотра китайской версии нажмите здесь). Из этой статьи мы видим, что навигация Amazon превратилась из двух вкладок: «Книга» и «Музыка» в два ряда вкладок на пике своего развития в 2000 году. Очевидно, что при увеличении количества вкладок метод взаимодействия вкладок сталкивается с некоторыми трудностями.
Другой пример — диалоговое окно «Настройки» в Word 2003. Как показано на рисунке ниже, когда меток слишком много, а пространство отображения ограничено, Microsoft приходится располагать метки в два ряда. Большая проблема заключается в том, что когда выбран верхний ряд меток, как выразить связь между выбранным состоянием и текущей страницей контента?
Подход Microsoft подвергся критике. На рисунке выше, когда пользователь нажимает на верхний ряд меток, верхняя строка автоматически меняется местами с нижней, чтобы поддерживать тесную связь между метками и страницей с контентом. Однако такой подход делает позицию лейбла очень непоследовательной. Я считаю, что у многих людей такой же запутанный опыт.
В некоторых других программах, таких как Firefox 3 (как показано ниже), при нажатии на метку верхнего ряда отображение метки меняется только на выбранное состояние. Преимущество этого заключается в том, что сохраняется единообразие положения метки. некоторые позиционные обозначения потеряны. Функция.
Итак, если несколько рядов меток — не лучшая идея, как справиться с их большим количеством?
Очевидная идея — изменить расположение меток с обычного горизонтального на вертикальное. Обычно это расположение находится в левой части изображения и может быть в виде значков или текста.
Однако с этим подходом есть некоторые проблемы. Прежде всего, если имя метки очень длинное, оно будет занимать много ценного левого пространства, и это пространство оказывается в центре внимания пользователя на экране и является полем битвы для военных стратегов. Некоторые веб-сайты размещают текст вертикально. Такой подход, особенно для англоязычных веб-сайтов, ухудшает читабельность. Если разместить его справа, он может мешать полосе прокрутки, и пользователям будет нелегко это заметить. Во-вторых, когда тегов не так много (учитывая переменное количество тегов), подложить под теги какой контент тоже головная боль.
Одна из идей заключается в том, что если между тегами существует некоторая структура, то теги можно группировать. Затем добавьте уровень навигации. OneNote от Microsoft достиг вершины в этом отношении. Он делит информацию на три уровня: блокнот, раздел и страница. Каждый уровень представлен навигацией по вкладкам. В результате верхняя, левая и правая стороны страницы заполнены метками. ... Microsoft очень хорошо справляется с навигацией по трехслойным меткам, используя гештальт (деление слева), цветовую маркировку (цвет для раздела и белый для страницы) и другие методы.
