Awwward-winning? Not So Much (Pt. 2)

Let's take a look at a website judged by the good folks at www.awwwawards.com as having an excellent navigation system. Does it stand up to a detailed UX analysis?

New from Bose

The New from Bose website is an online catalog highlighting Bose’s consumer headphone lineup. It has a very avant-garde design that defies most standard UI conventions. The user is immediately presented with five high-saturation diagonal photo slices revealing partial views of each headphone model. There is no extraneous information. This site is about selling headphones, plain and simple. There’s no fluff, no marketing copy, nothing. The designers assume that if you’ve reached this site, you already know that you want to research headphones and make a selection. They let you get right down to it.

The design’s lack of initially exposed text relies on animation to guide the user. Rolling over each headphone model enlarges the photo slice and exposes a previously hidden model name and brief description. Scanning through models and making a selection through the home page navigation system is very intuitive. It helps that there are only five model categories here. If there were more, this approach would likely overload the user with visual information and fail.

Drawbacks...and Failure

Choosing any one of the models loads a new page that focuses on the selection. The local navigation is vertical, aligned with the left edge of the page. It uses pictographic icons for navigation with a text-based indication of what the link represents; these additional text labels slide out on mouse-over. The ight hand edge of the page carries up and down arrows that serve as a sub-local navigation system, i.e, it’s two levels below the the global nav, and one level below the local icon-based navigation. On the headphone icon, labeled “View the <model name>,” the arrows on the right edge scroll through a series of pages under that topic. However, once the user has reached the end of the list for that topic, the down arrow advances the left-hand navigation to the next icon. Because the first menu icon has multiple pages associated with it, one would assume--if the pattern matches--that each icon has additional pages associated with it, but this isn’t the case. The remaining icons have an association with one page only. The design lacks any way for the user to apprehend how many additional pages are associated with an icon. This impairs the user experience.

Sub-page showing local navigation at left and sub-local (possibly considered contextual) navigation at right.

The design truly fails when viewed on a mobile device. It simply cannot be used, regardless of the screen orientation. The designers may have mistakenly believed that users don’t shop on smartphones. I don’t know why anyone would assume this given the mountains of data which show otherwise.

In the end, this design is too clever by half. It has five types of headphone to sell and just a few bits of information on each to communicate to the user. This site could easily have been designed in such a way to be both visually attractive and completely functional on small mobile screens. I’m starting to think that the judges of this award competition are more wowed by eye candy than real world user experience. This is a failed design.

The Bose site completely fails on mobile devices. It is effectively unusable.