Walkthrough

The Walkthrough pattern is a method to provide a tour of an application. It is a static tour that usually shows screens or features used within the application in a few steps. The walkthrough is displayed just before or after the user signs in or signs up.

Appearance

Appearance characteristics for this pattern.

• Layout: On phones, the walkthrough usually displays on the entire page. On tablets, the walkthrough displays on the entire page or in a popup.
• Orientation: Horizontal orientation, where the user swipes left and/or right, is the most common.
• Dots: Pagination dots are centered below the content of the walkthrough. The selected dot shows what step of the walkthrough the user is on.
• Skip/Cancel: Optionally, a Skip or Cancel button/link is used to dismiss the walkthrough. 'Skip' is often used on phones, while 'Cancel' is used in a popup on tablets.
• Navigation: Instead of using a swipe gesture, 'Next' and 'Back' buttons can be used to navigate the walkthrough.
• Sign In/Sign Up: Optionally Sign In and/or Sign Up buttons might be used on the walkthrough pages.

Behavior

Common behaviors for this pattern.

• Swipe: The most common method to navigate a tour is using swipe gesture. Swipe left to go forward, and swipe right to go backward.
• Buttons: A less common method to navigate a tour, is to use buttons, links or icons to go backward and forward.
• Popup: Tapping outside a popup will usually close it.

Usage

Usage guidelines for this pattern.

• The walkthroughs automatically shows on first launch of the application or the first time after an update, which may include major changes or new features in the application.
• Walkthroughs usually progress in a sequential order either backward or forward.  Users don't usually jump ahead on the steps, unless there is a Skip button or link.
• Usually there are about 4 to 7 steps in a walkthrough that cover key concepts of the application.
• Avoid long, step by step walkthroughs. If you need a long walkthrough, think about design, layout, and flow in your app. Is your app really intuitive when you need to display such a long walkthrough?
• If you really need a long walkthrough, it might be better to present users with a video rather than a big number of steps they need to go through.
• Make sure there is an option in your application for showing the walkthrough again.

Related

• Used On: Phone, Tablet
• Also Called: Demo, Tour, Tutorial
• Related Components: Conveyor, Filmstrip
• Related Patterns: Modal View, Sign In, Overlay, Wizard
• Resources: JET FixItFast Demo