Blogs

Mark Miller

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.

Published Feb 11 2009, 01:51 PM by
Bookmark and Share

Comments

Nick Bradbury

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

February 11, 2009 5:40 PM

Scott Woods

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.

February 11, 2009 5:56 PM

CESAR F. QüEB

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?

February 11, 2009 6:45 PM

George Malekkos

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

February 12, 2009 2:00 AM

Murat BUDAK

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)

February 12, 2009 2:47 AM

Christoph Brändle

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?

February 12, 2009 4:22 AM

Daniel Hulse

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!

February 12, 2009 7:45 AM

Mark Miller (DevExpress)

Hi Christoph,

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

February 12, 2009 7:47 AM

Mark Miller (DevExpress)

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).

February 12, 2009 7:53 AM

Jason

Thanks! This is great.

February 12, 2009 8:16 AM

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

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

February 12, 2009 9:42 AM

Pramatr

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!

February 12, 2009 12:07 PM

Office User

Word sucks, Excel rulez

February 12, 2009 4:53 PM

PressReleases

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

February 13, 2009 11:30 AM

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

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

February 13, 2009 3:21 PM

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

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

February 13, 2009 3:22 PM

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

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

February 13, 2009 3:59 PM

Mark Miller

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

February 16, 2009 7:07 PM

Mark Miller

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

February 17, 2009 5:23 PM

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

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

May 27, 2009 8:20 PM

Network Management Service

Nice Blog! Really helpful one.

July 28, 2009 2:32 AM

About Mark Miller (DevExpress)

Mark Miller is a C# MVP with strong expertise in decoupled design, plug-in architectures, and great UI. Mark is Chief Architect of the IDE Tools division at Developer Express, and is the visionary force behind productivity tools like CodeRush and Refactor!, as well as the DXCore extensibility layer for Visual Studio. Mark is a popular speaker at conferences around the world and has been writing software for over two decades.
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, Silverlight, ASP.NET, WinForms, HTML5 or Windows 8, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2014 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners