Paul Rouke - Usability Professional

There can be little doubt that the major desktop software innovation of the last decade-and-a-half has been the web browser. The web has helped to create far more powerful tools for user interface designers, allowing them to create much better – and, in some cases, much worse – user interfaces. And, these days, we’re all so familiar with the browser, the metaphors of ‘back and forward’ navigation, the look-and-feel of websites, that it makes perfect sense for new applications to be developed around the technology of the browser.

Finding the best means of achieving this – of leveraging web technologies in desktop business applications – hasn’t always been easy. We want powerful web applications that can access the local file system, network file shares, printers and other devices. But there are also security concerns whenever any browser technology is used – the potential for dangerous scripts to be downloaded from the web makes IT managers rightly nervous.

Adobe AIR is one well-established attempted at solving these problems, and it’s something that we’re using at PRWD to deliver business applications for our clients.

From an application development perspective, AIR is a great tool to work with. The most important advantage is the fact that I can build the application using standard web technologies – HTML, CSS, JavaScript – and yet also have access to extra features and functionality that would normally only be available to applications developed for .NET or Java. This makes it easy to implement clean, functional user interfaces which are familiar and reassuring to end-users. It’s possible to take advantage of 15 years of best practice in web design, layout and interactivity when building a desktop application.

As an example, here’s one of the screens from a web application that we are building at the moment:

It’s a simple HTML interface, clean and easy to use.

Even better for developers is the fact that you can easily access back-end systems using AJAX. In the application shown above, the interface is almost entirely powered by JavaScript running in the browser, but data is also frequently exchanged with the server in the background. With some common sense in the use of REST architecture, this provides a responsive application for the user, as well as ensuring that it’s as easy as possible to add new features to the front end. This makes the separation between data, logic and presentation much clearer than in typical web applications, a fact which tends to make quality control and testing much easier.

For future business systems this kind of approach, based on open protocols and ubiquitous technologies, will be essential. The use of principles such as REST and data formats such as XML and JSON mean that it will be possible to build a wide range of components which access the back-end service, including other enterprise services, as well as a multitude of client applications which may include mobile devices as well as desktop applications.

Whether you are more familiar with the term guided navigation, attribute filtering, multi-attribute navigation or guided search (there are more although these are some of the main industry terms used) this type of advanced navigation can provide visitors to your e-commerce store/online booking system/content rich product site with an invaluable user experience – if implemented correctly.

What is multifaceted navigation?

In short this is an advanced navigation method where shoppers can filter out large sets of products or content by a variety of product attributes (sizes, colours, features, price range, specifications).

User benefits of multifaceted navigation

1. they can choose to be specific about the products which they are being shown
2. your users are empowered by the way you allow them to dynamically manage your product database
3. users can compare products by specific features, for instance when looking for a TV you can specify to see only TV’s that are 1080p and that are 46 inches
4. your users can shop how they are used to in a good high street store. ie. they tell the salesperson that they have so much to spend and are looking for particular product features or sizes, and they are then shown the products which suit their requirements
5. your user can find the products specific to their needs in a more efficient way, speeding up their browsing journey in what may well be a small space of time they have to shop online
6. your users don’t need to to visit multiple product pages and read each product description to know whether it matches their requirements
7. long, scrolling product listings pages (pre-product page) are eliminated as they can filter out the products which don’t match their needs
8. combined with the more widely used sorting techniques (price hi-low, price low-hi, latest, bestsellers, closest to your location ie. for a hotel) faceted browsing providers users with all the tools they need to hone in on the products/items which they are in a position to purchase
9. potentially confusing and bewildering amounts of products or items can be managed in a way which allows the visitor to focus their shopping experience on just the items which are suitable to them
10. users will reflect positively on the browsing experience with your website, in turn reflecting less favourably on your competitors who don’t provide this type of advanced navigation

Best practice advice

• Indicate how many products will be displayed when choosing a specific filter – users not only will get an understanding of your catalogue size but they will see whether by filtering by a particular attribute they will be narrowing their potential options too much to give them enough choice to make a buying decision
• Provide the ability to choose multiple filters across different attributes – this ensures that users have a truly dynamic and personalised browsing experience rather than only filtering a single attribute ie. colour or size
• Allow the user to switch filters on an off on the same user interface, rather than having to click back to be shown the different filters available for a particular attribute
• Encourage users to use this form of navigation with a clear, user friendly interface, rather than this form of advanced navigation being lost in a cluttered navigation menu
• Where applicable provide slider filters to allow users to specify exactly the upper and lower limits of a particular attribute they want to control, such as the lower and upper limits of their new house budget, rather than limiting them to specific tears of prices ie. £200,000 – £300,000
• Allow a user to select multiple filters for 1 attribute, allowing them to be even more specific in the features they are looking for within a range of products (whether this be clothes, insurance, holidays or houses)
• Don’t overlook the overall usability of your web application just to include multifaceted navigation – if implemented poorly these advanced navigation options can confuse and frustrate visitors

Typical web applications that benefit from multifaceted navigation

• E-commerce stores – selling a large number of products in each category range, allowing users to filter the products to focus in on what suits their budget and requirements
• Holiday, flight and hotel websites – users can input a variety of requirements (for instance, distance from beach, hotel star ratings, user reviews, near by attractions, distance to town centre) and see hotels which match these specific requirements
• Estate agent, housing websites – users can specify a variety of criteria (price bracket, number of bedrooms, distance from a local amenity, front or back garden, conservatory) and be presented with only the houses which satisfy the different criteria
• Price comparison sites – dependant on whether the user is looking for car insurance or their next mortgage, they can specify their unique requirements
• eCRM systems – where you are looking to filter out customers which match a series of requirements, such as contact method preferred, industry, annual budget and distance from a particular city

Examples of multifaceted navigation

Multifaceted navigation on Argos.co.uk

Multifaceted navigation on Hotels.com

Multifaceted navigation on Hotels.com

Multifaceted navigation on Uswitch.com

Multifaceted navigation on Skyscanner.net

Examples of where multifaceted navigation would significantly enhance the user experience

Kodak.com, a site which would benefit from multifaceted navigation

Currys.co.uk, a site which would benefit from multifaceted navigation

Homes4U.co.uk, a site which would benefit from multifaceted navigation

Mytravel.co.uk, a site which would benefit from multifaceted navigation

Advanced techniques to further enhance the users experience

• Maintain users key filter selections when they return to the site or begin their browsing process again, such as the price range that suits them or their preferred holiday destinations, for instance
• Where applicable provide sliders to allow for unique values to be chosen for the likes of price ranges, rather than having specific brackets of prices ie. £50 – £60
• Use interactive colour pickers as a more engaging way for your users to filter your product range.
• Consider user generated tagging, allowing your users to tag products/items as they see fit which in turn provides completely new attributes on which to filter content within your site

Further reading on navigation techniques and best practice

• tagging content and providing tag clouds to represent large sets of data
• suggestive/predictive search
• dynamic categorisation and shopping by user profiles and customer groups
• Navigation comparison between Kodak and Fujifilm

What are your experiences of multifaceted navigation?

I would really like to hear about your experiences, both as users, faceted navigation providers and from people on the client side involved in implementing navigation methods.

• How beneficial do you find this style of navigation?
• What sites do you feel are pushing the boundaries in navigation?
• What further user benefits would you add to the list above?

It’s easy to forget just how quickly Facebook has risen since bursting onto the British scene (as a measurable force) in the summer of 2006. It may now hold 45% share of the market but with its drastic overhaul of its user interface will it manage to maintain this share?

I’ve recently taken my first look at the new Facebook design and I’m instantly unsure.
Firstly the interface is much wider. Looking at the positioning of the columns on the homepage I can’t help but feel it’s unbalanced. I’m not sure I like not having a border to contain the news feed section in either. I like the changes to the navigation – I have to agree that it does offer an easier set of route options.

Moving to my profile page the first thing I notice is that all this new white space has been irritatingly filled with two sectioned off adverts on the right hand side. Their new prime position on the actual profile page simply means these ad’s really stick out – great for advertiser, really irritating to me (even though I admire the targeting intelligence).

One clear advantage I have found is when looking at ‘application addicts’ profile pages. These pages have resorted back to a loadable page, just like pre-application days. On saying this, to my dis-appointment they have removed the ability to write on your own wall, which was always fun to mock as newbie Facebooker’s learnt to use this feature.

I really don’t like the fact that they have combined news feed updates with ‘the wall’. I think this subtracts from their attempts to simplify the interface, and simply makes its look messy. I’m not really sure what advantage this gives, when the homepage is specifically for this purpose?
There are a few aspects of the new design that I think will really enhance the users experience of Facebook, but overall it’s too much too fast. Look out for petition groups and campaigns to restore it to the original design!

LinkedIn, the highly popular network for business professionals around the world, has recently relaunched their new user interface.

Brimming with good examples of personalisation, rich user interactions and intuitive navigation touches, I was just about to connect with Anish Kapoor, co-founder of Yuuguu, when I was presented with this jolly old chubby wizard informing me that the site is currently under-going system upgrades…

Picture taken from LinkedIn website.
Hopefully it won’t be offline for too long as there’ll be a fair few million people around the globe anxious to continue using this fantastic web application!

If you haven’t yet registered on LinkedIn then I would strongly suggest giving it a try. You can view

A very interesting article on Usability News has been published quite recently entitled Web 2.0 ‘distracts good design’ which raises a very interesting point:

As web 2.0 technologies become more mainstream, there is a clear risk that in turn this will result in poor usability practices and user experiences

A parallel that I can draw from this is based on my experience as lead user experience designer at Littlewoods Shop Direct. Having worked as an offline print designer for 3 years, when I started work in the e-commerce team in 2000, I was able to gain a solid understanding of the differences between offline and online design. During the next 6 years, as the web become more popular, more offline graphic designers and agencies made the move into the online arena, but in the rush to produce exceptional online design work, focused on highly visual and creative solutions rather than the user experience and whether the site is usable.

On the 1 hand there are lots of examples of how web 2.0 can be used to provide compelling, rich and user friendly solutions, a large selection which can be seen over at the SEO Mozs’ web 2.0 awards.

On the other hand I do agree with the Usability News article (and more specifically Jakob Nielsen) that we will see executions of web 2.0 functionality and interaction which unfortunately fails to provide good user experiences.

As yet the current wave of web 2.0 sites have been developed using highly talented user interface designers alongside strong technical developers, but I don’t think it will be too long that the same technical developers will be asked to develop solutions from less experienced ‘print-to-web’ designers who perhaps have less groundings in the principles of good usability and user experience.

Personally speaking (through PRWD) I am starting to work on projects which will benefit from web 2.0 developments and user interactions (with a complete focus on the user experience), and I look forward to sharing these on this blog.