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.
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.
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.
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.
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.
On the desktop, if the user clicks on “Apps”, a whole new set of sub categories slide into view.
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.
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.
ittybittyusability 