navigation needs to work the kinks out

For the past one or two years I’ve had discussions with fellow creatives and UX-ers about not getting on Responsive/Adaptive website bandwagon. (“Bandwagon” back then; today the approach to website strategy and design.) Most of us were mystified, considering Apple more or less set the bar on how to interact with devices, especially phones and tablets.

Well, now we can discuss the “new” In this case, their approach to the navigation. (Maybe “new” isn’t the most accurate term, since it has from my perspective, maintained the same architecture and visual design.) has updated the look and feel of their global navigation to a “flat” design. They’ve removed the chrome-y buttons and etched type and implemented a simple, dark grey background with white type. Great for fluid transitions in between break points as the links and masthead collapse and adapt more easily.

New Apple Menu/Masthead
Previous Apple Menu/Masthead

The global categories, visible on desktop/tablet widths, are accessible when the hamburger menu (two buns only) is tapped. Interestingly, the menu loads horizontally from left to right, indicating that the menu is swipe-able in order to access the menu items that are off-screen to the right.

New Mobile Apple Menu/Masthead
Global Navigation open on mobile
Global Navigation open on mobile

I appreciate what I believe is Apple recognizing that small images in the sub-category navigation won’t work well in a smaller viewport, as details can be difficult to see and differentiate between. Thus, in some categories, the sub-category navigation are represented by vector graphics, instead of the images on the larger tablet and desktop screen widths.

Screen Shot 2014-10-24 at 11.50.14 AM
Sub category navigation for iPad on desktop/tablet
Sub category navigation for iPad category on mobile

Unfortunately, hasn’t applied this approach across the board for mobile (images > vectors). Which is kind of weird, I think, because of the crazy inconsistency between the desktop/laptop experience and the mobile experience.

Sub category navigation for Watch on

Additionally,  if you’re not paying close attention, you may miss the fact that on the desktop, some categories, such as “Mac” have groupings of sub categories, like “Mac”, “Apps”, “Pro Apps” “Accessories” and “Server”. It doesn’t help that these are very small links that get lost when combined with the images, and the only indication that they relate to anything is the darker, horizontal bar above the group label.

Screen Shot 2014-10-24 at 12.59.00 PM
“Mac” sub category group

On the desktop, if the user clicks on “Apps”,  a whole new set of sub categories slide into view.

Screen Shot 2014-10-24 at 12.58.29 PM
“Apps” sub category grouping

On the mobile view however, it’s just one long horizontal list with a combination of vector graphics (instead of image counterparts) and skeumorphic icons. Kind of hodge-podgy feeling. I can definitely see how it’s going to be difficult to find (and then recall) the “deeper” items; a true case of out of sight out of mind.

“Mac” sub category grouping on mobile
Mac “Apps” sub category grouping on mobile. There technically is no differentiation between the groups, unlike the desktop/tablet version.

While I like the horizontal scrolling mechanic has introduced for their global menu, its use at sub category level starts to fall apart when a sub category has more than two groups of items. Apple is asking the visitor to work harder to find and then recall menu items. While lists of items in today’s “hamburger” icon aren’t always sexy, at least the vertical approach lets users scan easily while being able to “tier” items in a manner that is relatively intuitive.

Additionally, I’d love to see a consistent vector approach to the mobile version, instead what appears to be a bit of a mashup.

All in all, the jury is still out on this one. I’m glad to see moving in the direction of design that their products have enabled, I just wish it was up to the standard their products reflect.

Not Charming

I love it when coworkers share websites or apps with me because of either great or horrible experiences. I love it when they proclaim, out loud, “WTF?” It’s the siren song for a UX person in an interactive agency. It’s also an affirmation because their reactions tell me I’m not the only one that notices kooky or poorly designed experiences that make a website difficult to use.

Case in point, Microsoft Surface website. Specifically, the product pages. At first glance, there is a fairly innocuous navigation panel on the right-side of the screen. A common website navigation element, the menu is a list of links that anchor or “jump” the visitor to a corresponding section of the page.

Location, location, location
The first thing that caught my attention was the location of the navigation panel itself in relation to the page. I generally encounter this type of navigation on the left side of a web page. My working assumption is that the navigation panel was placed on the right side in order to replicate, to some extent, the Charms bar in Windows 8 in order to familiarize potential customers with Windows 8/8.1 OS features. (For those unfamiliar with the Charms bar, it contains search, access to settings and contextual app menus. And it appears from the right side of the OS when activated by a swipe or click on the right.)

Default state of the Surface Pro 2 page.

Granted, I don’t have to use the navigation panel menu items to access the information on the page. I can scroll up and down. But like any good navigation labeling, the labels give me clues into the section contents and the information. Not too mention, it’s faster to use the menu if I want to skip around. Also, the panel location in relation to content (and vice versa) changes depending on the width of my browser window because it’s a responsive site. Which means that my mom is not going to know she can expand the width of her browser window to see the information or access the calls to action, and will call me to complain.

Navigation panel open

Label System
The first item at the top of the navigation is a single house icon with no descriptive label. I’m assuming that since it’s a house, it means “Home.” But which “Home?” Additionally, both the “House” icon and the first link in the navigation, “Surface Pro 2” go to the same anchor at the top of the page. So,  the Home icon is unnecessary if there’s a better link to do the job and the use of the Home icon is misleading. The visitor isn’t going Home, they’re going to the top of the page.


Not to get too nit-picky, but whatever.

The label system is inconsistent. I prefer navigation labels on any site or app be similar, such as all descriptive or all actionable. The navigation across all three product pages is a combination of descriptive labels and actions.

Additionally there are two different navigation labels for buying the product, “Buy Now” and “Get it now,” even though all the buy buttons on the page are labeled “Buy Now.” Sure, it’s a minor discrepancy, but like paper cuts, they add up to one big painful experience.

Obscuring Content and Calls to Action
Moving into the page itself, using the nav menu, it becomes clear that the placement is not ideal. In fact, it’s questionable. The panel partially covers written content, details and primary imagery placed on the right side of the page, as well as the almighty “Buy now” buttons. Responsive or not, information on the screen is there for a reason and if it’s not accessible, then what’s the point?

I can’t believe that someone didn’t say, “woah, hang on” before the site went live. This is after all, the flagship website for Surface products. Every word and image of the product on the page is critical to influencing potential customers and selling the product.

Product feature information obscured by the navigation panel.

And it isn’t just one instance of the navigation covering critical information and CTAs (calls-to-action) on the Surface Pro 2 product page, all three of the product pages suffer from this debilitation.

For example, “New Kickstand” is hidden by the navigation panel. In order for the visitor to see it, she has to move her mouse out of the panel in order to close the panel (or expand the browser, if she’s savvy enough). If she wants to continue using the panel to navigate the page, she has to position her mouse back over the closed panel to open it, then click on the next menu item she wants to see. A lot of unnecessary actions and movements.

Kickstand imagery is obscured by the navigation panel.

Additional Content
Each product page has a content section not included and therefore not accessible via the navigation panel. For example, in the screenshot below for Surface 2, the section about the new touch and type covers is not in the navigation menu. In the screenshot for Surface 2 Pro, the section for the docking station is not evident in the menu either.

This “approach” is implemented across all three product sites. As mentioned previously, since visitors will often look for keywords or phrases in navigation to determine if what they’re looking is on the page or in a section (aka “information scent“), why are these sections not included? Yet, there are two different ways to get to the top of the page and two different versions of Buy Now? I’m at a loss.

Information section about the new and improved Touch and Type covers is not in the navigation menu.
Information section about docking stations is not in the navigation menu.

From a make-it-super-easy-to-purchase-the-product-and-feel-confident-about-it perspective, two  no-no’s that would bring’s KPI’s to their knees: Obscuring price and ability to purchase. In the screenshot below the price for the Surface Pro 2 is obscured by the navigation panel in the “Buy Now” section of the page, and in the second screenshot “Get It Now” is also hidden by the panel. These, in addition to the differently labeled Buy Now CTA’s mentioned in the above Navigation section.

Price point is hidden, next to the Buy Now button. Also, the nav panel cover and the background color are identical, creating a bizarre affect.
“Get it Now” in the navigation panel vs “Buy Now” label on the button, which is obscured by the panel. Brilliant. Also, the Docking section isn’t even in the menu.

So what does it say about Surface when information is obstructed by navigation and by a potentially poor implementation of responsive design intended to help the customer learn about their product offering?

Putting on my black hat here, this is not how you design an e-commerce experience and expect to sell product. Nor is this the best example of an responsive, information-based website intended to generate interest, shift perception, and be accessible.