large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

Published on <a href="https://blog.prototypr.io/bad-user-experience-kills-your-conversion-funnel-51ce8bd54f2f?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Sophie Riwaters <img alt="" src="https://cdn-images-1.medium.com/max/800/1*KUfdlv3cis6W9iomVC4a6Q.png">by <a href="https://dribbble.com/natekadlac">Nate Kadlac</a>
Online sales are very tempting for many. There is no need for salesmen or employees. Everything can be measured using all kinds of web analytics tools. Things can be automated and so on. At first glance, it looks very simple: you launch a webpage run a few ad campaigns, and customers are coming champagne bottles popping.
It might look something like this in people’s imagination, but the reality is not that simple. The success of your website is influenced by a number of factors, which in most cases are fortunately measurable.
|Your website worth nothing if it doesn’t convert.
<h3>What does conversion mean?</h3>
<a href="https://en.wikipedia.org/wiki/Conversion_marketing">The term “conversion” is widely used</a> by the web industry, in the way that the visitor is “transformed” into an interested person, customer, subscriber and so on.
In an optimum case, a website has more visitors — like much more- than any active engagement. In other words, most of your visitors will leave in the first few seconds and this is completely normal. However, you can do a lot in order to increase the efficiency of your website.
<h3>When can we say conversion is going to happen?</h3>
Conversions don’t have to be sales but can be any key performance indicator (KPI) — such as Customer acquisition cost or <a href="https://www.barilliance.com/10-reasons-shopping-cart-abandonment/">Shopping cart abandonment rate</a> — that matters for your business. In other words, when the goal set by the owner of the site is realized, which can be many things.
Here are a couple of examples:
<ul>
<li>contact the owner of the site</li>
<li>order</li>
<li>view a specific website page</li>
<li>view a particular order of sub-pages in a page</li>
<li>sign up for a newsletter</li>
<li>downloading material from the site e.g. ebook</li>
<li>people download an app and also use it</li>
<li>subscribe to a trial</li>
</ul>
The list goes on. You set conversion goals in your web analytics software for whatever you want to track.
<h3>How can conversion be measured?</h3>
To measure conversion, you need two things:
<ol>
<li>appropriate web analytics software</li>
<li>proper website structure way website design and programming, where each step (even on URL level) makes the visitor’s activity visible</li>
</ol>
As you can see, here again, it is proven how much web design is brain work.
<blockquote>“We will only be able to measure what we have built measurable.”</blockquote>
The easiest way to measure a conversion is by setting a goal in a web analytics tool. The <a href="https://capturly.com/">sophisticated web analytics tools</a> put special emphasis on measuring and optimizing the conversion.
<h3>When can you say, that your conversion rate is good or poor?</h3>
Varies per industry. However, as a good rule a thumb, most companies reach a conversion rate of 2–3 percent. By default, the conversion goal is met by the order. If the appropriate level of conversion rate is between 1 and 5%, <a href="https://www.smartinsights.com/ecommerce/ecommerce-analytics/ecommerce-conversion-rates/">most sources consider 3% acceptable</a>.
<img alt="" src="https://cdn-images-1.medium.com/max/986/0*Qflz6x0NYdhcbSsR.jpg">Source: <a href="https://www.smartinsights.com/mobile-marketing/mobile-commerce/mobile-users-still-not-converting/attachment/conversion-rates-of-online-shoppers-by-device-and-platform-2/">smartinsights.com</a>
If your conversion is below 3%, you can start thinking about why. There are dozens of explanations. If your web analytics show that your conversion rate is low, it means your site is not attractive or somehow you attract people who aren’t part of your target group. The conversion rate <a href="https://capturly.com/blog/how-much-is-your-web-analytics-worth/">can often drop because of usability issues</a>.
Here are a couple of examples:
<ul>
<li>the website design is not attractive, not aesthetic or obsolete</li>
<li>the website is hard to navigate, confusing (e.g. call-to-action buttons, links are hard to find)</li>
<li>the landing page is badly defined or configured (e.g. the visitors come from a running ad and the landing page doesn’t meet their expectations or it’s misleading)</li>
<li>the visitor’s goal differs from your conversion goal (e.g. he or she visits your site to gather information, but not interested in buying your product)</li>
</ul>
<h3>How can you improve your conversion rates?</h3>
Don’t do anything until you know where you are! Ask yourself the following questions and try to answer them from the point of view of visitors:
<ol>
<li>Is the website easy to navigate?</li>
<li>Is it easy for me to reach my goal?</li>
<li>Do I have to wait for the site to load up until my coffee gets cold?</li>
<li>Do I get what I’m really looking for or I’m just wasting my time?</li>
</ol>
|User experience plays a significant role when it comes to improving your website’s conversion rate.
So, in order to claim that the design is able to fulfill its mission, the requirements mentioned above must be met at the same time. In other words usability, aesthetics, and efficiency are key factors.
If you only considered one of these, when thinking of designing your website, it’s time to step back and inspect the picture as a whole.
<h3>Tip #1 Web Design and User Experience</h3>
Remember that silly <a href="http://www.independent.co.uk/news/science/five-second-rule-food-dropped-floor-germs-scientists-professor-anthony-hilton-aston-university-a7629391.html">joke about the 5-second rule</a>? Well, there are <a href="http://amandabrazel.com/know-8-seconds-grab-potential-clients-attention-website/">only 8 seconds to convince visitors</a>.
Some things you need to be aware of:
<ul>
<li>make the layout clear</li>
<li>make sure you apply the positive feedback you</li>
<li>use high-resolution images</li>
<li>make it super easy to log on to your site</li>
<li>use simple forms to be effective for your call to action buttons</li>
</ul>
|Seriously. <a href="https://medium.theuxblog.com/the-ux-dilemma-why-do-people-hate-forms-63f8970321d1">People hate forms</a>.
<h3>Tip #2 User Testing</h3>
Your landing page and their elements should always be optimized with A / B tests to determine what works for your target audience and what does not. Don’t be afraid to use web analytics tools that offer click heatmaps, scroll heatmaps. Often the difference can be measured in a qualitative way.
|User testing is the Rambo in your arsenal
It allows you to see the project with the eyes of the end users. It can reveal details that you might have missed, or simply thought that it wasn’t important. It is recommended to conduct it as soon as possible in the early design process. If you do so, A / B tests can help you optimize your conversion rate. You can identify the challenges people face while using your website, and why they do not convert.
<h3>Tip #3 Proper Call-To-Actions</h3>
The physical locations of your screen elements are important. So practically, all the elements of the webpage, and even beyond, can affect conversion optimization. Making it confusing to complete easy tasks such as downloading a desktop version of an app is not the best idea.
|Let’s look at the CTA button design in a bit more detail.
If conversion optimization is your goal, it will not go without efficient call-to-action (CTA) buttons. Those who have not dealt with web design, conversion optimization, the design of landing pages, refining CTAs, they may not even begin to understand why <a href="https://www.impactbnd.com/blog/cta-best-practices">designing a call to action is so important</a>.
|Use proper contrast.
This isn’t a game of hide-and-seek. There is a reason why these elements are called Call-To-Action and not Find-The-Button. Make sure that these buttons/links are visible enough to achieve the following:
<ol>
<li>Grab attention in an intuitive way</li>
<li>Improve accessibility for the visually impaired</li>
</ol>
Using low-value contrast — as you can see in the right image — can be a challenge to read for people with color vision impairments.
<img alt="" src="https://cdn-images-1.medium.com/max/511/0*bWg1suIV39NpMWbB.png">source: usertesting.com
Another example of contrast:
If you have never visited the website of <a href="https://www.blizzard.com/en-us/">Blizzard.com</a> — a leading company in the video game industry — you can find it confusing to download their app. You have two options:
<ul>
<li>Get the app by clicking the CTA on the slider unless it changes before you can click it so you have to navigate back to the game of your choice, and from then look for another CTA on the specific page to make that download</li>
<li>Click the anchor text below which is hard to spot since it’s basically a blue text on a blue background</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*TT7xYOqph1P_FA4v.jpg">Source: <a href="https://www.blizzard.com/en-us/">Blizzard</a>
|The size of call-to-actions also matter.
<a href="https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/fitts-s-law">According to Fitt’s law</a>. The time needed for a click to happen is defined by the size of the object and its distance from the pointer.
<img alt="" src="https://cdn-images-1.medium.com/max/600/0*uvxrVO49WYF8JFoi.jpg">Source: <a href="https://capturly.com">Capturly Analytics</a>
Also when the user is in close proximity, the mouse movement will slow down to avoid a potential misclick. This way if the size is increased, it <a href="https://www.interaction-design.org/literature/article/fitts-s-law-the-importance-of-size-and-distance-in-ui-design">reduces the time to manage a click</a>.
<h3>Tip #4 Funnel Optimization</h3>
Every tip mentioned before aims to improve your conversion funnel. In marketing, <a href="https://capturly.com/blog/conversion-funnels/">the funnel describes the user’s journey</a> through an application or a website/webshop. The conversion funnel shape — like shown in the image below — comes from the fact that on every stage the company loses a certain amount of users as they proceed through. <a href="https://www.bigcommerce.com/blog/conversion-rate-optimization-conversion-funnel/">Your goal here is to bring more visitors</a> to the top of the conversion funnel.
However, when it comes to increasing the efficiency of the different levels, marketing and design have to work together. After you’ve collected the necessary amount of information and have a rough idea of what’s going on in the user’s mind, you can proceed to fine-tune the structure of your design. Even if people are coming to your site to order something. However, the difficulty raises as you wish them to go further in the conversion funnel.
<img alt="" src="https://cdn-images-1.medium.com/max/300/0*5dVuc5rGDJYrBEuv.jpg">Source: <a href="https://capturly.com">Capturly Analytics</a>
|Trust is playing an increasingly important role.
<blockquote>“Building trust does not go from one moment to another. Confidence building is a process where you need to think of not just a website, but conversion funnel.”</blockquote>
For example, to get a newsletter subscription, it’s easier to get an email address, as they may get some useful content for free. But this is another story when it comes to serious issues like when visitors have to pay heavy money for your product or service.
<h3>Conclusion:</h3>
“Unfortunately”, nowadays it’s not enough if you have an excellent product, service that you simply put on the Internet. It’s not even cheap as you might think to launch a successful online business. You can kill hundreds of thousands to make your website look beautiful and still have a bad conversion rate if you don’t use your web analytics tools — such as scroll heatmaps or click heatmaps — smart, and if you don’t have a thought out, well-designed strategy. Advertising costs have been chewed up, and fast-paced tricks are obsolete, so without proper conversion optimization strategy, your ads will burn more money than you realize. The secret of effective sales lies in gradual growth and confidence building.
Please write a comment, your feedback means a lot to me! Also sharing and recommending is a big motivation. I appreciate every help! ❤
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=51ce8bd54f2f" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/bad-user-experience-kills-your-conversion-funnel-51ce8bd54f2f">Bad User Experience Kills Your Conversion Funnel</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Bad User Experience Kills Your Conversion Funnel

Bad User Experience Kills Your Conversion Funnel

Top Stories