Тумблеры (Toggle switches) – это цифровые переключатели вкл. / выкл. Они предлагают пользователям выбирать между двумя взаимоисключающими параметрами и всегда имеют значение по умолчанию. Переключатели должны обеспечивать немедленные результаты, предоставляя пользователям возможность контролировать свои предпочтения по мере необходимости.
Каждое утро я просыпаюсь, наливаю воду в чайник и поворачиваю выключатель. Как только вода закипит, я выключу чайник и налью кипяток в чашку. Переключатель на моем чайнике – пример тумблера. Если вы посмотрите внимательнее, вы заметите, что тумблеры-переключатели повсюду вокруг нас. Потому что у многих вещей есть два простых состояния: они либо включены, либо выключены. От переключателей света, до включения мобильной точки доступа на странице настроек нашего любимого мобильного приложения, мы каждый день взаимодействуем с тумблерами.
Тумблер – это цифровой переключатель включения / выключения.
Тумблеры лучше всего использовать для изменения состояния системных функций и предпочтений. Тумблер может заменить две радиокнопки (radio buttons) или один флажок (checkbox), чтобы позволить пользователям выбирать между двумя противоположными состояниями.
Иногда бывает трудно решить, какой элемент интерфейса использовать – radio buttons, флажки или тумблеры. Когда вы решаете какой вариант будет соответствовать вашему случаю использования, рассмотрите количество и тип параметров, и определите есть ли какое-либо значение по умолчанию. В приведенной ниже таблице приведены вопросы и ответы по этим часто используемым элементам интерфейса.
Радиокнопки
Флажки
Отдельный флажок
Тумблер-переключатели
Сколько параметров доступно?
Несколько
Несколько
1
1
Сколько вариантов может выбрать пользователь?
1
0 – все
2 (вкл./выкл.)
2 (вкл./выкл.)
Это вариант по умолчанию?
Да
Нет
Да
Да
Как бы вы описали варианты?
Взаимо -исключающие
Независимые друг от друга
Взаимо -исключающие
Взаимо -исключающие
Когда выбор будет иметь эффект?
После того, как пользователь нажмет на кнопку подтверждения изменений
После того, как пользователь нажмет на кнопку подтверждения изменений
После того, как пользователь нажмет на кнопку подтверждения изменений
Немедленно
Когда дизайнеры используют соответствующий элемент пользовательского интерфейса для определенного сценария, это помогает пользователям предсказать, что элемент интерфейса будет делать и как им управлять. Чтобы избежать неудовлетворенности пользователя и обеспечить понимание, следуйте рекомендациям по тумблерам приведённым ниже.
Предоставьте пользователю немедленный результат
Тумблеры-переключатели должны оказывать немедленный эффект и не должны требовать от пользователя нажатия кнопки «Сохранить» или «Подтвердить», чтобы применить новое состояние. Как всегда, мы должны стремиться сопоставлять систему с реальным миром. Подумайте о моем чайнике: мне не нужно поворачивать выключатель и отсоединять шнур, чтобы ощутить изменение состояния. Следовательно, пользователи ожидают такой же немедленный результат от цифрового тумблера, как и от его реального аналога (например, выключатель освещения). Немедленные результаты – это аспект тумблеров, которые предоставляют пользователям свободу и контроль обновления своих предпочтений по мере необходимости.
Если немедленные результаты не достижимы или кажутся некорректными, вместо этого следует использовать альтернативу (например, радиокнопки или один флажок - см. таблицу выше). Если вы рассматриваете возможность включения тумблеров в длинные формы, где присутствуют другие виды полей формы, и пользователям необходимо нажать кнопку «Отправить», чтобы другие изменения вступили в силу, не делайте этого. Этот сценарий смущает пользователей, потому что они не уверены, сработает ли переключение тумблера немедленно. Избегайте путаницы любой ценой. Отделите элементы управления, которые дают мгновенные результаты от тех, которые требуют нажатия кнопки подтверждения.
Не рекомендуется:
В приложении United Airlines для iOS ничего не происходит, когда пользователи переключают тумблер. Как пользователь узнает, работает ли переключатель или нет? Результаты не были предоставлены. В этом случае лучше было использовать один флажок.
Рекомендуется:
При включении режима полета в iOS Apple дает немедленные результаты, изменяя иконку состояния мобильной сети в верхнем левом углу на значок самолета.
Делайте сжатые подписи
Делайте подписи к тумблерам короткими и понятными. Рассмотрим один из принципов дизайна взаимодействия Tog, который гласит: «Подписи меню и кнопок должны иметь ключевое слово(а), образуя уникальные ярлыки». Например, при разработке страницы настроек, где пользователь может обновлять настройки уведомлений: пишите Email уведомления или Текстовые уведомления, но не пишите «Хотите ли вы получать от нас уведомления по электронной почте?» Мы знаем, что пользователи читают ровно столько, сколько считают нужным, поэтому используйте для подписей ключевые слова и удалите лишние фразы. Избегайте задавать вопросы и пишите понятно.
Подписи тумблера должны описывать, что элемент управления будет делать при включении. Они не должны быть нейтральными или двусмысленными. Если вы сомневаетесь, произнесите ярлык вслух и добавьте «вкл / выкл» в конце. Если это не имеет смысла, перепишите подпись.
Не рекомендуется:
Подпись Include non-maternity items? Для тумблера на сайте Le Tote нейтральная и заставляет гадать добавляет она или убирает товары указанной категории.
Рекомендуется:
Подписи тумблеров-переключателей, используемые в приложении Google Календарь, являются прямыми и однозначными; они описывают состояние системы, когда переключатель включен и имеет смысл добавление слов «вкл / выкл».
Следуйте стандартам визуального дизайна
Убедитесь, что тумблеры выглядят как ползунки и используют визуальные сигналы (т. е. движение и цвет), чтобы избежать путаницы. Прежде всего, когда пользователь изменяет состояние тумблера, переключатель должен менять позицию – как это было бы в реальном мире.
Цвет – важное визуальное обозначение для переключателей, и есть две вещи, которые нужно иметь в виду: контраст и культурные различия. Когда дизайнеры используют низкоконтрастные цвета, пользователям становится трудно узнать, включен или выключен переключатель. Поэтому всегда используйте высококонтрастный цвет, чтобы сигнализировать об изменении состояния. Кроме того, не забудьте оценить общественные и культурные последствия для вашей аудитории. Например, красный цвет для положения «включено» алогичен, поскольку люди связывают его со знаками остановки или стоп-сигналами.
Кроме того, дескрипторы состояния – слова On и Off рядом с переключателем могут обеспечить четкую наглядность состояния системы.
Включен или выключен этот переключатель? В Windows 10 дескриптор состояния (слово Off) используется для определения текущего состояния тумблера (выкл.). К сожалению, этот дескриптор неоднозначен: поскольку слово «Выкл» появляется справа от переключателя, а точка переключения слева, пользователи также могут интерпретировать состояние переключателя как включенное (то есть вдали от метки «Выкл.»).
При добавлении дескрипторов состояний придерживайтесь слов вкл/выкл (on/off ), чтобы соответствовать правилам реального мира, и разместите оба слова off и on слева и справа, соответственно, чтобы избежать путаницы. Если только один дескриптор присутствует рядом с переключателем, его можно использовать в качестве подписи тумблера.
Если вы не знаете, как найти баланс между цветом и дескриптором состояния, проверьте, какая комбинация лучше всего подходит для ваших пользователей.
Рекомендуется:
Android-приложение Daylio использует контрастный цвет (фиолетовый) и дескрипторы состояния, чтобы четко указывать состояние переключателя (выключен на скриншоте слева и включен справа).
Соблюдайте последовательность
Следуйте правилам платформы и убедитесь, что тумблеры последовательно применяются в вашем приложении. Непоследовательность заставляет пользователей замедляться и тратить больше времени на размышления о том, как взаимодействовать с компонентами. Не заставляйте пользователей задаваться вопросом, работает ли форма с двумя переключателями так же, как тумблер.
Не рекомендуется:
Приложение iOS Chase Bank использует тумблеры и радиокнопки непоследовательно. За исключением типа элемента и количества контента эти три страницы почти идентичны. Когда я взаимодействовал с этими страницами, я ожидал, что они будут работать одинаково. Вместо этого я потратил время на то, чтобы выяснить, почему применённые мной маркетинговые настройки не сработали.
Вывод
Тумблеры помогают пользователям обновлять настройки и другие типы информации. При использовании переключателей, давайте понятные подписи, используйте стандартный визуальный дизайн и предоставляйте немедленные результаты. Имейте в виду, что тумблеры должны использоваться только тогда, когда пользователю необходимо выбрать между двумя противоположными состояниями. Когда вы рассматриваете использование переключателей на своем сайте или в приложении, оцените контекст и убедитесь, что они реализованы последовательно. Помните, что этот простой компонент пользовательского интерфейса может существенно повлиять на опыт пользователя.
Перевод статьи Alita Joyce
Топ коментарі (0)