Chris Brummel

The Invisible Apple Human Interface Guidelines (HIG)

As an iOS programer, you might know your code down pat and memorized Apple’s Human Interface Guidelines, which will get you 90% of the way there to making a decent app. But following the HIG to the “T” can still produce results like this…
This app doesn’t violate the HIG in any way. You might say that the yellow backdrop is off, but even that is not the worst offense. Apple covers a lot in the HIG and explicitly calls out lots of fine details that we all should pay attention to, but isn’t a design bible. Over the years I’ve noticed implicit details that aren’t covered in the HIG. I’ve collected a handful of examples of trends that Apple adhere’s to in their apps, but doesn’t call out explicitly in their HIG.

Today I want to concentrate on one point in particular:

Don’t use a grid of options to display your navigation

When evaluating the features of your apps, you need to take into consideration how the user accesses those feature. If you have so many features that you feel like laying them out like a dashboard is the best option available for your navigation. It’s what Apple does for their launcher screen, but it’s probably not best for your app.

Instead, you should dive right into your content. Compared to other software like websites and desktop apps, mobile is about brevity. People using their phone as they wait in a line for a coffee only have moments to take action before they need to interact with humans again. With those precious moments, don’t force the user to make a choice before they’re allowed to digest content. Skip that step and dive straight into the content.

HotelsOut of all of these options, one of these *has* to stand out in the hierarchy as more important. Even if it’s a tie, make an executive decision about what to lead with, or at least guide them to the right option.

Most of Apple’s apps are focused enough to avoid a heavy navigation structure. They just dive right into the content.But even Apple’s apps that do require heavy navigation make a choice as to what content to show you first.

Avoid forcing a linear view-hierarchy

When laying out the sections of your app by displaying them as a grid of options and tapping through to get to some content, you’re digging yourself into a hole. In order to see content from a different section of the app, the amount of taps is directly inverse to how deep you dug into the hierarchy of the current section.

If you use a navigation bar, you can switch between content sections at any point with a single tap. You’re able to dive directly into content as a starting point rather than forcing a user to make a choice. It occupies some space over the content, which isn’t the best, but doesn’t take up too much room.

The rate at which we digest information

If you are forced to display so many different types of content that tabs don’t make sense, a vertical list allows you to digest the information faster and allows more space for explanatory text. Zig-zagging as you read takes noticeably longer than reading a vertical list.

FacebookRdioFacebook and Rdio used to use a grid view in some of their older designs, but eventually learned the error of their ways and switched to the “hamburger/basement” combo (Facebook has since switched to a navigation bar). It’s the same content, but tucked away. The hamburger button/basement has become very popular navigation structure. It jumps right into the most prominent content at launch. It’s easy to digest. Doesn’t take up screen real-estate besides the hamburger button. It still suffers from the issue of a linear view hierarchy, but compared to a grid, this is still a much superior solution for apps with many different content types.

Apple doesn’t fight this navigation structure, but they’re not a fan of it. The hamburger button has a similar look to the resort drag-bars in iOS and they’re not big on taking multiple taps to get around.

Avoid cognitive overload.

Too much information is bad for you in the same way that too much food is bad for you — it’s great at the right quantities, but there is a point of diminishing returns. This is a pretty broad point that applies to pretty much everything in life, but it becomes especially important in this instance because of the nature of mobile.

AirplaneWe don’t let just anyone fly an airplane. There is enough going on in an airplane dashboard that it requires hundreds of hours of training and a license to use it. Part of the reason that an interface like this works for pilots is because they’re paid to make it work. You’re going to struggle to get consumers to pay for this experience.

Grids are the airplane dashboards of navigation structures.There are so many options that I struggle to know what I should look at. And when looking for a specific section, it takes me far too long. Be ruthless with what features you put in your app and make sure not to overload it. With your app, make sure to do fewer features with more focus.

Even outside of grids, be aware of cognitive overload. Research shows that there can be such a thing as too much choice, and when there is, consumers are less likely to buy anything at all, and if they do buy, they are less satisfied with their selection.

On one day, shoppers at an upscale food market saw a display table with 24 varieties of gourmet jam. Those who sampled the spreads received a coupon for $1 off any jam. On another day, shoppers saw a similar table, except that only six varieties of the jam were on display. The large display attracted more interest than the small one. But when the time came to purchase, people who saw the large display were 90% less likely to buy as people who saw the small display.

These studies are about consumer purchasing habits, but the psychology behind them applies directly to making apps: too much choice is demotivating.

Here’s another way to look at it: A simple experiment involving 165 grad students. They asked half to memorize a seven-digit number and the other half to memorize a two-digit number. After this, they were told the experiment was over and then offered them something to snack on: either chocolate cake or a fruit bowl. The participants who memorized the seven-digit number were nearly 50% more likely than the other group to choose cake over fruit.

From this and several other similar studies, the researchers came to one conclusion:  Willpower and cognitive processing draw from the same pool of resources. And from this, we can logically come to our own conclusion:

…or something like that. It’s bad enough that the aesthetics are a lot to take in, but overwhelming your user has effects that are larger than just how they experience your app.

…so don’t use grid views.



Image courtesy of Maarten van den Heuvel for Unsplash.

Chris Brummel

Chris Brummel is responsible for overseeing the user experience of L4 products. Chris takes projects from basic requirements, and forms them into fully-realized products, taking each platform's distinct differences into account. Chris has over 20 years of experience in UX/design, starting with the web and switching over to mobile after the iPhone's smartphone revolution in 2007. Since then, Chris has designed award-winning mobile applications that have reached millions of users, including Foursquare for Android.

Share this:

More Posts

Want Alerts When We Post New Stuff?
L4 Digital. All rights reserved. All wrongs reserved. © 2008-2017