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.

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.

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.

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!

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.

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.

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.

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:

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!