How to convey availability or partial availability through visual elements?

Design Thinking
#1

"A picture is worth a 1,000 words"

We all know that using icons effectively in our applications can…

  • Transcend language barriers
  • Help users better understand & interpret information
  • Be a quick, intuitive representation of an action or a status in an application - Draw attention to an action that needs to be taken by a user - Increase readability
  • Help us make more effective use of space in our applications - Reinforce the concept of a product family or suite

THE CHALLENGE

Come up with 3 icons that can be used to indicate:

  1. Action is required
  2. Action is partially completed
  3. Action is complete

…no matter what the action is.

ALREADY RULED OUT

• “X” and check mark: Issue with confusing these checkmarks with the ‘selection’ check marks that are often included in our screens; ‘X’ has been used too often to represent ‘delete’

• Red, Yellow, Green circles (or use of any color to differentiate between status’): Issue with users who are color blind

• Open, Half & Filled in Circle: Issue where the user may think the open/closed circles are radio buttons and expect that something to happen if they click on them

• “Thumbs up” Issue: Thumbs up does not have the same meaning in all countries…

Variations of the above that address the noted problems are acceptable.

RULES

• Icon should not contain text, or anything that would clutter up the screen too much

• Color should not be an indicator (color blindness)

• Tooltips and icon legends will not be added – we don’t want to rely on needing explanations for the icons we choose… we want it to be as intuitive as possible

For the example below,
there are 3 steps needed to complete this process
– the last 3 columns are indicating if those actions have been completed for the given document:

Identify one or more markets you would like to share the document(s) with

Set the privacy of the document to ‘External’ to make it available to our external partners

Notifying the markets to let them know they have documents available to view

Markets, Privacy, and Notified columns

911×537 113 KB

#2

What about some kind of version of a status bar?

960×1280 350 KB

#3

hi @pjraps,
we faced a similar user case some time ago. After several usability test with different visual solutions we decided to convey the status of the item via labels.
Here the main reason why we used such UI element:

  • labels are self-explanatory because there’s a clear text that show the status
  • in terms of UI labels can give a quick overview based on the color (for users that can’t use this attribute there’s always the text within the label )
  • labels are a standard in a lot of web an desktop apps
  • the learning curve about them is pretty low
  • if the app has to be translated, labels, allow such task. Not in all cultures icons have the same meaning
2 Likes
#4

Thank you for your replies!

There was discussion against using just labels as many felt it would cause too much “cognitive clutter”, however I would think that combining a label with Hawk’s status icon would not only provide a quick way to see status, but also eliminate any user confusion as to what each icon means.

Anytime I hear someone say that “it’s a training issue”, it screams bad UX! :confused:

1 Like
#5

While I think there is validity to that argument, I reckon the ambiguity of a confusing icon carries a much heavier cognitive load. I am a heavy user of tooltips and when nothing happens on hover I find it frustrating.

#6

@pjraps let us know about the solution, I’m curios to see how you solved it :wink: