Интерфейсы с вкладками сбивают с толку?
Мы проектируем веб-сайт и столкнулись с некоторыми проблемами пользовательского интерфейса, которые будут аккуратно решены с помощью интерфейса с вкладками. Пользователи будут взаимодействовать с различными элементами сайта (есть несколько основных функций просмотра / редактирования / копирования / вставки), и наличие только одного объекта на одной вкладке, видимой одновременно, значительно упрощает ситуацию.
Нам, конечно, совершенно комфортно работать с интерфейсами с вкладками, но как насчет начинающих пользователей? Я искал в Интернете для руководства, и я не нашел ничего определенного. Есть ли у вас опыт представления интерфейса с вкладками для начинающих пользователей, и у них были проблемы с ним? Или мы достигли того уровня, когда всем будут удобны вкладки, и мы можем использовать их без оговорок?
Удобство и простота использования важны - больше для этого проекта, чем для большинства. Если наивных пользователей смущает интерфейс с вкладками, он просто не будет работать, и нам придется искать другой путь.
12 ответов
Вкладки становятся достаточно распространенным явлением, и я не буду беспокоиться об их использовании, если вы правильно их реализуете. Убедитесь, что вы делаете активную вкладку визуально отличной от других вкладок.
Кроме того, попробуйте создать вкладки, используя прогрессивное улучшение, чтобы контент оставался там с отключенным JavaScript. Есть два основных способа сделать это:
- Загрузите каждую вкладку, но при первом использовании
AJAX. Сами вкладки должны быть ссылками на контент, который AJAX
выбирает. - Храните всю свою информацию на странице, но скрывайте ее, используя JavaScript. Когда вы переключаетесь между вкладками, они заполняются из скрытых частей страницы.
Ресурс дизайна, который может оказаться полезным, - это библиотека шаблонов дизайна YUI и ее раздел на вкладках.
В своей превосходной книге "Не заставляй меня думать" ( http://www.sensible.com/) Стив Круг рассказывает о преимуществах использования интерфейса с вкладками:
- Они самоочевидны
- Их трудно пропустить
- Они гладкие
- Они предлагают физическое пространство
Далее он описывает ключи к успешным вкладкам, продемонстрированные Amazon.com:
- Они были нарисованы правильно
- Они были цветной
- При входе на сайт была выбрана вкладка.
Очевидно, он предоставляет подробности для каждого из этих пунктов пули в книге (я не буду его здесь рекламировать). Книгу определенно стоит посмотреть, если вы хотите получить рекомендации по созданию веб-сайтов для новичков и экспертов.
Я думаю, что пока вкладки видны как таковые, это понятно пользователю. Я видел сайты, где они представляют вертикальную полосу со ссылками, которые действуют как вкладки, но это не сразу видно пользователю, и это меня очень смущает.
Не думайте, что вы можете априори решить, что можно использовать, а что нет. Провести юзабилити-тестирование
"Чтобы выявить 80 процентов проблем с юзабилити высокого уровня, требуется всего пять пользователей", - говорит Якоб Нильсен.
Google юзабилити-тестирование и начать обучение. Это не трудно.
Мне бы пришлось с этим не согласиться в пользу вкладок. В тесте дизайна, который мы провели для сайта с довольно большим трафиком (более 1 миллиона уникальных в то время), мы обнаружили, что вкладки не использовались. Вкладки были четко обозначены, расположены справа от основной области содержимого. Основываясь на этом опыте, я бы предложил либо найти альтернативу, либо, как предложил Staticscan, запустить юзабилити-тесты, чтобы выяснить, какие из них работают.
Просто хочу отметить, что в SmashingMagazine появилась новая статья, демонстрирующая вкладки: Showcase of Tabs
Я склонен согласиться с Лотаром и Райсбоулом - люди, кажется, довольно знакомы с этим в наши дни. Самое важное в любом элементе графического интерфейса - это ясность: пользователь должен знать, что произойдет, когда он что-то нажмет (он знает, что нажатие на неактивную вкладку сделает его активным); и в навигации - должно быть очень четко определено, на какой вкладке они находятся в данный момент. Как сказал Лотар, если это не сразу видно пользователю, это очень сбивает с толку. Если вы решите эти проблемы, то все должно быть в порядке.
Я был разработчиком приложения для интрасети, которое использовало интерфейс с вкладками, созданный с помощью HTML и управляемый JavaScript. Это было намного раньше, чем IE7 и Firefox. На самом деле, это было новшеством и на сайтах в целом.
К счастью, предыдущий разработчик обнаружил, что если вы сделаете его похожим на диалоговое окно - даже вплоть до использования серого фона, то люди обычно понимают метафору. Мы также загрузили весь контент для всех вкладок в начальной загрузке страницы, и у нас были кнопки Сохранить / Отменить за пределами структуры вкладок. Из-за этого большинство людей сразу поняли, что они могут перемещаться между вкладками (мы использовали JavaScript, чтобы скрывать и показывать DIV), и сохранение сохраняло изменения для всех из них.
Если вы хотите отклониться от такой очевидной метафоры, вам нужно провести некоторые исследования юзабилити.
Еще один ресурс для вкладок - недавняя статья о Smashing Mag: http://www.smashingmagazine.com/2009/04/06/showcase-of-well-designed-tabbed-navigation/
Хорошо реализованный интерфейс Tab не должен сбивать с толку пользователей.
В соответствии с тем, что другие сказали, одна из наиболее важных вещей, которые следует учитывать с помощью вкладок или любого другого навигационного интерфейса, заключается в том, чтобы было очевидно, где они в настоящее время находятся в схеме навигации.
Еще один важный момент - не ломать браузер! Многие реализации AJAX или javascript ломают кнопку возврата. Это незначительное раздражение для одних и серьезное неудобство для других. Обязательно рассмотрите вашу целевую аудиторию здесь.
Лично я предпочитаю метод oldschool, который заключается не в предварительной загрузке всех вкладок, а в том, чтобы каждая вкладка была отдельной страницей и использовала методологию шаблонов для управления интерфейсом навигации, будь то вкладка или нет. Это поддерживает историю браузера и прекрасно работает с или без javascipt.
Вкладки и т. Д. Просто инструменты. То, как мы решаем их выкладывать и использовать, определяет их эффективность.
То, что я пытаюсь иметь в виду, это:
1) Держите это близко. Вещи, которые мы используем больше всего, должны быть спереди или как можно ближе к вершине, а остальные хоронить в зависимости от того, как часто они используются / регулируются.
2) Достаточно легко для мамы, чтобы использовать. Все интерфейсы сбивают с толку, если они не изложены четко и логично.
3) Организовать, как он используется, а не то, как вы думаете, что это имеет смысл. * Я часто использую вкладки, чтобы разбить шаги в процессе или разбить области, такие как основные / расширенные параметры. Я группирую их на основе сходства или использования в зависимости от того, что работает лучше
4) Держите их немного. В любом случае, я стараюсь держаться ниже вершин диапазона 7-10, так как человеческому мозгу трудно прыгнуть выше 7-10 цифр, поэтому я предполагаю то же самое для фрагментов информации. Вертикальные аккордеоны могут быть чем-то, что вы тоже хотите посмотреть.
Я также встроил вкладки внутри вкладок раньше. Работает хорошо, но в большинстве случаев только на один слой.
Я думаю, что люди привыкли к метафоре (от переплетов, или картотек и т. Д.) Вкладок. Особенно те, которые используют Интернет для любого отрезка времени. Я думаю, что если IE принял метафору, это подразумевает общее знакомство с этой метафорой.
Так что нет, я бы сказал, что они не сбивают с толку, и предлагаю вам пойти на это. Просто, возможно, опубликуйте приветствие / новичок (или заметную ссылку "помощь" на такое вступление) по использованию вкладок.