3

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.

Improve this question
7
  • 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, 2013 at 14:40
  • I modified it a bit
    – thevangelist
    Sep 11, 2013 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, 2013 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, 2013 at 15:08
  • Basically they are about 250x200px divs each containing a single product, floated next to each other.
    – thevangelist
    Sep 11, 2013 at 15:09

4 Answers 4

Reset to default
3

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

Improve this answer
2

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).

Improve this answer
1

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).
Improve this answer
0

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?

Improve this answer

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.