- Статьи
- 3 мин на чтение
- 51
Как спроектировать боковую панель, которая сэкономит место на экране
Структура раскрывающейся боковой панели
Экранное пространство в десктопном интерфейсе важнее, чем вы думаете. Большинство дизайнеров считают, что на экране компьютера много места. Однако когда речь идёт об отображении данных, важен каждый пиксель.
По ширине боковая панель может занимать много места и уменьшать область контента. В результате, единожды взглянув на экран, пользователи увидят меньше данных, и у них сложится впечатление, что на сайте тесно и он перегружен информацией. Если ваш интерфейс содержит большой объём данных, всё не так просто.
Пользователям будет комфортнее просматривать контент, если боковая панель будет раскрывающейся. Одним щелчком мыши человек может свернуть навигацию и освободить горизонтальное пространство для контента.
В результате пользователи смогут усваивать больше информации, меньше сканируя и двигая глазами. Кроме того, они получат более полный широкоэкранный вид изображений и видео. Но чтобы добиться этого, необходимо правильно оформить боковую панель.
Иконки
В первую очередь необходимо выбрать понятные иконки, которые хорошо отличаются друг от друга. Другими словами, ни одна иконка не должна выглядеть настолько похожей на другую, чтобы пользователи могли сомневаться, не представляют ли они один и тот же элемент.
Обратите внимание на пример боковой панели, где каждая иконка выглядит понятной и хорошо различимой. Некоторые иконки могут иметь похожую прямоугольную или круглую форму, но уникальные внутренние детали должны отличать их друг от друга. Эти детали позволят пользователям мгновенно их различать.
Также важно правильно подобрать размер и выровнять каждую иконку, чтобы все они были симметричны по вертикали. Обратите внимание, что все края иконок находятся внутри красных линий. Поэтому все они пропорциональны.
Проведите красную линию сквозь иконки. Это поможет определить, совпадают ли их центры. Если да, значит, иконки правильно выровнены и симметричны.
Стрелка сворачивания
Пользователи не могут свернуть боковую панель без соответствующей кнопки. Стрелка сворачивания в правом верхнем углу боковой панели поможет им в этом. Иконка стрелки должна быть направлена влево, чтобы показать, что свертывание происходит в левую сторону. Когда боковая панель свёрнута, стрелка должна быть направлена вправо, чтобы указать на раскрытие.
При сворачивании боковой панели логотип и текстовые названия скрываются. Ширина боковой панели уменьшается в разы. Однако иконки и подсказки выбора остаются без изменений.
Всплывающие подсказки
Пользователи будут ориентироваться только по иконкам. Поскольку названия пунктов отсутствуют, для их идентификации людям придётся полагаться на всплывающие подсказки. Однако чем чаще они будут пользоваться навигацией, тем быстрее будут распознавать иконки.
При наведении курсора мыши на иконку следует отобразить эффект наведения, раскрашивая иконку. Справа от иконки должна появляться подсказка в виде белого текста на тёмном фоне.
Каждая всплывающая подсказка должна быть выровнена по горизонтали по отношению к соответствующему элементу. Нарисовав красную линию, вы сможете увидеть, совпадают ли центры иконок и всплывающих подсказок.
Каждый интерфейс с большим объёмом данных нуждается в раскрываемой боковой панели, чтобы сэкономить экранное пространство и предоставить пользователям более богатый опыт просмотра. Следуйте этим рекомендациям по дизайну, и ваша боковая панель наверняка закроет потребности пользователей.
Перевод статьи How to Design a Sidebar That Saves Screen Space из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
