This Case Study has been Archived. It’s content is historically relevant, but some content may be out-dated. View the most recent case studies on the Case Studies page.

Tutorials

Background Information

Without clear instructions, touch-based interactions are not always visible to the human eye at first glance. To address this, many mobile applications add introductory swipe “tours” that walk you through how to do things using touch gestures. While it is helpful, it is perhaps not the best way to capture the user’s attention or to enable the user to remember how to use the screen when they get to it later on in the app.

Most users skip over intro tours to get to the core of the app as quickly as possible. In addition, most users rarely remember what they were supposed to learn during the tour. Both these issues stem from that fact that introductory tours show up before you ever get a chance to use an application. Most people are eager to jump right in and as a result, they skip reading the manual. The ones that do read haven’t seen the interface yet so they don’t necessarily always have any sense of where and how the tips they’re learning will apply.

At the MCoE, we believe that instead of trying to teach everything up front and all at once, teach in the moment when specific information is actually useful. This is what we call “Just In Time Tutorials.” There are several types of “Just In Time Tutorials” we will review in this case study. These include: Multi-step, Overview and On-demand tutorials.

Overview Format

Below are sample screens illustrating a “Just In Time” tutorial we created for an HR IT Orientation App for new employees at KP. In this sample, we used an overview tutorial that featured more than one tip on the screen.

Step One

Tutorial Case Study Overview Sample

Since all the tips involved short annotations, it was possible for MCoE designers to feature all content on one screen.

Step Two

Tutorial Case Study Overview Sample

Once the user has tapped “Got it” on the previous screen, the tutorial fades away what is behind.

On-Demand Format

It may be that some apps involve a high amount of features that require clarification or further explanation. To address that, the MCoE design has employed “on-demand” tutorial links in the form of a “?” symbol. This provides users the ability to tap as needed on the areas of the app where they need more explanation as to what the feature is.

Step One

Tutorial Case Study On Demand Sample

On-demand tutorial links provide a great solution for apps that involve a high number of features that require educational guidance for the user.

Step Two

Tutorial Case Study On Demand Sample

When tapped, a modal window can be used to provide tutorial content to the user.

Multi-Step Format

Below are sample screens illustrating a “Just In Time” tutorial we created for a Medical Product Information App. The tutorials illustrated in the design samples below appear when clinicians sign on for the first time and access the home screen. The app delivers the educational materials only when the user lands on that specific screen. In order to proceed and use the app, the user must tap to proceed to next steps and exit. They can also skip the tutorial at anytime.

Step One

ProductScan Tutorial 1

In this sample users are presented with a detailed explanation of what the feature on the screen can do. Because this is considered an important feature to the users of this particular app, it is showcased by itself on the screen. When ready to move on, the user simply just needs to tap “Next Tip.”

Step Two

ProductScan Tutorial 1

The above sample employs a dark transparent mask to help push back the background and out more emphasis on the feature that is being highlighted.

Step One

ProductScan Tutorial

Once the tutorial is completed, the app screen is restored to its original condition so that users can process the transition and not forget the tips that were presented to them.

Step Two

Users can always go back to access tutorials through the “More” or “Settings” screen.