If you haven’t heard of Edward Tufte, he is a statistician by profession, but what he is really famous for are his writings on the presentation of Information. If I had to summarize his philosophy for UI design, it would be:
More than 90% of your UI should be information useful to the user. Navigation is not information, instructions are not information.
I decided recently to critically evaluate one of my UIs I did a few years back and redesign it using this principle. Examples in Tufte’s books generally are from the statistical domain, so I decided to take up the chart redesign to ease myself into the process. Later in the article, I will also talk about a redesign of a different screen in TIES that was a lot more complex.
Shown below is the “before” pic. It is a UI showing the results of an “aggregate” search done by the user in TIES (A medical documents search repository).
Now, what is data and what is fluff? Let’s concentrate on only the chart area. The user is primarily interested in seeing the distribution of age’s of the patients whose medical reports are in the search results. They might also be interested in the exact number of reports in each bin. Lets analyze each information element on the screen to determine if it should be present.
Y-Axis numbers: Not required, because we already display the bar heights above the bar. Its a relic from old times when you would actually take a scale and measure the distance from origin to determine the value.
X-Axis numbers: Required. There is no other indication on the chart as to what
the bins are.
Age Label: Required. We need to know what the X axis is.
No. of Reports Label: This is a tough one. If the overall UI conveys that you are always searching the in the context of medical reports. It is not really necessary. Maybe we can do something to eliminate both the axis labels?
Grid Lines: Not required. See reasoning for elimination of Y-Axis numbers.
Legend: Not required. We just have one color.
Grey surrounding and enclosing boxes: Not required. One could make a feeble case for the grey surrounding if we had UI widgets to modify thechart in the grey area. Then the grey serves the purpose of indicating to the user that it is an interactive application area.
That is a substantial amount of wasted e-ink! The resulting graph looks a lot cleaner:
However, losing the bottom axis seems to have made it look not right. So I added it back again.
After making those changes, here is the final result along with the rest of the UI:
And here is the previous design again, for you to compare:
It looks like we gained a decent amount of screen real estate. Which could be put to good use somewhere else.
The real advantage of this approach is evident when you do it for more complex screens.
