Tips and Trends: Web Design for E-commerce

Creating a user-friendly masterpiece!

Web design is important, especially when we’re talking about e-commerce. It’s not just about making your website look like a masterpiece — it’s also about making your website user-friendly. Above all, your website has to create trust between your brand and consumer.

To achieve that, your webfront should look up-to-date while not compromising on functionality. Here at Work+Store Space, we speak to Angela Chng, Web Developer and Co-Founder Engine Studios LLP, on the latest web design trends to glean a couple of pro tips.

Being Mobile Responsive is Non-Negotiable

Just a few years back, e-commerce web design was all about the desktop. But most consumers now use their smartphones or tablets instead of computers to make their purchases.

Angela notes: “I would say the most important feature of a successful e-commerce site is the mobile interface. From my experience, a good 70 to 80% of visitors generally browse online stores via their mobile devices. Rather than spending too much time perfecting a design for the desktop, and leaving the mobile design to the end, begin with the latter first.”

Use Large Images

Mobile-responsive design leverages large images, buttons, icons, hidden menus, and full screen use. Studies have shown that products are assessed by consumers within merely 90 seconds, and oftentimes, consumers are scared off a website at the sight of chunks of text.

Images are not only the best way to grab attention — they’re the easiest way to show off your products. So, if you’re thinking of blowing up your product images, don’t forget to put them in a slideshow or a cinemagraph — which leads us to the next latest trend.

> How to use large images correctly

Angela advises: “Most Singapore-based websites tend to prefer the standard large slideshow of images at the top of the homepage as visuals appeal to the people here. Personally, I would refrain from having multiple slideshows, as these large images tend to make websites slower. I’d focus more on the use of images only where necessary.”

Cinemagraphs: The Perfect Moving Image

In the simplest terms, cinemagraphs are images in a sequential movement that form a short animation. Cinemagraphs often appear in headers, motion graphic demos, 360 videos of products, and background images. They’re less intrusive compared to videos (who likes slow loading and auto-playing audio tracks?) and capture attention easily.

So instead of allocating a budget to videography, consider engaging your photographer to put together high-quality cinemagraphs, or learn to make one yourself.

> Is the use of cinemagraphs right for you?

Calvin Seng, founder of Calvin Seng Design, notes, “If your company sells products targeting college students, I would recommend the use of loud, colourful, and immersive images, or videos with motion animation. Stay away from minimalist designs if you’re looking to capture a younger audience.”

Dynamic Material Design

Material design is another trend that’s hard to miss — you’ve probably seen it many times now. Created and designed by Google, material design serves to offer a consistent user experience across all their products on any platform.

Characteristics of material design include grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.

> Is material design right for you?

Angela says: “Material design makes the user experience more intuitive. I especially like how it’s about motion providing meaning, and the relevant use of animation only where necessary. The ‘bold, graphic, and intentional’ principle may not work for all websites, though. Some websites, such as wedding floral designs websites, require a more subtle design — material design will not be suitable.”

Use Your Hamburgers

Hamburger menus have been around for a while and won’t be leaving any time soon. A hamburger menu is the tiny three-bar icon you see in the corner of many websites and mobile applications. The icon opens a sliding drawer navigation menu.

Although the hamburger menu has low discoverability (which can be fixed by adding the word “menu’ beside it), it saves space (essential on mobile devices), provides a cleaner interface, and is especially useful when you have many categories and pages.

Eternal Scrolling

The long page scroll design is made for users who are too lazy to click onto the next page or wait for them to load. This appeals to smart device users, ultimately offering a smooth web design transition from desktop to mobile.

> Final check: an e-commerce design checklist

Calvin has put together the following checklist to easily check on the health and functionality of your e-commerce site.

  • Is your website clean and uncluttered?
  • Is navigation clear?
  • Is your sales information (discounts, sale periods, promo codes etc) loud and visible?
  • Are your images large, professionally shot, and bandwidth-optimised?
  • Can users easily update personal information, view products and edit quantities in cart?
  • Is your add-to-cart and checkout process seamless?

 

If you’re interested in learning more about e-commerce and web design, check out these useful links:

17 Web Design Trends You Need To Know In 2017

Beginner’s Guide to Responsive Web Design

The Importance of User Experience in Web Design