Ask any designer what makes a great design for a web page or web site and you’ll almost always here the same common themes; usability, intuitiveness, feel/mood, eye catching, etc. Yet few will respond with what makes your business revenue – how the page converts visitors to take the action you want them to take!
Following are some practical and commonly overlooked elements of landing- and buying-page design to help answer some the above questions and help you think about design elements more objectively.
Lots of designers like to focus on color scheme too early in the process. Color isn’t the core of your design. There are six basic, equally important elements that make up effective design:
- Line
- Shape
- Value (lightness, darkness, shading)
- Blank (white) space
- Texture/pattern
- Color
Start with Element Prioritization
Determine the relative importance of all elements that will comprise a Web page. Not all elements are of equal importance. You may even want to assign a dollar or numeric value to each element in terms of revenue potential and based on size it takes up in the design. To be most effective, the layout must take this into account. Important elements may require specific placement on a page so that they may be more visually available to visitors.
- For every page, you must answer the question: What action do we want the visitor to take on this page? List these in order of priority.
- By first considering the design in grayscale, you can determine what elements stand out without color getting in the way. Note: a fabulous tool that will turn any existing web page you have into grayscale is GrayBit.
- Use brighter/bolder colors on elements such as buttons and header banners that reinforce the action you want a visitor to take on that page.
- Button size, position, and shape can also influence the visitor’s perception of how important an element is.
Position
Position refers to the relational properties of elements on Web page. No element exists in isolation; all are affected by the surrounding elements. A large, dark element, for example, may functionally obscure the presence of an adjacent small, light element.
Evaluate the positional relationships including size, shape, color and proximity of all the elements. Ensure each is visually “available” to the visitor. You may want to use the battleship grid layout concept I’ve shared in the past.
Contrast
Contrast is the difference between the light and dark areas of the page design, the juxtaposition of black and white representing the strongest contrast. Contrast dramatically affects readability and a visitor’s ability to spot elements critical to the persuasive process. Contrast is an important design consideration when people with impaired vision require assistive technologies to render Web pages readable.
When considering design contrast:
- Look at all design mock-ups in grayscale first. Colors evoke emotion. Introducing them first distracts you from the ability to see potential contrast problems in a design.
- Avoid too many dark colors.
- Avoid too many light colors. We were just involved in a site audit where the gray text on a gray background rendered the sites main offer too difficult to read. Simply changing the background shade can make the elements pop out.
Expectations
This is the design’s ability to employ basic conventions online users have come to associate with e-business. Sure, conventions can seem limiting and uncreative. But an online business must provide both a design and a layout that helps the visitor accomplish her task efficiently and without frustration.
- All text hyperlinks should be underlined or at the least very obvious.
- View Shopping Cart/Checkout links should be near the upper right corner. You may want to include a phone number as well here.
- Full contact info should reside in the footer navigation.
- What other things are you doing that confuse people and their expectations?
Perception
- Of speed. That should be the visitor’s impression of how quickly the site and each subsequent page appear onscreen. While a site can load with an absolute speed, it’s possible to give the impression it’s loading faster by prioritizing critical information and loading it first. Ideally, the visitor will engage with that information while secondary information is still loading. Actual speed and the perception of speed are often inversely related. The real influences are the users’ experiences and their ability to complete the tasks they came to accomplish. Have you checked the load time of your most important pages lately?
- Of time spent on task. This is the visitor’s impression of the length of the persuasive process from beginning to end. Structural designs that use five pages when three would suffice needlessly waste visitors’ time. At a smaller level, forms that “look” long — even though they may not request more information — are often perceived as requiring more time to complete. In general, the longer the visitor perceives it will take her to accomplish her task, the more frustrated and disinterested she becomes. When was the last time you watched your visitors trying to complete these tasks? If it’s been a while, order 5-8 usability tests on UserTesting.com for $29 each. You’ll get a screen recording as they talk through what they are experiencing on your website.
How well designed are your landing pages and key buying pages?
{ 5 comments… read them below or add one }
Great post, guys. Glad to see you writing so much!
You are right on. Too many become overly involved in what the design should look like before they fully understand what it is intended to do. If the goal is “Subscribe to the RSS feed” then everything, design included, should be focused on persuading the visitor to subscribe.
Unfortunately, I think that there is often a disconnect between designers and business managers; rarely is there a performance assessment after implementation to determine whether the project was successful.
Right on the marker. Design the content. Too many people are designing, then adding content.
As part of a ‘design the content’ process, it hasn’t really been mentioned above the importance of adding mock content to the design at an early stage. Adding content makes a visible difference to the overall look of a design.
Paul Fearn´s last blog ..New website to be created for Biometric Society
I agree with most of what you mention. It’s funny, because we do a similar process in our own studio. We try to get the content or at least what we can before starting on the design at all and also have the clients identify the most important elements on each page and in what order.
We always do wireframes before starting on the design which show which elements go where.
While I get what you are saying about leaving color out, I think it’s also part of what should be considered in part of the original considerations concerning just conversions because it does convey emotion. Also, colors can be important for defining elements beyond what simple contrast can do. Colors have strong psychological meanings and you can use that to your advantage at the very beginning to.
So, I think you could start the design in colors, but then make sure the contrast is high enough by checking it in grayscale, which is something we also do.
On the other hand, sometimes it’s good to break the rules. We released our site redesign last month and so far it’s been really successful for us. I decided to purposely break the rules to see what would happen. So, it’s decidedly low-contrast, dark and it has large loading times.
I’d certainly think really hard before doing this on a client site, but on our own it worked really well by making us stand out, filtering out potential clients who may not be a good fit, and attracting those that will.
So, sometimes you just never know.
Naomi Niles´s last blog ..Should Designers Specialize In One Industry?