How Simple Web Design Helps Your Business

Advertisement

Many e-commerce sites these days tend to be loaded down with too much information on their landing pages. The reasoning for cluttered e-commerce sites is simple: the more information you can cram on the page, the more the user will buy. Unfortunately, web buyers are a finicky bunch.

Jacob Nielsen reports that web users are becoming much more impatient1 while shopping and browsing online. Instead of spending their time going to a site’s homepage and finding the content by categories or other product recommendations, most shopping is done by quick Google searches. If the user can’t find what she’s looking for right away, she’s gone.

It’s crucial to have simple web designs to allow the user to quickly find the information they need, especially if you are selling a product. If the page is cluttered with useless text, widgets or unrelated products, the site becomes meaningless.

However, it’s become a common practice to do just the opposite. e-commerce sites have taken this “scatter shot” approach of trying to slap the potential buyer with as many options as possible. Instead of making the landing page solely about one product, sites usually clutter the page with unnecessary information, ads and related products.

Less Products Mean More Focus Link

Many web companies forget the cardinal rule of e-commerce: Web shoppers want as little hassle as possible. Instead of hopping in the car and driving to the store to buy a DVD, it’s much easier to go online and snag it from Amazon in a few clicks. The customer is even willing to wait longer and spend more money if the shopping experience is simple and fast.

Apple2

Apple3 has mastered the art of minimal homepage design. If you go to their homepage, they’ll only show you three things:

  • A simple header navigation
  • One product in the body of the page
  • A few informational links about the featured product with images below the fold

Aside from the standard footer navigation, the homepage consists only of three parts. Here’s what you see if you click on a product link (like the iPhone4).

iPhone homepage5

Even on the product page, you immediately see what the page is about: the iPhone. The product itself dominates the bulk of the page, and the surrounding information are apps and features of the new iPhone. But more importantly, notice what’s not on the iPhone page:

  • Unrelated products
  • Unrelated sidebar ads
  • Lots of copy
  • Clutter

Apple has effectively shown just enough information in a very pleasing manner. There’s nothing wrong with showing lots of information, as long as it doesn’t feel like a lot of information. You’ll also notice that all of the information, links and pictures are all centered around the iPhone and what it offers. There are no distracting ads or unneeded information about other products.

There are a couple of tried-and-true methods that any designer or web developer can take to ensure that the site layout doesn’t drive customers away with clutter.

  1. Only what you need.
    The biggest aspect of simple web design is only showing what’s needed to make the sale, and nothing more. This doesn’t mean that you can’t give the user lots of information. Just make sure they want to see more information. Apple uses “Learn more” links throughout the page to accomplish this.
  2. Reduce clicks. The less clicks it takes for a customer to buy a product, the higher returns. Don’t make them jump through hoops to buy your product.
  3. The “Grandma” rule. If your grandma (or any elderly person) can figure out how to buy a product for your site, odds are it’s put together pretty well. Unneeded information will turn Grandma away quickly.
  4. Reduce the number of columns. Each time you add a column to a page, the content is pushed into a smaller and smaller space. This puts less emphasis on the main product, and more on extra stuff the buyer isn’t really looking for.
  5. Give less options. There is an added stress put on web shoppers to make decisions. Ultimately, the buyer wants to think as little as possible when making the purchase. Displaying products in a way that eliminates extra thinking and decisions will streamline the buying process and give the customer more peace of mind.
  6. Keep it clean. A clean design keeps visitors happy. By taking the time to ensure that the layout of the site is aesthetically pleasing keeps the customer returning to the site.

Intuitive web design means thinking like a potential customer. Would you shop at your site?

Other Great Examples of Simple e-commerce Design Link

Bell.ca6

Bell.ca7 uses only a few colors to indicate the branding and offers visitors only the main navigation options. Notice how well the design manages to present a number of different options — shop navigation, support as well as personal and business areas. The design isn’t cluttered but clean and simple and provides the visitors with a broad overview of available options without forcing users to actually go through all of them. Also notice how clever the product navigation is designed at the top of the site. There is just nothing users can do incorrectly.

Shoeguru.ca8

Shoeguru.ca9 present a very user-centric and product-centric design. The product seems to be on the stage just in front of the visitors. The design presents only the product, and nothing else; even only few navigation options are available.

Etsy10

Etsy11 is a great example of how to place a lot of information on a page without it being cluttered. Etsy has a wide catalog of products to sell from, yet Etsy’s design has an earthy, relaxing quality. Creating a useful homepage that doesn’t distract is no small feat.

crupress12

Crupress13 is an elegant book site without many distractions. The homepage manages to present a lot of text without agitating the user. The header navigation is prominent, but doesn’t demand attention. All the design elements flow together smoothly.

tokyocube14

Tokyocube15 is a fun, trendy little site that sells Japanese products. Instead taking precious space explaining what the site sells, the products are put right in front of you. Also, the heavy use of white space allows the products to almost jump right off the page at you. You can’t help but click on one of the toys to learn more about them.

furious tees16

While Furious Tees17 is a tad busier in graphics than the previous sites, it helps do two things:

  1. Show the playfulness of the site
  2. Make it very clear that all shirts are only $19.99

You aren’t lost trying to figure out what Furious Tees is selling, the products are all in front of you. Having all the products on the homepage is especially beneficial for novelty sites that have merchandise people normally wouldn’t be looking for.

But sites with lots of products on the homepage run the risk of becoming cluttered very quickly. Furious Tees doesn’t have this problem. They don’t use any extra sidebars or ads taking attention away from the T-Shirts. The focus is solely on the shirts and the hilarious design.

37 Signals18

Basecamp (37 Signals)19

Look no further than 37 Signal’s project management tool Basecamp for an incredible example of mixing different types of information to sell a product. Yet there’s just enough information to make an effective sales copy. Every word, every image has to be weighed in a design. If there’s not enough information, the user won’t spend time trying to figure out what the product does. Too much information and the user becomes overwhelmed.

The tasteful use of heading backgrounds and company logos makes every bit of information stand out on it’s own. And they somehow made all of the different types of media blend together, with plenty of space so that the user isn’t bombarded by lots of text or images at one time.

You Only Have a Few Seconds Link

Every website is going to require a different type of layout, design and copy to sell products. But designers can strive to do more with less by:

  • weighing every word
  • removing unneeded elements
  • using tasteful colors and whitespace
  • and limiting the amount of overall information the shopper sees at one time

Remember, online shoppers are a fickle bunch. They don’t “window shop”. They use search engines to limit their searches to a very narrow field. If they don’t like what they see, they leave. Site owners only have a very small window of time to capture the attention of the prospective shopper. A tasteful, clutter-free design that places the focus on the product (and nowhere else) will allow the shopper to find what she wants faster.

Glen Stansberry is a web developer and blogger. You can read more of his articles on smart web development at Web Jackalope20.

Footnotes Link

  1. 1 http://news.bbc.co.uk/1/hi/technology/7417496.stm
  2. 2 http://www.apple.com/
  3. 3 http://www.apple.com/
  4. 4 http://www.apple.com/iphone/
  5. 5 http://www.apple.com/iphone/
  6. 6 http://www.bell.ca
  7. 7 http://www.bell.ca
  8. 8 http://shoeguru.ca/
  9. 9 http://www.shoeguru.ca
  10. 10 http://www.etsy.com
  11. 11 http://www.etsy.com
  12. 12 http://crupress.campuscrusadeforchrist.com/
  13. 13 http://crupress.campuscrusadeforchrist.com/
  14. 14 http://shop.tokyocube.com/toys.htm
  15. 15 http://shop.tokyocube.com/toys.htm
  16. 16 http://www.furioustees.com
  17. 17 http://www.furioustees.com
  18. 18 http://www.basecamphq.com
  19. 19 http://www.basecamphq.com
  20. 20 http://www.webjackalope.com

↑ Back to top Tweet itShare on Facebook

Glen Stansberry is the editor at Web Jackalope, a blog about creative Web development.

Advertisement
  1. 1

    iPhone rulz

    0
  2. 2

    nice

    0
  3. 3

    A very nice and needed article. I always try to tell this exact same thing to my clients or future clients, but somehow, they just don’t believe in this. They want so much more than required. The same goal can be achieved by designing a website in a simple manner. I hope someday everyone would understand that.

    0
  4. 4

    Superb article. I used to fight so hard to move my employers ecommerce site in the direction of the sites above but I got shot down so many times I gave up, and now I just happily agree with whatever they throw at me ……. (prozac’s a wonderful thing). Just a taster of the daily crap:

    Bigger logo, every day …….. BIGGER LOGO, one day our site might just be one big logo.

    Unresearched promotions for new (untested) products pushing the hard working converting content below the fold.

    A 101 ‘we’re affiliated to …’ site/company icons along with links out encouraging visitors to visit these sites as soon as they hit our homepage.

    Forever adding new sections to the main menu for areas of the site that remain ‘dead’ which are just ego pages for the company.

    and graphics that really wouldn’t mean anything (Don’t ask)

    0
  5. 5

    thanks for this post – i love to see info related to e-commerce. very helpful!

    0
  6. 6

    The layout for Bell, Basecamp, and Etsy may all be simple, but the navigation is anything but. I never feel confident with the answers i’ve hypothesized from my frustrated clicking on Bell. Basecamp’s links defy logic at times, and Etsy is too ubiquitous to navigate unless you know precisely what you’re looking for. They could all do with some UI retooling.

    0
  7. 7

    “Fewer Products Means More Focus”. Try English.

    0
  8. 8

    Finnicky, I know… but I think Jacob NielSEN might have the MOST commonly mispelled name on the web… EN not ON :)

    Otherwise.. article is a bit thin and hardly new.

    @Fred – well paraphrased: http://thesaurus.reference.com/browse/less

    0
  9. 9

    I agree with that in-depth comment on the niceness of this post. I agree whole heartedly. Indeed. Hmm.

    0
  10. 10

    The iPhone is a great example of how hype and marketing can turn a mediocre handset that lacks features most cheaper phones offer into some kind or revolutionary product that users will climb over each other to defend despite the myriad of issues being reported by the few people who don’t have their heads up Apple’s.. apple.

    Great article as always.

    0
  11. 11

    漂亮!

    0
  12. 12

    Yeah… I could design an AWESOME layout if I wasn’t concerned with adulterating it with ads to turn a profit on it.

    No ads = a whole ‘nother class

    0
  13. 13

    Agreed, however good design isn’t enough. You can have the best website design in the world and still not be successful. And vice-versa, you can have a horrible design and still be the leaders in your market. Take Facebook/Myspace for example.

    More details/tips in my take: Good design isn’t enough! [ @ Triple Confluence ]

    0
  14. 14

    I agree Matt, but a good design definitely helps.

    0
  15. 15

    Excellent articles!

    0
  16. 16

    hey, thanks for mentioning tokyocube!

    0
  17. 17

    hmm nice aricle, but seems like its very good for single product ecommerce site, but what if shopping site is huge like amazon.com or ebay.com, in that case there may be lots of information on landing pages… do you agree?
    anyway good article to learn about clean ecommernce site design, cheers!!!

    Thanks,
    HiddenPixels

    0
  18. 18

    I agree with ryan – basecamp and others are poorly UI designed. unbelievable really considering their offerinf!

    0
  19. 19

    very good article

    0
  20. 20

    What about the SEO value of content on an index page?

    0
  21. 21

    Great article, very useful site.

    0
  22. 22

    Michael J. Cohen

    August 26, 2008 9:56 pm

    Great points, I will have to show this article to a few people.

    Curiously though, you have so many ads that your very own layout isn’t simple ;)

    0
  23. 23

    I wish clothes shopping sites would give me better options. Instead of letting me narrow my search by price or brand, how about by useful things like fabric? I’d like to be able to narrow it down this way:

    Mens–>Sport Coats/Blazers–>Corduroy–>skinny corduroy–>tan–>elbow patches

    The web needs less scattershot searching and more artful taxonomy. Less like the garage and more like the library.

    Another example of good design: jackspade.com

    0
  24. 24

    Ugh, more apple fanboy stuff. Apple really wasn’t the first company to have simple design concepts. Sorry. I guess I shouldn’t be surprised that articles about design don’t always seem to revert back to what designers stare at all day long, the apple.

    It’s just getting old though. Like it gets old seeing the same girls in magazine covers. Ok, we get it. Let’s not kid ourselves that apple always does everything first. yeah the iphone is great. But the ipod was not the first mp3 player. Selective fanboy memory says it is, I don’t know why. time to explore new ground. I got an idea, let’s ignore apple for 6 months and build up another random company, and say yes to everything they do. Because they did it, after all, so it must be perfect and perfectly simple.

    There are a lot of pages on Apple’s sites that aren’t so simple and focused. LIke EVERY other page linked from the main bar. So the reality is, Apple has one or two decidedly simple pages on it. And so they are the master of simplicity? How trite.

    0
  25. 25

    apologies. That’s jackspade.com

    0
  26. 26

    I always wonder if this trend towards simple tends to make the developer more relevant than the designer. Hmmm…

    0
  27. 27

    Nice article!

    I don’t fully agree on the ‘reduce clicks’-part. It is proven that it’s better to avoid a labyrinth of clicks in your navigation. But on the other hand, taking #1 (Only what you need) into account, it is better to make a seperated page (just like Apple) behind an extra click to persue a clean page layout and avoid clutter. So sometimes an extra click (or two) is not so bad, just show your visitors where they are, and provide them with proper manners to navigate to other parts of your site.

    0
  28. 28

    nice article, nice links. Even in the “web 2.0” era it´s important to remember the value of user-centric design “give the user what they want and they are sure to want what you give them”.

    0
  29. 29

    @ms

    Ugh, more apple fanboy stuff. Apple really wasn’t the first company to have simple design concepts. Sorry. I guess I shouldn’t be surprised that articles about design don’t always seem to revert back to what designers stare at all day long, the apple.
    It’s just getting old though. Like it gets old seeing the same girls in magazine covers. Ok, we get it. Let’s not kid ourselves that apple always does everything first. yeah the iphone is great. But the ipod was not the first mp3 player. Selective fanboy memory says it is, I don’t know why. time to explore new ground. I got an idea, let’s ignore apple for 6 months and build up another random company, and say yes to everything they do. Because they did it, after all, so it must be perfect and perfectly simple.
    There are a lot of pages on Apple’s sites that aren’t so simple and focused. LIke EVERY other page linked from the main bar. So the reality is, Apple has one or two decidedly simple pages on it. And so they are the master of simplicity? How trite.

    Apple won two black pencils at the D&AD Design Awards for the iMac and iPhone. I guess the panel of experts who decided the winner didn’t have your insight.

    And sorry for ranting back but the thing that’s old is all the “fanboy” namecalling remarks every time someone mentions Apple. If someone supports a football team and believes in them 100% no matter how badly they perform, do they get called fanboy? No, they’re merely a loyal supporter. Why shouldn’t people be allowed to make that choice with a company as well?

    0
  30. 30

    nice, can be very useful!! thnx!!

    0
  31. 31

    Getting a clean and flexible layout is not that easy.

    0
  32. 32

    I’ve been taking a cue from 37 Signals school of webdesign for a couple of years now.

    They took the bold step on the 15th of discontinuing all IE6 support across their product range. The statement they released is essential reading for anyone trying to explain to a client why their website looks different in last-gen browsers.

    http://37signals.blogs.com/products/2008/07/basecamp-phasin.html

    0
  33. 33

    web design company

    August 27, 2008 12:25 am

    It s crucial to have simple web designs to allow the user to quickly find the information they need, especially if you are selling a product. If the page is cluttered with useless text, widgets or unrelated products, the site becomes meaningless.

    0
  34. 34

    to reply to Grover. The kind of search your referring to is being implemented right now via a new search technology ive seen called answeroil. Currently its just for cameras but they are proposing to use the technology for any search criteria. heres the link http://www.answeroil.com

    0
  35. 35

    @ms

    re: Apple fanboy. I’m so with Marc here. I’ve been a Windows user all my life up until 2 months ago when I finally decided to splash out nearly a months wage on a terribly expensive iMac. It was one of the best purchases I’ve ever made.

    People aren’t Apple fanboys because they’re following a fad, trying to be cool and fit in as a ‘designer’ – we love Apple because their products, software and customer service are fucking top notch.

    To all people who wish to abuse and direct arrogant opinion towards people who are fans of a specific companies products – shut the fuck up, please.

    The points raised in the post are good points that should be taken in. They consider aesthetics and usability, looking at web design from the perspective it should be looking at – trying to make the internet a better, more user-centric place. So don’t sit here on your high horses and knock Glen’s effort in putting this piece together – there’s something here for everyone and if you can’t see the benefit, go and leave your arsey remarks elsewhere.

    0
  36. 36

    love your articles alwayz ^^

    keep it up

    0
  37. 37

    Very good article, thanks, but unfortunately the examples have the advantage of not having that many products. Large sites like play.com, amazon etc have far more products and information to highlight so I imagine it wouldn’t feasible or effective to only present a few products on one page.

    Though i’m not denying they could employ the same simplistic methods to clearly present information.

    I guess a happy medium between content and simplicity is the key. I think it’s possible to have lots of content and still clearly present information and give it a good hierarchy of importance.

    0
  38. 38

    Great article. This showcase is a good example of those who have got it right. I think that succeeding in creating a simple, high impact site is incredibly tough.

    Link

    0
  39. 39

    Very nice post.. thank’s smashing’s people. :)

    0
  40. 40

    yup… I know this pain too. Makes me wanna just quit being a designer.

    0
  41. 41

    I completely agree. Simple is easy on the majority of users eyes, the proof is in some of the most popular sites on the web…

    0
  42. 42

    simplicity is a hard stuff, but this article shows clearly his benefits, thank you for this great article!!!

    0
  43. 43

    http://www.htc.com – Touch Pro – the iPhone killer ;-) Also a great example of simple site using unobstructive flash..

    0
  44. 44

    Rodrigo Teixeira

    August 27, 2008 4:21 am

    The website Shoeguru.ca is very beautiful and simple! The great post!

    0
  45. 45

    Great post. A bad example of simple e-comerce is godaddy.com, they have 1000 steps to buy a domain

    From Venezuela

    0
  46. 46

    Very nice post. Simplicty rocks! Any day!

    0
  47. 47

    @fred: dang, beat me to it! :)

    0
  48. 48

    TokyoCube is sweet! Nice publication again. Smashing magazine has become one of my fav sites in a short time.

    0
  49. 49

    Give Basecamp a break, will ya ? Really seems 37signal people pay others to write about them.

    0
  50. 50

    You seem really hung up on who does something “first”. Doing something first doesn’t always, and actually rarely, means it’s the best. That being said, the Apple example is thrown out there because it is the BEST example and is something everybody recognizes and can relate to.

    0

↑ Back to top