When it comes to shopping online, we place a ton of value on the design and “feel” of the websites we visit — both consciously and unconsciously. This article dives deep into the concept of persuasive design, explaining the role your ecommerce website’s appearance plays in your potential customers’ willingness to make a purchase.

Quick question:



If Amazon.com still looked like this ...



... do you think it would draw anywhere close to the over-300 million customers it does today?



Heck no!



Even if everything else Amazon offers — the wide selection of products, the fast and cheap delivery, the top-notch customer service, etc. — was still in place, there’s no way the company would be as successful if its website still looked like that.



The design of an ecommerce website plays a major role in the consumer’s decision to purchase — as well as your ability to keep consumers coming back for more.

Whether you’re just starting an ecommerce store or already have an established business in place, you’ll learn several design elements you can use to engage visitors and spur them to action.

First, let’s talk a bit about the role emotions play in influencing a modern consumer’s purchasing decision.



The purchasing decision: a mix of logic and emotions

Think about the last five or so things you purchased.



Maybe you got gas. Or maybe you bought a sandwich for lunch today. Perhaps you had yesterday off and treated yourself to some retail therapy at Target.



The first two examples show an individual making a purchase based on logic: Their car was out of gas, so they filled it up. They were hungry, so they bought a sandwich.



The retail therapy example, on the other hand, shows an individual making purchases based on emotions: they simply felt like shopping and bought a few items they felt like buying.



The two sides of the buying decision

The diagram below shows the two hemispheres of our brain to illustrate that rationale (left) and psychology (right) both influence our decision to buy.



Buying rationale can involve:

Economics

Risk

Strategic fit

Compliance

Politics



Buying psychology can involve:

Hopes and fears

Emotions and the ego

Experiences and expectations

Attitudes and beliefs

Behaviours and styles

Social and political



But, regardless of whether an individual purchases something out of necessity or desire, their emotions will always play a role in their purchasing decision in one way or another.



For example, the person who needed gas decided to drive across town to the more well-kept gas station. The hungry person went to their favorite local deli and bought their “usual” hoagie. And the retail shopper specifically went to Target rather than another department store because Target always has better deals and a wider selection of products to choose from.



While the above examples are pretty overt in their emotional reasoning, sometimes cognitive biases also come into play. For example, the person who indulged in some retail therapy might favor Target over a competing department store simply because Target is their “happy place.”



Logic often takes a backseat to emotions when it comes to purchasing. So it’s essential to design an ecommerce website that makes customers feel good.



Which is where persuasive design comes in.



A quick sidebar: This is not to say that you want to use persuasive design to “trick” your visitors into doing something they don’t want to do. Rather, use it to make them comfortable and confident in their decisions.



“The key emotion that matters is trust, once trust and credibility have been established you can use imagery or copy to trigger user behavior. Without first establishing trust any attempt to tap into user emotions will be viewed as manipulative. Which is not what persuasive design should be about.



Persuasive design is about the intent of the designer, (and as mentioned that intent should be to establish trust as well as credibility) and then to support users throughout the designed experience resulting in the desired behaviors.



And to establish that trust you have to know who your target audience is and then focus on the first impression, or what Robert Cialdini calls the "Pre-Suasion", that process of ensuring your recipients are receptive to your message before they receive it.”



–Dr. Page Chen, President & Chief Innovation Officer, Remote-Learner

Increase engagement and conversions with persuasive design

Persuasive design is the process of designing products or marketing materials (in our case, your ecommerce website) in a way that positively influences your visitors and persuades them to take a specific action.



How you implement persuasive design depends heavily on what you’re offering. In the case of ecommerce websites (and websites in general), there are five core principles to persuasive design.

1. Clear information

Overwhelmingly, the modern consumer simply wants to know what your website is all about more than anything else.



Take a look at this example from Uber:



If you’ve ever used Uber, you know that using the service really is that simple. That said, there’s really no reason for the company to waste a new user’s time pontificating or getting too fancy with their landing page copy.



“As visitors are on your site, the site itself is actually having a conversation with them as they move through their journey. As a designer, embed yourself into that conversation and figure out what you would tell visitors to do next if you were sitting next to them.



This makes the process of creating copy easy to write.



In much the same way what would you tell them not to select? If there is anything - you may want to consider removing it from the page.”

–Dr. Page Chen, President & Chief Innovation Officer, Remote Learner



Within seconds of landing on your site, your visitor should understand:



Who you are What value you provide Why they should care



Anything more, and you risk losing them from the get-go.



“There are several persuasive patterns that can be used in a website’s copy to present information clearly to a user: chunking, sequencing, curiosity, reduction, conceptual metaphor, recognition over recall, serial positioning effect, framing, value attribution, and priming effect to name a few from the Persuasive Patterns card deck.”

–Anders Toxboe, Founder, UI-Patterns.com



2. Visual appeal

Visual appeal is secondary to clarity of copy simply because providing clear information is necessary to keep visitors engaged and moving forward in their purchasing decision.



That said, visual appeal is, without a doubt, what hooks them in the first place



Remember Amazon’s original homepage from the beginning of this article? While it might have been the seed to something great, it definitely pales in comparison to present-day Amazon:







There’s really no debate as to which version is more visually appealing, is there?



Now, when we say “appeal,” we’re not just talking about aesthetics — although that’s certainly part of the equation.



Like your site’s copy, its visual appeal revolves around clarity. In other words, your site needs a layout that makes visitors’ pathways crystal clear.



True to the overall theme of the brand, Apple’s website is incredibly simple — and also rather sleek.

True to the overall theme of the brand, Apple’s website is incredibly simple — and also rather sleek. Now, don’t mistake “simple” for “empty.” Going back to Amazon’s current homepage, there’s certainly a lot going on. However, it’s still easy to navigate and understand visually.

Also worth noting is the idea that your site’s visual design should fit into what’s “typical” of sites in your industry. For example, take a look at eBay’s homepage:

While it doesn’t look exactly like Amazon, you could probably tell that the screenshot above is from some kind of ecommerce marketplace, even if the eBay logo wasn’t visible.

So from a visual standpoint, your ecommerce site should:



Be simple and free of clutter

Match your visitors’ expectations (especially those surrounding your industry)

3. Strong visual hierarchy

Take a look at the following screenshot from MVMT Watches:







If you’re visiting this site for the first time, where are you clicking first?



You’ll likely choose either of the two images (or perhaps the “Shop Now” buttons within said images). These features are clearly the most prominent on the page — both in size and visual aesthetics.



Visual hierarchy is the practice of making the element you want visitors to engage with most stand out above everything else. There are a few ways you can use visual hierarchy to persuade your visitors to take a specific action.



As in the example above, you can make certain elements of your site larger and more detailed.



You also might use color the way Dr. Dental has:



Notice how “Learn More” stands out from a sea of blue.



Or, you could simply use whitespace to make your target element “pop,” as Best Buy does here:



“When employing visual hierarchy, the trick is to make your focus element stand out while simultaneously making it fit with the rest of your site. In other words, make it stand out — but don’t be blatant about it.”



–Alon Popilskis, Digital Marketing Consultant, Smart SEO Designs

4. Attention-grabbing and keeping

If we were to nail this point down to a single word, it would likely be “immersion.”



You want visitors to become so engaged with your site that, for the duration of their stay, they completely forget everything else around them.



I could just stare at this peaceful image from Airbnb's site all day.

‍



Take a look at how Jorden Roper from Creative Revolt catches — and keeps — our attention using a combination of eye-catching imagery and badass copy:







Sometimes, keeping your visitors’ attention means presenting the unexpected — the way Jorden does with her brash copy. Other times, it simply means telling visitors exactly what they should expect the way GiftRocket does:









The main thing to keep in mind is that your site is giving visitors an experience — make it memorable.

5. Singular focus



“If your website doesn't match customers’ search intent, it's the equivalent of performing surgery with the lights off. This is why it’s important that each of your pages position themselves in a way that solves a user’s query — otherwise they're just going to leave and look for a solution elsewhere.”

–Dan Young, Director, LoudDigital





Every single page on your website should exist for one reason.



Your pages should not pull visitors in more than one direction. Whatever you want your visitors to do on a certain page — that’s what you should focus their attention on. This doesn’t mean everything else on the page is unimportant. Far from it, in fact.



On the contrary, everything else on the page should serve to direct a visitor to take the specific action you want them to take.







In the example above, the offer is promoted front and center — but the call to action (CTA), the Buy button, is also crystal clear.



Sometimes, you might want to include a secondary CTA to engage visitors who are reluctant to take the main course of action:

Still, the main CTA (“See Plans”) is obvious, making it easy to convert those ready to do so.‍

Your goal should be to use the entirety of each page on your site to prepare visitors to engage with the element you intended. Whether that’s signing up for your mailing list, purchasing your product, or contacting your company for more information — everything else on that specific page should get visitors ready to take action.



“Choice is a powerful persuasive tool, but you want to be sure to provide choices that move visitors in the desired path, but don't trap them in a tunnel. It's a balancing act.”

–Dr. Page Chen, President & Chief Innovation Officer, Remote Learner.