- Статьи
- 2 мин на чтение
- 26
Как работать с большими группами элементов, расположенными на боковой панели
Дизайн, который ускоряет поиск
Довольно просто оформить несколько элементов навигации, размещённых на боковой панели. Всё, что вам нужно, это отобразить их в виде списка с соответствующими иконками. Но что делать, если нужно показать несколько масштабных групп элементов?
Дизайнеры применяют распространённый подход — аккордеон со стрелками для раскрытия и сворачивания элементов каждой группы. Однако это может привести к тому, что пользователям придётся раскрывать каждую группу, чтобы найти нужный элемент. Другими словами, это похоже на необходимость открыть несколько ящиков в комоде, чтобы найти любимую рубашку.
У каждой группы товаров есть категория, но люди не всегда могут быстро соотнести конкретный товар с названием категории, которое они видят. Выбор правильной категории требует дополнительной когнитивной нагрузки. Если пользователь ошибётся, ему придётся тратить время на обдумывание и выбирать другую категорию.
Более эффективный подход к работе с большими группами элементов — отображение нескольких элементов по умолчанию и скрытие остальных. Это позволит пользователям видеть элементы верхнего уровня каждой категории, и им не придётся кликать и раскрывать категории, чтобы найти нужный элемент.
По аналогии такой подход можно сравнить с полупрозрачным комодом. В каждом его ящике люди смогут увидеть несколько рубашек, лежащих ближе всего к ним. В результате им не придётся открывать все ящики, чтобы найти нужную рубашку.
Если пользователи захотят посмотреть все товары из категории, в нижней части каждой группы товаров они смогут нажать на кнопку со стрелкой, направленной вниз под названием «Посмотреть больше». Для удобства восприятия каждая категория разделена линией. После раскрытия категории на кнопке раскрытия со стрелкой вверх должно быть написано «Свернуть».
Возникает вопрос, сколько элементов верхнего уровня следует показывать по умолчанию. Чем больше групп элементов, тем больше текстовых названий вы будете отображать. Это сделает боковую панель слишком перегруженной текстом. Поэтому, если у вас всего несколько групп, показывайте больше элементов, а если групп много, то меньше.
Размещать стрелки раскрытия на категориях, чтобы раскрывать группы с товарами по одной, — не самое лучшее решение для пользователей. Вместо этого лучше помочь людям быстрее находить нужные товары, давая им возможность заглянуть в каждую категорию. Эти элементы верхнего уровня каждой категории очень важны для навигации на любой боковой панели с большими группами элементов.
Перевод статьи How to Handle Large-Scale Item Groups in a Sidebar из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
