Below are examples of the different navigation solutions used on content heavy websites ranging from the most common to the latest bespoke reinventions.

Primary navigation should give users quick access to the most important pages of the website. What these links are, and their order in the navigation, varies from website to website.

Typically the primary navigation is at the very top of the website in the area that is most visible regardless or screen dimensions. In recent years the “de facto” style has evolved to increased button size, minimum amount of links and drop-downs that reveal further categories. This style was partly adopted to make websites easier to use on mobile devices but also because it can create a focused user journey and can increase the prominence of the menu on a busy page like The Carphone Warehouse.

The second most common location for the primary navigation is on the right hand side of the page. This is commonly used on websites with a wide range of categories such as Amazon and E-bay. The vertical navigation allows these websites to include more words.

any primary menus reveal a secondary menu of categories. There are plenty of websites that have reinvented how this works and the type of information displayed in order to offer their visitors a more helpful and unique experience.

Human brains respond to images far quicker than words, so including visual graphics in the navigation will improve how quickly some users find their desired links and will also improve the visual style of the menu.

Apple enhanced their navigation by displaying a beautifully animated product range. Users can choose a category to view and see links to their top products. This creates a more direct user journey to the desired products without loading different pages.

Gettington has also used visuals to help guide users to their top categories.

Gettington has also used visuals to help guide users to reach their top categories.

Bonlook, a prescription glasses and sunglasses supplier, has a wide range of styles and so browsing by description might be a little confusing for the users. Instead they use visual icons:

Ralph Lauren has used the dropdown feature as a way to give an insight into the category, with an image and summary rather than a list of links. This is a great way to provide a unique experience for the users and a useful browsing feature.

Most navigations are primarily made up of text links, but some companies need to promote a category or page more than others. Clarks and Borders use icons and logos to guide the viewers eye to the promoted link. The different visual will arouse curiosity in the user making them more likely to click on the link to discover its contents. Contrasting colours are often used for links such as ‘Sale’ and ‘Offers’ as they demand attention and give the content priority.

Another great example of a appropriate navigation solution can be found on Trip Advisor. Each category has its own custom search within the drop-down enabling users to see results based on their specific criteria:

Users are very accustomed to conventional forms of navigation so challenging them can be risky, as they’re having to learn a new way to find things around the website. House of Fraser recently updated their website and reinvented their primary navigation. The navigation initially requires users to choose how they want to shop – by Department, Brand etc. These are the top categories that their customers use the most. The users’ initial choice remains consistent throughout the website – very relevant for a female customer, as she would not want to see all the other categories.

These examples prove that there is considerable flexibility to restructure website navigation to help organise information in a way that’s usable, accessible, and logical to the user. In future we can expect to see more personalised navigation options and websites that allow users to save menu preferences and layouts. The review of our navigation layout and hierarchy of information can solve the problem of ‘information overload’ and provide relevant content to customers. Websites no longer have to cram every bit of content on the home page, but instead provide better navigation solutions that will help users find the content they need.

One great and very well thought-out example of customer content can be found on Mr Porter, the men’s fashion retailer. Landing on their home page you will notice that products are secondary to everything else and the first thing you see is a large banner promoting their journal. The journal is a content-rich area with posts about style, fashion, advice, life stories and much more.

Clicking on “Shop the Story” will allow users to view the items worn by the person featured in the story. This user journey to the product means that the user has a story attached to the product. It’s no longer just a product; the story adds value to the item, which means it’s now more meaningful, more representative of a lifestyle and instantly much more valuable.

I thought I would illustrate this simple but very clever user journey below:

If you have a date coming up and want some advice then you can be sure Mr Porter will help you make a lasting first impression, with advice about how to talk to your date, what to wear, and even recommended locations! I have to say I’m impressed.

This year we saw many fashion retailers add blog pages to their websites, with posts about the latest fashion shows, catwalk videos, celebrity trends and style advice. Usually the items featured in the blogs are sold on the website and links will lead customers to make a purchase. This is clearly a great subtle marketing tool, but what about the blog posts that have nothing to do with what the website is selling? For example a TopShop blog about a puppy called Boo who has nearly one and a half million friends on Facebook? You might ask how does it lead to a sale? The answer is simple, emotional engagement with the brand!

Customers will associate the cute post with the brand – it shows that there are real people behind the brand who have a sense of humour and feelings. These posts can encourage brand loyalty and help customers associate with that brand.

Customer-focused content can also come in the form of lifestyle photography. We are seeing more websites invest in this and provide customers with a much more inspirational experience. Good photography will not only give an e-commerce website character but it will have a huge impact on the aesthetics of the website.

Photography encourages ideas, aspirations and motivates users to make more than one purchase – while the photo will feature the main product, the customer might also take interest in another product that completes the ‘look’.

PotteryBarn for example has a ‘Room Gallery’ page which displays different lifestyle images featuring products sold instore, but they also allow users to upload their own images of their rooms.

Pottery Barn has a wealth of content that will be helpful for anyone moving into a new home or just re-decorating, such as decorating advice and entertaining ideas which includes party tips and even recipes.

Similarly John Lewis also has a Party Planning section on their website with tips and articles on how to host parties with links to related products.

John Lewis also has a inspiration section which shows various products displayed on a moldboard layout including colour scheme and theme.

Customer-focused content can help companies establish themselves as experts in their field by providing useful tips and information that will help customers make good purchasing decisions. Providing customers with content that they find useful can improve the company’s reputation for good customer service. These are just some of the many reasons why we think e-commerce websites need to start reviewing what they offer customers.

I can confidently say that removing the logo and product from the design will make it difficult to pinpoint which website belongs to which brand.

I’m not implying that a clean and clear website is a bad thing; however minimum use of graphics, textures and typography can result in a bland and common design solution.

A good example of this is the recent update for Liberty London, where everything has been stripped away, and the only association to it’s identity is the little use of it’s brand colour; purple, and the logo in the header.  This was very disappointing because the Liberty store is beautiful, moody and warm, but the website does not reflect the in store experience at all.

The Website

So I have decided to find some good examples of e-commerce websites that are breaking this “clean clear” trend and have a lot of personality.

Waitrose have created a new and beautiful and colourful website, however there has been much discussion about its usability. When attempting to create something unique and distinctive we must also take into consideration that many users expect to find things in the usual place and traditional functions, so to some extent most websites should function similarly but should look individual.

The Converse website stands out from others because it’s fun and interactive, it’s visually interesting and encourages exploration. They used a cut and paste theme, incorporating various textures, hand written type and graphics.

Sofa.com is a plain and simple website, dominated by white neutral colours but has some details such as illustration and interactive areas which help it stand out from others, complimenting their brand and relaxed style.

Bohemia has a clean and clear website with little details that make it stand out from others such as typographic decoration and friendly graphic icons.

Wine retailer The Hungarian Wine Society have a distinctive colour scheme with graphic elements inspired by wine labels. The centred header navigation and unusual layout makes this website memorable and worth noting. They have also applied texture to their photos that helps tie up all the elements together to create a soft and welcoming atmosphere for their website.

Peter Nappi website design incorporates texture you would associate with leather and boots. It uses beautiful and moody photos of products which are displayed within an old photo frame. Despite its playful and distinctive theme it still looks trustworthy. Clear action buttons and product detail page with 360 view option makes this a good example of e-commerce.

Hollister uses beautiful typography treatments to make this shopping experience unique. The textures and photography effects create a calming and relaxed mood for this website.

I hope that these examples show that e-commerce can be more than just function focused and that companies should put more effort to ensure their websites stand out from their competitors through clear brand representation.

The app is aimed at existing Debenhams reward card members and also encourages new registrations. One of the benefits is that shoppers can instantly access and redeem their ClubCard points.

The ‘Paint your Nails’ option allows the user to choose their skin colour and virtually try nail colours from the vast Debenhams range. The application offers personal skin care consultation according to the user’s skin type and lifestyle.

When we shop in department stores we like to know we are getting the best deal. Equipped with mobile internet we can research products, compare prices and read reviews. This application embraces this new customer behaviour, as it allows users to scan barcodes which brings up product details and reviews. With this information instantly available, users can purchase the product directly on their phone and have it delivered to their home for free, with no more carrier bags or time spent in the queue!

The app offers beauty videos and make-up tips with the option to buy products featured in the videos.

I know this app was not designed with the focus for in-store shopping, but I think that many customers will find some of the features very useful when researching a product or deciding on what is suitable for them. I am sure we will see many more similar applications that focus on making in-store shopping easier, more pleasant and more informative.

The website allows existing clients to place orders that suit their past purchases without going to the store. It also encourages new customers to explore their ranges. Users can pick from detailed features such as cuff style and colour, pocket type, back pleats and much more. The wide variety of options available is probably what sets this website apart from its competitors.

We would have liked to see more information about the shirt cut, style and materials; this would really help new and existing customers decide what is suitable for their occasion, maybe even choose something a little more daring. The application could also benefit from a size guide but maybe that is something they will implement in the future.

Unlike the shirt application, the trousers customisation doesn’t allow a preview of the different cuts or a large photo. There is definitely room for improvement, however this is a good progression for J.Hilburn and we look forward to finding out how the customers respond to the new website features.

The banners showcase the new John Lewis fashion range for Spring 2011. They were created by digital agency Unit9 and you can see them in action here.

The user can change the weather at the bottom of the banner, this spins the models around and animates different weather with beautiful CGi effects, it uses geolocation technology and a smart weather API to determine the users local weather condition. Clicking on the white circles will show more details about the products. Users can choose to buy or share the product with their network.

The design of the banners allow the user to explore products within an advert; this does not force the user away from the page, it’s almost like viewing a mini John Lewis website within their current location.

The majority of websites are very traditional and based on model of sites such as Amazon and Ebay, while this works for a discount retailer, luxury brands need to provide a more sophisticated and personalised service to recreate the same shopping experience they offer in their stores. Their customers feel entitled to a superior shopping experience with rich visuals and informative content.

One of the main reason users purchase online is that they can educate themselves about large ticket items. Providing them with sufficient information about the product online is key.

Valentino achieves this by allowing users to view photos from the catwalk and then purchase the featured item in their online store which provides more detailed information such as alternative images, related items to complete the look, details about the materials and size guides.

Burberry has a bold home page featuring beautiful photography and graphics which reveal more information when the mouse hovers over each box. It currently shows an event countdown, featured products and videos. This layout helps the users engage with content without driving away from the page.

When a customer needs help in a store they can look around and find someone, get answers and problems solved, this service needs to be translated to an online environment where customers can access the same information they might ask in a shop easily. Burberry’s call back and online personal assistance features, allows customers to have some of the same experience.

They have another ‘wow’ feature for their watch products – the hour hands are animated and move in real time, changing the time at the top of the page will change the shadow and lighting accordingly.

Many customers will need to justify the product price, they will want to know the full story of the product, how it’s being made and what it’s made of.

The Dior mini-website makes the most of this. The experience begins with a static image asking users to pull the ribbon of the box, this activates videos of the box opening and revealing products. This interaction gives users the experience of what it would be like to open a Dior product. The website offers promotional videos, the story of the parfum, an interview with the parfum creator and much more. All this different content helps reinforce the quality of the product.

The luxury customer make purchase decisions on brand recognition rather than value, and brands have addressed this by hiding product prices and only revealing them on hover state, an example of this is on the Alexander McQueen website.

Hover elements can help content rich website achieve a cleaner look by hiding less important information and only revealing it when the user mouse hovers over an image or a button. Many fashion websites have implemented this to make a statement of their product photography.

Looking through many luxury brand websites I noticed the increase use of white space, this can help create a fresh appearance and help content rich websites look less cluttered. White space can reduce the amount of text users see at one time making it easier to scan pages and increase legibility. Alexander McQueen makes the most of the white space on their home page by displaying one large key product.

Many of these sites have a minimalist approach to the design of the page containing only what is essential. The main navigation menu and other important actions such as ‘buy button’ consist of plain text on a background colour. This approach makes websites look clean and simple but also ensures that they are more accessible online. They are allowing the website to be more accessible using finger tip navigation on mobile devices.

Lastly we have to mention the amazing 360 video view experience on the Louis Vuitton website placing users on the front row of the catwalks.

Augmented Reality (AR) is the latest attempt to give users a closer more realistic experience of products and we are starting to see companies implement the technology on their online websites and mobile applications.

AR allows us to integrate virtual data with the real world, it superimposes digital graphics into real time environment. Customers can now have AR at home, they can hold a printed barcodelike “target” up to the camera and the screen will display the 3d graphics.

One of the greatest disadvantages in e-commerce is that the customer can’t try out the product, AR is an attempt to resolve this by simulating the experience of holding or wearing the product.

For example Fashionista allows its users to try virtual clothes at home, take a photo of themselves wearing the outfit and sharing it  with their network. The hope is that AR will help the audience engage more deeply with online content.

AR has been used for advertising campaigns which have attracted a lot of interest and brand awareness, but it is not yet clear how much of an impact it has had on a customers product choice or whether it has helped them make a more confident decision when purchasing.

AR is becoming ever more popular but the technology is not yet mainstream. There is still room for improvement, it needs to be more user friendly and does not come close to the experience of holding the product in your own hands. Despite this, it has many advantages, it’s inexpensive, it works on small screens and various devices, and it’s a fun new way to interact with the virtual world.

In 2010 we have seen companies use Augmented Reality (AR) on their websites and here are some examples worth noting.

Luxury jewelery website Boucheron allows users to try their products virtually.

Converse has created an application that allows customers to place a shoe over their foot to see what it looks like.

Tissot lets customers try their watches virtually on their website. Users can see videos alongside the visual of the watch. All the watches also tell the real time in digital analogue. Watch a video of how it works here.

Companies are aiming to make AR a useful tool for day-to-day life. U.S. Postal Service virtual box simulator helps customers determine the size box to use by holding the item they are shipping to the camera. See a video of how it works here.

German brand otto is using their printed catalogue as part of the online shopping experience. By holding different pages of the catalogue up to the camera the browser will show more information about the clothes on the model, such as videos, related items and options to purchase.

IKEA launched an application that allows you to decorate your own home virtually, chose items from their catalogue and place them in your own environment. When you have finished you can save the design as a photo and share it with your network. Nick Sjöström and Robin Westergren created a case study of how augmented reality could be integrated with the IKEA catalog and website which you can watch here.

Recently ebay launched their new ebay fashion application which allows customers to try sunglasses virtually, see the video. The user can take a picture of themselves and fit their glasses virtually, they have the options to choose styles, frames, lenses and colours.

Most importantly, they are responding to a new type of customer; the social customer. Today, customers are looking for new ways to connect with brands and social media provides the platform for direct communication between brands and customers.

The social customer has access to tools that allow them to create video, take photos, write blogs and share information. This means that when customers buy a product they are now more likely to give feedback, recommend to friends and share their experience online through photos and video blogging.

We have put together some examples of how companies are responding to this behavior and using social tools to their advantage.

Shopping in a department store is a social experience, we engage with friends on making decisions about what we buy and we ask the sales person what they recommend.

Ecommerce websites are allowing users to have a similar experience online buy giving them the tools to share products, view recommendations and get their friends instant opinion.

Vans allows users to chat with their friends live directly on their product pages.

Another popular tool is Twitter, it makes it easy for companies to update customers with latest offers and product availability. Dell, the computer and electronics company has generated over $3 million from its twitter account. Twitter customers are focused on last minute offers, and giving them special deals and good customer service will result in a positive side-effect.

Companies are also opening Facebook shops like Old Spice which has the benefits of allowing customers to engage with brands more directly. They can be connected to their network and have the ability to shop, share news and products instantly without leaving the website.

Delta airlines makes it possible for friends to plan a group trip on Facebook and buy the tickets directly on the website. They can share the flight information with a handful of friends and make travel plans online, this simulates the process of organizing a group trip in real life.

Shopping on Facebook has the benefits of making customers feel more secure as they are shopping on their own grounds, it also makes the check out process more transparent.

The Like button is another Facebook interactive plugin that links directly to a Facebook user’s personal profile. When the user likes something it will update their news feed with a link to the product page.

Levi’s have made full use of this tool on their ecommerce website by adding a like button to every product. Users can see which items their friends liked and which is most popular, they can invite friends to discuss an item promoting the product further.

This report found that 60% of online shoppers already have a social media profile detailing their likes, wants, hobbies, etc. Buy connecting with customers on social networks companies have a better idea of who they are and what motivates them.

Walmart’s has used the like button to rewards customers with exclusive deals. A minimum number of likes are needed to unlock a deal, costumers are now in control of the Deals. With each like the potential offer is spread to the users network of friends which increases the appeal and visibility of the brand.

Louis Vuitton is engaging with their fan base buy sharing their in-store experience online by posting pictures and videos. They are also streaming live video shows of their collections to all facebook users.

Many social networks are available on mobile devices such as Smartphones and iPads that allow users to stay connected 24/7. Recently, Starbucks started offering deals to Foursquare players creating a customer loyalty program. By becoming a Mayor of a Sturbacks branch users can enjoy money saving offers. This behavior encourages competition from other Foursquare players, and Starbucks can benefit from this as more people are visiting it’s stores.

It is definitely worth considering how you could implement social media as part of your marketing campaign to reach today’s customers. These examples prove to be very effective communication channels for brands.

Retailers are starting to expand their promotion strategies by selling directly to customers on Facebook, bringing direct selling tactics to social media. Shopping is becoming a social experience for online customers, Facebook users are adding shop tags to their personal facebook pages and recommending items to friends.

There has been a dynamic shift in consumer behavior and companies are responding to this by adapting their marketing strategies. A lot of the change is due to technological advances, more significantly the smartphone.

It is predicted that 1 in 2 Americans will own a smartphone by 2010 in this survey. In the UK Smartphones account for 17% of handsets according to this article.

Smartphones have changed consumer’ shopping behavior significantly,” says Forrester’s Reineke Reitsma.

For example, a customer can walk into a retail store for, they can launch an application on their smartphone that allows them to find out more about the product, read reviews, compare with other products. They can launch Facebook, post a link to the product they are considering to buy and ask their friends for instant opinion.

“The advancements in technology have pushed the customer’s demand for product knowledge to new levels, which is actually a good thing for retailers, as an informed customer is 30% more likely to purchase a product.” Empower Mobile Solutions.

So lets start by looking at why companies are starting to create shops on Facebook.

500 million active users
Facebook currently has 500 million active users of which 150 million currently accessing the website through their mobile devices. Because of the smartphones, customers are always connected to the internet, they spend a considerable amount of time on Facebook. By creating a Facebook shop, retailers can notify the customer instantly when a sale is on via news feeds. It is more convenient for Facebook users to shop directly on the website as that is where they spend most of their time. Facebook allows companies to understand their customer by receiving feedback and noting which items are liked the most.

We no longer listen to expert oppinion “4 of five dentist recomend…” facebook allows users to get real advice and reviews from people they trust and know.

“This solves uncertainty about what to buy, we often look at what others are doing and instinctively perceive this as social proof that it is the correct.” Paul Marden

“A single passerby was asked to stop in 42nd Street NYC and gaze skyward for 60 seconds. Other passersbys walked past, ignoring him. But when15 passersby were asked to do the same thing, 40% of people on the busy street also stopped to look up, almost bringing 42nd Street to a complete a halt within a minute.” Note on the drawing power of crowds of different size, download article here.

Facebook not only allows the customer to learn about a product from their friends recommendations but with the use feedback the retailer can learn how to improve their services and products.

Social Media in Plain English from leelefever on Vimeo.

Pampers recently offered its new line of Pampers Cruisers through a storefront on its Facebook Fan page, the limited supply of 1,000 packages for $9.99 each sold out in less than an hour. By making the item limited Pampers has created a buzz for its diaper.

This tactic works because its in our nature to seek valuable resources, we sign value to that which is less available. And in this case users are more likely to take action because there is a limited items, with the additional factor that their friends have also bought it and many people like the item.

NineWest is one of the Jones Apparel Group who launched their Facebook fan page that allows the company’s Facebook followers to get 15% off purchases. By making content exclusive to fans NineWest is creating a feeling of privacy and exclusivity.

Fans can also unlock further information such as the livestream by licking their page.

Rachel Roy Facebook popup store for three days which created an unpredicted hype. The limited-edition jewelery sold out int he first six hours and they had 35% fan increase during the three day period.

Facebook in away is removing the “Signup step” out of the process, people are already signed up so it is more convenient for everyone to just like something without feeling like they are giving anything away, they can become a fan with a click of a button, and receive news letters automatically. Facebook provides companies with an opportunity to promote relevant products to customers who choose to know about offers and new products. Selling to facebook fans means companies are no longer “hard selling” because facebook users have chosen to be sold to.