Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'Website Design Critique:' started by rob.wheatley, Jul 2, 2013.

  1. rob.wheatley

    rob.wheatley New Member

    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
    Screen Shot 2013-07-01 at 11.44.00.jpg

    Idea 2: Put a block of colour on the left
    Screen Shot 2013-07-01 at 11.44.25.jpg

    Idea 3: Combine 1 and 2
    Screen Shot 2013-07-01 at 11.44.39.jpg

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

    @GCarlD Well-Known Member

    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.
    rob.wheatley likes this.

    ARRIVALS Well-Known Member

    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.
  4. rob.wheatley

    rob.wheatley New Member

    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.


Share This Page