Great UI, Clarity, and Information Relevance

Let's create a 3x4 table in word....

NewTableInWord

And let's fill the table with data....

   ArialTableInWord

Now, at this point, we might pause to ask "What's wrong?". But before we answer, let's make the observation that in the table above, there are a number of graphic elements working together to convey information. There is the data, rendered as text:

   ArialTableInWord_DataOnly

And there are lines separating the data:

   ArialTableInWord_LinesOnly

Note that in Word, both the lines separating the data, and the data itself, are both rendered with essentially the same visual weight. The thickness of the line matches the thickness of the strokes used to render the text, and the contrast of the lines also matches the contrast of the text.

However, it seems that the lines and the data, in terms of relevance to the viewer, are far from equal. A viewer is far more interested in the data than the lines separating the data.

Let's look at the same table in Excel:

SameTableInExcel2

Notice that when creating the same table inside Excel, something interesting has happened. The lines are rendered in a much lower contrast than the data itself.

Which table do you find easier to read?

 BothTablesSideBySide3

On a whim, let's create a version of this table where we do the opposite of what's done in Excel. Namely, let's reduce the visual weight of the important data, while increasing the visual weight of the much less relevant separating lines:

TableReversContrast2

How easy is this to read, compared to the table from Microsoft Excel, above?

So, two important points to take away:

  1. Not all information is equally relevant to the viewer.
  2. We have control over the degree to which we can emphasize information.

And from these two realizations, you can reach the third, perhaps most important guideline to achieving clarity in your UI:

Visual weight should match information relevance.

This guideline is incredibly important, easy to follow, and yet violated frequently. My contention, as set forth in the post that explored the question of why great UI was so hard to achieve, is that the rampant violations can be explained by a lack of training.

Here's a screen shot of Visual Basic source code as seen in Visual Studio 2008:

 SourceCodeInVisualBasic2

The horizontal lines carry little information relevance. And even though they are rendered above in a medium gray, their contrast and corresponding visual weight far outweigh their intended purpose.

Here's the same image with one minor change:

SourceCodeInVisualBasic_Redesign

See how much easier it is to get your eyes into the relevant data.

Here's a screen shot from Adobe Lightroom:

AdobeLightroom

Notice how the labels on the left, being less relevant than the data to their right, are rendered in a lower contrast, allowing your eyes to quickly get to the relevant information.

In near-future posts, we'll talk more about ways to control emphasis and dive deeper into clarity.

21 comment(s)

Mark, I'm loving this series about great UI - especially the examples you use to illustrate your points.  Nice work!

11 February, 2009

I wonder if you could go one step further with the VB code example.  Do the reserver words for the syntax really need to be in bold blue text?  The actual content such as function names and variables seems to get lost.

11 February, 2009

Let me say that Adobe CS4 uses an UI very cool and beautiful. Similar UI are created with Flex.

Some chance to implement this type of UI?

11 February, 2009

Great series Mark. I look forward to reading your next article.

12 February, 2009

This is great article that I want. I think if we have great UI in our software, Users are really using without any education or help.

That is the key of Great UI

KISS (Keep It Simple Stupid)

12 February, 2009

I dont agree with the others, this article has no use at all for me. It seems for me like talking that a good breakfast in the morning is important... really nothing else left to talk?

12 February, 2009

It's so easy to forget the "simple" things that make for good presentation. Too often we are so obsessed with features we don't take the time to think about the usability and accessibility of those features, and UI presentation can either “make it” or “break it”.

Thanks for getting us back to thinking about good UI. I’m looking forward to more!

12 February, 2009

Hi Christoph,

Are you wanting to know what I had for breakfast? Crackling Oat Bran. :-)

12 February, 2009

Hi Doug,

Yes, you can definitely take the VB example a step further. You can also take the table example a step further, when you realize that the column header text is not as relevant as the data below it (I expect to talk about table column headers in a future post).

12 February, 2009
Jason

Thanks! This is great.

12 February, 2009

Pingback from  Dew Drop - February 12, 2009 | Alvin Ashcraft's Morning Dew

12 February, 2009

That's a really great point regarding the comparison between Word and Excel. You see it everyday but don't always pick up on little nuances like this, it's quite clear however how much this improves and changes usability. Great read!

12 February, 2009
Office User

Word sucks, Excel rulez

12 February, 2009

DevExpress technologies for Visual Studio .NET help you build your best, reduce the amount of code you

13 February, 2009

Pingback from  Great Windows(R) User Interface (UI) and Presentation Layer — An Online Training Series by DevExpress | Tech Jobs Los Angeles

13 February, 2009

Pingback from  Great Windows(R) User Interface (UI) and Presentation Layer — An Online Training Series by DevExpress | ITeego??? IT Search Specialists - Tech Recruiter, Los Angeles

13 February, 2009

Pingback from  Great Windows(R) User Interface (UI) and Presentation Layer — An Online Training Series by DevExpress | Technical Recruiter Los Angeles

13 February, 2009

In our previous post in this series, we established an important guideline to achieving clarity: Visual

16 February, 2009

In the last post , we talked about the elements of design we can adjust to match information relevance

17 February, 2009

Pingback from  AJAX Developer  » Blog Archive   » Great Windows?? User Interface (UI) and Presentation Layer ??? An Online Training Series by DevExpress

27 May, 2009

Nice Blog! Really helpful one.

28 July, 2009

Please login or register to post comments.