Consider one of the most compelling and confusing parts of online economies — once someone finds your website, what exactly will they choose to do with it? With a little clever planning, the answer is: whatever you want them to.
Let’s say you’ve have visitors flocking to your website. They’re looking everywhere, at all your pages. Now what? You need to create a clear Action Path. Your Action Path is subtle and precise visual cues that take your visitors by the hand and lead them through your information, to the golden shopping cart, subscription plan, or a download on the other side.
To continue the conversation from my post on customers and traffic, I am tackling how to design your pages to make a clear Action Path for you visitors.
What elements can affect how visitors use your site?
- Size – Letter size, page size, element size on page
- Words – What you say and what the words look like
- Color – Whether something matches or contrasts the general color scheme
- Images – Pictures, graphs, and photos
- Spacing – Total visual design
The first three properties, size, words, and color, can be, in at least one sense, summed up in a single example. The following example contains 6 ways to indicate what your visitor should be paying attention to, and consequently what you want them to do:
As you can see, it is very easy to pick out the sections that are different from the normal presentation of font, size, text block, etc. By using small instances of difference (e.g., text changes), you can ensure that visitors notice important points. In addition to the above application, all three properties have other meanings. All can have a larger context that applies to the use of space.
Using Space to Make Customers
Design of space is one of the most powerful factors in influencing how we use websites. What we put on the page and where we put it has strong effects on the likelihood that any given user will engage in the manner we intend. The first rule for designing Action Paths is don’t make them scroll to find actions. It is okay to make the first step in the path scrolling (e.g., long form ads), but you have to make a clear indication that the payoff is coming. According to OneStat.com, more than 80% of Internet users in 2007 have a screen resolution of at least 1024 x 768. This means that you have more space to work in than ever before. Start by thinking of your space as a whole. You have two ways to split your space:
Left and right: this division is the result of reading pattern; the western world starts on the left.
Top to bottom: So far as I can tell, we all start on the top.
When you bring these two perspectives together, you should get this:
Even though you want to believe in the above picture, that is not what will happen. Just because you can legitimately and effectively design around the first two, that does not mean that you will ever see results that approximate the last image. But why don’t the two effects stack? The simple answer is that elements of design supersede text elements. Or, to put it another way – pictures are more important than words. In the split second that we take to assess a page, we do not consider what the page says. We take in scattered bits of data: are there headings, pictures, search box, links, and finally, what are these things? In a space that is only text we get the infamous Golden Triangle, where attention dies as it descends the left column and 50% visit the upper right quadrant.
In more complex arrangements attention is more complicated, like this one with an orange train:
Here is a post about how pictures affect conversions if you want some specifics.
Let’s stay focused on how elements of design affect attention. You can see from the pages above that images and white space have a drastic effect on where visitors focus. The gap between organic and paid listings stops 50% of viewers on Google search results. The train image diverts so much attention that it increases the number of viewers that look into all four quadrants to 60%. The reason that an image can push attention is that we do not perceive images consciously; we absorb them on a level that is more like whether it is day or night. Design provides context for the rest of the content on a page. The first step in designing a landing page is deciding how you will move visitors through the page. To control the action, I recommend focusing on four elements of design:
- Repetition
- White space
- Color
- Balance
Repetition
By creating a noticeable pattern you create an expectation; visitors can quickly become comforted by pattern. Pattern can be a number of things. Pattern can be lists, pattern can be title content title content, and pattern can be tabular data. One of the most powerful types of pattern that you have on a website is adhering to web standards like blue underlined links. Web standards comfort people because they know what they are meant to do immediately. Conversely setting up a pattern and breaking it indicates that the non-standard portion is special, more important.
White Space
When you leave sections of your design empty you create a space that visitors do not use – pushing their attention into the other sections of the page. White space is the space between columns, the space around images and the space between text blocks. Many visitors are put off by a solid, busy presentation; giving them space gives your design an easier flow.
Color
Color is useful not only to set the tone of your page, but also to call attention to specific sections. Setting your call to action in red, or a color that contrasts the general scheme of the page, focuses visitors.
Balance
Balance is not the same thing as symmetry. When you are trying to draw attention to specific actions it is sometimes better to create an asymmetrical space. Images and white space are the easiest ways to accomplish this.
Putting it All Together
To end on a light note, my favorite example of a clear Action Path is the Sesame Street song “One of These Things (Is Not Like the Others)”
The Song (Your Text):
One of these things is not like the others,
One of these things just doesn’t belong,
Can you tell which thing is not like the others
By the time I finish my song?
Did you guess which thing was not like the others?
Did you guess which thing just doesn’t belong?
If you guessed this one is not like the others,
Then you’re absolutely…right!
The Presentation (Your Design):
Why it works:
- It tells you what to do
- It repeats what you should do
- It shows you what to do
- It makes the action obvious
PS. Thank you everyone who responded to my previous posts. I know that I covered a number of things in this one, so please let me know if there is a specific area you would like me to elaborate on more.
