Вкладки или аккордеон: как выбрать структуру разделов страницы
Вкладки меняют видимый раздел, а аккордеон раскрывает блоки внутри страницы. Выбирайте структуру по задаче чтения, объёму текста и работе на узком экране.
Что сравниваем
На макете оба решения помогают убрать часть текста с первого экрана. Но посетитель платит за это дополнительным действием: сначала должен заметить управление, понять название раздела и открыть содержимое. Поэтому скрытие информации стоит обосновывать задачей, а не желанием сделать страницу короче любой ценой.
Во вкладках обычно показывается одна панель из набора связанных панелей. Аккордеон состоит из расположенных друг под другом раскрываемых разделов. В зависимости от правил конкретного компонента несколько разделов могут оставаться открытыми одновременно либо открытие одного закрывает другой.
| Критерий | Вкладки | Аккордеон |
|---|---|---|
| Основное действие | Переключиться на другой раздел набора | Открыть или закрыть содержимое блока |
| Одновременное чтение | Обычно видна одна панель | Зависит от правил раскрытия |
| Расположение названий | Отдельная полоса управления | Заголовки остаются рядом со своими блоками |
| Узкий экран | Нужно решить проблему длинной полосы | Разделы естественно идут по вертикали |
| Главный риск | Посетитель не замечает другие панели | Важные сведения остаются закрытыми |
Есть и третий вариант: обычные разделы с заголовками и ссылками оглавления. Он часто удобнее, когда материал надо читать последовательно или сравнивать части, возвращаясь глазами к предыдущему абзацу. Не выбирайте между двумя сложными компонентами, пока не проверили, нужен ли вообще компонент.
Плюсы и минусы
Вкладки сохраняют компактный набор альтернатив
Они подходят, если человек осознанно переходит между равноправными разделами одной сущности. Например, в рабочей панели можно отдельно изучать события и настройки. Названия должны объяснять различия до открытия, иначе интерфейс превращается в угадывание по коротким словам.
Цена компактности — одновременно видна только часть данных. Если для решения надо сопоставить два абзаца из разных панелей, человек вынужден запоминать первый, переключаться и возвращаться. Для сравнения характеристик это может быть хуже обычной таблицы или расположенных рядом блоков.
Не выдавайте навигацию между самостоятельными страницами за вкладки лишь из-за внешнего вида. Ссылки на разные адреса могут быть правильным решением, но их поведение должно соответствовать переходам. Выбор структуры связан и с тем, нужно ли отправить коллеге ссылку на конкретный раздел.
Аккордеон оставляет заголовки рядом с содержимым
Посетитель видит перечень тем, открывает нужную и продолжает движение по странице. Это удобно для дополнительных пояснений, когда не всем нужен каждый пункт. При разрешённом одновременном раскрытии можно оставить несколько ответов перед глазами.
Однако цепочка из множества закрытых строк плохо заменяет нормальное изложение. Если почти все разделы нужны каждому, человек вынужден открывать их по очереди. В таком сценарии скрытие лишь увеличивает работу. Не прячьте обязательные условия и сведения, без которых нельзя оценить основное предложение.
Правило «открыт только один» уменьшает длину страницы, но мешает сопоставлять блоки. Выберите его по реальной задаче. Автоматическое закрытие уже открытого раздела должно быть понятным; оно не должно уводить человека от ещё не прочитанной важной информации.
Обычные заголовки упрощают последовательное чтение
Открытый текст не требует искать управление раскрытием. Его проще просмотреть целиком и обсудить с коллегой по расположению блоков. Большая длина сама по себе не доказывает неудобство: важны объём полезной информации, ритм заголовков и понятное оглавление.
Если отдельные подробности мешают основному пути, можно скрыть именно их, сохранив ключевые выводы на виду. Такой смешанный вариант обычно стоит проверить раньше, чем переносить все разделы в одинаковые закрытые контейнеры.
Что подойдёт под задачу
Небольшое число равноправных рабочих разделов. Попробуйте вкладки, если человек преимущественно работает с одним разделом за раз. Подготовьте понятное активное состояние и проверьте, что содержимое другой панели не нужно держать перед глазами постоянно.
Дополнительные вопросы к основному тексту. Аккордеон поможет выбрать нужное пояснение по заголовку. При этом ключевой ответ на главный вопрос страницы оставьте открытым. Раздел с вопросами не должен становиться тайником для всех условий.
Инструкция с обязательной последовательностью. Оставьте шаги на странице или используйте специально спроектированный процесс. Вкладки не превращаются в пошаговую форму только потому, что расположены слева направо. Человек может перейти к другой вкладке, и интерфейс должен объяснять, разрешено ли это.
Сравнение двух наборов сведений. Сначала проверьте открытую таблицу или блоки с одинаковой структурой. Если на телефоне места мало, продумайте отдельное представление сравнения. Постоянные переключения между скрытыми панелями не устраняют нехватку места, а переносят её в память читателя.
Документ для поиска и печати. Заранее проверьте, как находятся и печатаются скрытые части. Поведение зависит от реализации и браузера. Порядок раскрытия для чтения не должен случайно определять, какие обязательные сведения попадут в печатный документ.
Как это сделать по шагам
- Разложите содержание без скрытия. Соберите все разделы обычными блоками. Отметьте обязательную информацию, дополнительные подробности и независимые рабочие области.
- Опишите путь чтения. Нужно читать подряд, выбирать одну область или сопоставлять несколько? Зафиксируйте ответ на конкретном примере посетителя.
- Выберите базовую структуру. Проверьте сначала открытые заголовки. Если они не подходят, сопоставьте задачу с переключением панелей или раскрытием блоков.
- Напишите различимые названия. Они должны помогать выбрать раздел без чтения скрытого содержимого. Проверьте длинные реальные названия вместо коротких заглушек.
- Определите правила. Для вкладок — исходную панель и способ активации; для аккордеона — возможность открыть несколько блоков и закрыть все. Решите, сохраняется ли состояние при возвращении.
- Подготовьте узкий экран. Не допускайте пропажи последних названий за краем. Если компонент меняется на другой, заново проверьте порядок, фокус и состояние раскрытия.
- Согласуйте доступное поведение. Разработчик должен понимать, где заголовок, где управление и как объявляется активная панель или раскрытый раздел. Цвета и стрелочки этого не заменяют.
- Проверьте живые сценарии. Найдите нужный раздел с клавиатуры, откройте длинный блок, вернитесь назад, распечатайте страницу и отправьте ссылку коллеге. Запишите конкретные неудобства.
Ошибки выбора
Назначать вкладки любому горизонтальному меню
Внешне похожие элементы могут вести на другие страницы или управлять панелями внутри текущей. Не меняйте ожидаемое поведение только ради модного вида. В работающем прототипе проверьте адрес, возврат назад и возможность открыть самостоятельную страницу обычным способом.
Переносить полосу вкладок на телефон без решения
Надписи сжимаются, обрезаются или перестают помещаться. Иногда помогает прокрутка, иногда — другая структура. Но горизонтальная прокрутка сама по себе ещё не объясняет, что справа есть продолжение. Проверьте обнаружение последнего раздела с человеком, который не видел макет.
Менять панель при каждом движении фокуса с задержкой
Автоматическое открытие вкладки при фокусе удобно только при достаточно быстром показе содержимого. Когда каждый переход запускает заметное ожидание, движение по списку затрудняется. Рассмотрите отдельную активацию и предусмотрите её в описании компонента.
Считать иконку достаточным объяснением
Плюс или стрелка могут показать возможность раскрытия, но не описывают содержание. Нужны понятные заголовки. В пользовательском компоненте состояние раскрытия должно быть доступно вспомогательным технологиям, а управление должно работать с клавиатуры.
Для аккордеона в модели WAI APG заголовок содержит кнопку, а её состояние показывает, открыт ли соответствующий блок. Для вкладок определены отдельные роли списка, вкладки и панели. Не смешивайте эти модели в одном самодельном элементе: согласуйте реализацию с выбранным поведением.
Простой раскрываемый блок можно собрать через details и summary. Доступность управления проверьте с клавиатуры, а открытой структуре помогут якорные ссылки. За прототипом разделов можно обратиться в дизайн сайтов.
Вопросы и ответы
Что выбрать для длинного текста?
Сначала попробуйте обычные заголовки и оглавление. Сам по себе объём не требует скрытия. Выбор зависит от того, какие части нужны человеку одновременно и как он их читает.
В аккордеоне должен быть открыт только один блок?
Не обязательно. Это правило конкретного интерфейса. Если человек сравнивает ответы, одновременное раскрытие нескольких разделов может быть удобнее.
Можно ли на компьютере показывать вкладки, а на телефоне аккордеон?
Можно, но такую смену надо спроектировать и проверить. Сохраняйте понятную структуру содержания, корректное состояние и предсказуемый фокус при изменении представления.
Нужно ли сразу открывать первую вкладку?
У интерфейса вкладок должна быть определённая активная панель при инициализации. Выберите её по основной задаче, а не случайному порядку данных.
Можно ли спрятать важные условия в закрытый раздел?
Если без них человек не может принять осознанное решение, оставьте их на виду. Дополнительное раскрытие подходит для подробностей, а не для сокрытия основного смысла.
Достаточно ли проверить компонент мышью?
Нет. Пройдите его с клавиатуры, на узком экране и со средствами чтения интерфейса. Отдельно проверьте нужные сценарию поиск по странице, прямые ссылки и печать.