UI Design Challenge: A Table or Grid With Too Much Information
I hope to post at least one article in this series a week. The goal is to get your brain thinking about real UI design issues and problems. How would you solve these scenarios? I would love to hear your comments and your solutions.
The Problem:
A client tells you all information, some 9- 12 columns of data are important to display to the end user. The problem is there is not enough room all this information in individual columns of a grid. The client insists they have to maintain recommended screen size of 960 px and you have to support multiple resolutions: What are some possible pattern implementations to solve this problem?
Related articles:
- Features In The Front Usability Get To The Back
- The Haves, Have Nots & Feature Bloated User Experience.
- UI Design Patterns: Exploration of Data and Visual Imagery in Application Design
- When is it the Right Time to Use Icons?
- How Can I Speed up Proto-typing & Visual Design Mocks with Hybrid Design Proto-typing?
We could have Hide/show column on the top right of the grid where in user could select to view columns he/she wants.
If all, there would be a horizontal scroll for grid.
That’s a great idea Rajat. You could set a default list of elements that will be in the grid and have an icon / text that would allow more. I’m not a big fan of horizontal scroll though. You can start to get into some tricky and wierd print issues. Especially with Internet explorer 6.
Some of my approaches/initial thoughts:
1. look at your user personae and primary actions:
a. see if you can show different columns for different user types.
b. look into whether you will be filtering the data into groups in which you can display only pertinent data for the state of the items listed.
2. see if you need filter boxes for each column of information and what the required behaviour is.
3. define your interaction columns and behaviour, which is the primary link for a line item, if you need to take actions on them and how those actions can be designed with a fluid interactive approach
4. review the data and figure out if any of it can be combined. Ex:
a. combining each element of an address and country into one column field
b. hiding an email address in a persons name as a link or an envelope.
c. can you place anything in rollover tool tips such as perhaps using a custom designed alert icon which gets the point across and you roll over for more info.
Remember, you are designing for the web where there are no real limitations. While this means you have to be extra careful, it also means you don’t need to unnecessarily limit youself as if you were working in Microsoft Excel.
Regarding the Hide/Show columns option, I’ve seen many developers use this a great way to solve the problem. However I always caution against using it too easily, as you could inadvertently allow users to remove vital information that could cause them to miss an important alert or confuse new entries with old ones.
Being proactive in helping users see what they need to see based on who they are is much more helpful if you have done your user due diligence. The user is not always the person you work with who knows what they want/need, they may be someone new hired next week or someone who only uses the system every few months.