№1 по увеличению конверсии в России

Вкладки и конверсия:
Преимущества вкладок на сайте

Есть категории товаров, которые не обладают широким списком характеристик, например защитные пленки на экраны смартофнов. C ними всё просто. Но есть также и множество товаров, которые обладают большим набором сложных характеристик, которые необходимо описать. Для того, чтобы компактно уместить большой объем данных - помогают вкладки.
Вкладки на сайте
Вкладки на сайте Евросеть
Без вкладок, текст превращается в нечитаемую стену. На примере ниже видно как отображается один и тот же товар на разных сайтах, без вкладок (слева) и с вкладками (справа). Разница в длине сайта в 2 раза, но что ещё хуже текст абсолютно нечитабелен.
Закладки на сайте
wantfoto.ru (слева), euroset.ru (справа)
Известный эксперт в области юзабилити Стив Круг в своей книге "Не заставляйте меня думать" отмечает 3 преимущества вкладок:

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

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

Рекомендации по оформлению вкладок

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

  • Выделяйте текущую выбранную вкладку (цветом, размером, объемом);
  • Объединяйте текущую вкладку с выбранной областью, например выделив одним цветом. Тогда будет видна связь между вкладкой и содержанием.
Оформление вкладок
Вкладки в офлайн картотеке
Оформление вкладок
Оформление вкладок, из книги Стива Круга "Не заставляйте меня думать"
2. Используйте короткое и понятное описание на вкладке (1-2 слова без длинных и сложных терминов) иначе вкладки будут плохо считываться при беглом взгляде по странице.

3. Не злоупотребляйте прописными буквами на вкладках. Все буквы ВЕРХНИМ РЕГИСТРОМ считываются хуже.

4. Логически разбивайте контент по вкладкам. Цель вкладок облегчать взаимодействие с контентом, а не усложнять его, поэтому старайтесь разбивать контент по вкладкам так, чтобы пользователям это было интуитивно понятно. Для этого можно воспользоваться методом карточной сортировки.

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

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

7. Используйте только один горизонтальный ряд вкладок. Два и более ряда вкладок осложняют взаимодействие с контентом на сайте, легко запутаться.

8. Используйте вкладки - когда они действительно нужны. Ну и пожалуй самое главное - если на сайте есть большой объем информации который необходимо разбить на логические подразделы - используйте вкладки. Если информации немного, то во вкладках нет необходимости.
***
В данной статье рассмотрена лишь 1 точка роста конверсии. Если вы хотите увеличить конверсию вашего сайта по 524 параметрам, узнайте подробности в разделе Аудит сайта
Автор Эдуард Файзуллин. Опубликовано 6 марта 2017 года.
Подробнее про рост конверсии в книге: "Конверсия на стероидах"
    Конверсия на стероидах, Эдуард Файзуллин
    • Навигация на сайте;
    • Главная страница сайта;
    • Сервисные функции;
    • Каталог товаров;
    • Страница товара;
    • Корзина;
    • Оформление заказа;
    • Цена и оплата;
    • Технические параметры.
    200 точек роста, 130 страниц, детально рассмотрены:
      Скачать книгу бесплатно
      Пожалуйста, оставьте свой e-mail и мы пришлём вам ссылку для скачивания книги
      + 1 раз в неделю мы рассылаем свежие статьи про увеличение конверсии сайтов
      Отписаться можно в любое время, в 1 клик
      Оставляя свой e-mail, вы принимаете условия обработки персональных данных
      Другие статьи по теме
      Больше статей о повышении конверсии в разделе Статьи