Follow Along Tutorials

Adobe is experimenting with follow along tutorials making them integral part of the interface both on desktop and table applications. In Photoshop for iPad the landing page features a set of tutorials introducing to the main features of the application.



I don't like reading help or documentation, and my style of learning, as the large majority of people, is more example based. Follow along tutorials are a very effective way to learn even the most complex tools.
When a tutorial first introduces a feature it often point to its location in the interface.



On the iPad the screen is pretty limited, and Adobe was able to fit the entire UI required for the follow along tutorial in one narrow bar on the bottom. Relevant, but not essential information is displaying it in form or tips in the context of the specific step.



The bar on the bottom displays the current step, enable to jump to adjacent steps and provides the access to related tips.



Adobe adopts a similar strategy in one of its newest product: Edge. Edge is a tool for creating interactive motion content for the web using HTML5, CSS3, and JavaScript. The start-up page features the main tutorials.



After selecting  a tutorial a Lessons panels appears on the right and it displays the follow along steps.



After completing a tutorial the panel displays the list of all tutorial, enabling the user to select the next one.



Follow along tutorial is a very powerful and effective tool for many different types of applications.
This approach can be applied to the more diverse problems. Below and example of this strategy applied to teaching a coding language.

Posted in: help