Good examples of in-app tours/tutorials/walkthroughs on Android or iPhone

Question

For my Android app, I currently provide users with an introductory tutorial on a separate Web page. It includes screenshots and is easy to read, but it's still a separate document that is best read on a full-fledged computer. I'd like to integrate these instructions into an in-app tour/tutorial that steps new users through the functionality. I'm thinking a series of pop-up alerts or bubbles with arrows to point out different parts of the interface.

A general question: Are there any Android and/or iPhone apps that you can recommend as nice examples to look at?

A specific question: What sort of UI components would be best to use in Android? Toast's and AlertDialog's are kind of ugly. Perhaps I should somehow skin a Dialog?

Solution 1

On iOS, Tapbots puts together some really nice demos - depending on the app, they've done animated walkthroughs and more guide-based stuff.

There are a few sites that I heard about yesterday that include examples of walkthroughs on iOS. Mobile UI Patterns and pttrns.

Solution 2

I was searching for a similar examples and took me a while to find this resource:

top 6 help design patterns for iphone apps

BTW, I have no affiliation with the above site :)

Solution 3

Huge number of walkthrough screens you can find at http://inspired-ui.com/tagged/walk_throughts

Solution 4

You mention having a manual, but that it is best read on the desktop. In my experience, an in-application HTML manual (one that doesn't require a network connection to read) can work well in a mobile application.

If you use styling that's appropriate for a mobile device (a narrower page width, screenshots sized to the device display, quick links at the top of each manual section, etc.), a manual can be just as easy to read within the application as it is on the desktop.

For example, this is the manual that I bundle within an iOS application of mine, using a web view that loads the local HTML, CSS, and images to display this without going out to a server. I've used a style that fits well with the screen size of an iPhone, or that can appear in a nice popup on an iPad. Similar formatting would also be applicable to most Android devices.

Many more users of my application have read this manual than any other documentation I've shipped with a software product. I prompt them on the first launch of the application, so they know where the manual is, and they seem to read through when they hit a problem. I've had far fewer people writing me who didn't understand how to do something in this application than I anticipated. Also, the contact page I placed in the documentation seems to have encouraged more users to write with comments and suggestions than for other similar products that don't have this kind of manual.

I'm now looking at incorporating this kind of documentation in my other mobile applications.

View more solutions