k5

High-visibiltiy action buttons at a glance

Site Genre: Pattern Group k

magnify imageFigure K4.1 Nordstrom‘s key checkout button is visible both above and below the fold, so customers can always see how to proceed to checkout.

Background

This pattern assists in the completion of PPROCESS FUNNELS (H1) and QUICK-FLOW CHECKOUT (F1). To help customers finish tasks, put ACTION BUTTONS (K4) and other critical information ABOVE THE FOLD (I2) and create OBVIOUS LINKS (K10). If your pages are longer than a screen, this pattern describes how to handle ACTION BUTTONS (K4) in a way that makes sense for your customers.

Close

PROBLEM

People can easily be derailed from completing a task if the next step is not obvious.

buy the book to find out more

SOLUTION

magnify image Figure K5.2 Task-critical action buttons should be distinct and appear near the top of the page, as well as below the fold, so that customers always know how to complete their tasks.

On every page that is part of a process

1. Provide your action button(s) right below the top navigation bar, tab row, or progress bar.

2. If critical content cannot be placed above the fold, repeat action buttons at the bottom of the content.

3. Make action buttons larger than all other buttons on the screen, and give them a color that contrasts well with the background color. Choose button labels that are descriptive and different from the names of other buttons on the page. Make the buttons that move a task forward the largest ones on the page.

Other Patterns to Consider

Use ACTION BUTTONS (K4) to make buttons highly visible. Place these buttons both ABOVE THE FOLD (I2) and below it. Put the button at the top near the NAVIGATION BAR (K2) or TAB ROW (K3). Use FAMILIAR LANGUAGE (K11) and DESCRIPTIVE, LONGER LINK NAMES (K9) for button names, and make sure each is different from other links on the same page. Use the same image at the top and bottom of a page so that you have a LOW NUMBER OF FILES (L1).

Close

 

Pattern Resources

PATTERN COMMENTS

POST A COMMENT and/or EXAMPLE WEB SITE

Sign in Form

(required)

(required, but not displayed)

Have a idea for a new pattern group? Join our disscussion on new pattern ideas.