h1

Process Funnel at a glance

Site Genre: Pattern Group h

magnify imageFigureH1.1 Honda uses a process funnel consisting of several logical steps that guide customers to quickly configure a car with the desired options. Information in floating windows shows additional details but keeps customers in the funnel so that they can continue to completion.

Background

All Web sites that lead visitors through stepped tasks PERSONAL E-COMMERCE (A1), SELF-SERVICE GOVERNMENT (A4), WEB APPS THAT WORK (A10), and ENABLING INTRANETS (A11) need ways to help people succeed at completing the tasks.

Close

PROBLEM

Customers often need to complete highly specific tasks on Web sites, but pages with tangential links and many questions can prevent them from carrying out these tasks successfully.

buy the book to find out more

SOLUTION

magnify image FigureH1.3 A process funnel lets people complete their goals by breaking down complicated tasks into a small number of steps, using floating windows for detailed information, and including only critical links, so that people are not distracted.

Minimize the number of steps required to complete a task, keeping them between two and six. Remove unnecessary and potentially confusing links and content from each page, while reinforcing the brand to maintain a sense of place. Use floating windows to provide extra information without leading people out of the process funnel. Make sure the Back button always works so that customers can correct errors. Use high-visibility action buttons to make it clear how to proceed to the next step. Let customers skip steps that may be unnecessary. Prevent errors where possible, and provide error messages whenever errors do occur.

Other Patterns to Consider

Many kinds of Web sites use process funnels, including sites for PERSONAL E-COMMERCE (A1), SELF-SERVICE GOVERNMENT (A4), WEB APPS THAT WORK (A10), and ENABLING INTRANETS (A11). Customers use process funnels when they finalize purchases through QUICK-FLOW CHECKOUT (F1), when they create new accounts through SIGN-IN/NEW ACCOUNT (H2), and when they post new messages to a RECOMMENDATION COMMUNITY (G4), to name some examples. Remove NAVIGATION BARS (K2), TAB ROWS (K3), irrelevant ACTION BUTTONS (K4), LOCATION BREAD CRUMBS (K6), and EMBEDDED LINKS (K7) to ensure that customers stay on their paths. However, keep strong SITE BRANDING (E1) so that customers still know where they are. Design process funnels to PREVENT ERRORS (K12) by using CLEAR FORMS (H10) for each step of the process funnel and provide MEANINGFUL ERROR MESSAGES (K13) when errors do occur. Consider also adding a PROGRESS BAR (H13) that tells people where they are in the process and how much farther they have to go. Track your customers through PERSISTENT CUSTOMER SESSIONS (H5) to avoid problems with the Back button, and to save customer-entered information. Move extra content, such as CONTEXT-SENSITIVE HELP (H8) and FREQUENTLY ASKED QUESTIONS (H7), to FLOATING WINDOWS (H6) to keep the main task page on the screen. Make the next action visible by keeping it ABOVE THE FOLD (I2) and by using HIGH-VISIBILITY ACTION BUTTONS (K5).

Close

 

Pattern Resources

PATTERN COMMENTS

POST A COMMENT and/or EXAMPLE WEBSITE

You must be logged in to post a comment.