Тесс Гадд написала об аккордеонах.
— Вариант, когда в аккордеоне можно открыть только одну секцию одновременно, подходит для форм, которые надо заполнять последовательно;
— Возможность параллельного открытия нескольких секций полезна, когда пользователю не нужно фокусироваться на одной секции и нужен полный контроль. Например, при отображении разных групп параметров фильтрации;
— Согласно исследованию Nielsen Norman Group, чаще всего пользователи ожидают увидеть в аккордеоне иконку шеврона (стрелка, направленная вниз);
— В раскрытой секции стрелка шеврона должна быть направлена вверх;
— Следствие из правила, что не стоит выносить в аккордеон важную информацию: если аккордеон не используется для навигации, по умолчанию все его секции лучше скрывать;
— Часто аккордеон применяют для а) отображения второстепенной информации в карточке товара вроде условий возврата, доставки и размерной таблицы, б) списка часто задаваемых вопросов;
— Заголовок секции и шеврон оба должны быть кнопками, раскрывающими и скрывающими секцию. Не должно быть так, что шеврон раскрывает секцию, а заголовок ведёт на какую-то страницу.
#accordion
— Вариант, когда в аккордеоне можно открыть только одну секцию одновременно, подходит для форм, которые надо заполнять последовательно;
— Возможность параллельного открытия нескольких секций полезна, когда пользователю не нужно фокусироваться на одной секции и нужен полный контроль. Например, при отображении разных групп параметров фильтрации;
— Согласно исследованию Nielsen Norman Group, чаще всего пользователи ожидают увидеть в аккордеоне иконку шеврона (стрелка, направленная вниз);
— В раскрытой секции стрелка шеврона должна быть направлена вверх;
— Следствие из правила, что не стоит выносить в аккордеон важную информацию: если аккордеон не используется для навигации, по умолчанию все его секции лучше скрывать;
— Часто аккордеон применяют для а) отображения второстепенной информации в карточке товара вроде условий возврата, доставки и размерной таблицы, б) списка часто задаваемых вопросов;
— Заголовок секции и шеврон оба должны быть кнопками, раскрывающими и скрывающими секцию. Не должно быть так, что шеврон раскрывает секцию, а заголовок ведёт на какую-то страницу.
#accordion
www.uprock.ru
UI-шпаргалка: как создать функциональный аккордеон — читайте на UPROCK
Хотя аккордеон может показаться простым компонентом, при его создании нужно учитывать множество тонкостей. . читайте полезные статьи о дизайне в блоге UPROCK
👍5