How to make it obvious that an option is unavailable, and can be deleted?

Here is the question I have asked on StackOverflow that somehow did not get the response I hoped for. I am trying it now here, as I am looking for a visually appealing solution. Ideally using a library would be great.


On my site 33hotels.com I am using Buttons, such as provided by Twitter Bootstrap, to indicate hotels’ amenities.

What I need is to clearly display that an amenity is absent. For this, I am already displaying the button in red with text crossed by horizontal line. However, from user testing feedback, this is not enough to deliver the message that the amenity is absent. So I need something more clear.

I am thinking of putting a Large cross (letter ‘X’ or an icon) on top of the button, that should be as large as the button and cover the button nicely, without sticking out. The cross should be thin as not to obscure the text but still clearly visible.

My questions are:

How do you put an ‘X’ on top of a button?
Any elegant and re-usable way to do it?
Maybe define a web component (or Angular directive) “crossed” that can be attached to an HTML Element?

Here is the ugly version of what I’m trying to achieve. However, apart from being ugly, it fails to make the text crossed readable. So perhaps I should use a thinner version of ‘X’?


EDIT. Inspired by the suggestion of Mr. E. Upvoter, changed colour to gray and added ‘X’, which on hover makes a more clear appearance. The button disappears upon click on itself (and not just on ‘X’), to improve usability for people having difficulties to click on small icon. Many thanks for all suggestions!

Answer

I suggest a bunch of indicators working in tandem:

  1. ‘Greyed Out’ – give the unavailable buttons some transparency, (or the appearance of transparency with lighter colours). This will make sure it is noticeably different from the other buttons, at the very least sparking curiosity as to why it’s different.

  2. ‘Strike-THROUGH!!!!’“Like seriously guys look, I put a line through it.” That usually means something negative.

  3. On tap or hover (you can simply use :hover for this, it works for tap consistently as well as far as I know – you just can’t use it on a link without a workaround) offer the option to delete, and a proper explanation.

Quick Mockup:

No hover:

enter image description here

Hover/Tap Whole Button:

enter image description here

Hover/Tap Question Mark:

enter image description here

See a JSFiddle Mockup of (div) buttons with hover help and delete buttons.

Attribution
Source : Link , Question Author : Dmitri Zaitsev , Answer Author : Community

Leave a Comment