Teaching users how your iPhone app works

An important and often overlooked aspect of iPhone application design is how to facilitate the understanding of an interface and its functionality the first time a user downloads and runs the application.  iPhone app designers aim to make an application intuitive and easy to use without relying on help or a manual to guide the user through how to use the app.  However, there are times when an interface is most effective and efficient to use once some initial behaviors are learned.

iPhone applications that introduce new, innovative interaction models or that allow the user to access a wide range of information or complete several tasks often use first-time use help screens to help users learn how an app works. Below is a look at six design patterns that apps have leveraged to introduce functionality to their users.

Demos:

A demo animates a series of screens showing the primary functions of the application.  This can come in the form of an animated walkthrough in which key interface elements are called out within each screen, or in the form of a short (up to 30 seconds) video demonstrating functionality.

Example: Convertbot

Tutorials

Tutorials allow the user to tap, scroll, and/or swipe through static images of the application that point out key interface elements and interactions.

Example: Pose

Single Screen Overlays

Single screen overlays serve to point out key interface elements in context of viewing a specific screen. The overlay is typically used to explain the use of 1-5 controls in a way that is quickly read and then dismissed.

Example: Pulse News Mini

Walkthroughs

Walkthroughs help users learn actions used throughout an application by guiding users to complete a task step-by-step. Walkthroughs help users accomplish a task quickly. By doing so, walkthroughs encourage additional application use and exploration.

Example: Shopkick

Tips:

Tips provide the user with descriptions of functions within an application. Tips are generally displayed one at a time, with the ability to optionally view additional tips. Tips can appear either appear immediately upon launch, or appear upon the user actively opening a tips screen or overlay.

Example: Evernote

Single Screen Summaries:

Single screen summaries are a very basic way of introducing what you can do on each of the app’s primary screens. An overlay containing a very short amount of text appears for a couple of seconds that describes what the screen represents. This overlay is typically only displayed once upon first visit to the screen and does not return upon subsequent visits.

Example: Instagram

Which pattern you choose to use to introduce functionality depends on a variety of factors:

• Are you describing a multi screen process? If so, demos and tutorials best introduce relationships between areas of the application.
• Are you describing controls and actions throughout the app? If so, a single screen overlay can best describe those controls in context of a screen.
• Do you want your users to discover lesser known functionality in the app? If so, tips can provide quick pieces of information without overwhelming the user.
• Do you want to engage users in the learning process? If so, a walkthrough can be a fun way of helping users complete a task.
• Do you want to provide a high-level overview of each of the main areas of your app? If so, a single screen summary or tutorial can provide quick clarification of the primary purpose of key screens in an application.

For more examples and details about each of these patterns, visit my article on the topic: “Top 6 Help Design Patterns for iPhone Apps.“