Raise your hand if your website is designed for little Martian men. Go ahead. Don’t be shy.
Anyone? Anyone? I didn’t think so.
Our sites are created for human interaction. And we human beings — for all our splendiferous variety — share some universal behaviors, no matter where we’re from.
As publishers to the open web, we ignore these behaviors at our peril. What are they?
I thought you’d never ask.
Here are a handful of essentials for designing websites that humans want to read …
Humans want to interact, so make it easy.
Have you ever seen anyone navigate the Internet at gunpoint?
Me neither. For the most part, it’s a voluntary act. People click around because they’re looking for something. They want to interact with what they find.
And yet, website after website puts up barriers and makes interaction difficult. They use clever names, obscure taglines, and “funny” navigation terms that leave their site visitors scratching their heads, or worse — clicking away.
What can you do on your site to make it clear and easy to use?
Feature a straightforward introduction.
If your site is in English, your visitors will read it from top to bottom and left to right. When they arrive on your home page, their eyes will naturally go to the top left in search of confirmation that they’re in the right place.
At the top of your site, your readers should find your business name and your tagline. These essential words will let them know they’ve found what they were looking for.
Use obvious navigation terms.
If there’s a fire in the restaurant you go to tonight, will you look around for the egress? The portal? Or the exit?
When people click on the links in your navigation bar, it’s because they want to leave the page they’re on, and go someplace else. That means it’s not the place to trot out your creative tendencies and start calling your “About” page “Full Disclosure,” or “Dispatch from Headquarters.”
Just call it “About” and stop making your visitors work so hard.
That goes for all your navigation items. Label them in plain English using the most universally understood terms you can find to describe what users will get when they click.
Humans need to read. Don’t get in their way.
Websites are sculpted with pixels, and the most important pixels on the page are your words.
To get those words read, use these important design concepts to set them off and make them easy to absorb.
Embrace the white space.
If you expect readers to pore over line after line of your copy, give them a visual break. That’s what white space does.
Add white space to the left and right of your content area to give your words room to breathe. Don’t be afraid to space your lines out a bit — text on the web is easier to read when it’s not quite as compact as text on the printed page.
Show some mercy on our eyes.
There’s an evil design trend that’s popular right now. The older my eyes get, the less I like it. I call it the “tone on tone” style.
You’ve seen it before — it’s grey text on a light grey background, or brown text on a tan background. It’s colored type on a background that’s a slightly lighter version of the same color.
It’s low contrast, it’s not reader friendly, and it won’t help your cause.
Instead, use high contrast styles. Want the most readable text of all? Go for dark text on a light ground.
Go with the scanning flow.
As readers scan through from top to bottom and left to right, you want them to see and read your information in a specific order. You don’t want their eyes jumping around the page, landing on lots of distracting graphics and text.
Position your content so that when they move through it, they’re absorbing your information in order. Put the most important item higher on the page, just below your header, and on the left.
Then use visual hierarchy to move them through your page at the pace and in the direction you want them to go.
They want to know who you are. Show them.
The first time your site visitors hit your home page, they’re full of questions.
What is this site? Who runs it? What do I understand about the values and personality of this business?
Because first impressions are visual, it’s important to answer these questions in the first few seconds with your site’s design.
Your tools of choice are colors and fonts.
Stick to two main site colors.
Look around on this page. Copyblogger’s two main colors are dark grey and blue. Green is used as an accent color, and stands out since it’s used sparingly.
That’s the effect you want to aim for.
Custom fonts add personality and make your site stand out from the crowd.
It’s easier than ever to bust out of the standard group of web fonts and experiment with fresh font combinations. For some inspiring (and free) custom font combinations, read this post by Brian Gardner.
Keep those eyeballs on your content.
Websites are made for the people that will visit them. There’s no greeter on your home page to welcome your visitors. That’s the job of your site’s design.
Work with human nature and not against it. Just keep asking yourself, “What would make it clearer?” and you won’t go wrong.
What will you do to welcome your website visitors and keep them engaged? Let’s share ideas in the comments.