web usability

Secret Weapons of Website Design – Layout and Reading Style

It’s a Work of Art, But Who’s Reading It?

One of the biggest mistakes a new website owner makes is not understanding the way a human ‘reads’ a website. If you are writing in big chunks of beautiful prose, spending a lot of time getting everything ‘just right’, read on. You are in for some eye opening tips that will save you time, energy and money.

Don’t Make Me Think

According to Steve Krug’s book, Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition, website visitors are scanners. They will scan headlines, bold, bright fonts, and interesting graphics until they find something that grabs their attention. Then they click on it. When I learned this, I groaned over the hours that I spent writing amazing prose for my website copy!

What’s more, you have only seconds (maybe nanoseconds) before find they something that catches their eye or they will click away. Spending valuable time showing them a crowded, confusing Home page is definitely a business killing mistake.

Try These Tips to Improve Your Website ‘Readability’

1. Visual Appeal. Think of your web page as more of a painting than beautiful prose. Take a step back and take a visual inspection. Ask yourself and your clients/friends:

Does anything stand out, pull the eye, hook you in?
Where does your eye go after that?

Evaluate the answers carefully. If this is the path that you want your visitor to take then hooray! If not, change it up!

2. Break It Up. Break large chunks of content up with graphics, subheadings, bold/colored fonts, and bulleted points. This type layout gives the reader the ability to scan the page and establish a reference framework.

3. Top Right Rule. Put your most important marketing message in the top right-hand corner of the home page. Studies have shown this is the natural flow of the eye. Often you’ll see a newsletter sign up or opt-in here. The logic being that if visitors do nothing else, leaving their email address gives you a chance to send follow up communications.

4. Navigation Bar. Put your navigation bar (your listing of web pages) across the top just below the logo/header. This is where most people expect it to be. Don’t fight it by listing your pages on the very top, bottom or on one of the sidebars. This is a huge mistake and I see so many owners making it because they want to stand out and ‘do something different’. While authenticity has much value, there are some basic structures that your visitors need to be able to rely on. Predictability here builds trust, confidence and will translate into more time on your site.

5. Above The Fold. Anything the visitor has to pagedown to see is called ‘below the fold’ and has a good chance of never being seen. Put your most important items ‘above the fold’.

The Hansel and Gretel Shuffle

You may not realize it but retail stores are designed to move you through in a Hansel and Gretel breadcrumb like trail. They lure you in by putting eye-catching items in the window. Once you are in, your steps have been pre-planned by the big marketing team in the sky. They tempt with interesting items so you will move to the right and then the left. Then a display that requires you to move around it. On and on it goes until you look back and have walked a predetermined path through the store designed to showcase their merchandise.

Simple Strategies to Create a Highly Integrated Website

1. Balance your creativity with predictability. People feel safe and comfortable when they can predict what will happen next. So many of my clients want to get all creative and shake things up. That is great, you need to put your personality out there but remember to keep your customer in mind first. The solution for a confused website visitor is just a click away– a click away off your site that is!

Some marks to hit include:

Logo in the top left of the home page
Navigation bar preferably across the top but can also be on one of the sidebars. However, this must be very visible.
Newsletter or Opt-In sign up in the top right sidebar area.

2. Hyperlinks. Add hyperlinks throughout your site, linking to the next page in the site you want your visitor to go. Think of these as sign posts on a hiking trail. What is the next step you want your visitor to take? Talk about your amazing services on your ‘About’ page, then add a hyperlink to the ‘Services’ page right there. “Contact us for more details” should include a hyperlink to the ‘Contact’ page or your email. One great practice is to put this contact information at the bottom of every page.

Bottom line: Always have at least one link to follow to your next service, product, or more information. Never leave them stranded on one of your pages. Make it easy for them and lead on!

3. Social media integration. There are many new buttons, badges, and plugins that make integrating Twitter, Facebook and other social media stupid easy. I recommend finding one or two social media sites to focus on and integrating them with your website. You stand a much better chance for success if you narrow your focus, get that rolling and then build from there.

4. To breadcrumb or not to breadcrumbs. Breadcrumbs are the little headlines you see on a web page that tell you how you got there. They are used to keep the visitor oriented to where they are and how they got there. If you have a complex site, breadcrumbs can be useful. However a well designed navigation bar and site integration can be all you need. In the end it is a personal preference. I prefer not to rely on them as they take up valuable web page real estate and I find them distracting.

Are You a Man or a Chicken?

Next up in the Secret Weapons of Web Design series – Web Page Layout. Did you know your site visitors are not reading every line of your beautiful prose? It’s true, we as humans tend to act more like chickens when it comes to reading websites. We pick and pluck, scan and skip. Next post I’ll share the secrets of how to layout and design your web pages for maximum impact with your visitors.