31
Are You Leading People Down a Slippery Path?
Pick a site, any site. What’s the first thing you notice? What draws your attention right away? Where do your eyes land?
What do they do then? Do your eyes flow over the page? Do they follow a specific path, flicking to the left, then skimming over to the right and maybe down the page? Do you leap from color block to color block or jump from title to title? Or do your eyes zigzag through utter chaos as you search for something you can focus on?
When any site at all appears on your monitor, you’ll either have a good first impression and want to explore, or you’ll be hit with a jumbled mass of chaos that you don’t even want to stick around to figure out.
Site layout is the answer. It’s the basic composition of the key elements on the page – where everything is. Creating proper layout isn’t something that comes naturally to most people, either. Many designers or dabblers just lay stuff into sites and hope it works.
Sometimes you get lucky. You have a feel for what seems right and what seems out of place, and you can lay out a nice path for visitors to follow when they land.
But luck will only take you so far. You need to understand why layout and the placement of elements work well together to build a better site for your clients – and hit the mark every time.
Why a Site Needs Proper Layout
If you want people to stay on your site, you need to keep some principles in mind:
First, you need to understand that how you view material on the web is very different from how you view printed media. Think about how you look through a magazine or catalog compared to how you surf sites on the web.
With a catalog, you might leaf through pages. You’ll linger over attractive images, read a bit of descriptive copy, or maybe jot notes down on a wish list. You leaf through a magazine too, admiring full-page ads or articles, moving on to the next page, reading a bit of article or a call-out box.
On the web, how you view pages is often different. You’re moving constantly, already searching for something – information, entertainment, products…There’s no time to waste and a barrage of visual stimuli to sort through, analyze or ignore.
While surfing the web, you don’t usually mosey through pages on a site. At best, you browse sites, judging them in a split-second glance, moving from one to the next as you get distracted and click an add or a button. Of course, clicking stuff runs the risk of you being taken away from where you were and not being able to get back, so you avoid the extra stuff begging for your attention to focus on where you want to be.
Your attention span is shot. It’s gone right out the window. It’s moving fast, avoiding distractions and searching for what it wants. If you can’t find that in three clicks on a site, you’re out of there and heading for the next.
Walking Your Eyes Along a Path
Why are websites laid out the way they are? It’s how people in our culture read: from left to right and top to bottom. Although some people in other cultures read from right to left, the majority follows this typical pattern.
- A header (or banner) is always well placed when it’s at the top, as doing so gives people a starting point. They like to know where they are before they begin moving.
- The navigation bar underneath the banner gives people options and tells them what they can find, suggesting places to go to get what they want.
- Additional navigation can be had down the left or right of the page, subtly leading people down the page and calling gently for their attention.
- In the heart of it all is the content, sprawled out with lots of room in a space all its own.
Your site should be laid out in a way that helps people move around and navigate your site easily. Since the virtual world doesn’t really offer a clear sense of direction to people, the direction you can offer them on your site takes on greater importance.
Because that makes visitors a whole lot happier. Why confuse people with a scary looking forest to bushwhack when what they really enjoy is a meandering garden path?
Help spread the word!
Welcome to our community. Kick back, put your feet up and join the discussion.
16 Responses - Leave your comments too!
Go ahead. Leave a Comment!
-
-
-
James is reading:
-
-
Taylor is reading:
-
-
Social Hookups
-
Well said Harry. I remember being told ages ago that a person views a webpage in a Z pattern – across the top (header & menu) down the page and then across the bottom of the screen. Sites that have flashing ads, moving graphics and voice turn me off, and I’ll usually click off a page rather than try to read through the distraction.
Melinda | WAHM Biz Builder´s last blog ..Time Can’t Be Managed
See, this is why I handed you the work – you did all that so beautifully on my site!
Alex Fayle | Someday Syndrome´s last blog ..Stop Talking and Take Off the Rose-Colored Glass Already! Lab Rats Week 3
Great tips of site navigation. Some people’s sites are so bare that visitors don’t know where anything is. Everyone looks at the header first, so make sure that part is at least optimized.
John´s last blog ..Love the Skin You’re In In 5 Easy Steps
This is a good refresher. I’m reading “Don’t Make Me Think” right now and alot of this is aligned with thoughts from that book.
@Mel: Yup, a “Z” or “F” pattern is the norm. I’m the same way. The moment I see flashing ads, pop up windows or those talking “guides” that come walking on the screen (these were all the rage a year or two ago), I’m gone.
@Alex: And look how far you’ve come since then! Your site is simple, but effective and the proof is in your success. Rock on, Someday Man!
@John: I’ve seen a lot of bare sites lately. Minimalistic can be effective, if it’s done right. Many times it’s not and visitors are left to drift and wonder where to go next.
@Charlie G: That’s a great book and it’s what inspired me to write this post. “Don’t Make Me Think” is definitely a must have for anyone who has a website or is thinking of having one.
Finally a great site that is cool, informative and easy to read. Why do so many so-called pro bloggers, who like to dispense advice, have cluttered websites?
Jim Taggart´s last blog ..Is America is Regressing on Race Relations? Obama’s Beer Summit
I’m more on the “F” pattern. Thanks for the refresher course Harry.
@Jim: There’s lots of reasons why sites get cluttered. And funny you should mention that, I have a post coming up in a week or so on that exact topic. Stay tuned!
@Sean: You’re welcome!
Thanks for the article. Harry, does it make sense to purchase a blog domain at the outset or wait till your blog has 1,000 readers? What should a blogger focus on first? content? or design?
Thanks
I think site design should vary depending upon what you’d like the user to do. For example, I just updated http://www.incomefitness.com the 7th time (redos number 8 to 15 will probably happen today) because my first attempt (or was it the 3rd attempt?) still had the most critical components (video and optin) below the fold.
So then I tried moving them above the fold and lost other aspects. ARGH! Maddening…it is.
One thing I did devise – because this page right now is a squeeze page, I made my header clickable with the words “Click HERE for instant access” and added an in-page anchor to the signup form.
Speaking of site navigation, you know what is currently angsting me right now? I personally do NOT like video. ‘Matter of fact, I prefer denuding my mooses of their burrs rather than watching videos. Hate hate hate HATE videos!
But I have to include videos nowadays as that’s where marketing is moving. Okay, fine, no problem, I ascend my vertical learning curve and make one. Wheee! Then I realize…what about the folks like me who DON’T listen to video….I need to include copy for them too! ARGH! How do I factor THAT into my site navigation? ARGH ARGH ARGH (bonks head against wall)
Feel my pain. Please.
Back to my coffee, Barbara
Barbara Ling, Virtual Coach´s last blog ..6 Brilliant Squeeze Page Resources You’ll Want To Explore Part 1
What’s with this gravatar stuff? I understand what it means for blogs, but the shows I’ve watched on BBC or articles I’ve read on gravatars is very different and much more involved. Why not just called them pics. Sure ‘gravatar’ is a cool word, but let’s not get carried away.
Neophyte blogger
Jim Taggart´s last blog ..Is America is Regressing on Race Relations? Obama’s Beer Summit
I love the design psychology when it comes to making a website. Even if you have good content, it might not always work if your design really sucks.
Wallpaper´s last blog ..BattleField 1943 Wallpapers
On the design front, to link or not to link, that is the question. Some good blogs go wild on linking to other sites, while others do nothing. What’s the best approach?
Jim Taggart´s last blog ..Obama’s War: Will He Succeed?
Thank you so much for the informative article. I did realign my wordpress account with the ideas from your article. Thanks.
Cheers!
Subhendu Pattnaik´s last blog ..Parents are Jewels