"In 5 Steps to UX Analysis: How to Optimize Your Website for More Sales & Leads"

1. The right mindset
2. UX Analysis in 5 Steps
3. Testing – Optimization is not a project, but a process.
4. Conclusion

From an online marketing perspective, the User Experience (short UX) of your website or your online shop is an important part of the marketing mix. It significantly influences the success of all measures that bring traffic to the website. Because it is not only a significant ranking factor for Google, but also ensures that your website visitors become paying customers. So it's a good reason to put your website to the test.

In this article, you will learn how you can go step by step to create a more comprehensive better user experience and thereby possibly also optimize your online shop conversions.

The right mindset

In general: Regardless of whether a relaunch has recently happened or not - your website is never finished and there is always room for improvement. Here it is particularly important to let go of the thought of perfection.

Always remain open to questioning your own design decisions and most importantly: Always think from the perspective of your target audience. Try to put yourself in their specific situation, needs and personal motives.

With this mindset, you have already created the best prerequisites for successfully completing the following 5 analysis steps.

UX Analysis in 5 Steps

A bit of background theory: According to the ISO Norm 9241, the term User Experience (short UX) comprises all effects that the use of a user interface (such as a website) before, during, and after use on the user. So it is highly subjective and thus dependent on the respective person using it.

The following 5 steps are intended to help you derive concrete optimizations to this comprehensive construct.

Step 1: Tasks of page types and their structure – What elements do you need?

A homepage has a different task than a product or about us page. Accordingly, different elements and content must be present. So at the beginning, define a primary (conversion) goal for each page type of your website and consider what questions you need to answer or what needs you need to satisfy so that your users can also fulfill this goal.

These can be, for example, the following:

• Homepage: The digital business card of your company. Its task is to provide an overview of products or services, convince visitors and guide them deeper into your website (e.g. to specific category pages).
• Category pages serve as overview and distribution pages, but also as landing pages for certain topic/product groups. They should present these clearly and understandably. In online shops with a wide portfolio, helpful filter and sorting options should ideally be found here.
• Product pages are often the main conversion driver of a website (here users become customers). They also often serve as landing pages for paid advertising measures and organic product or service searches. Accordingly, they should inform in detail about the product, highlight essential benefits and offer a direct conversion opportunity.
• About us page: This is intended to instill trust and clearly highlight your expertise. Depending on the industry and target group, it is necessary to convey specific properties, such as quality, expertise, safety, innovation, sustainability, etc.
• Contact page: Here is the contact point for users who want to get in touch. The preferred contact options of the target group (e.g. live chat, form, telephone number) should be clearly displayed here and distinguished according to concerns, so that all users know which way they should go.

Taking into account your overview, you can then go through the individual page types and check whether all relevant elements are available to guide and satisfy the users. For a landing page for lead generation, for example, the following elements make sense. 

Source: morefire

On company websites and in online shops, it is of course also necessary to examine the global elements. In addition to the logo, these include:

• Navigation: Provides orientation on the page and gives a first overview of the range. Important: Use formulations that both users and Google understand and a logical structure that grows with your company if needed.
• Search function: Makes it easier for users with a clear goal to navigate the page.
• Footer: Creates trust (Terms and conditions, imprint, useful links, etc.)
• Sticky contact buttons: Allow users who are ready to convert to shortcut the way.

In our article, you will learn which are the best conversion optimization tools for our users, with which you can improve your conversion rate and increase sales.

Step 2: Picking up the user - Prevent exits with the optimal first impression

Even if all the relevant content is present on your website, unfortunately (yet) it doesn't bring you anything if your users bounce off immediately. So make sure that users feel immediately comfortable with their requests on your pages. Numerous studies have shown that your users decide in the first seconds (the results fluctuate between 3 and 10 seconds) whether they are fundamentally ready to convert or bounce off again. So it is important to prepare the content above the fold so that it can be perceived and processed immediately. This first impression influences your users in everything they perceive on your page afterwards (framing). 

Eyetracking Forecast Tools are suitable for checking this. For example, we use Eye Quant. This tool analyzes over 1.6 million data points from 20,000 experiments to recognize which design features are perceived within the first 3 to 5 seconds.

Source: morefire

From the resulting heat or perception maps, it can be deduced whether the first impression of your website picks up your users optimally.

Helpful elements are:

• Packshot/Graphic/Mood picture: Pictures have a strong attention-binding effect and can usually be processed faster and remembered easier than texts. Use this to your advantage by using meaningful and attractive images in the first viewport!
• Headline: Explicitly formulates the topic of the page and communicates first benefits to your users.
• Logo: Serves recognition (if your users already know you), but also branding.
• Trust elements: Create trust directly with appropriate seals or reference logos.
• Call-to-action: Encourages your users to continue interacting with the page or – if possible – to convert directly.

The first two elements are the most important for conveying the content and added value of a page. All others are “nice to have” and become relevant when there is enough attention left after the reception of Packshot and Headline.

Step 3: Content – Target audience optimally address, with text and image

Of course, all essential information and functions should not only be factually present, but also be prepared in a target group-oriented way. Here, the subjective, emotional factors of the user experience become important.

In addition to the sheer comprehensibility of the content, you should prepare your products and services in such a way that the motives of your target group are specifically addressed. It can make sense to classify your users in psychological models.

In the online marketing context, according to our experience, three models have particularly proven themselves:

• Limbic Approach
• DISG Model
• Sinus Milieus

The Limbic® approach, for example, assumes three main emotional or motivational systems, which significantly determine human personality and thus his preferences:

• The Balance System: a striving for safety and harmony – avoidance of uncertainty.
• The Stimulant System: a striving for new experiences and fun – avoidance of boredom.
• The Dominance System: a striving for power and prestige – avoidance of repression.

These systems are arranged circularly in the Limbic Map and enriched with corresponding keywords, which represent preferences and motives of the target group.

Source: nymphenburg.de

If you locate your target group on this map, you can directly match your advertising material with these.

In general, all three models provide many more insights and design recommendations for your online marketing. It is definitely worth delving deeper here.

Step 4: Layout – Usability, Consistency & Positive Branding.

Unfortunately, there is often the assumption that web design is purely a matter of taste - this is simply wrong. In addition to personal aesthetic perception, there are objective quality criteria that must be met in order for a page to be user-friendly.

Here is a small selection of important criteria that you should check, even if you are not a designer:

• Consistency is particularly important to ensure a good usability of the page. We want to avoid that our users have to actively think or work to be able to operate the page. So ask yourself the following questions:
  • Is the overall layout consistent (consistently same elements with same function always identical layout, same distances)?
  • Are typography, colors, distances, grid, sizes and positions predefined and implemented on every page? Is there a uniform corporate design?
  • Are color hierarchies used? Are primary and secondary colors defined and consistently applied (e.g., for CTAs, headlines, etc.)?
  • Are design elements intuitively usable: Can users use their once learned knowledge (e.g., about what a navigation looks like and works) effortlessly?
  • Are size hierarchies used? Are important elements designed visually larger than unimportant elements?
• Contrasts are necessary to ensure the readability of texts, but also the perceptibility of other elements (e.g. buttons). This Colour contrast checker is suitable for verification. 
• Activation: To maintain the attention of your users, a certain variety is necessary. Specifically: Do different, suitable elements (e.g. image worlds, interaction possibilities, intermediate headlines, etc.) used?

In addition to these objective criteria, of course, the subjective preferences of your target audience are relevant. To check your page for this, you can again refer to the psychological models from section 2.4.

Step 5: Performance, Accessibility & SEO Basics – Technical hygiene criteria that are essential 

For a positive user experience, the basic technical aspects of your website should be correct. Even without being a “techie,” you can easily check these with tools and derive first optimization steps:

• Performance: The loading time should be as short as possible so that your users quickly see relevant content. Generally, the loading behavior of your page is also a decisive factor for the Google ranking. With the Google Pagespeed Insights, you can check the Core Web Vitals of your page. Specifically, these are the following relevant metrics:
  • First Contentful Paint (FCP): This measures the time until first contents like images, graphics or text visibly appear in the browser. Ideally, your users will recognize already within the first second after page call-up that the page is actively loading.
  • Largest Contentful Paint (LCP): Measures the time until the largest image or text block in the directly visible area is displayed. Assuming that the largest element is also the most revealing for the users, this should ideally be under 2.5 seconds.
  • First Input Delay (FID): Indicates how quickly a website reacts to the user's interaction (e.g. click on a button). Ideally, this should be less than 100 milliseconds.
  • Cumulative Layout Shift (CLS): This measures how much the presentation of a website changes subsequently (without user interaction). An example for this: A banner ad appears during the loading process in the flow text, causing the following text to shift downwards afterwards. This should of course be avoided (ideally the CLS is under 0.1).

Source: Google PageSpeed Insights

• Accessibility: In addition to technical aspects such as compatibility with different browsers and end devices, which you can test with this tool, accessibility also encompasses as much barrier-free access as possible for people with vision impairments, motor restrictions, non-native speakers and users with low reading competence.

This not only expands your potential target group (almost 10% of the population have a severe restriction), but also serves the SEO of your page.

So consider your website also under the following aspects:

• Does it have explicit image texts, file names, and alt titles (that can be read by the screen reader)?
• Can the texts on the backgrounds be easily read?
• Is the layout responsive and does it adapt well when enlarged?
• Is the font very readable? Can a small l and a large I, for example, be clearly distinguished?
• Are buttons and links large enough so that they can be easily selected by people with motor restrictions?
• Can the website be controlled both through the keyboard and via the mouse?
• Are the structures of the website clearly defined so that screen readers can read them?

To answer these questions, these tools can help you: 

• Screenreader 
• Color contrast
  

Testing – Optimization is not a project, but a process.

Once you have completed and completed your analysis, the real work begins. Because a website is never finally complete. User habits are constantly changing, as are device technologies and sizes. To keep pace here, an agile way of working helps. By understanding optimization as a continuous process, you can keep the overall effort long-term manageable and within a reasonable framework and still keep up with the competition. Classical (A/B-) Testing has proven to be a useful tool.

Here is a short inspiration of what such a test or optimization cycle could look like:

Figure 5: morefire

1. Analyze the status quo: What problems & optimization potentials are there currently? Take your analysis in hand and reconcile it with all available data (Analytics data, CRM data, insights from Paid campaigns, etc.)
2. Form hypothesis: Which measures could solve these problems?
3. Prioritizing & Test plan: Which measures would have the greatest impact with quick implementation? You can start there.
4. Drive (A/B) Test: Create a prototype for the hypothesis you now want to test. Since testing tools are often quite expensive, you can get started using Google Optimizein the free version.
5. Evaluate the test: How does the variant perform compared to the original page? Evaluate whether there is a significant improvement in key figures (e.g., your Conversion Rate).
6. Implementation: Implement positively tested changes to form the new status quo.

Conclusion

Admittedly, the whole thing sounds like a lot of work - and it is. But good user experience usually pays off quickly - simply through more leads or sales. Moreover, good UX is essential in the long run for a positive and consistent brand image.

If you don't have the capacity for it yourself, invest in an agency that supports you.

In general: Just get started - every improvement of the User Experience is a step forward and even the smallest optimizations can have a massive impact on the conversion rate and thus your sales and profit.