When the user first launches our mobile application, we would like him to go through a few steps explaining the main features/controls of the interface.

I see two possibilities:

  1. a series of stacked screenshots with text, like Gmail did for the new Gmail version a few months ago
  2. a series of overlayed bubbles that directly show the controls.

I believe in option #2 as I think it retains much more the user's focus. But others in the industry would argue for option #1.

What are your thoughts on this and which version do you think works best?


download bmml source – Wireframes created with Balsamiq Mockups


I would go with something along the lines of option 2 but a bit more user driven, reason being:

  • In-context knowledge should be easier to retain than upfront one.

  • It also adds a layer of interaction, rather than just clicking on Nexts, get the user to do the interactions. Makes a deeper impact - read a Math textbook vs. doing the examples along with it.

Mailbox has a similar walkthrough.

- List of other walkthroughs.

- Another list.

Dan1111 was kind enough to point this out: No matter what approach you take, always have a 'skip' functionality in place for allowing users to ignore the walkthrough.

| improve this answer | |
  • 4
    I think making it interactive is a good idea. It will take longer and be harder to click quickly through, though, so it would be good to have a "skip" option for users who don't want the tutorial. – user31143 Jun 12 '13 at 13:24
  • @dan1111 Good point about the 'Skip' function. – rk. Jun 12 '13 at 13:42

Based on you situation, option #1 will be slightly difficult to grab novice users' attention. Also, they will surely waste their time in understanding the tutorial itself.

On the contrary option #2 will always be more helpful as the user don't need that much effort in understanding what exactly is going on. So in this case, the user will be more confident to use the system as he is interacting with the system in the tutorial itself.

Expert users will always find one way or the other to use the app. It will always be better to have the novice/beginners to be kept in focus while designing the system.

| improve this answer | |

A big benefit of option 2 is that you don't need to read the text to know what tutorial is talking about. It's more visual and you exactly see where the controls are. It seems more engaging. Path iPhone app did something similar. I agree with @rk comment that it's good to add a skip option because users often don't want to go through any tutorials.

| improve this answer | |

The 2nd is better, i think. Not only because of user focus, but because users also starts to learn where each functions are. They will be able to recall it later.

Another useful place for small informative helps are empty lists/spaces. These are more tricky on mobile - besides that, that it's not really a first time guide, but a guide till the first usage of a function. This is one aspect how empty spaces can be useful (little more about this topic: http://tympanus.net/codrops/2013/01/09/designing-for-the-empty-states/)

Sidenote: I've seen a lot of on-boarding cards that are only there for marketing purposes. I don't like those - who wants to buy something without even trying it :) Another common problem with cards is, that even users who think they are interested will run through those and forget them almost immediately. The excitement of trying out a new application will reduce the learnability.

| improve this answer | |

Point #2 additionally, we should show only home page elements upfront and once user started using that a feature, appropriately we need to show more details tied to that features once he landed in that page, rather than showing all the details upfront in home page.

Assume an app has 2 items in homepage and a settings icon at top. We may show about settings and and other two icons. But after user starts using it and when he moves into feature A, on launch for the first time ,we need to give overlay.

| improve this answer | |

I prefer #2 but I generally ignore tutorials. Most of the time they point out the obvious, e.g. the gear icon is settings. Or worst, plain marketing. This usually infuriates me.

So bubbles should only introduce a new functionality. Plus making a usable app reduces this need for a tutorial anyway.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy