- Статьи
- 5 мин на чтение
- 32
Как упростить запутанный переключатель между сегментами
Улучшенные компоненты переключателей для настроек
Есть ли на вашем сайте или в приложении компоненты переключателей? Если да, то важно понимать, как правильно их применять, чтобы не запутать пользователей, когда они будут настраивать параметры.
Распространённая ошибка — смешивать бинарную логику с переключателями между сегментами. Другими словами, дизайнеры включают в этот компонент варианты «Включить/Выключить» (“On/Off”). Более того, они могут добавить туда опцию «Настроить» (“Custom”), которая позволяет пользователям настраивать параметры. Нельзя объединять всё это в переключатель между сегментами, потому что это запутает людей.
Переключатели между сегментами не должны включать двоичные состояния, которые включают или выключают параметр. Правильным компонентом в данном случае будет простой переключатель. Переключатель — наиболее понятный способ передачи двоичной логики, поскольку он включает только два состояния.
Дизайнеров часто сбивает с толку необходимость добавлять переключателю дополнительный уровень настройки, без которого переключатель не работает. В результате они объединяют всё в переключатель между сегментами. Но в этом нет никакого смысла.
Каждый вариант сегмента взаимоисключающий. Другими словами, два или более события не могут происходить одновременно. Однако, если пользователь выбирает «Настроить» (“Custom”), эта опция совпадает со состоянием «Включить» (“On”). В переключатель между сегментами невозможно включить взаимоисключающие варианты.
Чтобы логика была последовательной, необходимо отображать переключатель до появления уровня настройки. После того как пользователь включит параметр, ниже появятся опции «Настроить» (“Custom”). Таким образом, опция «Настроить» (“Custom”) больше не совпадает с вариантом «Включить» (“On”) и появляется только при определённых условиях. В логике переключателя между сегментами появляется смысл и взаимоисключение.
Переключение между противоположными режимами
Ещё одна распространённая ошибка — использовать переключатели между сегментами для переключения между двумя противоположными состояниями. Противоположные состояния похожи на бинарные настройки тем, что полярны. Поэтому для отображения этих противоположных состояний лучше применять переключатели.
Например, в настройке «Режим обрезки» (“Crop Mode”) есть режимы «Фиксированный» (“Fixed”) и «Соотношение» (“Ratio”). Эти опции противоположны, но по стилю и иерархии сегмента выглядят подобными. Вместо того, чтобы отобразить их, как близких родственников, их скорее нужно показать, как противников.
Переключатель нагляднее показывает эти отношения противников, поскольку при взаимодействии меняется стиль фона. Однако у обычного переключателя есть только одно название. Поскольку здесь два режима, одного названия будет недостаточно.
Поэтому следует использовать иконки, которые будут представлять различные режимы. Однако подходящих иконок для режимов «Фиксированный» (“Fixed”) и «Соотношение» (“Ratio”) нет. Наиболее наглядный и понятный способ их представления — сохранение пропорций. Пропорции не сохраняются при включенном режиме режим «Фиксированный» (“Fixed”). Однако включенный режим «Соотношение» (“Ratio”) их сохраняет.
Теперь, когда вы представили режимы в более понятном виде, поиск иконок для их отображения стал гораздо проще. Для иллюстрации режима сохранённых и несохранённых пропорций используйте иконки в виде связанной цепи и несвязанной.
Однако не стоит отображать эти иконки внутри переключателя, потому что их будет трудно отличить друг от друга. Пользователи будут игнорировать трудно различимые иконки и упускать их из виду. В результате они даже не поймут, что есть функция «Сохранить пропорции» (“Constrain Proportions”).
Превращение переключателя в кнопку переключения на одной поверхности — наиболее оптимальный подход. Он делает иконки более разборчивыми, что побуждает пользователей взаимодействовать с ними. Кроме того, люди быстрее заметят сменяющие друг друга глифы иконок и изменение цвета фона кнопки.
К тому же кнопка переключения занимает мало места и находится в одной строке с текстовыми полями «Размеры» (“Dimensions”). Это идеальное место для кнопки переключения, поскольку режим обрезки применим непосредственно к значениям размеров.
К кнопке переключения также следует добавить всплывающую подсказку, потому что она объясняет функцию иконки. В данном случае, когда пользователи наведут курсор на иконку, появится текст «Сохранить пропорции» (“Constrain Proportions”). Он проинформирует пользователей о функции кнопки переключения.
Переключение между связанными опциями
Для взаимосвязанных опций используют переключатель между сегментами. Например, параметр «Сжатие» (“Compressor”) отображает варианты качества сжатия — «Низкое» (“Low”), «Среднее» (“Medium”) и «Высокое» (“High”). Все они связаны, потому что их можно классифицировать в рамках одной категории.
Следовательно, отображение этих вариантов в переключателе между сегментами — правильное дизайн-решение. По сравнению с радиокнопками переключатель между сегментами экономит вертикальное пространство, а макет выглядит чище. Кроме того, в данном случае опцию легче выбрать.
Однако добавление к компоненту варианта «Настроить» (“Custom”) усложняет ситуацию. Этот сегмент позволяет пользователям вручную настраивать качество сжатия, вместо того, чтобы выбирать предустановленную опцию. Проблема в том, что это увеличит ширину переключателя между сегментами, нарушит композицию, а элементы перестанут вписываться в ограниченное пространство.
При работе с сегментами в ограниченном пространстве преобразуйте их в переключаемые инструменты выбора. Пользователи не смогут увидеть все опции сразу, но скрытые варианты будут им интуитивно понятны, потому что они распределены в рамках одной категории.
Например, если видимый вариант — «Низкое» (“Low”), легко предположить, что нажатие на стрелку вперёд отобразит опцию «Среднее» (“Medium”), а затем опцию «Высокое» (“High”). Пользователи могут предугадать, каким будет следующий вариант, потому что значения будут увеличиваться.
После варианта «Высокое» (“High”) следует опция «Настроить» (“Custom”). При её выборе под переключаемым инструментом выбора появится компонент слайдера. Там пользователи смогут вручную настроить качество сжатия. Если они переключатся на следующий вариант, слайдер исчезнет.
Можно использовать компоненты переключателя между сегментами по-разному — правильно и неправильно. В вашем распоряжении есть переключатели между сегментами, переключатели, кнопки переключения и переключаемые инструменты выбора. Вам следует знать, когда и какой из них выбрать, если вы хотите создать интуитивно понятный интерфейс для настроек.
Перевод статьи How to Simplify the Most Confusing Toggle Segments из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
