3

Given a card based material design styled interface presenting cards representing people in a system, what visual techniques can be used to distinguish different states those cards may be in? We need to cover at least three states: normal, potentially problematic and actually problematic.

Colour is not an option, firstly: we'd prefer not to get caught up trying to cover every type of colour blindness with it's own colour set; secondly, we're already using traffic light colours for the state.

Some visual examples in the answer would be great.

  • Can you elaborate on what information card contains, how the cards are arranged on screen, whether there is overlap, and how user interacts with the card? Who is the intended audience? I'm tempted to say your best bet is icon. but a little more context would be helpful. – Jung Lee Oct 17 '15 at 22:49
10

1. There are 6 main types to create contrast among objects:

  1. Color
  2. Size
  3. Position
  4. Texture
  5. Shape
  6. Orientation

2. Material design has one specific feature – the depth.

z-depth

More about principles of material design in the guideline: https://www.google.com/design/spec/material-design/introduction.html

3. How about icons? Can you use them?

1

Order by priority

If you are ordering chronologically, consider changing to priority order. That way the user sees and parses the cards in the order that they the user need to act - rather than the order that things happened in a system.

signpost absence

When a there are no actually problematic cards you can reward the user with a smaller card letting them know this: "You have no urgent problems": "Congratulations - there's nothing left to do here... for now.". This can also give a context for the cards that follow.

0

You might also consider motion. Depending on severity and what the user's attention needs to be, you might badge Problematic cards with label/flag that wiggles, or make the whole card bounce a little (like app dock icons that need attention in OS X).

This will of course be annoying if the user is going to frequently choose not (or be unable) to take action on problematic states.

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.