The Apple Human Interface Guideline That Every App Ignores

Why We Care and Why You Should Too

We wanted to share some of the learnings we’ve discovered while building Free Time, a calendar app you’ll see featured a few times in this article.


Why Apple Dislikes Your App’s Launch Image

From the beginning of the App Store, Apple has consistently promoted the idea that an app’s launch image (the initial screen you see whenever you launch an app) needs to be an intermediary screen and nothing more. Take this quote from Apple’s Human Interface Guidelines (emphasis added).

A launch file or image provides a simple placeholder image that iOS displays when your app starts up. The placeholder image gives users the impression that your app is fast and responsive because it appears instantly and is quickly replaced by the first screen of your app.
Launch Images, Apple Human Interface Guidelines

The trouble is, pretty much everyone (myself included) ignores this guideline. If you’re curious how common this is look at the cover image above or kill all of the apps that are running in the background and launch them again. I’m pretty sure you’ll find a large majority that don’t follow Apple’s guidelines.

What’s worse is that most app developers probably agree with Apple’s advice (who doesn’t want to “give users the impression that your app is fast and responsive”) but in building apps it’s all too easy to look past this guideline in favor of delighting a first time user with a great looking launch image and a fun initial animation. Even in my consulting work, the launch image is a perfect outlet for more brand promotion and our clients love it.

Some app developers (again myself included) took these entry experiences one step further with animations and videos. I built this launch sequence for the first version of my calendar app Free Time, back in 2010. We were pretty proud of this:

Free Time Onboarding Animations in 2011

If you watch the video you’ll see a nice intro animation that a lot of people really liked, the first time they saw it. What you won’t see is that every time you launch the app afterwards, it will always show those clouds and the Default.png first and then transition to the app’s interface— while it was cute at first, it very quickly lost its appeal.

Branded launch images and animations only get in the way and waste time

Apple is right, we shouldn’t disregard their guidelines, because these branded launch images are at best cute and fun at first then annoying and at worst take significant time away from real people using our software (see below).

This isn’t just something apps built back in 2010 still do, this is happening today in 2015. Take for example, Food Network’s latest app update (they were just featured by Apple a few weeks ago so it’s fair game to pick on them).

This video comes up every single time you load the app (and it is roughly 5 seconds long)!

After regular use, I even started to feel that this app was incredibly slow, but I knew that deep down it was a well-made app (built by the fine folks at Bottle Rocket in fact). The App Store reviews reflect this as well (~4.5 Stars last time I checked) but there is SO much wasted time here.

Fun thought exercise: at 5.5 seconds per load (~3 loads per week), and a million people using the app regularly, humanity will lose more than 820,000,000 seconds in the next year.

Food Network’s app will waste 26 years of human life in the next 12 months.

Finding a Cure for the Branded Launch Screens

For years I didn’t really care about Apple’s Launch Image guideline, but now I do, because we found an easy and fun way to get the best of both worlds. A world where the brands can get their branding, and Apple can get their boring launch images (and yes they know they are boring):

If you think that following these guidelines will result in a plain, boring launch image, you’re right. Remember, the launch image doesn’t provide you with an opportunity for artistic expression. It’s solely intended to enhance the user’s perception of your app as quick to launch and immediately ready for use.
Launch Images, Apple Human Interface Guidelines

Here’s a video of the onboarding animation we developed. Our goals were fairly straightforward:

  1. Get the permissions we need (for calendar access and notifications)
  2. Get out of the way (some onboarding experiences can be such a drag)
  3. Delight a first time user but still appease the Apple UX gods and follow the rules.

After a lot of iteration this is what we ended up with:

The trends in flat UI design now more easily allow apps to provide an initial branding sequence even with a launch image that follows the human interface guidelines.

In prior versions of iOS, thick gradients made this tough but now a flat navigation bar can easily expand and double as a canvas for an app’s onboarding. Using animation nav bars or tab bars can easily expand outward to take over the screen and then recede back out of the way for the actual app experience.

Even better, this doesn’t feel clunky or forced, it feels completely natural.

Below is a diagram of what users will see on first launch and then every other time they open Free Time.

So Here’s The Cure?—?Just Follow These Four Steps:

  1. If your app has a top navigation bar or a tab bar (we’ll assume a top nav bar for now), use a solid color and create a plain launch image that abides by Apple’s rules.
  2. On first launch, expand and animate that bar downward into the view to create an “onboarding canvas”.
  3. Insert tasteful branding (key word tasteful), ask for permissions, welcome people to your app, then get out of the way quickly.
  4. Animate that canvas back up into the nav bar and fade to the first screen of your app.

Your users will be delighted and on subsequent launches, they won’t notice anything, but they just might have an imperceptible feeling that your app isquick to launch, and immediately ready to use.

Win. Win.

Posted by Ben Johnson on Medium