New business cards

September 8, 2007

Fresh from the printers today.

Business cards

I’m concerned that the details block sits a little too low on the white side, but there’s always something isn’t there? I guess it’s just part of being a designer.

Overall I’m pretty happy with them though.

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

MODM

August 3, 2007

I caught up with a couple of mates, Chris (of “Docoloco”:http://www.docoloco.com/ fame) and Phil last night for a beer and to see what these “MODM”:http://modm.wordpress.com/ meet-ups are all about. Neither of us had been before and it sounded interesting so we all braved the cold and set off for a look-see.

Organised by “Cameron Reily”:http://gdayworld.thepodcastnetwork.com/ and “Simon Chen”:http://blog.eightblack.com/, last night’s event was held at “Riverland”:http://www.riverlandbar.com/ which is a great little venue on the Yarra underneath Federation Square. The idea is for anyone interested in online digital media to get together, have a bit of a chat and share ideas. Yesterdays included a presentation from Robert and Mark Gabriel about their new search site/plugin, “MyLiveSearch”:http://www.mylivesearch.com/ which sounded interesting and has apparently been getting a bit of interest in the media of late. The beta is due out some time soon so watch this space…

We also got talking to “Keith Lang”:http://songcarver.com/ who, besides being a thoroughly nice bloke, is one of the guys behind “Plasq”:http://plasq.com/, makers of “Comic life”:http://plasq.com/comiclife/ and “Skitch”:http://plasq.com/skitch/. What with talking to him and Chris I’m even more tempted to switch to a mac now!

Good do. Nice people. Recommend it.

Great user experience resources

July 11, 2007

"Boxes and Arrows":http://www.boxesandarrows.com/ has been around for a
while and, as we all know it’s a great resource for user
experience/interaction designers.

Another great site that had escaped me until yesterday though is “UX
Magazine”:http://www.uxmag.com/. Great content, beautifully designed.
Favourite site at the moment for me.