Product Tours

"What makes people passionate, pure and simple, is great experiences. If they have great experience with your product and they have great experiences with your service, they’re going to be passionate about your brand, they’re going to be committed to it. That’s how you build that kind of commitment." – Jesse James Garrett

Cloud application developers would all like to think that their user interfaces are intuitive enough for people to understand without external guidance. But in the real world, as the application feature set grows in number and complexity, unassisted discovery and explanation of these features can become a problem.  In complex applications it can be common for technical support to receive an enhancement request for a feature that already exists because the user either couldn't find it, or didn't understand it's purpose. So a primary challenge that all Cloud application developers should take seriously is making sure that people understand how to use their products.  

One approach to helping users understand how to use a product is to provide product tours that enable the user, at their own pace, to discover the product.  Product tours don't have to be monolithic tours of the entire product but can be more granular feature tours or concept tours made available to the user when feature or concept explanation is needed.


Check out this product tour example at easel.io. Easel.io is an online web site designing tool that enables designers to design in a browser which is a sure way to ensure pixel perfect execution.  It uses modern tools like web fonts and CSS3 but doesn't require the designer to shift back and forth between a text editor and the browser.  Other team members, like Product Management, can stay ahead of the next sprint by using the tool to  prototype the next feature.  Easel can can import elements from an existing site so it's possible to make a pretty good clickable prototype and test it all without the help of an engineer. And developers can just export the designer’s actual choices for pixel dimensions and colors and eliminating the work of turning an image into a website.This is a pretty complex design tool but as you can see if you visit their demo, the Product Tour lets the user explore at their own pace, and hand holds the user through actually using the product to build a page. Simplicity may be embedded in your design but until the user "get's it" the user won't be able to use your product effectively.

There are four fundamentals of effective product tours:

1. A product tour is a journey, not a destination - each step in a product tour should build on the previous step move the user down the path to understanding.

1. One bite at a time - each step should highlight one important aspect of the product or feature that is easy to digest and understand.

1. Don't make me think - the tour should take perceived complexity and make it brain dead simple.  After all your  UI is elegant and simple why would the explanation require the user to think.

1. Short and to the point - the overall tour should be succinct and deliver key points for the user to understand.  Respect the user's time and break up monolithic tours into multiple tours.

There are 2 great product tour libraries for Bootstrap, one is BootStrap Tour and the other is HopScotch.  Each has it's own product tour that explains the features and capabilities so check them out.
There are also other techniques of presenting product tours using slides and videos.  Check out "Seven Exceptional Product Tours, And the Best Practices They Teach Us" by Morgan Brown.