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 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.
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 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.