Are you planning to design a new website or thinking about a “website rehab” on an existing website?
Over the lifetime of your current website, it’s likely that elements have been added to your existing web pages without much thought. Maybe the programmer was told to “fit it in somewhere.” Or the intern was directed to use the CMS to “put this new copy at the top.” Perhaps you have multiple divisions or product lines, each vying for home page attention. And so, over time, your Key Response Actions end up farther down on the page, or moved to a spot where the visitor’s eye rarely glances.
No wonder 98% of visitors to websites never leave a trace, and the bounce rate for some websites never seems to drop below 60%. (Have you hidden your e-newsletter sign-up below your left column menu and wonder why sign-ups have dropped?)
Before website development (or website rehab) begins, be sure you and your team discuss these key elements of website page layout strategy.
- The importance of the “above the fold” area in your website page layout.
Does it seem like your team has forgotten this website 101 principle? Is it their fault? Or is it because various people/departments/divisions keep telling them to add elements to the website – without anyone thinking through what elements need to be (or remain) the most prominent on the affected pages?
The most valuable “real estate” on your website is still that area “above the fold” — the first area visible on the visitor’s screen without scrolling. And that area may be shrinking, as more visitors have multiple windows open at the same time – or are trying to view your non-mobile website on a mobile device. You want to be sure that your most critical elements are seen by EVERY visitor, since every visitor won’t necessarily scroll down the page.
Are your Key Response Actions (still) “above the fold” in your website page layout?
Let’s see . . . your performance is based on number of e-commerce sales or number of leads you can attract via your website. But you’ve let your Key Response Actions slip below the fold?
What do we mean by Key Response Actions? They might include:
- Shop Now
- Download the White Paper (or whatever your lead generation offers are)
- Request your E-newsletter
- Download a Coupon
If you’re spending money to drive traffic to the website, you want to take maximum advantage of each and every visitor, by getting as many as possible to either become a customer or a lead. And that won’t happen if your Key Response Actions are buried at the bottom of your pages – or in a pull-down menu somewhere.
Intuit’s current home page features “Start Now” as its Key Response Action “above the fold” to start the visitor down a particular conversion path.
2. Your website page layout should control eye-flow on the web page.
For SEO purposes, a website needs lots of valuable content. That doesn’t mean the web page needs to look like an endless sea of paragraphs. Smart website design can help break up the copy, and draw the eye through the web page. Well-placed photos, graphics, “boxed” elements, pull-quotes, and other design elements can make even a copy-heavy web page look engaging and easy to get through.
On the Intuit website, if the eye goes first to the photo of the person, notice he’s facing INTO the middle panel where the response button is. If the eye goes first to the photo of the mobile device on the left, the words “Get Paid” lead the eye to the yellow response button. So eye flow is completely focused on the yellow response button.
Intuit has smartly divided their messages into clearly defined sections – notice the light background tint that subtly creates a separation between their key messages.
How should you go about developing or revising your web pages?
- Decide what elements need to go on each web page – - and list them in order of importance. What do you want the visitor to see as the most important elements? Those elements need to stand out on the page — and appear “above the fold.”
- What do you want the website visitor to see first? As mentioned above, typically, the eye is drawn to any photo that might be on the web page (and a photo with people is best). The best place for a photo tends to be in the “hero” position at the top of your web page in your main column. Place a photo where you logically want the visitor to “start” and the eye will be drawn there. Watch out for photos placed elsewhere on your web page. Keep in mind the eye will first be drawn to them. If the placement of the photo pulls the eye away from the most important elements, those photos need to be moved or removed. If there’s a person in the photo, be sure that individual is facing INTO your copy, rather than drawing the eye off the web page.
- What are the Key Response Actions you want to encourage the visitor to take? Those links need to be placed prominently, and look like action buttons.
The next time someone asks your team to “just add this in somewhere” to your website, take the time to review the affected web pages strategically. Go through the 3 questions above, and come up with a more strategic direction for your website page layout to ensure the most important elements continue to stand out.
Pingback: 3 Design Directives for your Website Layout: The 12 Days of Response