OfficeMax Reinvents Navigation

Yesterday we talked about OfficeMax’ viral campaign and its goal to brand itself as “human friendly.” OfficeMax has recently redesigned its website, and you’ll notice right away its clean look and innovative approach to navigation.

New OfficeMax Design

Now customers can hone in on specific products with one click:

OfficeMax Navigation

Which you have to admit is more user-friendly than Staples’ or Office Depot’s methods, where you have to first locate the correct category, then forage from there:

Staples’ home page directory

Staples Directory Mess

Staples’ subcategories

Staples Step 2

Office Depot’s dropdown menus

Office Depot Navigation Menu

Office Depot’s refinement options

Office Depot Step 2

So, well done OfficeMax. Only 2 suggestions:

1. I would recommend OfficeMax carefully check its search logs and inventory list to make sure popular search terms are not overlooked. For example, a classic back-to-school item is a watercolor set. The navigation shows “water coolers” but not “watercolors.”

No Watercolors

But I could find the Crayola product with the search box.

Watercolor Set

Same goes for items like “manila envelopes” and “wireless mouse” which don’t appear in the directory menu. Of course, listing absolutely everything would make the directory larger and perhaps, less usable. So focusing on highly searched products is important.

2. I would remove the “brand” from “Browse by product, category, brand or service” from the yellow banner. You can’t browse by brand until you click on a product and more filtering options appear on the left hand side. It’s a bit misleading.

Related Articles

12 Responses to “OfficeMax Reinvents Navigation”

  1. I’m not sure that Jared Spool would agree with you regarding the usability of the OfficeMax design decision:

    You seem to be making some usability assumptions about flyout menus that may in fact not be correct.

  2. Hi Christian,

    That’s an awesome podcast, thanks for pointing this out. I’m always looking for audio content and I’m sure Get Elastic readers will enjoy this podcast.

    You’re right, I am making assumptions about flyout menus. Instead of “you have to admit” I should have said “I believe” that this is more usable – in terms of locating products faster. I do understand flyout menus aggravate many people.

    I do find the menu jumpy, and the product list leaves off popular products. But you can also click on a letter to get a static page with links:

    And the flyout directory is a supplemental navigation option, not the only way you can navigate. You can still click on the 3 main categories on the left hand side, and browse the conventional way
    Mind you, the organization on these browse pages is atrocious…

    Of course, there’s also the search box.

    One point Jared made is that people look for “trigger words” to aid them in their navigation, like “yes, that’s what I was looking for.” He cited Staples as a good example of this.

    On one hand, there aren’t many trigger words on OM to help people. On the other hand, if you know you want a laser printer you can jump straight to the “L” menu. I still think this is an awesome idea, and nice to give users that option.

    When planning ecommerce sites, you often have to make a decision on how to label your categories – are we going to call the category “Eyewear” or “Sunglasses”? “Apparel” or “Clothing?” With the alphabetized directory, you can link to products using all the relevant labels and customers don’t have to think as hard about which category holds the product when the trigger word is not included.

    But you are right, the OM design is not necessarily superior to Staples. Apart from testing with real customers, it can only be our opinions.

  3. Nathan says:

    I like the Office Max navigation design. I disagree with Jared’s point that the fly out distracts the user by concealing navigation options that appear below the menu.

    For one thing, they do a good job of having links in the body of the page that act as guides and hooks into deeper or related content. But secondly, the design of the top nav seems to make it clear that it’s only to be used for major changes in browsing.

    If I’m looking for pens, I’m not going to first click P in the menu, find pens.. click on the pens link… not find what I’m looking for and then click the menu again looking for an alternative to pens — all the while obscuring some link in the body of the page.

    Rather, I’ll keep scanning the body area once I’m in the pens section of the site. Or I’ll try using the search tool.

    If I don’t find it.. I might try the menu again to see if there’s something I missed. But since I’ve already found the pens section, I’m likely not going to assume that there is another area that contains pens that somehow I’ve missed and could find in the navigation if I try harder at looking for it.

    I will however return to the main navigation once I’ve found the pen I want (or given up looking for it) to look for some other type of product. But there again, as even Jared pointed out, you don’t want unrelated links detracting users from the relevant content on the page.

    My only issue with Home Depots nav is that they break the convention too much — which isn’t necessarily a bad thing. But I would have used a conventional menu bar… and places their alphabetic bar either below it as an alternative.. or above the footer.

  4. What many people forget when it comes to usability is experience of the user interacting with the interface.

    Take a customer service interface for example. If designed for ease of learning, it would fail miserably at efficiency. But because users of that interface engage with it regularly, they become skilled in interacting with it.

    Now think about who typically orders office supplies. How often do they order office supplies? I am assuming a large portion of the audience are repeat purchasers – and not just one or two orders. They likely make orders bi-weekly or monthly. Another assumption is the bread and butter for office supply companies are these type of shoppers. So they tweak navigation to better assist the rapid discovery process for KNOWN items.

    If someone from an office supplies company can chime in – we’d love it…

  5. I really like the old skool navigation by the alphabet. It’s really easy to use if you know already what you want to buy. For others, a good search functions has to be installed.

  6. joken says:

    But because users of that interface engage with it regularly, they become skilled in interacting with it.

  7. bmw gt1 says:

    It’s really easy to use if you know already what you want to buy. For others, a good search functions has to be installed.

  8. I liked the navigation bar as well, but also have to agree that if you shop for your first time and do not have your mind set up for purchase yet, search function is the way to go.

  9. chris says:

    check it out there is now a NEW new site that is actually user-friendly. Whoever thought of that alpha navigation must have been fired…what a clunker.

  10. Adita says:

    Excellent work, artists, currators, organizers.
    I am from Western and also now am reading in English, tell me right I wrote the following sentence: “Facts consumers should know before considering credit counseling or debt consolidation.”

    Thanks for the help ;), Adita.

  11. NEW new site that is actually user-friendly. Whoever thought of that alpha navigation must have been fired…

Leave a Reply

© 2014 Get Elastic Ecommerce Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS