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).
Design/Usability Issues
Conventions
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.
Navigation
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?
Merchandising
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…
Persuasion Issues
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.
Further Resources
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.
Like This Article?
|
Get New Posts Delivered to You
|
Add to del.icio.us
Sphinn It!
Stumble It
I’m usually not a big fan of good design/bad design comparisons because I view it as a lazy analysis. But you’re right on here. The juxtaposition of the Black and Red colors is a major problem. The color values are too similar to clearly divide content. The entire header area is too cluttered. I almost completely missed the search box. This a case where a redesign would most certainly increase conversion.
What a difference placement and white space makes! I will purchase Steve Krug’s web usability classic Don’t Make Me Think. Some designers like to be so different not realizing it may have a negative impact on user experience. Some things like logo placement and nav menu need to have similar placement so visitors won’t get confused.
You make a few good points and I want to add a bit more. The design purpose is to facilitate sales - period. Checklist: Not user-friendly, out; not lead capture, out; no benefits driven offer, out; no urgency in offer, out; no guarantee, out…
Free shipping should have more emphasis, but i don’t agree it can’t be bigger than navigation. It can be improved, but it is better be bigger than navigation. To promote the offer, a hover-ad can be an option.
Very weak in asking for subscriptions. This leaves the majority of the first time visitors disappear forever.
Overall the design makes hard for eyes, but from a marketing standpoint, it misses more than that. This happens to all the image-driven websites. These companies get brand recognition through deep pocket advertising, they don’t tend to spend a fraction of that budget onto improving the details to improve conversation. To most small business owners, it is better to pause and think if you want to emulate them.
Good post, I need to change some things up myself. I am not sure where to add these links on my site? In the blue bar at the top? Make a new box in the left hand navigation?
“Top Sellers” “New Products” or “Clearance”
Any idesa which is best?
Thanks for the post. I always enjoy reading snapshot reviews, and this was an especially good one.
Another common gaffe this page is guilty of: note that the entry field for the “Battery Search” is far smaller than it could have been. The activation button is almost as wide as the entry field, and there’s about 1/4″ of wasted space to the right of it!
“Don’t Make Me Think” is one of my all-time favourite usability books. All web designers should be forced to read it six times.
Thank you for the great post on “The Source” website / “Don’t Make Me Think”.
I’ve tried using “The Source” website a few times in the past, and it had always come across confusing and so frustrating to use that I generally gave up and go somewhere else. Hopefully they will review their site and ask their users what the pain points are as well as updating the design to be more like the “Circuit City” site.
These types of website are common. It basically boils down to a company who’s attention is focused on their brick and mortar operation and not their online initiative.
That was The Source? I missed the logo, and the colour scheme screamed “Future Shop” to me, right down to the red and yellow price tags. The left navigation is identical enough from the screen capture… etc., etc., etc.
I’ve always disliked the Canadian versions of most US web sites, and these days it isn’t really necessary to do regional versions beyond prices and some products. Nothing that couldn’t be handled in code.
I’d like to think that Canadian designers are as good as US designers, but the standards seem to be much lower. Overall, disappointing.
Great article Linda - I love this usability type stuff! I am a huge fan of Steve’s book. Thanks for the link love on friday too!
Rich
From an email marketing perspective, my eye is drawn (with a squint) to their email subscription area. The “sign up for our e-newsletter” is a FAIL on many levels:
1. The term “e-newsletter” reminds me of 1999. Come on! You can do better…
2. The image does not give me an opportunity to a) enter my email address or b) even *begin* to set my expectations around frequency or content. Maybe this all happens when you click on the image, but…
3. Top left…hidden…buried…not great placement.
Not all that shocking though that they missed the boat on the email subscription real estate. Kimberly and I found this to be the case for many of the major online retailers in this edition of BrontoFire: http://www.youtube.com/watch?v=3L20Z4sHRyg
dj at bronto
I am finishing reading “Waiting for Your Cat to Bark” and literally just placed an order with Amazon for Krug’s “Don’t Make Me Think” and King’s “Website Optimization”.
I read “Call to Action” prior to a big site redesign 3 years ago and treated the book as my web bible. Huge improvements across the board. I’m now ready to embark on the last major redesign and blogs like GetElastic and books like those above are invaluable to understanding what works. As a small web site owner, I can’t afford a big design firm, so designing and managing the project myself is the only way to go.
Thanks for the great analysis and book recommendations.
Mendy
@Audio Bible and Mendy,
Bryan Eisenberg, John Quarto-vonTivadar, Lisa T. Davis (From Future Now) have another book called “Always Be Testing” (I’ll be reviewing it soon on Get Elastic)
I would highly suggest, Audio Bible, that you come up with 3 radically different designs for your calls to action of New Products, Top Sellers and Clearance. You can glean inspiration from competitor sites or other online retailers, and then run an a/b/c split test with Google Website Optimizer. That’s the best way to determine what’s going to work best for your site and customers.
I say to try radically different designs because once you find a clear winner, you can make micro-adjustments to further improve the design in additional testing runs.
Very good analysis and article Linda - thank you. Valuable - the first impression is always the lasting impression. I have never had the time to focus on how a good web site / page should look and behave - just know what frustrates me. This is a valuable service you are providing! Keep it up.
SM
The differences in quality between these two sites is amazing. Thank you for writing such an in-depth and organized discussion of the problems on the Source website. I am in the process of a major redesign on one of my own sites, and have that “too close to the subject matter” feeling. This should help tremendously.
Being new to eCommerce, I hadn’t heard of the Klug classic recommended in this blog. I will definitely order a copy now. Thank you.
Linda,
Amazon just informed me that the book “always be testing” is shippping early.
Did you review “waiting for your cat to bark”? I did not think it was as good as “call to action”.
Mendy
Great timing on this article, as we’re working on a client project where we will be employing the ultra-simplistic form of a homepage design. The combination of their product line, their market, and the website visitors (along with some historical data to draw these conclusions from) indicate that users know what they’re looking for before they come to the site - and they’re not really browsing per se. The homepage is designed to accommodate those behaviors.
But, in general, I see a lot of merchants having a hard time focusing on just a few items on the homepage because they sell so many products, that they want to communicate all of that to the visitors, while many don’t realize they’re overloading them. Our rule of thumb, have a max of three main areas of focus on the homepage - and incorporate a design that will emphasize accordingly.
Hi Mendy,
I have not reviewed “Waiting for Your Cat to Bark” or “Call to Action” on this blog, but I will review “Always Be Testing” and I understand it is on its way.
I have just finished my category pages redesign and added item pages. YEA…..
I also added links to new added pages, “Top Sellers” “What’s New” and “Clearance”. Jason had a suggestion, I thought good so I used it.
I would really love to hear what you think my biggest weaknesses are now.
I also just add item pages to the site as well, any feedback on them is welcome also.
thanks………
I am working on redesigning my home page a bit now.
I am planning on adding a top rated/reviewed section right below my daily featured section on my home page.
In this section i plan to have the 3 highest rated products listed.
What should I call this section? Any ideas???
I’d go with ‘Customer Favorites’, but only testing can tell you what’s best.