In 5 Schritten zur UX-Analyse: So optimiert Ihr Eure Website für mehr Sales & Leads

1. Das richtige Mindset
2. UX-Analyse in 5 Schritten
3. Testing – Optimierung ist kein Projekt, sondern ein Prozess
4. Fazit

Das richtige Mindset

UX-Analyse in 5 Schritten

Schritt 1: Aufgaben von Seitentypen und deren Aufbau – Welche Elemente braucht Ihr?

• Startseite: Die digitale Visitenkarte Eures Unternehmens. Ihre Aufgabe ist es, einen Überblick über Produkte oder Dienstleistungen zu geben, Besucher:innen von Euch zu überzeugen und diese tiefer in Eure Website zu führen (bspw. auf spezifische Kategorie-Seiten).
• Kategorie-Seiten dienen als Übersicht und Verteilerseiten, aber auch als Landingpages für bestimmte Themen-/ Produktgruppen. Sie sollten diese übersichtlich und verständlich darstellen. Bei Online-Shops mit breitem Portfolio finden sich hier idealerweise hilfreiche Filter- und Sortierungsmöglichkeiten.
• Produktseiten sind häufig der wesentliche Conversion-Treiber einer Website (hier werden Nutzer:innen zu Kund:innen). Sie dienen zudem oft als Landingpage für Paid-Advertising-Maßnahmen und organische Produkt- oder Dienstleistungs-Suchen. Dementsprechend sollten sie ausführlich über das Produkt informieren, wesentliche Benefits herausstellen und eine möglichst direkte Conversion-Möglichkeit anbieten.
• Über-Uns-Seite: Diese dient dazu, Vertrauen zu wecken und Eure Expertise klar herauszustellen. Je nach Branche und Zielgruppe gilt es hier, spezifische Eigenschaften, wie Qualität, Expertise, Sicherheit, Innovation, Nachhaltigkeit o.Ä. zu vermitteln.
• Kontaktseite: Hier ist die Anlaufstelle für User, die Kontakt aufnehmen möchten. Die präferierten Kontaktmöglichkeiten der Zielgruppe (bspw. Live-Chat, Formular, Telefonnummer) sollten hier übersichtlich dargestellt und nach Anliegen ausgewiesen sein, sodass allen Nutzer:innen klar ist, welchen Weg sie gehen sollten.

• Navigation: Dient der Orientierung auf der Seite und schafft einen ersten Überblick über das Sortiment. Wichtig: Nutzt Formulierungen, die User und Google verstehen und eine sinnvolle Struktur, die bei Bedarf mit Eurem Unternehmen weiter wächst.
• Suchfunktion: Erleichtert Nutzer:innen mit einem klaren Ziel die Bedienung der Seite.
• Footer: Schafft Vertrauen (AGB, Impressum, nützliche Verlinkungen etc.)
• Sticky-Kontaktbuttons: Erlauben Nutzer:innen, die conversion-bereit sind, den Weg abzukürzen.

Schritt 2: User abholen – Absprünge verhindern durch den optimalen ersten Eindruck

• Packshot/Grafik/Mood-Bild: Bilder wirken stark aufmerksamkeits-bindend und können i.d.R. schneller verarbeitet und leichter erinnert werden als Texte. Macht Euch dies zunutze, indem Ihr aussagekräftiges und attraktives Bildmaterial im ersten Viewport nutzt!
• Headline: Formuliert explizit das Thema der Seite und vermittelt Euren Nutzer:innen erste Benefits.
• Logo: Dient der Wiedererkennung (falls Eure User Euch schon kennen), aber auch dem Branding.
• Trust-Elemente: Schafft direkt Vertrauen durch entsprechende Siegel oder Referenzlogos.
• Call-to-Action: Animiert Eure User, sich weiter mit der Seite zu beschäftigen oder – wenn möglich – direkt zu konvertieren.

Schritt 3: Inhalte – Zielgruppe optimal ansprechen, mit Text und Bild

• Limbic Ansatz
• DISG-Modell
• Sinusmilieus

• Das Balance-System: Streben nach Sicherheit und Harmonie – Vermeidung von Unsicherheit.
• Das Stimulanz-System: Streben nach neuen Erfahrungen und Spaß – Vermeidung von Langeweile.
• Das Dominanz-System: Streben nach Macht und Prestige – Vermeidung von Unterdrückung.

Schritt 4: Layout – Usability, Konsistenz & ein positiver Markenauftritt

• Konsistenz ist besonders wichtig, um eine gute Nutzbarkeit der Seite zu gewährleisten. Wir wollen vermeiden, dass unsere Nutzer:innen aktiv nachdenken bzw. arbeiten müssen, um die Seite bedienen zu können. Also stellt Euch folgende Fragen:
  • Ist das Gesamt-Layout konsistent (durchgehend gleiche Elemente mit gleicher Funktion immer gleich gelayoutet, Abstände gleich)?
  • Sind Typografie, Farben, Abstände, Grid, Größen und Positionen vordefiniert und auf jeder Seite umgesetzt? Gibt es ein einheitliches Corporate Design?
  • Werden Farbhierarchien verwendet? Sind primäre und sekundäre Farben definiert und konsequent angewandt (z.B. für CTAs, Headlines, usw.)?
  • Sind Design-Elemente intuitiv benutzbar: Können Nutzer:innen ihr einmal erlerntes Wissen (bspw. darüber, wie eine Navigation aussieht und funktioniert) mühelos anwenden?
  • Werden Größenhierarchien eingesetzt? Sind wichtige Elemente visuell größer als unwichtige Elemente designt?
• Kontraste sind notwendig, um die Lesbarkeit von Texten, aber auch die Rezipierbarkeit von anderen Elementen (bspw. Buttons) zu gewährleisten. Hier eignet sich dieses Colour Contrast Checker zur Überprüfung.
• Aktivierung: Um die Aufmerksamkeit Eurer User aufrechtzuerhalten, ist eine gewisse Abwechslung notwendig. Konkret: Werden unterschiedliche, passende Elemente (bspw. Bildwelten, Interaktionsmöglichkeiten, Zwischen-Headlines usw.) genutzt?

Schritt 5: Performance, Accessibility & SEO-Basics – technische Hygienekriterien, die unerlässlich sind 

• Performance: Die Ladezeit sollte möglichst kurz sein, damit Eure Nutzer:innen schnell relevanten Content zu Gesicht bekommen. Generell ist das Ladeverhalten Eurer Seite auch für das Google Ranking ein entscheidender Faktor. Mit den Google Pagespeed Insights könnt Ihr die Core Web Vitals Eurer Seite überprüfen. Konkret sind das folgende relevante Metriken:
  • First Contentful Paint (FCP): Dieser misst die Zeit bis erste Inhalte wie Bilder, Grafiken oder Text im Browser sichtbar werden. Im Idealfall erkennen Eure User so bereits innerhalb der ersten Sekunde nach Seitenaufruf, dass die Seite aktiv lädt. 
  • Largest Contentful Paint (LCP): Misst die Zeit bis zur Darstellung des größten Bildes oder Text-Blocks im direkt sichtbaren Bereich. Ausgehend davon, dass das größte Element auch gleichzeitig das aufschlussreichste für die Nutzer:innen ist, sollte dieser idealerweise bei unter 2,5 Sekunden liegen.
  • First Input Delay (FID): Gibt an, wie schnell eine Webseite auf die Interaktion des Nutzers (bspw. Klick auf einen Button) reagiert. Idealerweise beträgt dieser weniger als 100 Millisekunden.
  • Cumulative Layout Shift (CLS): Dieser misst, wie stark sich die Darstellung einer Webseite (ohne Interaktion der User) nachträglich verändert. Ein Beispiel hierfür: Ein Werbebanner erscheint während des Ladevorgangs im Fließtext, wodurch sich der folgende Text nachträglich nach unten verschiebt. Dies sollte natürlich vermieden werden (idealerweise liegt der CLS unter 0,1).

• Accessibility: Neben technischen Aspekten, wie der Kompatibilität mit verschiedenen Browsern und Endgeräten, die Ihr z.B. mit diesem Tool testen könnt, beinhaltet die Accessibility auch eine möglichst hohe Barrierearmut für Menschen mit Sehschwäche, motorischen Einschränkungen, Nicht-Muttersprachler:innen und User mit geringer Lesekompetenz.

• Gibt es eindeutige Bildtexte, Dateinamen und Alttitel (die vom Screenreader vorgelesen werden können)?
• Kann man die Texte auf den Hintergründen gut lesen?
• Ist das Layout responsive und passt sich beim Vergrößern gut an?
• Ist die Schrift sehr gut lesbar? Kann man ein kleines L und ein großes I bspw. eindeutig unterscheiden?
• Sind Buttons und Links groß genug, sodass sie auch von Menschen mit motorischen Einschränkungen gut angewählt werden können?
• Lässt sich die Website sowohl durch die Tastatur, als auch über die Maus steuern?
• Sind die Strukturen der Website klar definiert, sodass Screenreader sie lesen können?

• Screenreader 
• Farbkontraste
  

Testing – Optimierung ist kein Projekt, sondern ein Prozess

1. Status quo analysieren: Welche Problemstellungen & Optimierungspotenziale gibt es aktuell? Nehmt Eure Analyse zur Hand und gleicht es mit allen verfügbaren Daten ab (Analytics-Daten, CRM-Daten, Erkenntnisse aus Paid-Kampagnen usw.)
2. Hypothesen bilden: Welche Maßnahmen könnten diese Probleme lösen?
3. Priorisierung & Testplan: Welche Maßnahmen hätten bei schneller Umsetzung den wahrscheinlich größten Impact? Da könnt Ihr anfangen.
4. (A/B-)Test fahren: Erstellt einen Prototyp zu der Hypothese, die Ihr nun testen möchtet. Da Testing-Tools oft ziemlich teuer sind, könnt Ihr zum Einstieg Google Optimize in der kostenlosen Version nutzen.
5. Test auswerten: Wie performt die Variante im Vergleich zur Originalseite? Wertet aus, ob es eine signifikante Verbesserung wichtiger Kennzahlen (bspw. Eurer Conversion Rate) gibt. 
6. Implementierung: Positiv getestete Änderungen implementiert Ihr und bildet somit den neuen Status quo. 

Fazit