Должен ли пользовательский интерфейс отображать действия, которые недоступны?

Question

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

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

1. Всегда показывать опцию удаления, но когда пользователь выбирает ее, предупреждает, что эта опция недоступна из-за активных контрактов.
2. Показать опцию удаления, но выделите ее серым цветом.
3. вообще не показывать опцию удаления

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

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

Отсутствие последовательности вообще не отображает опцию, но, возможно, не будет таким запутанным.

До вчерашнего дня я бы даже не задавал вопрос и пошел бы прямо к варианту 2 (Выцветание), однако, увидев, как пользователь пытается нажать на серое изображение много раз, и, в конце концов, спросил меня, почему он не может щелкнуть На кнопке я больше не уверен, какой вариант лучше.

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

Answer 1

Мой подход (и рекомендация) заключается в том, чтобы кнопка была серой согласно вашему варианту # 2.

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

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

Вышесказанное должно позаботиться обо всех (как типичных, так и патологических) случаях. Он сочетает в себе преимущества ваших вариантов № 2 и № 3, и, надеюсь, ни один из недостатков.

Answer 2

Раймонд Чен (из известности «Старое новое») дает хорошие рекомендации:

Когда вы отключаете опцию и когда ее удаляете?

Из записи в блоге:

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

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

Answer 3

Меня всегда учили, что удаление объектов из пользовательского интерфейса было гораздо более неприятным для пользователя, чем отключение. Не надейтесь на 0,01%, которым нельзя помочь!

Answer 4

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

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

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

Answer 5

Для этого конкретного случая вариант 2 является лучшим выбором. При принятии решения о том, скрывать или отключать что-либо, я соблюдаю общее правило:

Если пользователь не может выполнить операцию, и он может что-то сделать, чтобы включить ее, его следует отключить.

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

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

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

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

Answer 6

Я предлагаю вариант 1). Я скажу тебе почему.

Вариант 3) (Худший) «Не показывать опцию удаления вообще» Это даже не дает пользователю понять, что такая функция существует. Так что это худший способ отрицать.

Вариант 2) «Показать опцию удаления, но выделите серым»

Лучше, чем 3), но пользователь может продолжать задаваться вопросом, почему ему отказывают в функциональности. Он также может начать думать, что он не является привилегированным пользователем и не имеет прав.

Option1) «Всегда показывать опцию удаления, но когда пользователь выбирает ее, предупреждает о том, что эта опция недоступна из-за активных контрактов.»

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

Answer 7

Просто примените принцип наименьшего сюрприза : не делайте ничего неожиданного.

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

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

Answer 8

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

Answer 9

Для этого сценария используйте 2, но добавьте знак вопроса, кроме того, это объясняет, почему он отключен. Обновление 1: Обратите внимание, что это дает вам возможность четко определить, когда он будет активен / отключен.

Answer 10

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

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