Вкладки, табы, 2 ствола

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

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

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

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

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

Я бы хотел рассмотреть решение, которое обычно помогает сократить использование такой важной площади видимой части страницы —вкладки. (Еще их называют табами).

Плюсы

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

Теперь подробнее:

Экономия места: разумеется вкладки могут превратить страницу из длинного полотна, в аккуратный прямоугольник с информацией, нужной непосредственно пользователю, а не создателю сайта.

То, что информация никуда с главной страницы не девается, а находится всё там же, но скрытой — несомненный плюс, ведь не хотите же вы, чтобы пользователь искал важную ему страницу по всей странице? А если эта информация находится где-то далеко внизу? Как думаете, какой процент пользователей будет крутить страницу вниз, пока не найдет нужную ему инфу? Я думаю, что не более 10%. Т.е. 9 из 10 людей вы просто теряете, если информация неудобно каталогизирована.

Минусы

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

Если вы решились делать вкладки:

1. Делайте активную вкладку того же цвета, что и фон вкладки — это помогает понять — какая вкладка активная, а какую еще следует нажать, чтобы получить информацию.
2. Сделайте открытую вкладку немного ниже, чем закрытые.
3. Дайте возможность пользователю свернуть все вкладки.
4. Дайте возможность закрыть какую-либо конкретную вкладку, если пользователя не интересует её содержимое.
5. Пусть вкладки реагируют на наведение курсора — это поможет определить, на какую из них он был наведен.
6. Дайте пользователю возможность переключится на стандартное отображение информации если его не устраивают вкладки.
7. Либо загружайте информацию сразу, либо делайте подгрузку через AJAX

Вам не стоит делать вкладки если:

1. Информации немного, и она хорошо каталогизирована другими способами.
2. Информации слишком много. От обилия вкладок вместо понятной навигации еще ни один человек не выигрывал в понимании.

Напоследок немного примеров из жизни

Microsoft

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

Яндекс

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

NEWS2.0

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

Давайте обсудим?

• Похожие заметки:

  • Функциональность кнопок
  • Регистрация 2.0
  • Подсказки к полям
  • Белое пространство