"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

The right mindset

UX Analysis in 5 Steps

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

• 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.

• 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.

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

• 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.

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

• Limbic Approach
• DISG Model
• Sinus Milieus

• 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.

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

• 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?

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

• 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).

• 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.

• 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?

• Screenreader 
• Color contrast
  

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

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