2

Trying to resolve a navigation quandary for an e-commerce website. Current set up is like so:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Clicking either a link at the top left, or one of the large images in the center drills down to the next level and currently results in this:

mockup

download bmml source

As you can see, we remove the large navigation images as you reach a terminating node in the hierarchy, however, we retain them on the top left to support lateral movement without having to go Back/Breadcrumb and then click again. There is some debate internally that retaining the top left navigation section for lateral movement is confusing. I've found some documentation discussing this sort of thing:

"When designing navigation systems it is important to provide a landmark that shows the users' current location. This provides context for the users, which is important because 'contextual clues in the physical world do not exist on the Web." (Morville & Rosenfeld, 2007) As Krug (2005) puts it we do not have the same sense of scale, direction, or location on the Web. In order to make sure users know where they are, Morville (2007) advises to "include the organization's name, logo, and graphic identity through all pages of the site," and "present the structure of the information hierarchy in a clear and consistent manner." Navigation should bypass the hierarchical organization of the website, and "hypertext [should] support lateral and vertical navigation." (Morville & Rosenfeld, 2007) This will provide the users with context and flexibility."

I have my opinion on what we should do, but, I'm not a usability guy. Is retaining a mechanism for lateral navigation amongst siblings in a hierarchical structure important from a usability perspective? Or, are the back button and breadcrumbs enough of a mechanism to suffice for the user?

3

I would expect to see siblings and children of the current category, along with a single link back to the immediate parent.

An article from the Baymard Institute argues in favour of displaying links to sibling categories because they help users to discern the difference between categories and to adjust their scope, but noted that 47% of "top e-commerce sites" fail to do this:

Sibling categories – that is, categories that are placed next to one another in the site’s category taxonomy – are hugely important as they enable users to make easy scope adjustments and better interpret the current scope.

During testing we often observed subjects who were unsure about the nuances of two or more categories. It’s in instances like those where sibling categories can offer a helping hand to the bewildered user – allowing them to easily switch back and forth between the different sibling categories and work out their exact boundaries by looking over the different product lists.

1

Using links on the left for navigation along with the photos linking to the same categories is inherently confusing. I initially read this as the photos were featured categories, not overall categories. Having the same links presented in such different forms is the cause of the confusion, in my opinion. Try changing the photos to more of a featured product approach rather than a navigation approach and see what the feedback is. You've essentially established multiple navigation paradigms for the same path from the same page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.