5 Secrets of Good UI Design from Apple’s Human Interface Guidelines

It’s always boggled my mind that Apple is able to release products like they do. And we love it. While other tech companies release products into stores with a press release and a marketing push, Apple holds an event where they hand something down from the mountain, and almost always, it redefines everything.

With the exception of their recent launch of Apple Maps, which is admittedly a turkey, Apple has always been renown for making beautiful, easy to use programs and apps. It’s one of their greatest advantages over the Windows environment.

There’s something in the clarity and simplicity of how they present programs that is very appealing.

Pictured: Apple Maps running on an iPhone 5

As it turns out, this is by design. There’s a reason that Apple can maintain consistency across their programs and apps. A lot of it has to do with their Human Interface Guidelines. They publish guidelines for both OS X programs and iOS apps.

I was cruising around their guidelines for OS X earlier today and it dawned on me that the advice contained in the guidelines shouldn’t be limited to OS X programs. We should be incorporating them into our website.

In particularly, their Philosophy of UI Design is incredibly enlightening. Here are 5 incredibly good pieces of advice from Apple’s guidelines for achieving greater message clarity in your website or on your web app.

5. Use the Established Mental Model

When users get on a website, they already have an expectation of what will be there based on their previous experiences with other websites. When users go to your website, they want it to conform enough to their mental model that they can make sense of it. There are four factors, according to Apple, that influence this model:

  • Familiarity – This is based on the user’s prior experience with other similar websites. But it also extends to common conventions that you might use (such as a portfolio of photos).
  • Simplicity – Apple wants to convey that its programs strive to be simple in how they complete their tasks. Don’t muck up the main idea with a bunch of details. In web design, I would say that the goals is to make your critical path clear and obvious.
  • Availability – Availability is a companion to simplicity. The idea here is to meet the user with what they need when they need it. Don’t bury an important piece of data (say, shipping rates) when they’re critical to the user (on the product description page). A place for everything and everything in its place.
  • Discoverability – Discoverability is making it possible for users to understand what is clickable and to encourage them to interact with your site using visual cues. For example, well designed menu icons can be really good aids in helping people understand how to navigate your website’s content.

4. Understand Explicit and Implied User Actions

This is a great idea to understand but takes a minute to see how it applies to websites. The main thing to grasp is the difference between explicit and implied user actions. An explicit action is a direct action taken by a user: they click on a link or enter a value into a text field. This is a really straight-forward concept.

Implied user actions are ways of interacting with the site symbolically. For example, in WordPress an EXPLICIT user action would be to use the Browse feature when uploading a photo to find the desired photo. The implied way of doing the same thing would be to drag and drop the image icon onto the upload screen. The action implies that the user wants to establish a relationship with the two items.

When developing your website, be sure to use the most appropriate models for encouraging user actions.

3. Encourage Direct Manipulation

Direct manipulation can be thought of as letting the user be “hands on” with your products/services. Strictly speaking, this means encouraging implied user behavior through direct action. A good example of this can be found in an online clothing site. Dragging-and-dropping fabrics on a model is an example of Direct Manipulation. This is different from merely clicking on the swatch, which is just fine but would be classified as an Explicit Action.

2. Let the User Be In Control

Your website, ultimately is a designed interaction. It’s designed for a user to have a specific type of experience. (Well, if it’s based on User Centered Design principles, anyway…) But for many kinds of websites, there’s more to it than a simple sales funnel. The more complex the interaction between the user and the website, the more control needs to be ceded to the user. The site is meant to support the decisions of the user and to help them avoid dangerous, unwanted actions (such as data loss).

SaaS websites fit into this paradigm quite nicely. Sites like livestrong.com, mint.com, or content driven sites like huffpost.com thrive on giving their users control over what they see and how they manipulate data on the website.

1. Encourage feedback and communication

This is NOT the kind of feedback and communication you’re thinking about. And yes, we do think that creating a feedback loop between yourself and your users is a good idea. But in this instance, what Apple is talking about is having your website (program/app) subtly give feedback and communication cues. For example, when an action takes a period of time there’s a loading bar with a description of how much time is left (less than a minute remains…). On a website, breadcrumbs are a great way to give the user subtle feedback on where they are in the website.

You don’t need to over-do it but consider this: with HTML 5, developers can make really responsive application feeling websites. Don’t think of the bells and whistles but think about how subtle usage of feedback mechanisms (such as buttons that “click”) should be an integral part of your design strategy.

Read 5 MORE Secrets of Good UI Design from Apple’s Human Interface Guidelines.

4 comments on “5 Secrets of Good UI Design from Apple’s Human Interface Guidelines

  1. Pingback: BUX Podcast #59: My Viral Content Experiments Revealed | A Better User Experience

  2. Pingback: 5 MORE Secrets of Good UI Design from Appleā€™s Human Interface Guidelines | A Better User Experience

  3. Pingback: BUX Podcast #72: The Top 10 UX Articles of 2012 | A Better User Experience

Leave a Reply