Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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!

share|improve this question
1  
Hi Dmitri, I've edited your questions title to better represent what you're asking. I think you're asking more than just how to place an X. Please feel free to re-edit anything you don't agree with. Good question, and welcome to GD SE! :) –  DumbNic Jul 30 at 15:36
1  
I'd would have recommended you to ask this question in ux.stackexchange.com , a website about usability, since that's what you are asking about. There's already similar questions there, as you can see in a quick search. –  Francisco Presencia Jul 30 at 20:47
    
@FranciscoPresencia Thank you for helpful links, however, the fundamental difference - a disabled button is not meant to be clicked. In my case I need it. –  Dmitri Zaitsev Jul 31 at 4:33
1  
@MrE.Upvoter Thank you very much, I like the new title. :) –  Dmitri Zaitsev Jul 31 at 4:45

5 Answers 5

up vote 5 down vote accepted

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.

share|improve this answer
    
Tested on Nexus 5, tap works fine for the hover elements, they obviously just need more space to be easy to tap, but that's something for the OP to decide. –  DumbNic Jul 30 at 15:49
    
Thank you, good ideas to think about, though, I have a bit of usability concern about small 'X' - it might be harder to click than a larger button (which is why all my UI is done with buttons). But visually it is more clear indeed! –  Dmitri Zaitsev Jul 31 at 5:10
    
You can make sure the whole 'x' container can be clicked for delete, it doesn't have to be on the x. You could also increase the font-size of the x. Thanks for the accept, I'm glad I could help. :) –  DumbNic Jul 31 at 13:50
    
Thanks, exactly how I made it now, really helpful indeed! :) –  Dmitri Zaitsev Jul 31 at 14:33

A more elegant solution would be to grey out the button, set it's state to disabled and use a disabled cursor to clearly show the state. I've thrown together a quick codepen to demonstrate this.

share|improve this answer
    
This will not be clear enough. A user already confused it for amenity being present (instead of absent) even with the name crossed. So I need something unambiguously clear. Putting a large cross is the best idea I came up with for now. Thanks! –  Dmitri Zaitsev Jul 30 at 9:55
    
Consider changing the colour of the button completely, preferably to a red hue, along with the disabled functionality? –  DanS Jul 30 at 9:57
    
Any reason to avoid the cross? –  Dmitri Zaitsev Jul 30 at 10:02
1  
I'd suggest against red, since that's the cancel/delete button, however I'd change the action button to something that looks like an action button (green / blue / other clear color), and the disabled to be gray. –  Francisco Presencia Jul 30 at 20:49
    
@FranciscoPresencia Actually clicking red button does delete it and cancels the preference. Is red still not appropriate? –  Dmitri Zaitsev Jul 31 at 4:36

The fact that something isn't there at all is a great indication that it is not present!

If you'd like to still display the things that were 'chosen but missing' in each result element I suggest not doing it as the same elements in the same section with the only difference being styling.

Rather have it be clear to the user that this section shows what things a hotel has, and this section shows the things you searched for that were not included. Potentially having the 'chosen but missing' elements be a simple comma-delimited list of strike-through text that is presented in a way of being in the result but not appearing as if it is a description of the location.

Thus a result is a visual element and a hotel is a visual element within the result and data describing each is separated as such.

Example:

enter image description here

share|improve this answer
    
Thanks, good points. I don't quite understand the reason not to display buttons at all. These are supposed to alert the user that some requested amenities are missed, why hide this important information? –  Dmitri Zaitsev Jul 31 at 11:56
    
@DmitriZaitsev The fact that if something isn't there it means that it isn't there. If you want to also display which ones are 'chosen but missing' perhaps do it in a different location rather than rendering in the same place and as the same control as things that are there. Like a simple list of strike-through text at the top of the result element rather than as a button in the list of things that the hotel actually has. So now you don't have a problem of having to re-style an element to prevent confusion because the confusion is omitted entirely. –  ioSamurai Jul 31 at 13:11
    
Thank you for your explanation, I have to think about it. BTW, you mention that you rarely use colours - do you mean other style changes as signs of interaction? –  Dmitri Zaitsev Jul 31 at 13:31
    
@DmitriZaitsev I also added a very basic conceptual mock-up. In general I try to reduce use of color to signify a conceptual difference in similar elements because some people are color-blind and other people might infer a color means one thing rather than another at first glance. –  ioSamurai Jul 31 at 13:34
    
+1 Many thanks, great mock-up, will consider it! –  Dmitri Zaitsev Jul 31 at 13:39

I think the logic is flawed. I choose some amenities and as a result I expect to see ONLY hotels that combine these amenities. You should inform the user that there is NO hotels that have all the amenities and maybe let them see the results with missing amenities by clicking another button. The red crossed button works well in my opinion. If there are users that don't understand it, it's their problem.

share|improve this answer
1  
Thanks, there is a logic here. E-commerce sites often return "related results" without additional clicks but having a clear statement that there are NO matches is a good point! Still would like to know how to place those cross :) –  Dmitri Zaitsev Jul 30 at 10:26
2  
I think in most cases, "If there are users that don't understand it", it's the designers fault/problem not the users. –  DumbNic Jul 30 at 21:50
    
I thought the same as you Komental, you might like the mock-up in my answer because it addresses this while also clarifying what I think is the main point: something not being there at all is a good indication that it's not present. –  ioSamurai Jul 31 at 13:56

A good looking cross can be achieved by replacing your regular 'x' with a multiplication x which looks like this:

×

More info: Unicode Character 'MULTIPLICATION SIGN'

It works with the common web fonts: Arial, Verdana, Georgia etc.

share|improve this answer
    
Yes, I have considered it, but the main problem is how to make it of proper size and place on top of the button. –  Dmitri Zaitsev Jul 30 at 12:51
    
i answered the so question, however, @user2358127's font for the "x" is ideal....so if you like my answer, drop his letter in there...actually i already did. ideally you'll be passing in a class to the <code>button</code>s that will not have amenities, triggering dynamic content via pseudo element(s); as seen here: jsbin.com/hijaw/1/edit –  albert Jul 30 at 13:46
    
@albert This solution doesn't make X of the size of the button and has hard-coded settings that will not work when the size of the button changes, so I can't use it, unfortunately. –  Dmitri Zaitsev Jul 31 at 12:01

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.