• Jesmond Allen
• 17 Feb 2011
• No Comments

A client recently asked for some advice on how to turn a gnarly spreadsheet into useful information on their website. Sadly this was out-of-scope for the project, because that is pretty much my favourite sort of problem to solve. (Yes, I know, I’m irredeemably geeky.)

So I started thinking about how I’d approach the problem, to try to give her some hints & tips. Here’s what I said…

Identify the constraints

With any information layout problem, it always comes down to the data, the user & the constraints of your page (screen real-estate). What’s most important to the user? How can you use the space available to turn raw data into useful information? How can you make your user’s task as easy as possible?

Start by gathering some background information:

• Understand your data: what information does it convey?
• Think about your users: what are their key tasks?

Also, consider the business reason for presenting the information to your users. If it is in order to reduce calls to the call centre, try to find out about the most common queries to call centre staff. If it is to help users select between products, make sure you know which product the business would prefer to be selected.

The owner of the data knows it backwards, whereas your users are likely to be novices. Experts can rarely envisage what it’s like to be a newbie. Watch out for this potential conflict – it can lead to highly complex data reaching baffled users who just want some simple information.

Lay out your information

• Consider the best format in which to display the information: a table? a line graph? a pie chart or other diagram? Try to consider how your users think about the information when making your decision.
• Prioritise the information that’s most useful to your users. It’s better to assist the majority of your users in completing their tasks than it is to be completist about the data. Try taking away everything that isn’t required for a key user task.
• Try to user test your new layout. Even if it’s just asking your other half to spend 2 minutes to complete a key task – it will tell you if you’re on the right track.

Putting your information online

When it comes to writing your markup, here’s the place where you still get to use the HTML <table> tag. It’s imperative for accessibility purposes & should help mobile devices & printers display your design correctly.

If you’re using a data table:

• Clearly label the rows and columns with user-centred headings (What terms do your users use? try to avoid jargon)
• Group related cells with key lines or background shading (but make sure you keep good contrast for legibility)
• Give each row and column enough space to provide good scannability
• Assist the user in reading the data, eg by highlighting the rolled-over row or column, or by zebra-striping, etc

Keen to find out more?

The books of Edward Tufte are a beautiful introduction to information design and are definitely worth checking out.