Подтвердить что ты не робот

Сложны ли интерфейсы с вкладками?

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

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

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

4b9b3361

Ответ 1

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

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

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

Ресурс дизайна, который может вам пригодиться, - это YUI Design Pattern Library и их раздел tabs.

Ответ 2

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

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

Далее он описывает ключи к успешным вкладкам, как показано на Amazon.com:

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

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

Ответ 3

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

Ответ 4

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

Ответ 5

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

"Требуется только пять пользователей, чтобы выявить 80% проблем с удобством использования на высоком уровне" Якоб Нильсен

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

Ответ 6

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

Ответ 7

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

Ответ 8

Я думаю, что люди привыкли к метафоре (от связующих, или карточных индексов и т.д.) вкладок. Особенно те, которые используют Интернет в течение некоторого времени. Я думаю, что если IE принял метафору, это подразумевает общее знакомство с этой метафорой.

Итак, нет, я бы предположил, что они не путают и предлагают, чтобы вы пошли на это. Просто, возможно, опубликуйте приветственное/первое введение (или известную ссылку "Справка" к такому вступлению) к использованию вкладок.

Ответ 9

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

К счастью, предыдущий разработчик обнаружил, что если вы сделали его похожим на диалоговое окно - даже до использования серого фона, люди обычно понимали метафору. Мы также загрузили весь контент для всех вкладок в начальной загрузке страницы и имели кнопки "Сохранить/Отменить" вне структуры с вкладками. Из-за этого большинство людей сразу поняли, что они могут перемещаться между вкладками (мы использовали JavaScript, чтобы скрыть и показать DIV), и Save сохранит изменения для всех из них.

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

Ответ 10

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

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

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

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

Ответ 11

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

Что я хочу иметь в виду:

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

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

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

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

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