Well, we think we're funny.
It would be great if you did too but it really won't stop us if you don't.
This is where we take ideas out for a spin...care to join?
Web Design Myth #432: Less Is Always More
by on November 19, 2009
Throughout the design world, the phrase “Less is more” is a highly regarded axiom. Look no further than the iPhone or most modern appliances. They are devoid of any unnecessary elements that might distract the viewer or clutter their pristine surfaces. It makes sense to design this way. As a designer, you want to highlight what is important, remove what is not and make the purpose clear so the design can communicate easily to the intended audience.
This idea would seem to also translate to web design. Well, it does, but not always with the expected result. The Internet likes to take all your preconceived ideas about design and occasionally turn them on their head. I’ll show you one site that figured out that sometimes more, is in fact, more.
McMaster-Carr is a supplier of mechanical, electrical, and utility hardware. They maintain about half a million products in their catalog. Below is a screenshot of their website homepage. The current version is the one on the left. Click on it to see the full view. WARNING: Seeing this single page might make your head explode.
For those keeping score, that’s 26 main categories, 36 sub-categories, and 562 product links. Now if your head is still in one piece, you might want to brace yourself again. The users of this site think it rocks. They love it. To them it’s not cluttered, not overwhelming, and not vertigo-inducing. Over the years, the site has continued to add more and more links to the homepage. Each time users love it more and more. The most recent redesign took it a step further by adding illustrations of the products; before, it was just a sea of text links. The screenshot on the right, above, shows that design.
When first seeing this site, the initial reaction is always shock. It really does boggle the mind to see all those links and try to figure out how that works for anyone, but it does. It works because it’s tailored to this company’s users and what they want. Users of this site don’t browse, they know what they want and they go to the site often. Having all the products front and center allows users to quickly reach them. Some other sites that take this link-heavy approach are Staples and Craigslist.
Not all sites can pull this off. You have to figure out who your audience and users are, and what their goals — not just yours — are for the site. If you think that a cookie-cutter or template website is the answer for you, you might want to reconsider. Just like these guys, you are probably better-served with a site tailored to meet your users’ needs.
Comments
I think that if the McMaster-Carr site works, it’s because it’s organized and familiar to its audience; not because it’s deep.
It’s very hierarchical, and if categories match its users’ mental model (i.e., categories used in the original catalog are logical and the website matches the catalog’s familiar structure)… then it will succeed, even if it could be better.
It’s likely that McMaster-Carr’s web users already receive (or previously used) the print catalog. If that’s true, they might be looking things up in print before they go to the web. It could be a simple matter of determining the original print category, then drilling the website for those same labels. For me—a McMaster-Carr novice—there are still a heck of a lot of categories, and the prospect of mining that website exhausts me.
What the current site has going for it is that the categories are now paired with icons. The more visual, the better. You can scan pictures faster than you can read all those headings, and if the pictures are appropriate, it’s meaningful.
Learning theory suggests that the average person can keep about 7 items in memory. So if your main list has more than 7-10 abstract categories, it starts to overwhelm. The interesting thing here is that 7 top-level categories can be further divided into 7 subcategories… ad nauseum… without taxing users’ brains too much. (Patience with submenus seems to burn out after about three clicks, though). Note that McMaster-Carr’s sub-sub-categories are hidden, easing the burden of seeing it all at once.
I feel there are still too many top level categories here, but maybe their customers have such an ornate model in their heads… or they’ve learned it after years of mining the exhaustive catalog.
Websites are often assembled by “software builders” not “software designers” or “media architects.” The common result is a lack of structure, which confuses even expert web surfers. If features are piled on without any consideration for which features are valuable, it’s a waste of programmer effort as well as mind-numbing for users confronted with too many options.
David Pedergnana · Thursday December 10, 2009 · #
Hey David,
I agree completely that the audience is a huge part of it’s success. The design has been tailored to them. McMaster-Carr found out what they wanted and kept giving it to them. That is what every website should do and why going with a template or another easy route is not always the best.
It might be a difference in our definitions but I would describe the site as relatively “shallow” for the amount of content and not “deep”. The site removes clicks by bringing all the categories to the front instead of making you click through several filtering sub-pages. Now, it still has some sub-pages before getting to the actual products but far fewer than you would expect with that amount of content.
I would argue that you have to be careful with icons associated with links. The problem is the category icon doesn’t always fit with the users mental image of that content. People search and scan based on keywords and not images or icons. When people come to McMaster-Carr looking for Magnets, for example, they are scanning for the word “magnet”, not the image of a magnet. Worse yet, if they want to scan for the image of a magnet they would need to know to look for the stereotype horseshoe shaped magnet when the actual product might not look anything like that.
Lastly the 7 plus or minus one rule isn’t something to worry about with links and menus. I recommend reading this article (http://www.ddj.com/184412300) on the subject.
New Boston Creative Group · Shawn Dryden · Thursday December 10, 2009 · #
Shawn:
Thanks for the article you cited on 7 plus/minus. That theory was originally applied to memorizing lists of like items or nonsensical numeric strings like phone numbers; it is a bit silly to use it as justification for menu design. I think the key to interpretation here is:
“The effort it takes to repeatedly choose categories across many levels of a deep hierarchy outweighs the effort to scan many items in a broad navigation.”
I guess we’ll disagree as to what is “deep” and what is “shallow,” or in this case, what is “broad” and “too broad.” To me, it’s very laundry list to mix “Office Supplies” with “Pressure & Temperature Control”… and given this structure, the only useful interface for the novice is the SEARCH field at the top left of the page.
I agree that pictures can be misleading.
For the visually impaired, without alt tags they don’t reveal anything! But I believe icons (always paired with text descriptions) are still better than those horrible blocks of text links used in the prior software. No one is going to scan all that. After a few return visits to the same category, the user will start to remember its associated icon, and use it as a key to find what they want more quickly. Pictures are more visually distinct than strings of letters.
“Visual distinctness” (through sufficient white space, icons, effective positioning…) is very important to any layout. The site makes good use of white space and positioning most of the time, and that makes its epic scope more tolerable.
David Pedergnana · Friday December 11, 2009 · #
Hey David,
I think you narrowed it down pretty good with that excerpt. You must decide which will be easier for your audience, a deeper structure with narrow options or a shallow structure with a broad range of options.
In defense of McMaster-Carr, the lack of alt tags in this particular instance is justifiable. The icons are included with text descriptions so having alt text would be redundant. The icons don’t contain any content that visually impaired persons are missing.
I really wish the Internet Archive worked better so I could show all the different stages of this site. Seeing it grow into this behemoth is as shocking as it is to know that each time it got bigger people loved it more.
New Boston Creative Group · Shawn Dryden · Friday December 11, 2009 · #
Leave a comment