Had an interesting observation in a recent series of usability tests. We were testing a design concept that had a lot of information – one section detailed data in a pie chart, another section next to it showed a different set of data in a table view (sorry about the vagueness – trade secrets and all that stuff). The two areas were clearly labeled (headers indicated the information each contained) and we felt that the design was pretty solid.
As so often happens, the test participants found a design flaw we did not. The two sections were misaligned – one was higher, one was lower – and the header for the data table was about 30-40 pixels higher than the header for the pie chart.
So, when the users were asked to interact with the screen, half of the group thought the data table on the right was supposed to be the list-view of the pie chart, even though they were two separate chunks of information. Why? Because their “eyeline” was focused on the visual “anchor” on the screen – the pie chart – and they didn’t see the second section’s header. They therefore connected the two sections to be one. The result was confusion and frustration, because the UI was not meeting their – natural and understandable – expectation.
Hints on how to avoid this in your designs? Well, obviously, alignment is important: look at the design, focus on an area, and then squint – the clear and obvious visual distinction that you have created may be lost to the user in the actual context of use. Make the design balanced, and don’t have one area “heavy” with too much information – or a visual that may draw the eye and distract, instead of help, the user.
(And, by the way, the point of this post is NOT to recommend the purchase of expensive eyeball tracking equipment – I agree with Jared Spool on his rather… critical assessment
of such tools. Paying attention during a usability test should help you uncover issues like this without extraneous technology).
Finally, the long and the short of this lesson learned is to always remember – the design space you’re working with is not 1024 by 768, or 800 by 600 pixels… it’s more like 400 by 200 – or even less. When users focus on a particular area, that is often a narrow focus indeed.