Showcase: Three Examples of In-Application Guided Tours
It seems that everyone is using in-application tours these days. But because in-app tours are so unobtrusive, you tend not to register it unless you explicitly look out for them So when someone asked a question on Quora asking for examples of sites which use tours, I thought of doing a small showcase of tours used by popular web applications.
There are many more products that use in-app tours than just these three, but this post was getting too long. Perhaps future posts will show more examples.
So then, here are three examples of in-application tours collected from Facebook, Google Maps and Flickr.
An obvious candidate, because Facebook uses tours everywhere. If you haven’t noticed how often they use tours, it is only because they do a pretty good job of fitting them within the site.
Here is a tour that Facebook ran for Page admins when switching to the Timeline layout.
Step 1: Facebook shows a button from where you can start the tour
Step 2: A nice touch is how Facebook gives the option to change the cover photo right away
Step 3: Each step of the tour points to the relevant element
Step 5: When talking about multiple elements, Facebook shows the icons within the message box so that the viewer knows exactly which element they are talking about.
This tour from Google Maps is an example of an interactive tour. While the Facebook Timeline tour shown above took the user through a series of message boxes, Google’s tour in Maps makes the user perform certain actions and only proceeds to the next step after the action is completed.
Step 1: Google Maps has a link that starts the tour
Step 2: The tour starts with links to the four main sections of the tour, in case you are interested in a particular feature alone
Step 3: Part 1 of the tour teaches how to do a basic business search
Step 3a: This isn’t a separate step, but a part of the previous one. Notice how Google uses yellow brackets to highlight the element that the message box above is talking about. Personally, I found that the yellow border was not prominent enough and easy to miss, especially with a lot of yellow on the screen. I preferred Facebook’s method of having the box pointing at the element.
Step 4: Once you search, you proceed to Part 2, which is street view. Over here, Google uses a separate pointer box to point at the element.
Step 5: Once you enter street view, the box tells you how to navigate the view
Step 6: Now we enter Part 3 of the tour – using the Directions feature
Step 7: Like Facebook, Google embeds the icons into the message box so that it is easy to correlate the message with the UI
Step 8: Part 4 of the tutorial is about changing view modes
Step 9: The tour wraps up with the sharing feature. (Did you notice the yellow brackets?)
When Flickr updated their uploader, they launched it along with this tour. Flickr chose to go with a fixed progress bar which controls the tour, and message boxes to highlight elements on each step of the tour.
Step 1: Welcome message when you enter the new uploader
Step 6: Wrap up