Как сделать очевидным, что опция недоступна и может быть удалена?

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

На моем сайте 33hotels.com я использую кнопки, такие как предоставленные Twitter Bootstrap, для обозначения удобств отеля.

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

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

Мои вопросы:

Как поставить крестик над кнопкой? Любой элегантный и многоразовый способ сделать это? Может быть, определить веб-компонент (или директиву Angular), «пересекающийся», который можно прикрепить к элементу HTML?

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

РЕДАКТИРОВАТЬ. Вдохновленный предложением г-на Э. Апвотера, изменил цвет на серый и добавил «X», который при наведении делает вид более четким. Кнопка исчезает при нажатии на себя (а не только на «X»), чтобы улучшить удобство использования для людей, которым трудно нажать на маленькую иконку. Большое спасибо за все предложения!

Я бы порекомендовал вам задать этот вопрос на ux.stackexchange.com , веб-сайте, посвященном удобству использования , поскольку именно об этом вы спрашиваете. Там уже есть похожие вопросы , как видно в быстром поиске .
@FranciscoPresencia Спасибо за полезные ссылки, однако принципиальная разница - отключенная кнопка не предназначена для нажатия. В моем случае мне это нужно.
@MrE.Upvoter Большое спасибо, мне нравится новое название. :)

Ответы (5)

Я предлагаю несколько индикаторов, работающих в тандеме:

  1. «Серый» — придает недоступным кнопкам некоторую прозрачность (или видимость прозрачности с более светлыми цветами). Это позволит убедиться, что она заметно отличается от других кнопок, по крайней мере, вызвав любопытство относительно того, почему она отличается.

  2. 'ПРОЧЬ !!!!' - "Вроде серьёзно, ребята, смотрите, я перевязал." Обычно это означает что-то негативное.

  3. При касании или наведении (вы можете просто использовать :hoverдля этого, насколько я знаю, он работает для касания последовательно, а также, насколько я знаю, вы просто не можете использовать его для ссылки без обходного пути) предложите вариант удаления и правильное объяснение.

Быстрый макет:

Нет наведения:

введите описание изображения здесь

Наведите/коснитесь всей кнопки:

введите описание изображения здесь

Наведите/коснитесь вопросительного знака:

введите описание изображения здесь

См. JSFiddle Mockup кнопок (div) с подсказкой при наведении и кнопками удаления .

Спасибо, хорошие идеи для размышления, однако меня немного беспокоит юзабилити маленького «X» — может быть сложнее нажать, чем большую кнопку (поэтому весь мой пользовательский интерфейс сделан с кнопками). Но визуально так и вправду понятнее!
Спасибо, именно так, как я сделал это сейчас, действительно полезно! :)

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

Это будет недостаточно ясно. Пользователь уже перепутал его с присутствием (а не отсутствием) удобств даже с перечеркнутым именем. Поэтому мне нужно что-то однозначно ясное. Поставить большой крест — лучшая идея, которая пришла мне в голову на данный момент. Спасибо!
Рассматриваете возможность полного изменения цвета кнопки, желательно на красный оттенок, вместе с отключенным функционалом?
Есть ли причина избегать креста?
Я бы посоветовал не использовать красный цвет, так как это кнопка отмены/удаления, однако я бы изменил кнопку действия на что-то похожее на кнопку действия (зеленый/синий/другой чистый цвет), а отключенный стал серым.
@FranciscoPresencia На самом деле нажатие красной кнопки удаляет ее и отменяет предпочтение. Красный по-прежнему не уместен?
@FranciscoPresencia Единственная кнопка действия — «Посмотреть на Hotels.com» — она зеленая. Я не уверен, что понял комментарий.

Тот факт, что чего-то вообще нет, является отличным признаком того, что этого нет!

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

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

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

Пример:

введите описание изображения здесь

Спасибо, хорошие моменты. Я не совсем понимаю, почему вообще не отображать кнопки. Они должны предупреждать пользователя о том, что некоторые запрошенные удобства упущены, зачем скрывать эту важную информацию?
@DmitriZaitsev То, что если чего-то нет, значит, этого нет. Если вы хотите также отобразить, какие из них «выбраны, но отсутствуют», возможно, сделайте это в другом месте, а не в том же месте и в том же элементе управления, что и вещи, которые там есть. Как простой список зачеркнутого текста в верхней части элемента результата, а не как кнопка в списке вещей, которые на самом деле есть в отеле. Так что теперь у вас нет проблемы с изменением стиля элемента, чтобы предотвратить путаницу, потому что путаница полностью исключена.
Спасибо за объяснение, надо подумать. Кстати, вы упомянули, что редко используете цвета — вы имеете в виду другие изменения стиля как признаки взаимодействия?
@DmitriZaitsev Я также добавил очень простой концептуальный макет. В общем, я стараюсь сократить использование цвета для обозначения концептуальной разницы в сходных элементах, потому что некоторые люди не различают цвета, а другие могут с первого взгляда сделать вывод, что цвет означает одно, а не другое.
Это отличный ответ. Это дает иерархию предметов по размеру, форме, положению и цвету. Мне также нравится рассматривать возможность удаления информации. Он игнорирует предложенное ОП решение: «Как поставить крестик поверх кнопки?» Когда информация правильно структурирована, вам не нужна многофункциональная кнопка.
@allcaps часто лучшее решение проблемы — просто перестать в ней участвовать :)

Я думаю, что логика ошибочна. Я выбираю некоторые удобства и в результате ожидаю увидеть ТОЛЬКО отели, сочетающие эти удобства. Вы должны сообщить пользователю, что НЕТ отелей со всеми удобствами, и, возможно, позволить им увидеть результаты с отсутствующими удобствами, нажав другую кнопку. На мой взгляд, кнопка с красным крестом работает хорошо. Если есть пользователи, которые этого не понимают, это их проблемы.

Спасибо, здесь есть логика. Сайты электронной коммерции часто возвращают «похожие результаты» без дополнительных кликов, но наличие четкого заявления о том, что совпадений НЕТ, — это хороший момент! Еще хотелось бы знать, как разместить эти кресты :)
Я думаю, что в большинстве случаев «если есть пользователи, которые этого не понимают», это вина/проблема дизайнеров, а не пользователей.
Я подумал так же, как и вы, Коменталь, вам может понравиться макет в моем ответе, потому что он касается этого, а также разъясняет то, что я считаю главным: чего-то, чего вообще нет, является хорошим признаком того, что его нет.

Хорошо выглядящего креста можно добиться, заменив обычный «x» умножением x, которое выглядит так:

×

Дополнительная информация: Символ Юникода «ЗНАК УМНОЖЕНИЯ»

Он работает с распространенными веб-шрифтами: Arial, Verdana, Georgia и т. д.

Да, я его рассматривал, но основная проблема в том, как сделать его нужного размера и разместить поверх кнопки.
я ответил на такой вопрос, однако шрифт @ user2358127 для «x» идеален .... так что, если вам нравится мой ответ, бросьте туда его письмо ... на самом деле я уже сделал. в идеале вы будете передавать класс кнопкам <code>button</code>, у которых не будет удобств, запуская динамический контент через псевдоэлемент(ы); как здесь: jsbin.com/hijaw/1/edit
@albert Это решение не делает X размера кнопки и имеет жестко запрограммированные настройки, которые не будут работать при изменении размера кнопки, поэтому, к сожалению, я не могу его использовать.
Как сделать очевидным, что опция недоступна и может быть удалена?
СпросиСетьПолитика конфиденциальности1y, 0v