Critique: Best way to convey 'urgency'. Playing with 3 options

[rob.wheatley]

Hi All,

We are building a web application to help manage objectives. Below are some screenshots of the main objectives page, a place you go to see your objectives.

You will see 4 objectives in the examples, one per row. The first row is highlighted to show you what the row looks like as you mouse-over it. Clicking on a row opens up the objective so you can see more details. Clicking again will shrink it back down to a single row.

The objective's title is shown left aligned, whilst right aligned is some info to tell you what attention (if any) the objective requires.

We want to give some sort of visual indication if an objective is late or needs some sort of attention and how urgently the attention is required using Red, Amber or Green colours.

The screenshots play with different ideas for doing this. I'd like to get your opinions as to which works best for you. Note, we don't want to scream urgency, just portray it in a way that looks nice. We have our opinions about them all, but I don't want to influence your thoughts by adding them here just yet.


Idea 1: Colourise the information wording


Idea 2: Put a block of colour on the left


Idea 3: Combine 1 and 2


What are your thoughts on the UI so far and specifically how to handle colorisation?

 

[@GCarlD]

I think idea 3 is a no go, although the 'urgency' is arguable more apparent, it looks too dated. I would go for a combination of idea 1 & 2 in terms of having the colourisation of information wording and a block of colour on the left to match. I really think that would be the best option in terms of showing urgency whilst being subtle in a way to maintain your clean design style.

 

[ARRIVALS]

I prefer number 2 out of the 3. But perhaps instead of using a brown shade behind the text, why not try a tint of the colour to the left, red, green and orange for example.

 

[rob.wheatley]

I think I'll try that idea about using the 'hover over highlighter' bar with a hint of the RAG colour to see what it looks like. I've just wire-framed it and it looks OK, but I need to see it on a real site to get a feel for how it works when you are actually moving the mouse about.

Thanks!