У меня есть группа переключателей (стилизованных флажков) в моем интерфейсе для активации/деактивации видимости полей ввода в форме во внешнем интерфейсе. Два из этих входов необходимы для работы формы, поэтому они всегда включены. Я все еще хотел бы отображать переключатели, чтобы отображать эти поля как «включенные».

Как четко указать эти поля как «включенные», но отключенные для пользователя. Я пробовал: серый (кажется, что они выключены) и темно-зеленый (на самом деле не передает функциональность).

example of a list of field toggles with the always on fields on top

20
Damien 9 Июн 2021 в 09:13
6
Теперь мне интересно, почему в столбце «Поле» используются скользящие переключатели, а в столбце «Обязательно» используются флажки; они оба логические, так в чем разница? Во всяком случае, я бы не предоставил пользователю никакого выбора (не устанавливайте переключатели для имени)
 – 
Caius Jard
9 Июн 2021 в 17:41
1
(Или, если вы отчаянно хотите показать что-то рядом с именем и адресом электронной почты, не думали ли вы о том, чтобы с помощью скрипта снова включить это, как только пользователь выключит его, и показать тостер, говорящий, что это всегда требуется (возможно, с «потому что. ." если есть))
 – 
Caius Jard
9 Июн 2021 в 17:48
1
Вы слишком много читали Дугласа Адамса: "Пожалуйста, больше не нажимайте эту кнопку."!
 – 
TripeHound
10 Июн 2021 в 16:08

9 ответов

Лучший ответ

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

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

Я бы предложил для ясности переместить переключатели видимости в отдельный помеченный столбец и удалить переключатели из двух строк, где они не имеют смысла. Наличие их там, независимо от визуального стиля, только запутает пользователей, которые предполагают, что должен быть какой-то (скрытый) способ взаимодействия с ними. Отключение элемента управления следует выполнять только в том случае, если у пользователя есть способ включить его поблизости.

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

Revised interface mockup with a separate column for visibility toggles.

55
Nathan Rabe 9 Июн 2021 в 15:56
1
Поместить обязательные в отдельную группу (а не в отдельный столбец)?
 – 
Caius Jard
9 Июн 2021 в 17:44
1
Не в восторге от отключенной радиокнопки, отключение видимости могло снять галочку с нужного. Но иметь видимость в отдельной колонке и не показывать радиокнопки для тех, которые никогда не переключаются, — определенно хорошее решение.
 – 
Shane Hudson
10 Июн 2021 в 11:07
Это справедливое замечание, хотя в любом случае вы получите один элемент управления, который изменяет значение другого. Если это распространенный вариант использования, это может привести к тому, что ответ MTCoster будет лучше подходить, если пользователи предпочитают 1 вариант с 3 вариантами, а не 2 варианта со взаимосвязанными вариантами.
 – 
Nathan Rabe
10 Июн 2021 в 16:03

Поскольку поля включено-отключено и обязательные-необязательные являются взаимозависимыми, почему бы не объединить их, чтобы создать концепцию включено неявно?

   Field      | Disabled  Optional  Required
--------------+------------------------------
Name          |                        X
Email Address |                        X
Phone Number  |   [ ]       [X]       [ ]
Date of birth |   [ ]       [ ]       [X]
Place of res. |   [X]       [ ]       [ ]
Street Addr.  |   [X]       [ ]       [ ]

(Извиняюсь за ужасный ascii-арт - в этой системе нет графического пакета)


Альтернативный вариант, если поля предназначены для изменения порядка пользователем:

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

14
MTCoster 9 Июн 2021 в 18:45
3
Мне нравится интуитивный переход к тому факту, что для этих полей есть только 3 «режима» работы, которые могут быть представлены переключателями или выбором входа. Вы хотели бы провести некоторое пользовательское тестирование, чтобы увидеть, соответствует ли их ментальная модель двум вариантам выбора для каждого поля (видимость и обязательность) или одному выбору для каждого поля.
 – 
Nathan Rabe
9 Июн 2021 в 22:57
2
Этот. И это может быть достигнуто с помощью переключателя со средним положением, флажка или переключателей.
 – 
mishan
10 Июн 2021 в 00:44
Да, но тогда это должно объясняться, потому что флажки с тремя состояниями ясны как грязь. Комбо-бокс кто-нибудь?
 – 
Caius Jard
10 Июн 2021 в 19:22
1
Я предполагаю, что под «три состояния» они имели в виду что-то вроде сегментированный контроль
 – 
MTCoster
10 Июн 2021 в 23:16

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

Вы абсолютно правы в том, что если сделать тумблеры серыми, это будет выглядеть так, как будто они «выключены», а темно-зеленые только запутают их функцию; «Почему этот темно-зеленый, а остальные нет?»

Я бы предложил очень распространенную практику, которая заключается в «отключении» тумблера:

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

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

источник enter image description here

9
Jos van Weesel 9 Июн 2021 в 09:42
5
Еще один вариант: если он не переключаемый, не показывать переключатель, даже отключенный. Просто не показывать значок или, если значок действительно нужен, возможно, зеленую галочку (✓ не ☑). Параллелизм с остальными переключателями — это хорошо, но я думаю, что наличие любой кнопки-переключателя, отключенной или нет, потенциально вводит в заблуждение (это заставляет меня думать, что может быть способ включить ее — может быть, это зависит от какой-то другой настройки, может быть, мне нужен администратор доступ?...)
 – 
Luke Sawczak
9 Июн 2021 в 14:25
1
Хороший вопрос Люк! Я согласен с тем, что было бы неразумно показывать (отключенный) тумблер, когда нет ситуации, когда этот тумблер можно использовать для любого человека и с любым уровнем разрешений. Сделать элемент «отключенным» хорошо работает во всех случаях, потому что вы можете применить один и тот же эффект практически ко всему: к полям ввода, кнопкам, ссылкам, и эта согласованность невероятно ценна для ясности для пользователей. Кроме того, использование всплывающих подсказок при наведении может помочь объяснить, почему определенные элементы заблокированы.
 – 
Jos van Weesel
9 Июн 2021 в 16:10
3
Я очень, очень ненавижу идею блокировки элемента управления, который по определению должен работать. Это нарушает все концепции UI/UX. Зачем предоставлять неработающий элемент управления? Я не могу не подчеркнуть, что правильный ответ - НЕ иметь опции для полей, которые нельзя отключить. Это суть отличного пользовательского интерфейса (и дизайна продукта), которую понял один генеральный директор Apple — не давайте пользователям варианты, которые им не нужны, и особенно не давайте им варианты, которые не работают.
 – 
user8356
9 Июн 2021 в 17:38
3
Я также ненавижу идею предоставлять что-то, что не работает, а затем объяснять, почему оно заблокировано — иначе пользователь просто задается вопросом: «Я вижу это, но оно отключено, какого черта мне нужно сделать, чтобы оно было включено?» . Даже сказать «Всегда видно» может быть недостаточно, так как это может привести к тому, что они будут думать, что «прямо сейчас это« всегда видно », но где-то должна быть настройка, которая позволяет мне отключить «имена всегда видны», чтобы я мог поменяй этот переключатель"
 – 
Caius Jard
9 Июн 2021 в 17:43
1
(Если пользователь может переключиться в режим администратора, хорошо; покажите переключатель. Если он никогда за всю свою трудовую жизнь не станет администратором, если не поменяет работу, то нет)
 – 
Caius Jard
10 Июн 2021 в 19:20

Если вы хотите сохранить зеленый цвет (чтобы указать, что поле будет присутствовать), но не хотите, чтобы состояние переключалось, тогда один из вариантов – оставить зеленый цвет, но не переключать:

enter image description here

6
TripeHound 10 Июн 2021 в 13:16
Одна проблема с этим подходом заключается в том, что единственным индикатором состояния является цвет. Было бы лучше показать что-то, чтобы выделиться (значок, текст) для людей с далеко не идеальным зрением.
 – 
Beejamin
15 Июн 2021 в 03:27

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

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

[вкл.] [переключатель/флажок] [выкл.]

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

[theDisabledToggle] Этот параметр всегда включен, потому что...

Как только у вас будет соответствующая маркировка, вы можете раскрасить переключатели, как хотите.

3
Bluedreamer 11 Июн 2021 в 02:43
Тумблер обозначен не только цветом, но и положением переключателя. Конечно, не очевидно, какой конец включает тумблер, но этот конец не нужно явно обозначать. Это может быть указано во всплывающей подсказке «Этот переключатель отключен», «Этот переключатель нельзя отключить», «Этот переключатель отключен» и т. д. Эта информация полезна для всех и может быть прочитана программами чтения с экрана.
 – 
Andrew Leach
12 Июн 2021 в 16:04

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

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

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

Конечно, использование простых флажков или пар радио-входов с метками практически надежно, но «дизайнерам виднее», не так ли!

1
Bluedreamer 13 Июн 2021 в 18:53

Я думаю, ты неправильно все это делаешь.

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

Использование переключателей в вашем случае не имеет для меня смысла.

Что-то вроде этого:

enter image description here

enter image description here

-4
stackzebra 10 Июн 2021 в 11:06
4
Дело OP (насколько я понимаю) заключается в том, что их экран настраивает, как будет выглядеть фактический экран ввода. Переключатели решают, будет ли поле ввода или нет... это не, куда будут вводиться данные.
 – 
TripeHound
10 Июн 2021 в 13:19
Да - OP создает «дизайнер форм», а не форму.
 – 
Beejamin
10 Июн 2021 в 14:38
Тогда это должно было быть более четко указано.
 – 
stackzebra
12 Июн 2021 в 14:05

В дополнение к другим предложениям вы можете сделать серым текст заблокированных параметров. Так, например, текст «Дата рождения» будет выделен серым цветом.

0
Acccumulation 11 Июн 2021 в 18:00

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

Locked toggles

В качестве альтернативы вы можете показать, что вся строка (видимая и обязательная) заблокирована, опуская элементы управления и просто показывая блокировку:

Locked rows

0
Beejamin 10 Июн 2021 в 08:19
ИМО ненужный скевоморфизм ... Может быть, достаточно будет выделенного серым цветом имени поля?
 – 
Trang Oul
10 Июн 2021 в 09:34
3
Я не согласен с тем, что добавление значка замка скевоморфно: это индикатор статуса, как и галочка. Скевоморфным может быть, если вы отобразите заблокированные строки как находящиеся за стеклом. В любом случае, уже используемый стиль тумблера определенно скевоморфен. Что касается затемнения имени поля, это плохо на нескольких уровнях: оно зависит от того, что у пользователя отличное зрение, и не дает никаких дополнительных указаний на статус: отключено ли оно? недоступен? заблокирован? Также нет «виджета», который можно было бы щелкнуть / навести для получения дополнительной контекстной информации.
 – 
Beejamin
10 Июн 2021 в 10:17