by anthony on 04/25/11 at 11:10 pm
How you design your call to action buttons can affect whether users click them or not. Most designers focus on how their call to action buttons look. But where you place your call to actions is also something you should think about.
This is because users view home pages in a particular pattern. The home page focal point is the large center area that users first see when they enter your website. It dominates the top fold of your home page and holds your call to action. When you place your call to action in the area where users look last, you’ll get users to click your call to actions more often.
Gutenberg Diagram: Terminal Area
A home page focal point often has a product image, headline, supporting text and a call to action button. Users will look at your headline, supporting text and product image to learn about your product.
However, after they’re done learning about your product, they need to see your call to action button so that they can take action. Putting your call to action in the terminal area makes it quick and easy for users to click your button because it’s in the area where their viewing pattern ends.
The terminal area is the bottom right area of your home page focal point. It comes from the Gutenberg diagram, an age-old concept developed by Edmund C. Arnold. It’s commonly used to optimize displays that have a limited number of elements.
It divides your display into four areas. The primary optical area is at the top left, the strong fallow area at the top right, the weak fallow area at the bottom left, and the terminal area at the bottom right. The user’s eyes naturally begin at the primary optical area and move across and down the display in a series of sweeps to the terminal area.
A button in the terminal area is a compelling call to action because it’s placed at the end of the user’s viewing pattern. When it’s at the end of their viewing pattern, users don’t have to look around to find your call to action button. Putting your call to action button in any other area could get you clicks, but not as effectively as putting it in the terminal area.
Left vs. Right Call to Actions
There are many home page focal points that put their call to action buttons in the bottom left area. This is the weak fallow area that users pay the least attention to. Users may sweep their eyes across your call to action button, but they won’t fixate on it for long.
When the user finishes viewing and ends at the terminal area, they have to move their eyes back to the weak fallow area to click the call to action button. This not only forces users to move their eyes more, but going back to the weak fallow area is an unnatural movement that goes against their viewing rhythm. Call to actions belong in the terminal area because they’re the last thing users need to see to take action.
The example below arranges the home page focal point elements perfectly. The headline, which users read first, is in the primary optical area where users first look. The supporting text, which users read after the headline, is in the strong fallow area, where users move their eyes to second.
The product image, which users look at after they read, is in the weak fallow area. This is the best spot for the product image because images tend to get longer visual fixations. Placing it in the weak fallow area means that the image won’t get fixated on too long over other elements.
Each element is efficiently placed so that it follows the user’s natural viewing pattern. A call to action in the terminal area makes it quick and easy for users to take action.
The difference between a left and right call to action may only seem like its placement. But when you look deeper, where you place your call to actions can affect whether users click them or not. Knowing this will allow you to promote and display your product in an efficient way that makes users act.