Online shopping has become a popular acquisition method for consumers in every country. Web shops are accessible from anywhere with Internet access, the products come right to your doorstep, and there’s often a much broader selection to choose from. Putting aside topics such as marketing and budgeting there is another big topic worthy of discussion: actually designing the website.
In this post I want to cover some modern UI trends for e-commerce web design. We all know about the obvious stuff like shopping carts, checkout pages, search bars, and security features.
But what else could be added to an Average Joe design to make it a Spectacular Joe design? Unfortunately Joe wasn’t available for questioning but I do have my own list of trends that are perfect for anyone designing or launching a new e-commerce website.
Homepage Shop Details
It goes without saying (but I’ll say it anyways) that a website’s homepage should provide a magnificent first impression. The layout, colors, and content should leave a fiery memorable imprint in the mind of each visitor. Arguably more important than the overall page composition is the page content. This notion holds even greater merit when discussing e-commerce shops.
Think about it from your own perspective: you sit down at your desk to finish some work and find yourself surfing the web for a couple minutes or hours, you know how it goes.
Anyway you stumble onto a great website and it seems like they sell something cool but you just can’t figure it out right away… Or perhaps you see a product photo on the page but you still have no idea what it does. Not a great initial presentation.
Design a homepage with visuals and reference material to give visitors an informative first impression. The homepage for Gridbooks is a terrific example. Everything that a new visitor needs to know is located above-the-fold in a sliding carousel widget. There is also plenty more information below-the-fold to satiate those who get sucked into the webpage.
Actually Gridbooks is a brand of notebooks designed with grid-formatted pages for sketching wireframe mockups of websites and mobile apps. Killer idea right? Well no duh, but even with such a sweet idea the website presentation plays a big role.
Tinkering Monkey uses a very similar content strategy. Their homepage includes a list of featured products in a big fullscreen rotating slider. I’d say the slider could even pack more information about each product because the content is a bit generalized with lots of extra room. But the design structure and photographs tend to give more than a hint towards what kind of services are offered.
Large Category Lists
Here’s a pretty simple idea you might employ as an in-between for wading through a hodgepodge of items. It’s a browsing method without full reliance on the navigation menu.
Basically you’d split each item into categories and subcategories which are then listed on a single page. If the store has a products list crazier than trail mix, I say keep this in mind during your design phase. Have a bowl of mixed nuts lying around for inspiration.
From the Zazzle homepage visitors might get curious and wander right onto the shop page. This interface is a perfect example of organized content structure and how you might list important categories. It helps tremendously to include a small photo of each major category – visuals plus good content are two decisive factors.
The Adobe KnowHow course site uses a very similar interface catering instead to their different products. Each course is listed with a matching icon, price, and related information. Although the interface takes up a majority of the homepage everything still feels balanced.
This is a classic example of how e-commerce is such a diverse ocean of ideas. You’ll have to try out different ideas on a case-by-case basis to see what works best. For building category and product lists think about how many total products will be offered on the site and calculate the potential value of adding such a page.
When you’re designing a website jam-packed with information you’ll need to use some finesse with navigation. Visitors obviously want to find whatever they’re looking for in a quick yet concise manner. When it comes to large header navigation links I find that dropdown menus are quite the popular trend.
As an example the Caliroots homepage features a top navigation using both icons and text labels. Hovering any of these links will animate a dropdown menu with a metric ton of content. Seriously the “Brands” dropdown menu even has next/prev links to move between columns. Menus don’t get much denser than that.
One downside that I should mention is the lack of responsive support for their navigation. Short of creating a mobile-specific layout or reworking the menu to contain fewer links it would be tough to redesign this immense navigation to fit a tiny smartphone screen… but in my opinion it would be well worth the effort to do so.
The navigation for Skinny Ties also has a dropdown listing for each primary link. But to my elated surprise their layout is fully responsive and still manages to support the dropdown menus regardless of browser resolution. Different techniques will work for different websites so it can help to check out what other designers have created.
if you’re needing to add a responsive menu to your eCommerce site, we’ve published a detailed post that takes a quick look at some of the latestresponsive navigation solutions. If you’re a WordPress user, check out this page: WordPress Responsive Menu Plugins.
Dynamic Product Info
Individual product pages are oftentimes the most intricate and messy piece to any e-commerce website. There are so many elements to consider like the item price, quantity, product photos, reviews, colors or sizes for clothing, and plenty of similar qualities.
Making a dynamic product page is the simplest way to fit all this information together and make it easier on the visitor. Dynamic content might include automatically updating the price for non-singular quantities or showcasing multiple photos from unique vantage points to really sell each product.
I love the product page for JOCO Cups because the design is both functional and aesthetically brilliant. Textures and buttons all match the website design perfectly. Yet it doesn’t take away from the interface which is so blatantly simple that even a ten-year-old kid would be able to work through the purchasing process.
Simplicity should be the primary design factor while content is secondary and aesthetics are tertiary. All 3 factors are crucial to building a beautiful and usable product page.
Scrolling down a bit on the page you’ll notice dynamic tabs for switching between product details, warranty details, and delivery estimates. This tabbed UI could also include reviews or related accessories to purchase.
At the very bottom is a diagram of the product showcasing a few of the prominent features. This graphic is remarkable because it offers useful information in a creative and fun way so that it catches your attention.
A popular method for powering an eCommerce site is to use aWooCommerce WordPress theme. To help you get the most out of WooCommerce, we have a written an easy-to-follow tutorial with someuseful tips for complete beginners.
Filterable Search Criteria
Not every web shop includes filterable search items, but this extra feature is just so helpful that it cannot be overstated. Filters allow users to limit search results based on item size, quantity, manufacturer, any number of related properties.
And these filters can work for both physical and digital goods. Any e-commerce website selling a handful of different products would greatly benefit from this UI.
On the website Johnny Cupcakes you’ll find a catalog of fashion items and accessories. Just before the products listing you’ll notice a bar with sorting options for type, price, gender, etc. Thus a user might limit the products down to only women’s shirts under $20 dollars – very specific and very useful.
Plus the UI is dynamically animated so all the sorting happens without any page refresh! It’s more sublime than a morning sunrise covered in chocolate and sprinkled with dew – the candy man would most certainly approve.
Another great example can be found on the website for Jenier World of Teas. Instead of using a dropdown menu each filter is shown in full listed in the left-side column. Users merely check a box and the product display automatically updates accordingly. Super easy to use and honestly a tad exhilarating.
If you would like to add enhanced search functionalties to your WordPress-powered site or are looking for an advanced search PHP script, there are a number of plugins on CodeCanyon that will help you out.
Each of these trends should not be considered gospel truths but more like concepts to help you rework & brainstorm cool ideas. The best part about being a web designer is the free-range creativity. You’re encouraged to wander about the pasture and drop your creative eggs anywhere on the farmland. See what feels right and try to adjust from there.
I see these trends emerging in many of the online stores I visit frequently, and other stores that I find in my downtime(read: procrastinating). E-commerce is tricky but all the important elements should help to improve the user experience.
Think of ideas that will persuade first-time visitors to fall in love with the products and the website. Great design requires courage to attempt things regardless of success or failure – with enough practice design ideas for web projects will just seem to flow organically.