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.
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.
This came about as a need for a project I was working on. I couldn’t find a nice free open source implementation out there. So I wrote this one. The goal was to write something that was very easy to use, and required almost no additional coding or understanding of the inner workings of the widget.
- Works with any pre-loaded JTree
- Installs easily in one line of code : SearchableJTree.makeSearchable(JTree tree);
- Pops up when user types a key when the JTree has focus. Hides away when user presses ESC or ENTER
- Search results are updated in realtime as user types each character.
Whats new in v1.1:
- Search UI is now customizable. Change colors, positioning and transparency
- Keyboard UP and DOWN arrow keys can now be used to cycle through the matches one at a time.
- search bar now offset from the bottom/top by the JTree row height. This helps in viewing the matches that lie at the edges of the JTree viewport.
- Modified the demo program to showcase all features.
- Better separation of UI and business logic in the code.
Such a simple idea. I bet all of us knew about this, but somewhere down the line the convenience of grabbing a few extra towels to dry our hands trumped the sensibility of shaking out the excess water beforehand. I am inspired by this and try to follow it whenever I can. However I notice that at times my muscle memory takes over I ended up with more towels than I need. A reminder in the restroom would help not just me but also my fellow hand dryers. So this is what I came up with…
Help me spread the word. Please feel free to print and share it, and if you can, display it in your restrooms. Trust me, the paper you will save by putting this up will more than make up for the one sheet of paper that you will print this on. 🙂