Human Recognition Patterns & Page Layout

OK, so the title sounds dull. But let me tell you that this is fascinating stuff and, even better, just a little understanding will make you a richer person.

Humans recognize things in their environment based on patterns. This is in many ways hardwired into us just as birds know how to build nests. Let's play a simple pattern experiment. Here is Pete:

Pete

Now I want you to find Pete hiding in this forest of people on a foggy day:

Can you find Pete? Well I figure that 99% of you have guessed that Pete is the person on the right. Why? Because he is a the closest match to the overall pattern that is Pete. The person on the right can't be Pete because it is a woman and Pete is a man. Knowing the pattern made this easy.

So what if I now show you this?

Are you Pete?

Is this Pete? Well the main part of the pattern says it isn't Pete because this is woman but the face is definitely Pete. Sneaky Pete has popped on a frock to try to fool us but we are too clever for him. The reason we can see through Pete's disguise is that while part of the pattern doesn't fit most of it still does. And a major part of our brain's ability to recognize patterns is based on faces so the face is more important than the dress or trousers pattern.

This simple test shows that we all evaluate our world based on patterns and this has impact on how successful systems must be built. Simply put anything that breaks the pattern, even tiny breaks, can be cause for confusion or even alarm.

Here are some of the core human behavors to consider when creating a web site:

Hunters

Physically evolution has not moved us that far from hunting Mammoths. Sure we may not chase woolly critters every day but we all still hunt for things like information or other solutions. eBay is a great example of hunting behavior acted out on the web.

As hunters we set out with a broad objective, something like food or shoes and we then use the signs and patterns we recognize in the environment to move ourselves towards our objective. So long as the signs still point to success we will keep moving forward. If the cost of moving forward seems higher than any possible gain then we wander away.

Hierarchy

Humans naturally gravitate to hierarchy. Someone is always leader and others followers. One object is better than another etc. Use this to your advantage.

You should use hierarchy or ownership in how you place objects. The classic filing cabinet is a great example of ownership. Anything under the Tab belongs to that tab or category. A person who sits next to the King is more important than someone up the back of the hall. Arrange info in this way and you will be surprised how much you can say just with inference alone.

You cannot put everything you have, do or offer on one page and expect anyone to digest it. We can only take information in relatively small amounts so break things up using the rules of hierarchy. Hats are a Product. Green Shirts are a product too but they are also Shirts. If you arrange information in a natural tree then people will find your offerings easily.

Connectivity & Chance

Just be sure not to over classify as we still love surprise and connectivity. Connectivity allows things to have deeper meanings to us. Pete can be a man, a friend, my banker and a good tennis player. If Pete introduces me to a friend of his I am more likely to like him because I like Pete and the new person is connected to Pete.

We love to find things by chance and often those things can be our most loved possessions. We recognize them when we find them because they fit a pattern. When I look for music (records) I don't go into a shop saying I need the latest Robbie Williams album. I simply know in myself the kinds of things I want and look around. I have in my subconscious a list of records or artists I would like to own. When I stumble on them they are moments of (pattern recognition) magic for me - which explains paying $10 for a scratched Flock Of Seagulls record!

Page Dimensions

Keep your page centered and generally no more than 1,000 pixels wide. There is a tendency to want to use the whole screen but with monitors becoming wider and wider you run the risk of asking people to read over too great a distance which we are not really physically capable of doing.

We have a peripheral vision at around 175° but that is really only to help us recognize fellow hunters and not spear them. We are designed for focusing on rabbits scampering through the bush. We have an impressive 90° range of clear vision but that is still only 45° off each side of center. Making people turn their heads too much will make them uncomfortable and they will leave. So keep your content well centered and within around a 30-45° offset from where the user is sitting and you should be easy to understand.

If you feel the need to tie in the extra monitor space then do so with care as you may end up in dragging the eyes out of the content into the periphery which is distracting. After all anything that attracts attention outside out main area of focus could be a threat. If we keep perceiving threats we will want to run away.

Some people still try to suggest that web pages shouldn't scroll. This has no merit as again studies show that users are very happy to scroll if they feel that there is something of value lower on the page. So get your core solution or reason "above the fold" and let the page flow naturally to let people hunt.

The "F" pattern

click to enlarge

Research shows that people read web pages in an F pattern. This means that they scan across the top of the page, down the left, into the center and then further down the left again. If you place your most important information at the bottom right then you greatly reduce your chance of having users find that information or offer.

See how in this example the words "Web" + "Sales & Marketing" and the navigation is in the main reading line. That gives users a pretty good idea of what is on offer. Traveling down the left offers the main solutions and venturing into the middle offers content and the eye-catching red guarantee seal.

If you look at an amazon.com page it may initially look like a jumble of bits and pieces but in reality it is a great representation of these truths in action. The product image is top left with title etc. on the right. Info further down the page is related but broader with heaps of connectivity and surprise finds. The only thing they don't seem to do is constrain their page width. On a 27" wide monitor that would be a brain breaker to read.

I hope you read this far and now have a better idea of why a good designer makes the decisions they do and why every good designer wants to know lots about your customers before they pull out their crayons.