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.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: