``````

Leveraging Design Patterns for Conversion Success

ecommerce-design-patterns

What do people really see when they look at my online store?

This is the million (or, for some, billion)-dollar question. There are countless tools and services dedicated to answering it. Each user’s perception of an e-commerce site is unique, shaped by their past experiences and their present context. This compels us as designers to look at broader concepts, studies, and findings to predict future interactions.

Digital experiences are constantly evolving alongside technology and users, but some truths are fundamental to design and as old as the profession itself. If we can set aside the latest breathtaking UI animation we’ve found on Dribbble (love Dribbble by the way) to re-focus on these foundational aspects, they can be used to your advantage in crafting a better user experience, smoother shopping journey, and increased conversion rates.

RULE 1

It’s All About Contrast

Contrast is arguably the most important way to communicate visually. It’s well-known that our brains process visual information more quickly than verbal or written, and the fastest way to highlight this is with a simple GIF. See how long it takes to find the odd item out in each step:

null Form and color are noticeably easier to process than text, especially at small sizes.
 

You can see that making something easy to process for your users will require less effort on their behalf. The less effort they expend on understanding, the more effort they can put towards deciding that they want your product or service.

RULE 2

Make it Readable

With our rapidly-decreasing attention spans, nobody is suggesting that you write the next Great American Novel™ just to give users the specifications of your product or to describe your services. However, there will be instances when you need to write *gasp* full sentences, and maybe even a paragraph or two to describe something. In these instances, foundational aspects of typography like line-length and leading become key in creating a painless reading experience.

 

null
 Letting your type breathe reduces the effort needed to read it.  

 

While the standard for body copy size on the web is constantly changing, and the typeface in each case can impact this, somewhere in the 18–20px range is generally comfortable. A leading (line-height for the CSS writers in the room) value of 1.5× allows some breathing room for the reader’s eye, and a line-length somewhere around 85 characters keeps the eye moving in a pleasant rhythm.

Rule 3

Know Your Heuristics (and When to Throw Them Out)

Every design project requires some degree of adherence to heuristics. In our context, a heuristic element is something that users know how to use because they’ve seen it before. The web and its users have developed heuristics in a symbiotic (or parasitic, depending on how you look at it) “adopt & adapt” fashion over the years. Users adapt to new design patterns that are usable (or ubiquitous - the two are not the same), and websites adopt and spread these patterns in an effort to make their sites’ functionality more immediately apparent. Some classic examples of this evolution are the design patterns found on the home pages of Amazon and Apple, two titans of the digital age. Their longevity allows us to look at the way patterns have evolved over time.

 

null
 Note the evolution of the navigation and "hero image" sections over time.

 

With all of these patterns becoming more solidified in the user’s eye, phenomena such as banner blindness have taken hold. Users know what an ad looks like and where it is likely to appear, so their eyes “skip” these elements. Modals and other screen-dominating attention grabs become closed quicker and quicker as users have adapted to recognize these interruptions.

Putting It All Together

At Granify, we use artificial intelligence to identify when shoppers have a specific concern affecting their shopping experience (such as, wondering if an item of clothing in their cart is popular, or if they can return a gift purchase). Then, we deliver what we call Smart Messages with contextual information to help them. So what do you do when you need to speak to users in a way that they notice, without aggravating them or triggering now-natural close actions?

One well-known and documented pattern in user behavior is the “F-Pattern”. Users read from the top, left-to-right, then scan down and repeat with decreasing attention as the page goes down. This has led to the left side of screens becoming a source of visual overload. At Granify we identified an opportunity to contrast this established pattern: rather than introducing messages from the left, we tested delivery on the right side of the screen.

Though the change was relatively simple, the contrast led to a higher conversion rate; this seems to be because the viewer processes the message more quickly (remember when we talked about contrast?). Of shoppers who would otherwise have left the store because of the same concerns, 9% more remained on the site and completed their purchase when presented a message from the right versus a message from the left. While this first test was implemented on just one of our retail partner sites, we successfully implemented this pattern on additional sites after the first experiment.

While this example is obviously not a catch-all fix, it illustrates a way to leverage existing patterns and contrast or subvert them to communicate effectively. You might find that contrasting a pattern such as the top nav works for you, or perhaps you should place the cart icon on the top left. Maybe there are opportunities to increase contrast in your colour pallet. All change comes with risk, so A/B testing your ideas is always recommended, but through some risk you can gain truly impactful rewards for your online store.

 

SHARE THIS STORY | |

Looking for more? Our readers also liked...

Want weekly insights in to the world of e-commerce optimization?

Recent Posts

Search