Контейнер «Вкладка»
Что такое контейнер «Вкладка»
Контейнер «Вкладка» позволяет разместить несколько публикаций на одной странице и быстро переключаться между ними без перехода на другие страницы сайта.
Запомнить просто
- «Вкладка» — это несколько небольших публикаций на одной странице, между которыми посетитель переключается нажатием на заголовки вкладок.
- Вкладок должно быть немного, а их названия — короткими.
Когда использовать контейнер «Вкладка»
Контейнер подходит только тогда, когда одновременно выполняются все условия:
- материалы относятся к одной теме;
- вкладок немного — не более 5–6;
- заголовки короткие — одно-два слова;
- все заголовки вкладок помещаются в одну строку на экране компьютера.
Не рекомендуется делать контейнер «Вкладка» массовым типом контейнера на сайте.
Пример правильного использования
Страница «Об учреждении»
А на ней вкладки:
- История
- Задачи
- Функции
- Структура
Всего четыре коротких названия. Все помещаются в одну строку. Страница одинаково хорошо выглядит на компьютере и смартфоне.
Типичная ошибка №1 — слишком много вкладок с длинными названиями
Редактор сайта создаёт страницу «Режим работы» и размещает на ней 11 вкладок:
- Режим работы государственного учреждения образования
- Расписание звонков для 1 класса
- Расписание звонков 2–11 классов
- График приёма пищи
- Распорядок дня старшей группы
- Распорядок дня средней группы
- Распорядок дня разновозрастной группы
- График работы школьной библиотеки
- Режим работы группы продлённого дня (5, 6, 7, 8 классы)
- Режим работы группы продлённого дня (3, 4, 5 классы)
- Режим работы группы продлённого дня (1, 2 класс)
Почему это плохо — с разных сторон
Для посетителей сайта
На экране компьютера заголовки вкладок выстраиваются в несколько строк. Посетитель видит не содержание страницы, а огромный «забор» из кнопок.
На смартфоне ситуация ещё хуже: каждое длинное название переносится на несколько строк. Чтобы добраться до нужной вкладки, нужно долго прокручивать экран вниз — и это ещё до того, как посетитель увидит хоть какую-то информацию.
Первое впечатление от страницы — хаос и перегруженность.
Для редактора сайта
Добавить новую вкладку в такой список становится всё сложнее: непонятно, куда её поставить, как назвать, чтобы не запутаться с уже существующими.
Если в будущем понадобится переименовать или переставить вкладки, придётся разбираться в длинном списке похожих названий.
Такую страницу сложно поддерживать в актуальном состоянии.
Для структуры сайта в целом
Одна страница пытается вместить слишком много разнородной информации. Режим работы учреждения, расписание звонков, распорядок дня групп детского сада и график библиотеки — это разные темы.
Правильнее разбить их на несколько страниц или использовать контейнеры «Запись» / «Статья», которые не имеют ограничений по количеству и длине заголовков.
Создать страницу «Режим работы» и разместить на ней отдельные контейнеры «Запись» — по одному на каждый раздел.
Посетитель просто прокручивает страницу вниз и находит нужный раздел. Никаких «этажей» из кнопок.
Если информации очень много — разбить на несколько страниц: «Расписание», «Режим работы групп», «График работы сотрудников».
Типичная ошибка №2 — вкладки вместо ссылок и разделов
Редактор сайта создаёт страницу «Профориентация» и размещает на ней 8 вкладок:
- Служба в милиции
- #ВоеннаяСлужбаПоКонтракту
- Областной профориентационный портал
- Ссылки на официальные сайты, содержащие информацию по профориентации
- Профориентационные тесты для правильного выбора специальности
- Белорусский государственный университет физической культуры
- Специализированный лицей при университете гражданской защиты МЧС
- Платформа профориентационной поддержки «Профи-Тест»
Почему это плохо — с разных сторон
Для посетителей сайта
Названия вкладок разной длины: одни очень короткие («Служба в милиции»), другие — целые предложения («Ссылки на официальные сайты, содержащие информацию по профориентации»). Такой набор выглядит хаотично.
Хэштег #ВоеннаяСлужбаПоКонтракту в качестве названия вкладки — это элемент социальных сетей, который совершенно неуместен в интерфейсе сайта учреждения образования.
На смартфоне длинные названия переносятся на несколько строк, и страница превращается в нечитаемый список.
Для редактора сайта
Часть вкладок — это ссылки на внешние сайты (университет, лицей, портал). Смешивать в одном месте ссылки на внешние ресурсы, описания профессий и тесты — значит создавать путаницу, которую со временем будет всё сложнее разбирать.
Для структуры сайта в целом
На странице смешаны совершенно разные типы контента: описания профессий, ссылки на внешние сайты, тесты, информация о конкретных учебных заведениях.
Правильнее разделить их по типу контейнера: ссылки — в «Гиперссылку», описания — в «Запись» или «Статью», тесты — отдельно.
- Ссылки на внешние сайты (порталы, университеты, платформы) — контейнер «Гиперссылка».
- Описания профессий и направлений — контейнеры «Запись» или «Статья».
- Тесты и анкеты — контейнер «Форма анкетирования» или ссылка на внешний ресурс через «Гиперссылку».
Типичная ошибка №3 — вкладки с одинаковыми началами названий
- Режим работы группы продлённого дня (1, 2 класс)
- Режим работы группы продлённого дня (3, 4, 5 классы)
- Режим работы группы продлённого дня (5, 6, 7, 8 классы)
Три вкладки с почти одинаковыми длинными названиями. На смартфоне посетитель видит только начало каждого названия — «Режим работы группы продлённого дня» — и не может понять, чем они отличаются.
Сократить названия:
- ГПД: 1–2 классы
- ГПД: 3–5 классы
- ГПД: 5–8 классы
Или заменить на контейнеры «Запись» или «Статья».
Как проверить себя перед созданием вкладок
Задайте себе четыре вопроса.
- Вкладок не больше пяти?
- Все названия — одно-два коротких слова?
- Все названия помещаются в одну строку на компьютере?
- На экране смартфона это тоже будет удобно читать?
Если хотя бы на один вопрос ответ «Нет» — используйте контейнеры «Запись» или «Статья». Они не имеют ограничений по количеству и длине заголовков.
Запомнить главное
| Ситуация | Лучшее решение |
|---|---|
| 3–5 разделов с короткими названиями (одно-два слова) | Вкладка |
| Много небольших публикаций (больше пяти-шести) | Запись |
| Много больших публикаций (больше пяти-шести) | Статья |
| Названия вкладок длинные или похожи друг на друга | сокращайте названия или используйте Запись или Статья |
Контейнер «Вкладка» — это инструмент для небольшого числа коротких публикаций. Как только вкладок становится больше пяти или их названия превращаются в длинные предложения, страница перестаёт нормально работать на смартфонах и становится неудобной для всех.
В таких случаях всегда выручат контейнеры «Запись» и «Статья» — они гибкие, не имеют ограничений по количеству и одинаково хорошо выглядят на любом экране.