Interface Concepts for Modern eCommerce Web Design

Interesting observations on design for ecommerce from a blogger I follow: Jake Rocheleau. Jake is a web designer and social media entrepreneur. And always researching the latest trends in digital design and new-age Internet ideas. You can follow his updates on Twitter @jakerocheleau

Deep Nested Navigation

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. 

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.

ecomAnimated Page Elements

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 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. 

ecomm2

Product Magnification, Suggested Products, Customer Reviews & Ratings…and a great showcase of designs – you can read Jake's full post here

 

 

Leave a Comment

*