“UX is the intangible design of a strategy that brings us to a solution.” – uxisnotui.com
“The job of art is to chase ugliness away.” – Bono, of U2
Design is… “form[ing] a plan or scheme of [some thing]… for later execution,” – Oxford English Dictionary
- crotchet, or quarter-note rest
Edward Tufte:
Chartjunk can turn bores into disasters, but it can never rescue a thin data set. The best designs… are intriguing and curiosity-provoking, drawing the viewer into the wonder of the data, sometimes by narrative power, sometimes by immense detail, and sometimes by elegant presentation of simple but interesting data.
… and for the data to ink ratio:
- Above all else show data.
- Maximize the data-ink ratio.
- Erase non-data-ink.
- Erase redundant data-ink.
- Revise and edit
Juice Analytics:
Maximizing dashboard real estate must also mean creating places for the eye to “rest” so that the non-white space has more impact. When we don’t have sufficient spacing, everything runs together and we can’t see what is most important.
Stephen Few:
What is the least visible means to visually delineate groups of data? The answer is white space.
Antoine de Saint-Exupery:
Il semble que la perfection soit atteinte non quand il n’y a plus rien à ajouter, mais quand il n’y a plus rien à retrancher.
My translation of Saint-Exupery:
It seems that perfection is attained not when there is nothing more to add, but when there is nothing more to subtract.
Update: I thought this video presentation was relevant to this posting, Liz Danzico – Adding By Leaving Out: The Power of the Pause (34:22)
I made an attempt to illustrate the process of checking one’s voicemail on an iphone. Apple already does a fantastic job of making this extremely simple, and yet there are people who still need some help.
A modern computer is a rather complex device, and yet can be intimidating for someone who isn’t comfortable navigating through computing user interfaces – particularly for seniors. Seniors have successfully lived their lives without these gadgets, why should they have to adapt to our modern world? Why should they be expected to remember where every little switch and knob is located? Why should they be exposed to challenging situations where they’re likely to forget and therefore fail their current task.
Therefore, I’ve made up this quick cheat sheet. It presents the information in a method that can be printed on paper – a familiar static medium so that the action can be easily rehearsed until it’s committed to memory.
A few years ago, I read the piece by Stephen Few titled “Save the Pies for Dessert” and it really made an impact on my thinking of data presentation. I realized that some graph forms go out of their way to make it difficult for the user to interpret and understand the data being presented. I’m not even talking about when the author decides to turn their pie sideways, explode it and add a glossy third dimension on it. I’m just referring to a standard flat-out pie graph construction.
Below is an example from a few years ago on Google’s Analytics Dashboard. This happens to be a chart and pie graph showing which versions of Macintosh operating systems the users were using who visited a website. Unfortunately, it’s difficult to read. The data starts at 3 o’clock (many pies start at 12), and then luckily the data is sorted as you travel around the pie clockwise. With most pies you don’t get so lucky as to have a rotational starting point or even sorted. Then you need to figure out which direction the author chose to spin their data.
When I first saw this pie graph and associated chart, I found my eyes flickering back and forth trying to consume the data. Pies with more competing items in the list are extra challenging since there are so many colors to remember. Sure, this could be improved if they had used adjacent labels, but that breaks down for the smaller slices. I don’t have eye-tracking software, so I tried to draw an estimation of where my eyes looked.
Contrast this with a simple bar graph. I decided to use Google’s Graphs API for this, plugged in the same data values as above and got the following bar graph. The labels are right next to it, making it easy to compare relative values and seeing the labels immediately adjacent to them. I could have added the absolute values to the left or the right – either would have been easy to find.
I tried to draw where my eyes glanced to explore this data. Compare with the messy nest above, and imagine how much more cognitive load the above knot required to only halfway grasp the point of the data.
Over the summer, I took a road trip and on my way back stopped at a gas station to fill up. My mind was focused elsewhere – the rest of the route home, the book on CD I had been listening to, the family dynamics inside the car, etc. Anyways, I pulled out my wallet, swiped my card and tried to select the “unleaded” or cheap gas level. Nothing happened. I tried again, why won’t this pump register my choice? I backed up and took a look at the larger display – only then did I notice the “push to start” button, which did what I wanted.
Why was I confused? The information which was there to help me make my decision was the label “unleaded” and the price per gallon, $3.89. The label had a white border with rounded corners with a further embossed border with even more rounded corners around that, plus the adjacency to the price is overwhelming. It’s screaming “press me – I’m a button”…
But no, I had to hit the obnoxious “push to start” yellow box with arrow in it. Apparently adjacency won out over high contrast.
If you look closely at the picture, you’ll see I’m not the only one who has made this mistake… enough other people have done the same thing that the label has been polished smooth.