UX-дизайн: флажки и переключатели в формах

https://uxplanet.org/checkbox-and-toggle-in-forms-f0de6086ac41#.ypj2znedu
  • Перевод
image

При создании форм дизайнеры часто стоят перед необходимостью выбора, какой элемент пользовательского интерфейса обеспечит необходимый уровень взаимодействия при изменении параметров. Безусловно, у каждого специалиста есть свои собственные правила, но всем следует помнить о некоторых неизменных аксиомах, которые действуют всегда и везде.

Выбор параметров может осуществляться с помощью флажков, переключателей, радиокнопок и раскрывающихся кнопок. Все варианты хороши, если правильно их использовать. В данной статье речь пойдет о флажках и переключателях.

Флажки


Флажки используются, когда имеется список параметров, и пользователь может выбрать любое их количество: один, несколько или ни одного. Иными словами, каждый флажок является независимым элементом управления, и включение одного из них не отменяет действие другого.

image
Флажки снабжаются надписями

Переключатели


Переключатель – это элемент управления, который что-то включает и выключает.

image

Переключатели позволяют сделать выбор между двумя прямо противоположными вариантами.

Как правило, переключатели используются для включения и отключения какого-либо действия (запустить или остановить что-то). Здесь можно провести аналогию с выключателем света.

image
Освещение является наиболее распространенной областью применения переключателей

Практические рекомендации по использованию флажков и переключателей


Используйте стандартный внешний вид

Флажок – это просто маленький квадратик с галочкой или крестиком.

image
Два положения флажка: отмечено или не отмечено

Переключатель должен выглядеть, как обычный тумблер с двумя положениями.

image
Два положения переключателя: включено или выключено

Вам необходимо обеспечить четкое недвусмысленное взаимодействие пользователя с элементом управления. Здесь может помочь небольшая анимация – это особенно важно для мобильных приложений, где пользовательский интерфейс должен быть осязаем.

image
Переключатель iOS7/8

Старайтесь, чтобы список возможных вариантов располагался вертикально. Это правило касается и флажков, и переключателей. Если уйти от горизонтального размещения нельзя, необходимо расположить элементы с достаточно большим интервалом, чтобы не допустить двойной трактовки, что выбирает каждый флажок. Ниже представлен пример со слишком близко расположенными друг к другу элементами.

image
Сложно понять, какую радиокнопку следует нажать, чтобы выбрать четвертый вариант

Текущее положение переключателя

При проектировании переключателей следует избегать неопределенности, связанной с текущим состоянием. В качестве примера возьмем переключатель из iOS 6 и посмотрим на него во включенном состоянии – окраска синим цветом и отображается слово ON (включено).

image
Не ясно, включено – это текущее состояние, или предлагаемое действие

Вы можете сказать однозначно, переключатель находится во включенном положении, или он только перейдет в него, если вы передвините ползунок? «Включено» — это состояние или действие? Не понятно.

Вы не должны вводить пользователей в заблуждение; очень важно проводить отличие между состоянием и действием. Да, можно использовать цвет для дополнительного информирования пользователей, но при этом следует сделать так, чтобы текущий вид воспринимался однозначно, как в следующем примере:

image
Цвет шрифта обозначает текущее положение

В тексте надписей флажков используйте позитивное подтверждение, чтобы пользователь точно знал, что произойдет, если он поставит отметку. Избегайте фраз типа «Больше не присылайте мне е-мэйл сообщения», которые бы означали, что пользователю необходимо поставить отметку, чтобы что-то не происходило.

image

Флажки должны иметь надписи с позитивными командами, а не с негативными «Не…»

Сделайте надпись флажка целевой областью


Все флажки сопровождаются лейблами, но лейблы не всегда кликабельны. Флажки имеют маленький размер, и по закону Фиттса на них тяжело попасть, как мышью, так и пальцем. Для того чтобы увеличить область нажатия, дайте пользователям возможность выбирать требуемый параметр не только попаданием точно в квадратик, но и по лейблу или связанным словам.

image
Позвольте пользователю делать выбор нажатием не только флажка, но и лейбла

Используйте флажки только для изменения параметров, но не в качестве управляющих кнопок

Главное отличие флажка от переключателя состоит в том, что флажок используется для изменения состояния, а переключатель – для включения или отключения действия.

В примере ниже положение переключателя позволяет сказать однозначно: беспроводная связь включена. В случае с флажком пользователю приходится гадать – WiFi включен, или для его включения необходимо поставить галочку.

image
Для включения/выключения сервисов и компонентов аппаратного обеспечения, таких как WiFi, используйте переключатели

Взаимодействие флажка отличается от взаимодействия переключателя


Вы можете сделать так, чтобы состояние, за которое отвечает флажок, менялось не сразу (как часть отсылаемой формы, например), но действие, за которое отвечает переключатель, должно совершаться сразу же.

Хорошей практикой пользовательского взаимодействия является мгновенная смена управляемого параметра с помощью переключателя – не после нажатия кнопки «Сохранить» или перехода к предыдущей странице. Именно этого мы ожидаем от этого элемента управления в реальной жизни – мы щелкаем переключателем, и свет включается.

image
Включение Wi-Fi в iOS
Используйте флажки, когда для ввода изменения в силу от пользователя ожидаются дополнительные действия

image

Используйте флажки, когда пользователь должен кликнуть кнопку «Отправить» или «Следующий», чтобы сохранить изменения.

Заключение


При разработке интерфейса будьте последовательны в выборе его элементов. Следуйте общепринятым стандартам; это позволит пользователям получить удобное предсказуемое управление. В противном случае, если нарушать общепринятые стандарты, ваш пользовательский интерфейс будет непредсказуем, как будто в любой момент может случиться все, что угодно.
Поделиться публикацией
Комментарии 14
    +1
    Добавлю еще про «лево-право». Положение «вправо» чаще ассоциируется с «включенностью» тумблера. Видел как-то на сайте стильный тумблер, но при этом с перепутанным «лево-право», долго тупил и переключал, прежде чем понял, что логика отзеркалена.
    Возможно, и не является частой проблемой, но упомянуть стоит. Опять же, есть и страны, где текст читается справа-налево… Там с интуитивным положением может быть другая ситуация.
      0
      Использовал react и material-UI.
      Сделал форму с переключателями и кнопкой «Сохранить».

      Если элементы формы соответствуют сохраненному на сервере состоянию — я прячу кнопку.
      И наоборот, если одно из полей имеет состояние отличное от сохраненного — я показываю кнопку.

      Таким образом отлично видно, включены или нет переключатели и сохранено ли это состояние на сервере.
        0
        Хочу немного дополнить.

        Стараюсь использовать минимализм в дизайне — не позволять пользователю сделать действие, которое нужно проверять на сервере, например валидация данных.

        Сохранение возможно только при наличии заполненных полей, при этом заполненных правильно.
        Только после этого показываю кнопку «Сохранить» (не забываю о сообщениях об ошибке).

        В момент сохранения показываю индикатор загрузки (spinner), при этом отключаю (disable) все элементы на форме.
        Таким образом пользователь видит, что процесс идет, что нужно подождать.

        Очень помогает material дизайн от Google.
        Любые действия, такие как нажатие кнопки, включение или выключение переключателя, имеют свой визуальный эффект.
        И вместе с отключением элементов формы, индикацией загрузки делают действительно интерфейс отзывчивым.
        +2
        Главное отличие флажка от переключателя состоит в том, что флажок используется для изменения состояния, а переключатель – для включения или отключения действия.

        Включение и отключение "действия" — это тоже переключение бинарного состояния. Не понимаю я этой высосанной из пальца разницы. Это просто два варианта визуализации одного и того же контрола — переключателя. Есть ещё третий вариант — "отжимаемые кнопки", которые в активном состоянии, например, заливаются светом. И, честно говоря, последний вариант мне нравится больше, за счёт как правило кастомной иконки.


        Кроме того, не вижу причины делать разную визуализацию радиокнопок и чекбоксов. Радиокнопки — частный случай связанных чекбоксов. А связаны они могут быть самыми причудливыми способами. Обычно эта связь понятна из контекста. В тех же случаях, когда она не очевидна (обычно всякие тупые анкеты), то там и различие между квадратиками и кругличками не сильно спасает и зачастую делают приписку, что "можно выбрать несколько вариантов".

          +2
          С тех как переключатели вошли в моду я так и не смог к ним привыкнуть. В них концептуально заложена та же самая проблема, что и в выключателях света: приходится угадывать где «вкл», а где «выкл». И как автор статьи верно подметил — костыли типа текстовых подсказок не всегда помогают — если написано «off», то остается сомнение — «currently off» vs «turn off». Конечно, можно увеличить количество костылей, можно размещать подсказки не внутри, а слева и справа, можно спасать положение цветовой сигнализацией (серенькое — выкл, яркое — вкл), но генетически заложенная проблема переключателей до конца не исчезнет.

          Другое дело — флажки. Изумительно компактный и интуитивно понятный интерфейс, понятный без слов. Изобретенный еще до начала эры компьютеров.
            0
            Согласен. Может быть, обладаете информацией, откуда вообще эти тумблеры появились (неужели apple?) и для чего? Неужели для кого-то квадратик с галочкой не интуитивно понятен? Были какие-то исследования, или маркетологи всё решили сами?
              0
              Да, Apple. Вероятно, идея была в том, что на тач-экране сделать случайное нажатие значительно проще, чем случайный свайп.
            0
            В переключателях для выделения включенного состояния желательно использовать яркие цвета в стиль сайта или приложения, а для выключенного — серые и мрачные. В примере, где «Цвет шрифта обозначает текущее положение» я бы не сразу понял состояние переключателя.
              0
              А как тогда отображать случай недоступности этого переключателя? Например он зависим от ещё одного переключателя и пока тот выключен, этот недоступен. Да и типичная проблема современных «дизайнёров» всплывает: серый текст на сером фоне, который хорошо смотрится, но плохо читается.
                0

                Раз нельзя использовать, то и нечего показывать. :-)

                  0
                  Обычно показывать надо, чтоб пользователь видел зависимости. Иначе возникает проблема: пользователь ищет фичу A, но из-за фичи B её не видно и он предполагает, что программа просто не может в A.
                    0

                    Не вижу принципиальной разницы между "фичи нет" и "фича есть, но не работает". :-) А решение тут простое — написать пользователю хинт: "выполнение таких-то условий откроет вам такую-то функциональность". А если его можно будет закрыть, чтобы не мозолил глаза — вообще замечательно.


                    Ну или давайте более конкретные примеры обсуждать.

              +1
              «Флажки имеют маленький размер, и по закону Фиттса на них тяжело попасть, как мышью, так и пальцем» — это не закон Фиттса, это здравый смысл. А закон Фиттса звучит совсем по-другому, как минимум там ещё упоминается расстояние до объекта. Это фраза как минимум дилетантская.
              В целом не согласна, что у переключателей и галочек разные предназначения. По мне, эти элементы друг друга дублируют.
                0
                В первый раз я столкнулся с «переключателями», купив сенсорный телефон. В нормальных интерфейсах я привык так: то что нажимается (кнопки), надо нажимать, то что двигается (ползунки) — двигать. Не помню уже, сколько времени прошло, пока я понял, что для переключения сдвижного переключателя в него надо просто ткнуть (при этом на двигающийся по нему палец он не реагирует) — но до сих пор я считаю эту логику абсолютно наркоманской.

                И да, в то время как наши космические корабли вовсю уходят от скевоморфизма, мы заменяем довольно-таки абстрактные чекбоксы слабоинтуитивной и кривой имитацией физического тумблера. Стыдно должно быть.

                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                Самое читаемое