5

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!

Improve this question
3
  • 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
    Commented Jul 30, 2014 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
    Commented Jul 31, 2014 at 4:33
  • 1
    @MrE.Upvoter Thank you very much, I like the new title. :)
    – Dmitri Zaitsev
    Commented Jul 31, 2014 at 4:45

5 Answers 5

Reset to default
5

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.

Improve this answer
2
  • 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
    Commented Jul 31, 2014 at 5:10
  • Thanks, exactly how I made it now, really helpful indeed! :)
    – Dmitri Zaitsev
    Commented Jul 31, 2014 at 14:33
4

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.

Improve this answer
6
  • 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
    Commented Jul 30, 2014 at 9:55
  • Consider changing the colour of the button completely, preferably to a red hue, along with the disabled functionality?
    – Vux
    Commented Jul 30, 2014 at 9:57
  • Any reason to avoid the cross?
    – Dmitri Zaitsev
    Commented Jul 30, 2014 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
    Commented Jul 30, 2014 at 20:49
  • @FranciscoPresencia Actually clicking red button does delete it and cancels the preference. Is red still not appropriate?
    – Dmitri Zaitsev
    Commented Jul 31, 2014 at 4:36
3

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

Improve this answer
6
  • 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
    Commented Jul 31, 2014 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.
    – MetaGuru
    Commented Jul 31, 2014 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
    Commented Jul 31, 2014 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.
    – MetaGuru
    Commented Jul 31, 2014 at 13:34
  • This is a great answer. It gives hierarchy to items by size, shape, position and color. I also like consideration to remove information. It ignores the suggested solution by the OP: "How do you put an 'X' on top of a button?" When information is structured right, you don't need a button with multiple functions.
    – allcaps
    Commented Jul 31, 2014 at 15:09
2

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.

Improve this answer
3
  • 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
    Commented Jul 30, 2014 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.
    – Dom
    Commented Jul 30, 2014 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.
    – MetaGuru
    Commented Jul 31, 2014 at 13:56
0

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.

Improve this answer
3
  • 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
    Commented Jul 30, 2014 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
    Commented Jul 30, 2014 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
    Commented Jul 31, 2014 at 12:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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