Is Master/Detail design the best approach for our application?

Question

We have a big financial application that at the moment consists of list/view/edit pages. We have received some feedback from our users saying that it takes them too many clicks to browse/view/edit records. They want to have a way of while browsing a list page, be able to select a record, view it, and then be able to select another record, so in essence they want the list to be visible while they are also viewing a single record.

My initial thought, was having a master/detail design where it would solve this problem. The two most common designs I have found is two pane design and then top down approach (like an email client).

Our application is data intensive, so our list pages can contain a lot of necessary columns, so at first I thought the best way would be to create a design where list sits on top and when you select a record, a pane opens up at the bottom with the record you selected, giving you the ability to edit it.

So I guess my question is, is the top down approach the best solution to our problem? One of our competitors uses the left/right pane design, and they simply have a horizontal scrollbar on the left pane so the list table can have as many columns as needed and not conflict with the right pane.

The top down approach seems to work for email clients (even though they also have left/right) but I am not sure if it works well with a web application where the bottom pane will not simply be text, but also a form with possible modals popups and such.

Looking forward to your answers.

Answer 1

There are multiple ways to approach your problem. But first of all, I'll give advice that cannot be given often enough:

Get rid of clutter first. Especially in a "data intensive" environment.

The rule of thumb here is: If you have more than about 7 columns you're doing it wrong. Look at every column, find out if you actually need it and come up with alternative ways to convey the same information. An application that essentially looks like "Excel in a Browser" is a bad application.

Having said that, the following are ways of approaching your task in a browser environment:

• Master / Detail "frame-like" interfaces, arranged horizontally or vertically. The downside of this is a lot of clutter on screen as the user will only focus on one half at any point in time, but both will stay visible. You might want to auto-hide the detail pane when the list is in focus / no item is selected. See this review that allows a visual comparison of a horizontally divided email app with a vertical one. And please don't actually use frames, as they are evil.
• Tooltips, displaying more information when you mouseover something. This is appropriate for smaller pieces of information that you decide to hide initially. Hovering over a set of stars to find out if something is rated 4.7 out of 5 is often good UI because most users won't care and stars are easier to grasp than numbers. Please note that with the advent of touch devices, "hovering" over something is not always possible - you may need additional ways of retrieving that information (e.g. clicking it).
• New Tabs / New Windows In short: don't. We're not in 2000 anymore - throwing a new window into the users face is invasive, and new tabs break the flow of an application.
• Popups / Modal dialogs (JavaScript / Ajax) Popups nowadays are a lot less scary than their pre-web-2.0 counterparts. While they work similarly, doing the same in JavaScript lets the user stay on the same page, look at lots of details (possibly even with its own scrollbar) and come back to the list. Popups are used a lot for images but work for forms and text as well. Please note that stacking popups (invoking another popup from within a popup) is usually a bad idea.
• Progressive disclosure This is something only very few UI designers really look at, but unrightfully so. Older examples of this concept are tree views and "more" buttons that let you stay in the same context but reveal more information. Newer variants often feature a "caret" to show more information is available, but other variants of the same idea exist as well (Even though it primarily focuses on desktop UI, this is a good starting point for further research. In your application it might be possible to "expand" an item from its minimal list view to a full size detail view without moving it out of its current position. This might even allow the user to compare details of more than one item if that actually fits on the screen.

I think the above covers the main options available to you. I'm afraid there is no universal "best" approach though, you'll have to weigh pros and cons with respect to your application.