{"id":11346,"date":"2018-05-28T06:52:00","date_gmt":"2018-05-28T11:52:00","guid":{"rendered":"https:\/\/www.invespcro.com\/blog\/?p=11346"},"modified":"2024-05-07T16:42:57","modified_gmt":"2024-05-07T16:42:57","slug":"e-commerce-user-experience-optimization","status":"publish","type":"post","link":"https:\/\/www.invespcro.com\/blog\/e-commerce-user-experience-optimization\/","title":{"rendered":"12 UX Design Tips For E-commerce User Experience Optimization"},"content":{"rendered":"Reading Time: <\/span> 23<\/span> minutes<\/span><\/span>

It would be great to simply change some copy, a headline, a button on your site to see massive improvements. But you and I know, that\u2019s not the reality. In the early 2000s, when websites were still growing and developing, those slight changes could highly influence the user. However, now, because of the variety of well-designed sites, sticking out by having better usability really doesn\u2019t move the needle.<\/p>\n

SHIP (Scrutinize, Hypothesize, Implement, and Propagate), is our CRO<\/a> methodology. The 4 phases represent the overall CRO process<\/a> we follow at our organization. Ultimately, the research you collect during the scrutinize phase gets classified as an item that needs to be fixed right away, investigated further, instrument, or research opportunity. Typically, UX fixes are classified under \u201cfix right away\u201d as it simply doesn\u2019t make sense to test something like that.<\/p>\n

On the other hand, research opportunities are basically \u201ctest ideas.\u201d Typically, these are areas where you are pushing the envelope to try new things on the site that will draw more attention and create more buzz and engagement.<\/p>\n

There are no best practices or easy ways to do CRO. Everyone is always looking for that silver bullet that is going to transform their conversion rates. But it simply doesn\u2019t exist. Research, understanding visitors, and creativity are components to help you come up with research opportunities, which can be launched as experiments through AB testing<\/a>.<\/p>\n

According to Michal Szwak<\/a><\/p>\n

\u201cRegardless, UX is one of the most integral parts of making sure your e-commerce runs smoothly and is converting your users into customers. \u201c<\/em><\/p><\/blockquote>\n

One important aspect of the SHIP method under the \u201cS\u201d for Scrutinize is competitive analysis. We strongly believe in gaining inspiration on marketing and advertising initiatives from other websites. We don\u2019t believe in copying, however, keeping an eye on the competition and validating if an idea they deploy would work for you is all fair game. Those inspirations enrich our own perspectives and allow us to venture and research other possibilities that can engage site visitors.<\/p>\n

\"\"<\/p>\n

Online competition is fierce in every vertical, however, in particular, when it comes to e-commerce, it becomes more challenging to provide a unique, buzzworthy experience that\u2019s user-friendly and useful.<\/p>\n

Thinking, fast and slow by Daniel Kahneman delves deep into the psychology of the mind, explaining how people think and process items. He describes two systems, system1 where thinking and processing are fast, intuitive, and emotional, and system 2 which is much slower, methodical, deliberative. There are biases to keep in mind with fast thinking, however, when designing sites, things should be intuitive and easy to understand (System 1). Visitors shouldn\u2019t have to think about how to navigate and find items. It should be intuitive (based on experiences visitors don\u2019t have to \u201cthink\u201d about).<\/p>\n

According to Pratik Dholakiya<\/a><\/p>\n

\u201cModern users expect every site to be mobile-friendly. If your site is not responsive, many users will bounce as soon as they see your site.Just as importantly, mobile-friendliness is a ranking factor.\u201c<\/em><\/p><\/blockquote>\n

So there is that balance one must strike: create a unique experiencing, without veering off the rails from adhering to System 1 thinking.<\/p>\n

Ultimately, the goal for most sites is to improve usability<\/a> and increase revenue. But is that enough? In such a competitive space such as e-commerce, how does a site truly stick out and capture hearts and minds?<\/p>\n

In the following post, I\u2019ve come across a few ideas on how to optimize the experience. However, the disclaimer for all who read this, these are not by no means implementation ideas. These are merely ideas to consider. You still are responsible to validate whether or not this is something that would resonate with your visitors.<\/p>\n

1. State your purpose with flair<\/h2>\n

We all know the importance of a strong value proposition<\/a>. But what if it can be stated through your design? Everything on your site does a great job conveying your value.<\/p>\n

According to Joanne Chong<\/a><\/p>\n

\u201cHaving great e-commerce website design can make all the difference when it comes to attracting customers.\u201c<\/em><\/p><\/blockquote>\n

The start of experience optimization is not to forget the basics, but rather, amplify and have fun with them. Take for example Asos:<\/p>\n

\"\"<\/div>\n

They aren\u2019t shying away from bold images because that is what their site is all about: fashion and style destination. That is the value they offer, with the great incentive of free delivery worldwide as well as over 850 brands!<\/p>\n

They offer the visitor two paths – Shop Women or Shop Men. The label-like CTAs are a part of their brand<\/a>, clearly making a statement and giving the visitor, from the very beginning, an experience as well meeting expectations.<\/p>\n

As you click through to the category pages:<\/p>\n

\"\"<\/p>\n

Again, the vivid imagery, unique positioning, and clothing styles are all stating the value without them actually having to state it.<\/p>\n

Finally, the product pages:<\/p>\n

\"\"<\/p>\n

They offer a catwalk video, several unorthodox model positions, and a bundling \u201cBuy the look\u201d section that rings true of a fashion destination.<\/p>\n

The value proposition is always proposed as some statement – but when every element reiterates the value in a fun and innovative way, it provides for more than a regular e-commerce shopping transaction, but rather, a full-on experience.<\/p>\n

Here\u2019s another site that does a good job: The Sill<\/p>\n

I\u2019ve included a video to display all the \u201cgrowing\u201d that happens when you hover on a given link.<\/p>\n

\"The<\/p>\n

From the homepage logo shrinking and growing to the categories to the product images – everything emphasizes growing, which is equal to plants, which, according to The Sill, makes people happy.<\/p>\n

2. Make use of visual cues to direct the user<\/h2>\n

Visual cues help visitors navigate around your web page, maintain a visual hierarchy, and point them to strategic areas of your landing page.<\/p>\n

According to Christopher Meloni<\/a><\/p>\n

\u201cVisitors to websites don\u2019t prefer to remain on sites with poor navigation, so it helps to make them comfortable using your site with good navigational techniques.\u201c<\/em><\/p><\/blockquote>\n

Most often, visual cues directly to the call to action.<\/p>\n

From bright banners to pointing fingers<\/em>, visual cues come in many different forms. But the four main categories of visual cues are as follows:<\/p>\n

    \n
  1. White-space<\/li>\n
  2. Eye-direction<\/li>\n
  3. Arrows\/Linear<\/li>\n
  4. Encapsulation\u00a0<\/strong><\/li>\n<\/ol>\n

    Generally, there are two types of visual cues or landmarks that help your visitors find their way around your site and content fast:\"\"<\/p>\n

    1. Explicit visual cues<\/h3>\n

    These kinds of cues are direct and can easily be pointed out on the page. Using arrows, lines, pointing fingers and human line of sight are a few ways explicit <\/em>visual cues can be used on landing pages.<\/p>\n

    Explicit visual cues quickly influence where a visitor looks on a page. For example, you can use arrows or lines to guide visitors to where you want them to go on the page.<\/p>\n

    Many websites use progress indicators to help visitors understand where and what to do next. On barkbox.com they simply a direct visitor to the main CTA<\/a> \u201cGet Started\u201d and are taken through a process of building the box the way they prefer, allowing little to no distractions for leaving that funnel.<\/p>\n

    I will say, however, that by forcing visitors through a specific funnel, those who are curious to learn more won\u2019t be happy about that, so it is a fine line prior to making that decision.<\/p>\n

    2. Implicit visual cues:<\/h3>\n

    Implicit visual cues are not straightforward like arrows and pointing. These are design elements that don\u2019t directly point to a particular object. Rather, they rely on a more subtle approach to imagery to persuade visitors to fulfill the conversion goal.<\/p>\n

    An example of this is placing the filtration, opened and this format very explicitly (as to grab visitor\u2019s attention: USE THIS)\"\"<\/p>\n

    Or the way Bellroy displays images of its products, providing a cue for them to select the category of their choice:\"\"<\/p>\n

    How to use visual cues to boost your conversions<\/h3>\n