Лучший дизайн для индикаторов выбора на боковой панели
Правильные визуальные подсказки для навигацииВ интерфейсе на боковой панели пользователи могут выбрать один из нескольких пунктов. После того, как они сделали выбор, им нужна визуальная подсказка, которая бы выделила выбранный пункт. Эта подсказка называется индикатором.На каждой боковой панели должен быть чёткий и не отвлекающий внимание индикатор выбора. Однако многие дизайнеры продолжают применять плохие практики дизайна, которые мешают пользователям отличать выбранный элемент от остальных.Один из таких примеров — слишком яркий индикатор, который может отвлекать внимание, когда боковая панель находится в поле зрения пользователя.
Кроме того, в данном случае название пункта трудно прочитать из-за плохого цветового контраста. По этой причине лучше не использовать цвет для выделения текстового названия и обозначения выбора.
Ещё один плохой вариант — делать индикатор слишком похожим на кнопку. Это происходит тогда, когда индикатор имеет сплошную цветовую заливку, а текстовое название и иконка окрашены в белый цвет.
Пользователи могут легко принять индикатор за кнопку из-за похожего внешнего вида. В результате они могут нажать на индикатор и не получить ожидаемого результата.
Оптимальный дизайн индикатора не должен отвлекать, путать или быть недоступным для восприятия. Он должен достаточно хорошо справляться со своей задачей. Сделайте яркую иконку, жирный тёмный текст и избавьтесь от всего лишнего.
Подложка индикатора, которая подсвечивает пункт, должна быть бесцветной, тем не менее быть немного темнее фона. Этот небольшой оттенок придаст индикатору визуальную глубину и немного возвысит его над фоновой поверхностью.
Обратите внимание на то, чем отличается иконка и название выделенного пункта от остальных. Текстовое название более жирное, а иконка — более яркая. Эти визуальные эффекты пользователи могут воспринять как «включение» элемента. На сделанный выбор указывает не только подложка, но и иконка с текстовым названием.
Однако индикатор выбора не был бы настолько эффективным, если бы визуальное оформление текстового названия и иконки оставалось неизменным. Хотя отличить выбранный пункт от остальных можно, но он не выглядит и не ощущается как намеренный выбор пользователя.
Индикаторы оповещения
Помимо индикаторов выбора, существуют также индикаторы оповещений. Они информируют людей об обновлении контента в пунктах категорий. Однако пользователи будут игнорировать их, если они не будут заметными.
Для обозначения индикаторов оповещений лучше не применять сдержанные оттенки, например, серый. Если они будут сливаться с фоном, пользователи могут легко их пропустить.
В отличие от индикаторов выбора, индикаторы оповещений должны быть цветными, чтобы люди замечали срочные обновления, требующие внимания. Цветные подсказки не будут отвлекать пользователей, поскольку они будут исчезать после того, как люди перейдут в категорию.
Цифры на индикаторе должны информировать людей о том, сколько новых элементов появилось в категории. В примере мы видим, что с момента последнего визита пользователя появилось 8 новых отчетов и 12 новых сообщений. Вместо того, чтобы переходить в каждую категорию для проверки нового контента, индикаторы оповещений экономят время и силы людей.
Перевод статьи The Optimal Design for Sidebar Indicators из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
Комментарии
Войдите, чтобы оставить комментарий.