Home Page Design: Applying The Dont Make Me Think Test
If you're not familiar with Steve Krug's web usability classic Don't Make Me Think, it's an entertaining and informative introduction to web site optimization. Though its screenshots and examples are quickly looking "old school" - its principles still stand. I "think" any web design and ecommerce professional should give it a read, and then give their own websites the "don't make me think" test.
Today I'm going to apply the concepts from Don't Make Me Think to The Source - a chain of electronics retail shops we used to call Radio Shack here in Canada, until it was acquired by Circuit City. I'm a fan of Circuit City's web design and marketing, and have praised them many times before on this blog which is why I had high expectations from The Source's web presence. But I found myself "thinking" very hard on this site.
This post is not intended to slam the design, but to point out areas that could be improved based on generally accepted design and usability principles.
(If you want to play along, you can click on the image to enlarge and see if you can predict which 10 issues I'm going to address in this post).
1. It's almost an unwritten law to use the top left corner for your logo. There's a bit more freedom in where you place your search box (so long as it's near the top), but The Source breaks the convention and flips the logo and search box around - forcing customers to search for the search. Any time you break a web convention, you risk confusing, frustrating or losing customers.
2. The product category navigation bar (it's thin and black, in case you missed it) is overpowered by less important navigation. If you're a first-time customer, you're not ready to buy by phone yet. You're also not going to sign into your account, view your wishlist or your shopping cart. You're going to look for the navigation bar or the search box.
As a retailer, your goal is to help guide visitors to your product, and design should reflect the relative importance of links with appropriate button size, color and prominence. This is backwards.
3. Free Shipping to Your Door is a great offer, but this messaging shouldn't be larger than the category navigation.
4. In the left side bar, the most valuable real estate is wasted on minor calls to action like "View Current Flyer" and "Sign Up for e-Newsletter." It's unclear what "Daily Circuit Breaker" means - is it the newsletter? If I sign up will you bug me everyday? Is it the current flyer? Will the flyer be outdated tomorrow? What's more confusing is when you refresh the page, the 2 calls-to-action switch places. Huh?
Load Time & Product Availability
5. Click on the flyer and you get Flash, and it takes 30 seconds to load the page. Then you get a notice that some offers are not available online. Okay, could you tell me which offers are only in store or do I have to figure it out the hard way?
6. Left hand side bar space is also wasted on a special battery search box (with different design than the main box). What makes such generic, low margin products so important they warrant their own search tool? What should be an impulse add on has become the main attraction.
Information Architecture Issues
7. The links in the sidebar are poorly organized.
Featured Categories: Why are these the featured categories? Are they the most popular? Again, Batteries are highlighted first. But...at least customers who couldn't find the horizontal category navigation have a shot of finding something.
Quick Links: Repeats links for Wish List and Current Flyers. Clearance, Top Sellers, New Products...these are merchandising links but they're mixed with customer service links like Shipping, Business to Business, Recalled Products and I am not sure what Star Service means.
Services: The first link is "Now Hiring." Not really a service. Neither is Newsletter (is this the Daily Circuit Breaker or something else?) or Affiliate Program. Source Services is redundant, I thought this was a menu of all the services. Another Battery Finder link...
8. Inventory Blowout! This is awesome, but where's the "Shop Now" button? Look hard, it's red-on-red.
9. "Free Shipping to Your Door on Purchases Over $25" - Okay, this is good, you're telling me up front the free shipping threshold. But does "to your door" add value to this sentence or just make it wordy?
10. Featured Products: Why are these featured products? It's mentally taxing to examine each product and offer. Re-working these features into "Top Sellers," "Top Rated," "New Products" or "Clearance" would be more helpful.
Contrast this with Circuit City's design:
This design is clean, modern, lots of white space. The navigation is balanced - all the necessary links are there but the most important navigation is easy to spot, and easy to scan.
Sometimes I'm amazed at the difference between US versions and international versions of a site. Often the US site is cleaner with more features, and even better search - Zappos, Best Buy and Amazon not excluded. I suppose this is due to completely different design and usability teams working on the projects.
If you are thinking of a redesign, you'll find Justin Palmer's recent blog post 8 Questions to Ask Before Redesigning Your Website helpful, it covers not just the user experience but also the SEO ramifications and cost/benefit. Another great resource is the recently published Web Site Optimization by Andy King. I'm about 1/3 of the way through this book and will give it a proper review here on Get Elastic, but from what I've read it really covers the full spectrum of issues that web designers, developers and marketers need to consider.