BTD quiz #1: 3 Approaches to the same usability design problem

September 2, 2007

I am currently in the middle of designing a transactional web application that, amongst other things, will enable users to run reports on a number of accounts, and conduct searches of other site users.

In developing the wire-frames and projected work-flow for the site I have encountered a little usability problem that, while I imagine it is a common issue, I have not been able to find any writings regarding it’s best-practice solution anywhere on the web. As such I thought I’d post the problem here in a similar vein to Dan’s “simple quiz series”:http://www.simplebits.com/bits/simplequiz/. I think I have my answer, but I wanted to share the problem with you to provoke some discussion in an effort to establish the best approach.

h3. Site layout

Before I get to the specific problem, here is an example of the site design and layout. As you can see, it’s a simple 2-column layout:

h3. The problem

This approach to layout/site design/work-flow works just fine across the majority of the site but in the section relating to searching and viewing a site user’s details there’s a problem. The thing is this - you can’t view the user details that you want (including the associated left navigation links) until after you have searched-for and found that relevant user within the site database. In other words this section of the site has to perform slightly differently to the rest as the user has to perform a ‘3-step’ searching process to get to their desired content.

h3. Possible solutions

I have come up with 3 alternate solutions to this problem which are listed below. I’d like to get your feedback about which (if any) is the best. Obviously I want the final solution to be as consistent as possible to the way the rest of the site performs.

h3. Option A

In this approach I’ve replaced the area usually reserved for left (sub) navigation links with the search form required to locate a user:

Once a search has been conducted the results appear in the main content area:

Once the user has selected the person they need from the list of results, the page re-loads showing the user details in the main content area and the left nav shows links relating to this content, replacing the search form:

p(beforeList). Advantages:

• No sub-navigation links shown for content that is not yet in view (which could confuse users) until after the search has been conducted

p(beforeList). Disadvantages:

• Breaks consistency with left navigation behavior across other pages\ * Left column may be too narrow to contain the form elements\ * User does not know what information about a person will be available until after the search is performed (the content area could contain some explanation though??)\
• May not be clear to users how to get back to the search page if they have selected the wrong person

h3. Option B

With this design, the left navigation links are retained and include a link to the currently shown page called ‘Person search’ or ‘User search’ (The exact label is yet to be determined, but you get the general idea). All other links in the list (which relate to the user details that are not yet shown) are disabled and shown in grey to suggest this to the user (There could be a message to explain this should a link be clicked):

The results are shown in the main content area (no surprises there):

Once the user has been selected from the list of results, the details are shown in the main content area and the left navigation becomes active. Furthermore, the active link is now shown as the second link in the list as we’re no longer looking at the ‘search’ page:

p(beforeList). Advantages:

• Maintains consistency by retaining the left nav (sort of)\ * Gives users an idea of the information that will be available once they have selected the user whose information they require

p(beforeList). Disadvantages:

• Breaks consistency with left navigation behavior across other pages, showing what is essentially two different sections’ sub links in one list\
• Could cause confusion/frustration with users, showing links that are disabled

h3. Option C

Here the left navigation is removed completely. The page template shifts to a full-width layout showing only the search form:

Again, search results:

Left (sub) navigation links appear only after a user has been selected:

p(beforeList). Advantages:

• No sub-navigation links shown for content that is not yet in view (which could confuse users) until after the search has been conducted

p(beforeList). Disadvantages:

• Breaks consistency with left navigation behavior across other pages\ * User does not know what information about a person will be available until after the search is performed (the content area could contain some explanation though??)\
• May not be clear to users how to get back to the search page if they have selected the wrong person

So there you have it. Let me know what you think. Any feedback or other approaches as to how best to show this content will be very gratefully received.

Many thanks to “Garett Dimon”:http://garrettdimon.com/ for the nice “wire-frame templates”:http://v1.garrettdimon.com/resources/templates-stencils-for-visio-omnigraffle