Интерфейсы с вкладками сбивают с толку?

Question

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

Мы, конечно, полностью знакомы с интерфейсами с вкладками, но как насчет начинающих пользователей? Я искал в Интернете для руководства, и я не нашел ничего определенного. Есть ли у вас опыт представления интерфейса с вкладками для начинающих пользователей, и у них были проблемы с ним? Или мы достигли того уровня, когда всем удобны вкладки, и мы можем использовать их без оговорок?

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

Answer 1

В своей превосходной книге «Не заставляй меня думать» ( Sensible.com ) Стив Круг рассказывает о преимуществах использования интерфейса с вкладками:

• Они самоочевидны
• Их трудно не заметить
• Они гладкие
• Они предлагают физическое пространство

Он продолжает описывать ключи к успешным вкладкам, как продемонстрировано Amazon.com:

• Они были нарисованы правильно
• Они имели цветовую кодировку
• При входе на сайт была выбрана вкладка.

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

Answer 2

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

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

1. Загружать каждую вкладку, кроме первой, используя
   AJAX. Сами вкладки должны быть ссылки на контент, который AJAX
   выбирает.
2. Храните всю свою информацию на страницы, но скрыть его с помощью JavaScript. Когда вы перебираете вкладки, они населены из скрытого части страницы.

Ресурс дизайна, который может оказаться полезным, - это Библиотека шаблонов проектирования YUI и их раздел на вкладках .

Answer 3

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

Answer 4

Не думайте, что вы можете априори решить, что можно использовать, а что нет. Провести юзабилити-тестирование

«Для выявления 80 процентов проблем с юзабилити высокого уровня требуется всего пять пользователей» Якоб Нильсен

Google юзабилити-тестирование и начало обучения. Это не сложно.

Answer 5

Я бы не согласился с тем, что в пользу вкладок. В тесте дизайна, который мы провели для веб-сайта с довольно большим трафиком (более 1 миллиона уникальных в то время), мы обнаружили, что вкладки не использовались. Вкладки были четко обозначены, расположены справа от основной области содержимого. Основываясь на этом опыте, я бы предложил либо найти альтернативу, либо, как предложил staticscan, запустить юзабилити-тесты, чтобы выяснить, какие из них работают.

Answer 6

Просто хочу отметить, что в SmashingMagazine появилась новая статья, демонстрирующая вкладки: Витрина вкладок

Answer 7

Я склонен согласиться с Лотаром и Райсбоулом - люди, кажется, довольно знакомы с этим в наши дни. Самое важное в любом элементе графического интерфейса - это ясность: пользователь должен знать, что произойдет, когда он что-нибудь нажмет (он знает, что нажатие на неактивную вкладку сделает его активным); и в навигации - должно быть очень четко определено, на какой вкладке они находятся в данный момент. Как сказал Лотар, если это не сразу видно пользователю, это очень сбивает с толку. Если вы решите эти проблемы, тогда все будет хорошо.

Answer 8

Другим ресурсом для вкладок является недавняя статья о Smashing Mag: http://www.smashingmagazine.com/2009/04/06/showcase-of-well-designed-tabbed-navigation/

Answer 9

Вкладки и т. Д. - это всего лишь инструменты. То, как мы решили их выложить и использовать, определяет их эффективность.

Я стараюсь помнить:

1) Держите его близко. Вещи, которые мы используем чаще всего, должны быть как можно ближе впереди или ближе к вершине, а остальное хоронить в зависимости от того, как часто они используются / регулируются.

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

3) Организуйте, как это используется, а не то, как вы думаете, что это имеет смысл. * Я часто использую вкладки, чтобы разбить шаги в процессе или разбить области, такие как основные / расширенные параметры. Я группирую их по сходству или использованию в зависимости от того, что работает лучше

4) Держите их немного В любом случае я стараюсь оставаться ниже вершин диапазона 7-10, так как человеческому мозгу трудно прыгнуть за пределы 7-10 цифр, поэтому я предполагаю то же самое для частей Информация. Вертикальные аккордеоны тоже могут быть чем-то, на что вы хотите обратить внимание.

Я также встраивал вкладки в вкладки раньше. Работает хорошо, но большую часть времени занимает только один слой.

Answer 10

Хорошо реализованный интерфейс Tab не должен смущать пользователей.

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

Еще один важный момент - не ломать браузер! Многие реализации AJAX или javascript ломают кнопку возврата. Это незначительное раздражение для одних и серьезное неудобство для других. Обязательно рассмотрите здесь свою целевую аудиторию.

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