- Статьи
- 3 мин на чтение
- 31
Как упростить длинную страницу настроек с 15 параметрами
Сокращаем количество радиобаттонов
Насколько быстро пользователи могут настроить параметры в приложении? Как правило, страницы настроек работают медленно, и людям сложно их использовать. Такие страницы всегда предлагают настолько много параметров, что знакомство с ними занимает слишком много времени.
Например, на странице настроек ниже вы видите 15 вариантов с радиобаттонами, которые пользователям предстоит просмотреть. Если они неправильно поймут суть какой-либо настройки, они легко выберут неверный вариант и их впечатление о приложении испортится. Поэтому важно навести порядок на странице настроек с помощью двузначной (есть только два результата: «истина» и «ложь», да-нет, 0 и 1) и условной логики (есть несколько условий).
Двузначная логика
Когда вы смотрите на радиобаттоны, вы видите, что есть только два варианта: когда настройка может быть включена или выключена. Лучше представить эти функции включения/выключения с помощью переключателя.
При выборе переключателя вам не придётся заставлять людей много читать или использовать множество элементов управления. Один переключатель помогает сократить многословные названия до одного краткого названия и количество радиобаттонов до одного элемента управления.
Когда пользователи выключают настройку, появляется порядок, потому что двузначная логика не описана в тексте. Вместо этого, сам переключатель демонстрирует логику, а название лишь указывает на действие.
В состоянии «включено» переключатель — синий. Это помогает пользователям быстрее увидеть активные настройки. Остальные элементы страницы — чёрные, что позволяет моментально выделять включенные переключатели.
Условная логика
Если пользователь включает переключатель, появляется больше элементов. В таком случае можно применить настройку к двум условиям: «управление любым проектом» («manage for any project») или «управление только назначенными проектами» («manage for assigned projects only»).
Вместо того, чтобы представлять условную логику с помощью радиобаттонов, её лучше показать, используя сегмент с переключателем. Он работает как переключатель, за исключением того, что названия находятся на самом компоненте, а не снаружи. Каждое название описывает условие, которое применяется, когда переключатель включен.
Под сегментом с переключателем есть дополнительные параметры, которые относятся к каждому условию. Их обозначают чекбоксами, которые можно активировать одновременно.
С помощью сегмента с переключателем количество текста, которое пользователям нужно прочесть, становится меньше. Более того, условия настроек теперь более наглядные и удобные для выбора.
Вместо того чтобы скрывать двузначную и условную логику в списке, компоненты сегмента с переключателем хорошо их иллюстрируют. Если сравнить дизайн с 15 радиобаттонами и дизайн с 6 переключателями, вы увидите, насколько всё стало более упорядоченным.
Сравнение настроек
При сравнении списка радиобаттонов с переключателями видно, что беспорядок в настройках исчез. Более того, сами компоненты отражают логику без помощи текста. И к тому же, стало намного проще видеть активные настройки.
Если вы сравните радиобаттоны и сегменты с переключателем, вы заметите, насколько понятнее стала логика. Названия более краткие, а варианты с условиями видны только при включенном состоянии основной настройки. Другими словами, если переключатель выключен, пользователи не увидят условную логику, потому что в данном контексте это не имеет смысла.
По сравнению с макетом с радиобаттонами, вы экономите примерно 50% вертикального пространства, при отключенных параметрах. Страница удлиняется, только когда пользователь активирует настройку. Поскольку большинство страниц с настройками довольно длинные, это существенное преимущество.
Порядок на странице настроек увеличит скорость настройки приложения. Большинство таких страниц слишком длинные и содержат слишком много текста. Переключатели и сегменты с переключателями помогают упростить списки, перегруженные радиобаттонами.
- Источник:
- UX Movement Newsletter
