Search,results and detail on same page

Question

I'm working on the the UI on a course fee search system. One of the requirements that came out from the discovery stage was the ability for staff to quickly find course fee information from a set of criteria.

My initial thought was to utilise the screen real estate and put the search,results and detail on the same page:

^{Example prototype is here: http://share.flairbuilder.com/?url=http://info.uwe.ac.uk/prototype/fees/fees.fbp}

I've found a few results on this UI pattern and the designing web interfaces site suggest this is a master/detail pattern which

Ideal for creating an efficient user experience by allowing the user to stay in the same screen while navigating between items

I haven't tested this yet on a set of users. Some feedback from business people have suggested splitting the search results and detail on separate pages as this is 'expected' behaviour for search results

This may help users who are searching for 1 course fee detail but staff using this system who need to quickly find sets of course fee information by changing the search criteria it may be slower and less effective?

what do you think?

Answer 1

Just some general comments in no real order :)

• In terms of a general design pattern, I don't see an issue with it. The devil, as always, is in the details (and I think those details make this a tough sell, personally).

• Three panes, side-to-side-to-side, indicate some type of progression, like a series of nested folders. I'm not sure the search form belongs as part of that progression (I'm not saying its wrong, and I can't put my finger on it, but something about it gives me pause).

• The detail screen looks sparse. That might be due to the fact that this is a wireframe, but if that is the maximum detail you're considering, then I question the value of the second click altogether. Could you merge that data right back into the table?

  • Continuing that thought -- if the table became too cluttered, you could look at a disclosure triangle to collapse / show the information on demand. It'd be very similar, functionally, to the third pane idea.
  • ...or, a tooltip-style pop-up on hover.

• What happens as the middle pane gets longer -- let's say 20 rows, all of which wrap because the titles are so long. If I click the 25th item in that list, do I have to scroll up to see the top of the third pane? This actually makes me think the tooltip-style popup might be a better method.

• If you're really crushing on this idea (we've all been there with an idea we just can't let go of!), I'd want to investigate a slightly higher-visual-fidelity version that shows how I know which item I've selected. I don't think something like bolding will be enough indicator--you'll probably want to look at connecting the selected item to the third pane somehow.

Would love to see what you send up with!

Answer 2

It seems like you came with some "hybrid" solution: from the search dialog it's clear the interface is intended for students (New student and Return student radios).

But you also try to adapt it for staff. I think such mixing is not good. Try to make separate interfaces for both user categories based on theirs needs.

For the staff it could be a list which contains all the courses and filter controls.

UPDATED
I think of live filters area, which is one-hand operable, while the other hand holds the phone. Explicitly division by Graduate and Postgraduate could have sense because they intended for completely different audience.

Extended list view could be more consistent as items holds all the necessary information and provide convenient left-to-right smooth reading pattern in contrast to your screen where information is scattered across tree areas.

@nathanziarek have also provided interesting ideas.

Anyway, try "quick and dirty" user testing with set of working prototypes and you'll get most valuable and convincing results. If the phone calls are frequent, don't forget participaints are holding the phone while testing ).