Tags

,

For the past one or two years I’ve had discussions with fellow creatives and UX-ers about Apple.com 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” Apple.com. 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.)

Apple.com 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.

newAppleDotComNav

New Apple Menu/Masthead

oldAppleDotCom

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.

newAppleDotCom_mobileNav

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

newAppleDotcom_subCatNav_mobile

Sub category navigation for iPad category on mobile

Unfortunately, Apple.com 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.

NewAppledotCom_Watch_mobile

Sub category navigation for Watch on Apple.com.

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.

NewAppleDotCom_macMenu1

“Mac” sub category grouping on mobile

NewAppleDotCom_MacMenu2

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 Apple.com 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 Apple.com moving in the direction of design that their products have enabled, I just wish it was up to the standard their products reflect.