Сворачивание и разворачивание блоков: дизайн удобного интерфейса

Аккордеон объединяет разделы, содержимое которых можно раскрывать по запросу. Он помогает просматривать независимые ответы, но не должен скрывать сведения, которые нужны для сравнения или принятия решения.

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

В этой статье разберём, как устроен аккордеон и что учитывать при его проектировании.

Как устроен аккордеон

1.1 Заголовок и раскрывающаяся панель

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

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

1.2 Когда скрывать содержимое, а когда оставлять его открытым

Аккордеон — не отдельный вид дизайна, противоположный «обычному» интерфейсу. Это компонент для постепенного раскрытия информации. Он удобен, когда разделы можно читать независимо; для сравнения двух условий лучше оставить обе панели видимыми.

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

Как спроектировать понятный аккордеон

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

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

Основные элементы аккордеона 

Аккордеон состоит из заголовков-кнопок и связанных с ними панелей. Значок рядом с заголовком помогает показать состояние.

• Заголовки: заголовок-кнопка описывает содержимое панели. Например, «Сроки доставки» понятнее, чем «Подробнее». Уровень заголовка должен соответствовать структуре страницы.
• Значки: шеврон или знак плюс может подсказать, что панель раскрывается. При смене состояния меняйте соответствующий индикатор. Не полагайтесь только на значок: заголовок должен оставаться понятной кнопкой, а состояние — доступным для вспомогательных технологий.
• Панель содержимого: эта область содержит ответ, связанный с заголовком. Абзацы, списки и ссылки должны увеличивать высоту панели, а не перекрывать следующий раздел.
   

Основные принципы развертывания и сворачивания пользовательского интерфейса 
 

• Отличное визуальное оформление: заголовок должен выглядеть как элемент управления. Различайте свёрнутое, раскрытое и сфокусированное состояния с помощью формы, индикатора и видимого фокуса, а не только цвета. 
   
• Равномерное выравнивание: размещайте индикаторы последовательно в пределах одного списка. Проверьте перенос длинного заголовка, расстояние до значка и заметность кнопки целиком. Единственного обязательного положения значка нет.
• Чёткая иерархия: отличайте заголовок панели от её содержимого с помощью начертания, интервалов и расположения. Размеры должны соответствовать общей иерархии страницы; одинаковый размер текста сам по себе не делает аккордеон ошибочным.
• Правильное использование символов: Иногда можно использовать символы в заголовках, чтобы обеспечить большую ясность в отношении содержимого контейнера, но это следует использовать с осторожностью, чтобы не перегружать заголовки содержимым.
   
• Эстетичная цветовая схема: в дизайне вашего пользовательского интерфейса с функцией «развернуть-свернуть» цвета могут улучшить читаемость, а использование единой схемы в вашем списке-аккордеоне может помочь в быстрой идентификации элементов.

Поведение на примере условий доставки

Для разделов «Сроки», «Стоимость» и «Возврат» допустите одновременное раскрытие, если пользователю нужно сравнить условия. Если допускается только одна открытая панель, явно зафиксируйте это в спецификации: открытие «Стоимость» закроет «Сроки», но не должно прокручивать экран так, что нажатый заголовок исчезнет.

Кнопка заголовка должна оставаться доступной с клавиатуры и иметь видимый фокус. В паттерне Accordion из WAI-ARIA APG Enter и пробел управляют панелью, а Tab переходит по доступным элементам. Состояние кнопки передают через aria-expanded, связь с панелью — через aria-controls. Направление шеврона не заменяет эти сведения.

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

Как спроектировать аккордеон в Pixso

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

В Pixso можно собрать варианты компонента для свёрнутого и раскрытого состояния, настроить автоматическую компоновку (Auto Layout) и обсудить макет вместе с командой. Варианты должны сохранять один и тот же заголовок и понятно показывать смену состояния.

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

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

Сравните оба варианта с коллегой: попросите найти сроки доставки и условия возврата, не подсказывая, какой раздел открыть.