E-Commerce UX Principles From 10 Years Ago That Still Work Today

By Zaac Woodhead | 28 Jun 2019

While it’s safe to say that the vast majority of websites from the yesteryears wouldn’t work in the modern business world, there are still some valuable principles from a decade ago which we can learn from even today.

The world of web design is an ever-changing landscape. Dozens of new design trends emerge time and time again, with web designers pushing the boundaries of design and utility to exceed shoppers’ expectations.

Keeping things consistent

What does it solve?

Consistency allows the users to quickly familiarise themselves with the design environment, allowing large amounts of content to be quickly displayed with the same level of importance and hierarchy. With a uniform grid-style layout, browsing becomes much easier for users. A highly consistent UI design also helps you make quicker and fewer decisions in terms of layout.

The key advantage of adopting a consistent grid layout, (such as cards) is that it can conform to any form of design. You can arrange them however you want, using different dimensions, spacing, the number of columns. The style will remain consistent regardless of the device the user is on.

Sites that hold numerous products such as Etsy use consistent rows of items and grouped categories to showcase their product line, using clearly defined labels that shoppers can quickly find.


Tips

  • When designing cards for your grid, don’t just make specific parts clickable. User interaction with a card becomes much more comfortable when users don’t need to find a particular spot to click on, such as a headline or image.
  • If your card contains an image, think about how it will appear on high-resolution device screens. As modern smart devices get more powerful, any images that don’t scale well on a high-definition screen will create a poor visual experience.

Creating Visual Hierarchy

What does it solve?

Users can navigate easily within a page or section. An easy-flowing UI design lets users quickly locate prominent or exciting content, especially on information-heavy websites. If there is a lot of text content, most users will respond better with the F or E shaped layout, which mimics the way people scan naturally.

The Nielsen Norman Group study finds that users in left-to-right reading cultures adopt an F-shaped scanning pattern across massive chunks of content. This type of UI layout is great when your website needs to present vast amounts of hard data that will allow users to scan across them quickly.

You’ll find sites such as the Airbnb using perfectly aligned items on the right-hand side to create a sense of visual hierarchy. When users find an interesting place (or picture), their eyes can continue to scan horizontally for more information. If the item in the images column doesn’t interest them, they can choose to scroll downwards until they find one that does.


Tips

  • Fine tune your content to promote scanning behaviour. Place all the most prominent and essential content (such as images) on the left side where the user starts their scan. 
  • Use various forms of visual cues to guide the visitor. For example, to draw more focus towards an item, use a bigger or bolder headline text font to highlight relevant keywords.

Less is More

What does it solve?

The minimalist design takes your website’s UX to the next level, by getting rid of all redundant visuals and creating a refreshingly free-form design hierarchy. The minimalist format depends on strong visuals, neat grouping, and common sense to create a streamlined experience.

Since the early days, web designers often relied on linearity and highly organized web layouts to present relevant information. As more options become available, designers today are free to experiment outside of convention by using a minimalist, white space approach.

The ‘less is more’ style suits websites such as portfolios or fashion sites that value a contemporary and avant-garde look. Designing around white space places more power back to the content itself. As the poster child for minimalist design, Apple often embraces the ‘less is more’ philosophy. Links often appear textual, without any clearly defined buttons.  There is usually a strong emphasis on the visual aspect to draw attention to their products.


Tips

  • The typography you choose has a substantial impact on minimalist design. The font size, typeface weight, and colours all convey emotion in place of the white space. Think about how you can evoke feelings associated with your brand using visual elements in your typography
  • Create lots of clickable elements. As minimalist designs tend to rely less on clearly defined buttons, a user can become confused with a component, and they will try to click on it first to see if it is interactive, creating an awkward user experience.

Visual quality is essential in building a strong branding and corporate message, but having a well thought out user experience can go a long way to making your brand memorable for your audience. While it’s good to keep things fresh with experimental design, you should always fall back on tried-and-true UX principles to ensure users get the best experience when interacting with your website. Instead of focusing on trying to wow your users, put yourself in their shoes and give them a reason to fall in love with your design.

Zaac Woodhead is 24 Digital’s Managing Director who focuses on helping companies invent their future. His purpose is to drive impactful experiences for people and business growth for organizations. A highlight for Zaac was working with Google to develop and introduce Google Maps into the Australian marketplace.