Want to Increase Business Traffic? Play This Game to Learn a Design Trick

Are You Losing Business Online?

Filed In: Software Services & Applications and Technology

2007-07-26

I decided the best way to answer similar questions from several clients was via a demonstration in the form of a game. It takes a few minutes to play and requires a minimum of two people so between you, me and all those people looking over our shoulders, we're good. The rules of the game are simple enough. Look at some pictures and jot down what you think they are. All the images represent something you probably do every day, something you're probably doing right now. Ready? Okay. Picture 1a is below left and leads to picture 2a (below right).

1a		2a

Either 1a or 2a can lead to 3a (below left). Below right is picture 4a. Any of 1a, 2a or 3a can lead to 4a. Sometimes it goes 1a-2a-3a-4a and there's no guarantee. In fact, it could go 3a-2a-4a-1a, 4a-3a-1a-2a, 2a-3a-3a-3a-1a-4a, ...

3a		4a

5a (on the right) can either come from or lead to any of 1a-4a. Each of these images can also stand on its own with nothing leading to or coming from it. That ends part one of the game. One person looking over my shoulder as I wrote this post asked if I was showing block drawings of starships from Star Trek^TM. Another asked if I was designing a computer game and a third said it reminded him of those little racetrack windup games he had as a kid.		5a

We're going to repeat the game one more time. I'll be showing you the same information and I'll bet that even if you can't figure out what the images represent, they'll make a great deal more sense to you at a very important level. Picture 1b (below left) can lead to 2b (below right). Picture 1b is showing the same information as 1a above. Similarly, 2b is showing the same information as 2a above. Information is the important term here. Being able to recognize the information -- and if not recognize, easily understand it -- could help increase business on your site.

1b		2b

Picture 1b or 2b can lead to 3b (below left) and 1b, 2b or 3b can lead to 4b (below right). As before, 3b is showing the same information as 3a and 4b is showing the same information as 4a. Also as before, it can go 1b-2b-4b-3b, 4b-2b-3b-1b, 2b-3b-3b-1b-4b-2b, ... One more image to go and we'll solve the puzzle together. The greater hope, though, is that all those folks looking over your shoulder will be able to solve the puzzle.

3b		4b

Picture 5b (on the right) is showing you the same information as picture 5a above. Picture 5b can either come from or lead to any of 1b-4b. As before, each of 1b-5b can stand on its own with nothing leading to it or coming from it. People looking over my shoulder at the "b" pictures all agreed the "b" pictures were like steps going down into something. They had a sense of entering something, of moving through something. I gave my staff one more clue and everybody knew what the "b" pictures were. Here's the clue: Go back to picture 1b. Place your mouse on the red bar, then the green bar then the blue bar. Repeat this for 2b through 5b.		5b

Yes, you're navigating a website's menu system. Both "a" and "b" series pictures are known as psycho-motor maps. Here we're creating psycho-motor maps of a website menu's action items. These maps are very useful when you're designing a site's navigation system and can be extended to people walking through stores, malls, how people work in factories, ... Their application is pretty broad and let's focus on website navigation and menu systems for now. These maps are useful because they demonstrate how experience and memory aid design. The "a" pictures are from an actual menu system. Some folks watching me prepare this article got a sense of motion (starships, horse race) from the "a" pictures and what comes next is very important; their sense of motion (when one existed) was of the three boxes as a single unit. They weren't seeing each box as a separate element implying movement through or into something. And this brings us to menu systems and website navigation. The actual menu system that maps to the "a" pictures is a visually attractive "tab" design. However, it will not be a navigational aide to visitors because the brain and mind -- which always, always. always wants to create order, imply order, place order on the world around it -- won't be able to easily create, imply or place an order that it recognizes as moving through something, ie, navigating a website. People's guesses regarding the "a" pictures are examples of the brain and mind working to find order, to make something recognizable from what it doesn't recognize. The next most important part of why tab style menu systems can cost business is due to another simple fact of mind-brain behavior; what the mind-brain can place order on it can remember. This means the easy way to have returning visitors re-find something is to use a menu system which automatically stores itself in the visitor's memory. The "b" pictures have an easily recognizable, repeatable order defined. Most people -- that's everybody looking over your shoulder -- won't be able to easily find repeatable navigation-reminiscent order in the "a" pictures. Is the left most element the first element? Is the top most element the first element? It couldn't be the bottom, could it? Does color play a role? The "b" pictures demonstrate repeatable, memorizeable order. Blue is always the last element in the left to right hierarchy. Red is always the first element in that hierarchy. This and similar rules apply even when the three bars align. Easy navigation means good experiences means repeat business. I've written about different navigation systems and their pros and cons before. Links to those articles and a research bibliography with additional notes are below.