Usable ‘Store Finders’

I’ve been doing some investigation into Store Finders recently and I’ve found one that is so quick, simple and easy to use that I thought I’d mention it here.

It’s for women’s fashion retailer Jane Norman, and can be accessed here:

http://www.janenorman.co.uk/pws/StoreFinder.ice?country=GB&page=Stores

The design is uncluttered and the finder guides the user towards their goal with a couple of simple clicks.

The Store Locator page in its initial state

The Store Locator page in its initial state

Choices are made using Drop-down lists, which have known usability and accessibility implications, but the implementation here seems to fit with general best practice recommendations while avoiding most of the pitfalls, such as overly long lists.

Choosing a region:

A drop-down list to choose the region you are looking for

A drop-down list to choose the region you are looking for

At this stage the region break-down seems to find the right balance between being too broad/generic and too narrow/restrictive.

Picking the store in your chosen region:

A drop-down list to choose a specific store

A drop-down list to choose a specific store

The item labels in the drop-down list are descriptive enough to give the user some meaningful options, without being too wordy.

If you were simply looking to verify a store’s general location this might be enough detail for you already.

Results page:

The Store Locator results page showing useful store information and an embedded Google map

The Store Locator results page showing useful store information and an embedded Google map

The results page contains lots of useful information:

  • full address
  • contact details
  • store opening hours
  • embedded google map

The implementation of Jane Norman’s Store Finder uses traditional form posts, which result in page refreshes after each selection, but I don’t see any reason why it couldn’t all be done inline using a bit of JavaScript (where available) for an even smoother experience, although this may have accessibility implications.

Additionally, it would also be nice if the results page could also offer a ‘permalink‘, so it can be easily bookmarked for later reference.

Using the feature feels much more friendly than asking the user to enter a postcode, which is the other commonly used technique.

Further reading

The Rise Of Contextual User Interfaces

The recent boost in popularity of well-designed web-based applications has seen context-driven UIs becoming increasingly common.

This article, taken from the personal blog of AdaptiveBlue Founder/CEO and ReadWriteWeb contributor, Alex Iskold, highlights many of the subtle but important benefits of contextual UIs.

The new interfaces are winning people over because they are based on usage patterns instead of choices. The key thing about new UIs is that they are contextual – presenting the user with minimal components and then changing in reaction to user gestures.

It is ironic that it took web UIs so long to discover the elegance and simplicity of context.

Since its dawn, HTML lacked the sophisticated widgets that are present on the desktop and web UIs were always considered more primitive and slow. Contextual, AJAX-based UIs actually seem faster because they do not reveal all possible choices to the user. Instead they focus on surfacing just the bits that are necessary and then surfacing more based on user gestures.

Original article: http://alexiskold.wordpress.com/2008/05/15/the-rise-of-contextual-user-interfaces/