I merely retrieve a list of company services from database that I just have to display on a web screen.

Basically, result is composed of available services for the user and unavailable ones.

What is a good way according UX experts to display results so that it's pretty easy to make the distinction between available from unavailable ones?

Currently, the existing display on the project I have to work in is the following one:

enter image description here

Blue check means available and grey check means unavailable.

One of possible issues with this strategy is that if there are no available services, user would have the illusion that everything is checked even if checkbox's background appear in grey.

(Used language in this screen is French)


How about this way:

  1. change the icons so that the unavailable services aren't checked.
  2. put all the available services up to the top and unavailable services to the bottom.

Good luck!

enter image description here

  • In general, this answer says all I was going to (hence the upvote), but I'd recommend being sure about why you're showing the unavailable services at all. Jul 21 '16 at 18:52
  • I can see reasons for including them... Potential for upselling and/or clarification of what is explicitly not included (which would otherwise be expected)... but if you are intending either of those purposes, you should give some thought to which. If you're upselling, then you should afford a means to upsell at that point. Jul 21 '16 at 18:58
  • this solution does make sense, but how about the case where there are no available service at all, wouldn't it be confusing to see all squares empty? User could state in this case : "if I see a square with blue border, it means it is available", but it isn't.
    – Mik378
    Jul 21 '16 at 19:02
  • 1
    @Mik378 That makes sense! I did some more thinking and I would include a prominent sentence on top, if there is no service available, reading something like "Oops, you don't have any service available at this time. Check out our great services below!"
    – Wen G
    Jul 21 '16 at 19:36
  • @Adrian Long Thanks! Yeah, I think as a customer I always want to see the unavailable services just to compare, and maybe decide from there whether I need to switch services (within the same company usually). Thus I think it is nice to have the unavailable services, so that the customer don't have to dig in and find out the information themselves.
    – Wen G
    Jul 21 '16 at 19:39

EDIT: Updated mockup based on feedback:

Available and Unavailable Services Distinction

Since you are simply retrieving and displaying this list, I would do something like this:

enter image description here

The current checkbox-like icons look similar to input checkboxes, so I think removing them will help eliminate the misconception that the services can be changed.

This is especially apparent and helpful if no services are available:

enter image description here

  • Really? If I see a bunch of lines, without any further information like within your last image, I could easily interpret like: "here are all available services provided by the company". Too confusing; exactly like I commented above. With your solution, the distinction between available and unavailable is clear as long as there's at least one service available, not whenever all services are unavailable.
    – Mik378
    Jul 21 '16 at 22:27
  • 1
    This was just a suggestion since you were asking for help. I can see what you are saying and would probably go with a small legend that explains what the colors/ list item states mean since you are always showing the full list. Jul 21 '16 at 22:35
  • 1
    Yes :) A small legend would make the job with your suggestion, IMHO :)
    – Mik378
    Jul 21 '16 at 22:36
  • 1
    See my edit. :) Jul 21 '16 at 22:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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