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:

enter image description here

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?

  • 1
    "Utilise screen real estate", when done horizontally, is an enemy of responsive design. People do want to use your application in small windows (mobile, or tiled on a normal monitor) - if you show it on the same screen, you will probably need to rearrange it for vertical scrolling, and this may invalidate the benefits of "single screen".
    – Rumi P.
    Aug 13, 2013 at 11:08
  • 1
    Splitting results and details is not really expected behavior any longer since Google has switched to showing previews of their results. Though you could argue that a preview isn't the actual detail, zooming allows you to see more than enough not to have to click through to the page itself. Aug 13, 2013 at 14:23

2 Answers 2


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. Quick Mockup

Would love to see what you send up with!

  • Thanks for your feedback. Most useful. I originally sketched it having separate screens (search,results and detail) but when i met staff who wanted to get the data out they mentioned about quick access and changing values (start year etc). I like your idea about showing which item you selected. I actually got the developer to develop the top prototype but when i saw the data in it i could see the problem of no results being displayed for certain search criteria and also knowing the criteria you had actually searched for Aug 13, 2013 at 14:18
  • Can anyone point me in the direction of examples of both types of patterns? I found this example builditwith.me which shows results in a list and detail to the right. Aug 13, 2013 at 14:22
  • Tooltips are a little too widely used to find a concrete example, but the Data Tables at Patternry have some ideas. The Dropbox example shows actions you can perform on the row, but it's not a stretch to look at that same pattern containing line-item details instead... Aug 13, 2013 at 14:36

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.

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.
enter image description here

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.
enter image description here

@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 ).

  • The reason for 'new student and 'returning student' is this is how they are defined in the student data systems that staff use. They can filter internal (desktop client systems) by this criteria This is also the criteria they will ask students if they get asked on the phone. But yes, I was trying to aim this at both students and staff Aug 13, 2013 at 12:23
  • Pay attention to the context: holding a phone in one hand, it's probably easier to apply live filters to the table which includes fee details comparing to search dialog. Aug 13, 2013 at 13:13
  • Could you further explain this idea. Do you mean utiliing filtering on code,name etc and then being able to change search criteria? Aug 13, 2013 at 14:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.