The Where’s Waldo? Guide To Site Design (or, How to Have the Crappiest, Most Unusable Site Ever)

Where the heck is Waldo?

Ever pick up a Where’s Waldo? book as a kid? I always enjoyed the mental gameplay and complete focus needed to find Waldo. I imagine how fun it must’ve been for illustrators to draw such elaborate scenes and strategically place Waldo in as inconspicuous a spot as possible.

There he is!

This madness works great in a fun children’s book. Apply a similar design process to your site, however, and you’re more than likely to piss off your visitors rather than delight them. In case it wasn’t obvious enough, you want your site to take the opposite approach in its design.

Evaluate your site by clicking through and seeing if you can identify any of the negative traits listed below. If you do notice some of these things, it may be a good idea to reconsider your site’s goals and adjust your design accordingly.

Not revealing Waldo’s whereabouts instantly

In the book, the whole point is to search tirelessly for little Waldo. Usually he’s staring up at you, but it definitely takes a while to find the guy. Funny how he’s always stuck in these super crowded places. (By the way, can you see him in the photo above? I’ll reveal his location at the end of this post.)

On your site, you want to reveal “Waldo” to your visitors right away. Why? If they get frustrated, they will exit your site and look elsewhere. What’s a Waldo as it pertains to your site? Well, that depends. It could be a call to action button, a link to your pricing page, or links that lead your customer to your detailed product page. Display your Waldo prominently and don’t frustrate your customers by making them guess where to find him.

Designing haphazardly, placing elements as you go

heat maps: Warm colors represent the large concentration of people looking at that particular spot

If you flip through a Where’s Waldo? book, it’s utter chaos with no direction whatsoever. Avoid chaos on your site by placing key elements in their expected spots on a page. Studies (and countless heat maps) have shown that people scan webpages from left to right, top to bottom, with heavy concentration placed on the top left corner and along the left side. For example, people are used to having a logo and tagline near the top left of their screen so they can identify where they are, as well as a navigation menu in the header area of the site. Provide these for them.

Check to make sure your repeated key elements are visually consistent. For example, call to action buttons should look similar, so when the user sees them, he will know what what to expect (i.e. “this button will take me to the next page”.)

If you’re a business owner and you’re looking to start a site, it’s most likely you want to do one major thing: push more product. Surely you’ll be fulfilling other objectives like informing the customer of your product or the benefits of working with you, but ultimately, you want to increase sales. Remember this as you are having your site designed. Everything should be tailored to fulfill this primary objective. Everything else, while important, is secondary.

Designing all wild and crazy with no structure is a bad idea that will surely confuse the hell out of your visitors. Even if the user doesn’t understand good design, he will intuitively know that something isn’t right about all the inconsistencies, and it will provide him with a less-than-stellar user experience.

Providing a complicated and unclear navigation

Yes, this is a real website: http://yvettesbridalformal.com/

As I mentioned earlier, users will expect a clear navigation menu in the header area. Keep it separate from the rest of your content so it doesn’t blend in. Be certain the menu choices stay consistent, and if you have a lot of content that needs to be directly accessible, take advantage of a tiered presentation, like a drop down menu. That way, your top level navigation will remain uncluttered, but your user can still access what they need to.

Hide your contact information

Shopbop.com makes it easy to get in contact

Users want to know there are humans responsible for the stuff they’re reading on their monitors, and are more willing to do business with people who create an open line of communication via email links, phone numbers, contact forms, or some sort of integrated help desk.

Make it easy for your customers to contact you. If you find that the same questions are repeatedly asked, compile and display an FAQ page so your customers can easily scan it before contacting you directly. Make sure they know this is available by displaying links on your contact page. Your customer deserves an easy method of getting the information he or she needs, and the more transparent you are about the ways they can access this information, the more they will love you, see you as human, and want to do business with you.

Neglect a logical order of information

What is your product in a nutshell? What will it help me achieve? What are three of its best features? What are those features’ bullet points? Point out the overarching idea first, followed by features and then details. Your customer wants the bigger picture, and once he determines this is a product he needs, he will take the initiative to dig deeper and learn more.

Neglect a hierarchy of type

If you squint while looking at a Where’s Waldo? book, its pages turn to blobs of color with no pronounced elements. Do you get a similar effect when looking at copy on your page?

When squinting at your site, you should be able to distinguish which text are headlines, which are your calls to action, your call-out blurbs, your links, your blockquotes. The visual order of your copy is important; without it, visitors won’t know how to process the information in the correct order of importance.

It’s also good to note that people don’t read websites like they read novels. Users scan pages and look for the relevant information. Help them out by giving them headlines, sub headlines, and bold text when necessary.

Bury your buy button

An easily distinguishable buy button in Lemonstand's nav

Your Buy button or sales page link (your Waldo) should be prominent and stick out like a sore thumb. If either of these are linked in your navigation, highlight it by separating it visually from the other nav styles; you don’t want to create any obstacles between your sales page and your customer. Making them fish through your site in order to purchase from you is just wrong, and surely a good way to lose their interest (and money.)

Have no set goal or end result

What is the purpose of your site? Sell a product? Inform the masses? Inspire the world? How is your design helping that?

This is probably the most important thing when evaluating the design of your site. You should know what your end goals are and what you’re trying to accomplish, and then design everything around that objective. Otherwise, the elements you include are just fluff with no purpose.

Finally

Hopefully the Where’s Waldo? example helped illustrate the fact that, for your website, you want to do pretty much everything opposite of what the books’ designers have done. Evaluating your site according to these mistakes and you’ll be well on your way to a much more optimized site design.

What other common mistakes do you see in your favorite websites? Did I miss something? Let’s discuss in the comments.

By the way, I’d love if you subscribe by email or RSS. This way, you’ll get updates delivered straight to you. You should also follow me on Twitter.

Oh, and can you find him in the top picture? Focus on the top left area…

photo credit: findwaldo.com, styleguide.yahoo.com

Leave a Comment

Notify me of followup comments via e-mail. You can also subscribe without commenting.

{ 1 trackback }

Previous post:

Next post: