Interface Concepts for Modern eCommerce Web Design

We have seen an ever-increasing list of trends in website layouts. eCommerce websites are especially unique in that designers must focus on product showcases within the layout. User interfaces are not much more complex, but they do require lots of additional metadata such as prices, quantity, and item types.

In this article I’d like to go over some relatively universal eCommerce website themes. Many website layouts can be found around the Internet which may behave as examples for young budding artists. But experienced web developers may also enjoy this article for a deeper look into emerging user interface trends. Definitely be sure to check out a few links below, and keep yourself up-to-date by practicing new techniques as often as possible.

Deep Nested Navigation

Online websites offering a storefront & products must be careful about organizing all this data. Typical website navigation menus will generally hold a small collection of links with some potential sub-menu items, as well.

But eCommerce websites often need multiple levels of nested menu links. Possibly so many levels that you won’t be able to display them all at once! As users browse through any product categories, the navigation menu should open up to display further options. But these links are only visible for the currently selected topic. You can see a fantastic example of this navigation style on Newegg.

Newegg homepage flyout navigation menu sidebar

As you hover over each menu item on the left-hand side a flyout menu will appear with additional links. Then as you select one of these options a new updated navigation menu appears on the left side. These offer additional properties to choose from such as brands, size, type, and price range.

Guess website navigation products layout design

You can see another typical example on the Guess website. By selecting one of the top navigation items you will then get a small nav menu in the left sidebar. Selecting another one of these categories will append more sub-links underneath the parent.

The Guess website interface is easy to ready and very easy to navigate. Most typical users would not get lost on any page with so many navigation options. And it is also quite simple traversing back to the top navigation categories.

Animated Page Elements

Now I will admit that I have seen only a handful of eCommerce websites pull off animations elegantly. When done improperly it is very easy to scare away visitors. But when you create helpful animations tied onto an important segment of your layout animation styles can often improve usability. Menus and product captions are just a couple of examples for hidden content which may be animated into the page.

Threadless Beta website layout design dropdown navigation menu

Threadless is in the process of launching a new beta layout which features these effects. For shoppers who are familiar with the old layout it is quite an adjustment. But check out their new very cool sub-navigation flyout menu by hovering over any of the top links. The small block containers will animate out from the page. You’ll notice topic headings along with related thumbnail images.

Threadless photo thumbnails products category shopping

If you begin scrolling down the page you will notice big blocks of captioned photos littered down the page. These image blocks are each targeting a different product category. As you hover over the photos a new list of sub-links will appear. This is a unique design style which you will not likely find in many other eCommerce layouts.

Product Magnification

Selling products online is all about captivating your audience. You want to provide the best viewing experience so that they want to spend their money on what you are offering. This can be accomplished by publishing very high-quality images – but you’ll also need to give users a nice viewing setup.

Bohemia eCommerce website layout zoom magnify products photo

Notice on the Bohemia product info page you can hover your mouse over the image for a bigger magnified view. The larger zoom box will appear over the product content so the user won’t need to scroll anywhere. This solution is handled by JavaScript which could offer a simple fallback method to open larger images in a new window.

77kids shop store clothes website interface zoom effect

Although in my honest opinion, forcing images to open in a new window can get old and feels a bit outdated by now. Users are typically looking for the easiest solution for them, compared to the easiest solution for you to code. If you need a quick JS solution check through Google for a jQuery image magnify script. I am sure there are plenty of solutions among open source developers and through questions on Stack Overflow.

Suggested Products

Some customers will visit your eCommerce website knowing exactly what they want to purchase. Other customers will show up to browse items and may find themselves sidetracked into other areas. These are the people you should be targeting with related product results.

Lacoste Image interface screenshot related products

We can look at an example on Lacoste which has a couple of items listed in the sidebar. The title reads “You might also like” in big bold text. It stands out among all the other text, and users can tell these are further product listings by the hefty thumbnails.

Michael Kors website layout suggested related products eCommerce

There are surprisingly tons of websites which incorporate this related products widget. eCommerce systems will often feature a built-in plugin or template function to place these related products into your website. Any WordPress fans may look into WPEC Related Products, which is a free plugin for WP E-Commerce.

Customer Reviews & Ratings

Shopping online can often cause anxiety with new users. People who are uncomfortable sharing their credit card information will have a tough time jumping into the frenzy of online purchases. One simple method for reducing this uncertainty is by providing user feedback and custom ratings.

Marbles the brain store website eCommerce layout design

Many techies should recognize this ratings and reviews system from the popular iOS App Store. But it can also be found in real physical webshops, like Marbles which sells fun thinking games and toys. Users can purchase an item and leave their own review of what they think regarding the product. Reviews are accompanied by some text and a star rating on a scale of 1-5.

User feedback reviews and ratings are universal because everybody knows what they mean. People can read the reviews and come to their own conclusions on the product quality. And people can also quickly determine their views based on an median star rating. It is an elegant system which also involves direct user feedback.

Designers Showcase

Along with all of the ideas presented here I would like to also provide some pleasing final touches. So I have put together this brief design gallery full of well-designed eCommerce website layouts. You will notice many of the previously mentioned interface trends appear in a majority of these examples. Delve into this list and see what styles of inspiration you can find.

Sanctuary Tea

custom tea bags packs sanctuary website shopping

WB Shop

WB Warner Brothers Shop eCommerce website

urban Outfitters

Urban Outfitters boutique website ecommerce

Lucky Brand Jeans

Lucky Brand Jeans website interface layout design

Everything But Water

summer bikinis girls womens clothes ecommerce website

Godiva

Godiva chocolate website interface design layout

The North Face

The North Face website layout design 2012

Wegmans

Wegmans food shop Internet ecommerce website layout

Yogi Organic Tea

Yogi tea sales ecommerce website shop online layout

Links of London

website layout design interface links london jewels

Chico’s

Chicos ecommerce shop online website layout

LOFT

Ann Taylor loft website interface layout

Harry and David

Harry Davids cooking supplies website ecommerce layout

Hanna Andersson

Hanna Andersson childrens clothes website layout

Janie and Jack

Janie and jack website interface layout design

Moosejaw

Moosejaw website interface layout design trends

Williams & Sonoma

cooking tools website ecommerce layout design

Origins

Origins sales ecommerce website layout design

Lord & Taylor

Lord and Taylor shopping center website layout design

Tivoli Audio

Tivoli Audio products ecommerce website layout inspiration

Nieman Marcus

Nieman Marcus shop online internet website layout

Things Remembered

Things Remembered jewelry shop gifts online ecommerce

Tommy Bahama

clothes shirts tommy bahama brand website layout

Yankee Candle

Yankee Candle shop online Internet website layout

Tourneau

Tourneau boutique watches fancy clothing accessories

Teavana

Teavana website interface layout design

Pottery Barn

Pottery Barn website shop ecommerce layout design inspiration

M.A.C. Cosmetics

MAC Comestics website layout design interface

Lululemon Athletica

lululemon website layout interface design atheltics attire

Author: (103 Posts)

Jake Rocheleau is a passionate web designer and social media entrepreneur. He is frequently researching the latest trends in digital design and new-age Internet ideas. He's also an advocate for the social media revolution - follow his updates on Twitter @jakerocheleau.

Comments