How to fix Apple’s poorly designed mobile web menu.

Simplicity comes in many forms.

Reducing distractions, including providing too much content or too many calls to action, helps people focus on the task at hand.

And allowing the content that is there to be seen, especially on mobile, is an important balancing act between copy, images, and screen height.

But let’s look at how Apple has taken the wrong approach to these tenets with their new mobile menu at Apple.com.

Reducing distractions

Image for post
Image for post

Yes, removing content from an interface simplifies it, allowing the user to focus. But if that content is vital, the choice to omit the content, even temporarily, can be more detrimental than having it on screen at all times.

Image for post
Image for post
Apple’s homepage offers almost no content hints whatsoever.

Where to next?

This is especially vital on Apple’s homepage, because there are really only three links on it:

  1. The menu reveal button, which is a nonsensical equals sign.
  2. The apple logo, which just refreshes the page.
  3. One product hero image which links through to a product you may not be interested in.

Saving space on mobile

Sure, mobile menus are often a distraction on an already too small screen, but when the header to toggle your menu is the same size as the menu itself, you’re just adding needless clicks.

Image for post
Image for post

Apple did make a unique choice here in opting for a horizontal, scrollable menu over a stacked menu which would have taken up the full screen. And, hey, it works, so embrace it. More on that below.

Charming interactions

You can argue that the reveal of a hidden mobile menu can benefit from a nice animation, rather than unceremoniously snapping into place. But when that animation makes your site seem unresponsive due to a long delay between the time you press the open button to the time the menu slides down, you’re just increasing the frustration level for folks who are trying to get to the information that matters to them.

From press to menu reveal, there’s too much delay, making your press feel unresponsive.

Combine these things together and now you’ve created tedious work for the end user, with no benefit whatsoever.

So how can Apple address these issues?

Given Apple’s choice to go with a long horizontal menu, the simple option would be to just always show it. This saves time, effort, and provides valuable information on a homepage which has almost no information on it, all within the same space that the current header takes up.

Here’s how this can be done quite easily:

  1. Remove the equals sign.
  2. Begin the menu with the Apple logo (still doubling as the Home button).
  3. Make sure the menu’s spaced in a way that you hint at additional content to the right, so people understand there’s more content they can access with a flick of their finger.

Like this:

Image for post
Image for post

Presto: a simplified menu, half the height of the current one, with all the same content the current full-height menu sports, always showing and ready for action.

And the added benefit: now the mobile menu on Apple.com subtly reflects the menu bar on OSX.

Image for post
Image for post

It’s a minor change, that would make a whole world of difference, as this comparison highlights:

Image for post
Image for post
Left: the menu that shipped. Right: the menu that should have shipped.

Written by

Humanist. Facilitator. Work @sayyeahto. Play @ineedsugar. Give @weareto. Lover of music and @mukasaland.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store