Advertisement
Mobile Design

8 Design Tips for Educating App Users

by

Mobile design is a constant struggle for simplicity. With so little screen space, it can be very challenging to pack the necessary functionality into the design while still keeping it streamlined and intuitive. In order for your users to get the most out of the application, you sometimes have to plant subtle clues or even build a feature walkthrough to show how things work. This tutorial will show you examples of how to do just that!

Tip #1: Create a Setup Wizard

If your application functionality is heavily dependent on user input, one great technique is to launch a Setup Wizard that will collect information from the user the first time the application is opened. By creating a custom setup wizard, you can make the otherwise boring process of filling in meta-information more creative and fun.

Setup Wizard Figure

Tip #2: Offer an Application Walkthrough

By allowing users to independently launch a walkthrough or guided tour of what your application has to offer, you can quickly point out the key portions of the screen that the user should be keeping an eye on. Creatively placing dialogues or highlights directly over the actual application interface can remove a lot of the guesswork from your UI and make it instantly usable.

Walkthrough Example
Walkthrough Example

Tip #3: Overlay a Help Screen

Similar to offering a walkthrough, a simple help screen overlay can quickly show users what's important on the current screen. Gestures used for navigation / interaction and UI controls can also be explained. A simple tap dismisses the screen and takes user back to the app.

Help Screen Example
Help Screen Example
Help Screen Example

Tip #4: Use a Full Help Screen or Popup

For all the merit of the help overlay, sometimes it's still appropriate to use an old-fashioned help or F.A.Q. screen. This technique is especially appropriate if initially displayed at start up in place of a setup wizard. Either way, use just enough text to clearly get the instructions across or answer the question. Keep it simple!

Help Screen Example

Tip #5: Show the Big Picture

Providing a visual, high-level overview of the application can be invaluable to the user experience. This approach can also explain things like "Offline OK", which are difficult for the user to know by themselves.

High Level Overview Example

Tip #6: Add Placeholder Content

When a user lands on a screen with no content, make use of the empty space to explain what they should do next. Highlight the UI controls that can be used to add content either by arrows or big, huge buttons.

Placeholder Content Example

Tip #7: Highlight New Features

When new features are provided to users who are already familiar with your app, consider highlighting what has changed since they last loaded the content. The screenshots below show some neat ways to highlight changes. In the first example, the entire focus is on the new feature that has been added. In the second example, the highlight is inline, but stands out enough to differentiate the new content from old.

Highlight New Features Example

Tip #8: Point Out Premium Features

The following screenshot is a good example of how to tactfully point out premium features of a "freemium" app. The app uses a clearly noticeable tip, placed contextually and shown only every now and again:

Point Out Premium Features Example

How To Use These Design Tips

The screenshots above demonstrate how the experts have solved a particular problem. There is no need to reinvent the wheel. If one of these patterns works for you, use it! However, it is important that you don't start throwing in these techniques just because you can. Try to really understand the mind of your user, and then use the design techniques that will help them get the most out of your app!

Related Posts
  • Code
    Android SDK
    Common Entry Points for Android Applications5d7z4 preview image@2x
    In this tutorial, we will provide an overview of common entry points for Android applications. These entry points will focus on ensuring that your application maximizes its utility to the user.Read More…
  • Web Design
    Roundups
    Improve Your Web Design Workflow With Mac Computer Skills TutorialsMac computer skills roundup thumb
    Though the Web Design section here at Tuts+ is your home for all resources concerned with this fine art, we're joined by literally thousands of other tutorials on alternative topics. Many of these are pretty relevant so, in this roundup, we're going to take a look at some posts from our Mac Computer Skills section to see how they can help refine the workflow of Mac-equipped designers.Read More…
  • Code
    Mobile Development
    An Introduction to App MarketingHub
    Marketing is just as important as the development of your product. Marketing your application helps build an audience, which in turn offers you the opportunity to generate revenue.Read More…
  • Code
    Android SDK
    Android SDK: Common Android ComponentsAndroid preview@2x
    In this series we are learning the essential features of Android development that you need to know to start building apps. So far, we've looked at the structure and typical elements in an Android app, including user interface elements and data storage. You can use what we covered already to start creating your own apps. But before you do, we will run through some common Android components in this tutorial, then have a quick look at the SDK samples in the next tutorial.Read More…
  • Web Design
    Design Theory
    Responsive Web DesignDsfd rwd retina
    Unless you’re totally new to the industry, or you’ve been living under a rock in the faraway lands of another planet, you’ll have heard about responsive design. Even if you don’t understand it fully, it’s bound to be something you’ll have come across or interacted with in some way or another.Read More…
  • Computer Skills
    Productivity
    How to Become an OS X Screenshot WizardScreenshots400
    Whether you know them as screen dumps, screen captures, screenshots, screen grabs or print screens, the process of capturing the visual information — displayed on the screen of your Mac — is a relatively straightforward process …once you know how. In this tutorial, I’ll show you how! I’ll look at ways to, easily, capture screenshots on your Mac using a little known utility on your Mac, using keyboard shortcuts and by using a third-party developer app.Read More…