Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have an app where I want to show 3 different states for object. Active, Deleted and Draft...

So basically my question is: What kind of visual cues would you use for each of the above and why?

Currently the only thing that is varying is border-style and it's color.

share|improve this question
    
This question needs a lot more detail to understand what you are trying to achieve. As it stands, I can't completely tell that this isn't a programming question for StackOverflow and not UX.se –  mawcsco Sep 11 '13 at 14:40
    
I modified it a bit –  thevangelist Sep 11 '13 at 14:54
    
What do these objects look like and in what context are they presented to the user? Who is the user? –  Matt Obee Sep 11 '13 at 15:01
    
Some users are color blind, so color alone is not good enough. The answer depends on the possible states (which you did not mention). –  Danny Varod Sep 11 '13 at 15:08
    
Basically they are about 250x200px divs each containing a single product, floated next to each other. –  thevangelist Sep 11 '13 at 15:09
show 2 more comments

4 Answers

I suggest you use a combination of styling and symbol for the three states e.g.

  • Active = normal style, no symbol
  • Deleted = strike-through, recycle bin symbol
  • Draft = italic, pen symbol

The symbols help users learn what each style means and also help people that don't notice styling. The styling stands out faster when you are looking at a large list and are already used to the convention.

In addition you can use colors, however, I would not go with outlines, as the make the screen look messy and can distract your eyes from the actual content. Also, make sure that all the text colors you use have a good contrast to the background colors. Also, make sure that the active items stand out more from the background more than the deleted items (assuming that the user's main flow isn't going over deleted items).

share|improve this answer
add comment

Quite a few applications use a coloured circle with the V icon inside with multiple selection (like in the illustration below).

So perhaps consider:

  • Active - a green circle with the V icon.
  • Draft - an orange circle with the ? icon.
  • Deleted - a red circle with the X icon.

I would strongly recommend you include a legend in the interface.

Select Photos screen on the iPhone

share|improve this answer
add comment

There are so little details in the questions. Nevertheless, there are some usual patterns that goes beyond color (some people are color blind so it is not enough).

  1. Really write it down. Put the word somewhere.
  2. Icons
  3. Locations (e.g. all actives are grouped together).
  4. Shades (e.g. draft will have slightly lower opacity , deleted will be grayed out).
share|improve this answer
add comment

I still find this "description" vastly confusing, couldn't you maybe just put a sketch or a mockup in here? I honestly don't know how your data is displayed, so giving tips is pretty much impossible.

Is an app a desktop application, a web application, a smartphone application? Who are the users, what's the context of how they use it?

One thing that comes in mind would be the various states of Dropbox (https://www.dropbox.com/help/406/en), which are very neatly designed to tell you exactly what's happening right now. But I don't know if this is how your information is displayed as well?

share|improve this answer
add comment

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.