Online stores can often be confusing and hard to use which can turn potential customers away. There are some very simple things you can do to keep your users focused on your site. Here are some great examples of sites doing just that.
CafePress
Good use of top navigation, highlighting the relevant section that the user is currently viewing. Good use of colour to ease usability.
The Mozilla Store
The Mozilla Store creates a fun, creative feel to their online store with related sketches in the header and clear navigation on the left makes it easy to find products.
HMV
HMV’s store almost jumps out at you due to the shadows either side of the content. Space for promo offers in the header to catch the users’ eye and big, bold and clear navigation.
Nerve Music Store
Nerve uses an unconventional method of dragging items to the shopping cart on the right but a big ‘Drag Stuff Here’ button above the cart instructs users what to do.
Taste Book
Taste Book gets across the message of what it is very clearly on the homepage followed by a big distinctive button indicating that it’s free to join.
Blooming Gorgeous Flowers
A design that displays the elegance of flowers with the use of vector illustrations as well as good photography. Great use of icons in the footer and for the basket in the header.
General Robots
Clean graphics and good use of colour shift the visitors’ focus to the products.
Bambino Direct
Fun colours directly relate to the products that Bambino Direct sell.
Blooming Direct
Blooming Direct’s store is ordered into three columns. On the left is the secondary navigation, in the middle is the content with the primary navigation on the top and on the right is the basket and space for offers.
Steam
Layout makes good use of whitespace especially in the left column which contains the navigation and categories. Use of colour to easily distinguish between what is and isn’t clickable.
Feel Unique
Very clear navigation through the use of tabs and login section on the left for easy access for returning customers.
Big W
Big W uses a very clean and uncluttered design that makes great use of whitespace making it easier for the user ti understand how to navigate and use the site.
Northern Tool + Equipment
Colours and design reflect the products on sale giving the users more of an association with the store.
Makoosh
Bold colours which translates into a bold and easy to navigation. Use of a big promo area and a recently viewed items in the ‘My Account’ section on the right giving the user the ability to see what they looked without remembering exactly where it is located.
REI
Another great example of top navigation but with the colour changes dependent on what section that the user is viewing.
Boots
Boots uses a promo area that cycles between three different images with a very clear indicator to show which image it is on. It even includes a pause button so that the user can stop the auto-scroll and take in the message.
Schwan’s
Big imagery allowing the company to promote specific items and draw the users’ attention to them.
Apple
Apple really keeps the focus on the products with little distraction elsewhere. It’s complete line-up of major products are displayed in the top two rows of the store.
Play
Play makes it very clear which section you are visiting due to a clear tab system. Promo area in the middle updated regularly keeping the customers coming back to new content to keep them interested in the store.
Game
Clearly defined sections with big message in the header notifying of free UK delivery which can be a great incentive for people to place an order with them rather than a competitor who charges even a small fee.
Etsy
Etsy gets across the message of what they sell with a big tag line placed underneath the logo.
QVC
QVC displays a message to users who haven’t visited the site before. This allows them to send out an introduction message to welcome new visitors.
Threadless
Great imagery of the products in use by people which is a fantastic way of presenting items.
Nice collection this one
. I was kinda interested in this kind of design.I think I found what I needed, thaks for the post.
Great collection! I’m glad that Etsy is featured – I think they do a GREAT job. I’m surprised that Target isn’t up here as one of the greats. Especially since they’ve won e-commerce awards in the past.
Awesome list! Although I’m a little embarrassed to say it, I think the QVC site is fantastic.
Another one I have always loved is: http://www.panic.com/goods/
Inspiring thanks!
Hmmm, no doubt some of these work well, but which ones? What few commentators do is take the time and effort to ask how much these companies sell from their “great” stores. An ecommerce website design is “excellent” if it works (ie sells stuff). This is like listing the 10 best cars without driving them and seeing how they perform in their sector. It’s lazy, sorry.
Anyone can pick some websites and say how good they are – let’s see the figures! (Must throw Apple in to keepn the mac crowd quiet). For example… RYANAIR.com is an excellent site, it does its job – but the chattering weberati will yelp all day long at how “awful” it is.
Not really sure why you “singled” out these 23 sites .. So many good great and clumsy shops out there – what really makes the difference is how they interact with customers and ease of ordering and finding what you want.designers love slick sites because they can showcase their art, but at the end of the day what’s important is a site that closes the sale, something that far too many sizzle sites overlook.
Here’s another: the most amazing UI I’ve ever seen for an online storefront (drag and drop shopping cart, sliding panes, lightbox, etc): http://kayosmarket.com
Full disclosure – I built it
It’s still pretty awesome though!
@Ling: Really, RYANAIR.com? RYANAIR.com is just plain ugly and riddled with adverts. I think RYANAIR.com does the job because the rates are so incredible. It definitely has more to do with the business model than the actual design.
Muito boa lista. Gostei bastante.
There’s a good article about rebranding an e-commerce site that I found the other day.
Nice list, btw.
@matthew, yes Ryanair
Look, everyone can oooh and aaaah at “beatiful” sites (in sort of mac design terms) but what customers want is something that works.
“Excellent examples of design” can only be true if the sites do their job, and whoever compiled this page has not bothered to analyse how the sites perform, in dollar (or pound or euro) terms.
If some of these sites do not create profitable business, how can they be “excellent” in any way? Just because they have perfect code or css or validate or have beautiful colours means nothing. Good design alone does not buy food or create employment.
Ryanair.com works fantastically well. Is functional, but is also excellent.
- Ling
Beautiful websites. As much as people downplay design in marketing, poor designs will destroy the product no matter how good the product is.
I have to say that wwww.bambinodirect.co.uk is a particularly good example.
Inkd is the first marketplace to buy and sell print designs and Smashing Magazine profiled us as a good example of e-commerce usability and conversion. Check the article here if you are into this kind of stuff: http://www.smashingmagazine.com/2009/05/15/optimizing-conversion-rates-its-all-about-usability/
Amazon not on the list??