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

Aus Online-Marketing-Sicht ist die User Experience (kurz UX) Eurer Website oder Eures Onlineshops ein wichtiger Bestandteil des Marketing-Mixes. Sie beeinflusst maßgeblich den Erfolg aller Maßnahmen, die Traffic auf die Website bringen. Denn sie ist nicht nur wesentlicher Ranking-Faktor bei Google, sondern sorgt auch dafür, dass Eure Website-Besuchenden zu zahlender Kundschaft werden. Ein guter Grund also, Eure Website mal auf den Prüfstand zu stellen.

In diesem Artikel erfahrt Ihr, wie Ihr Schritt für Schritt vorgehen könnt, um ein ganzheitlich besseres Nutzungserlebnis zu schaffen und dadurch bspw. auch Eure Onlineshop-Conversions optimieren könnt. 

Das richtige Mindset

Generell gilt: Egal, ob kürzlich ein Relaunch passiert ist oder nicht – grundsätzlich ist Eure Website niemals fertig und es gibt immer Luft nach oben. Hier ist es besonders wichtig, sich von dem Perfektions-Gedanken zu verabschieden.

Bleibt stets offen, Eure eigenen Design-Entscheidungen zu hinterfragen und am allerwichtigsten: Denkt immer aus Perspektive Eurer Zielgruppe. Versucht Euch in ihre konkrete Situation, Bedürfnisse und persönlichen Motive hineinzuversetzen. 

Mit diesem Mindset habt Ihr schon die beste Voraussetzung geschaffen, die folgenden 5 Analyse-Schritte erfolgreich durchzuführen.

UX-Analyse in 5 Schritten

Ein bisschen Theorie zum Hintergrund: Unter dem Begriff User Experience (kurz UX) werden laut der ISO Norm 9241 alle Effekte zusammengefasst, welche die Nutzung einer Bedienoberfläche (wie bspw. einer Website) vor, während und nach der Nutzung auf den User hat. Sie ist also hochgradig subjektiv und somit abhängig von der jeweiligen nutzenden Person.

Die folgenden 5 Schritte sollen Euch dabei helfen, konkrete Optimierungen zu diesem umfassenden Konstrukt abzuleiten.

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

Eine Startseite hat eine andere Aufgabe, als eine Produkt- oder Über-Uns-Seite. Dementsprechend müssen unterschiedliche Elemente und Inhalte vorhanden sein. Definiert also zu Beginn für jeden Seiten-Typen Eurer Website ein primäres (Conversion-)Ziel und überlegt Euch, welche Fragen Ihr beantworten bzw. welche Bedürfnisse Ihr befriedigen müsst, damit Eure Nutzer:innen dieses Ziel auch erfüllen.

Das können z.B. folgende sein:

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

Unter Betrachtung Eurer Übersicht könnt Ihr dann die einzelnen Seiten-Typen durchgehen und überprüfen, ob alle relevanten Elemente vorhanden sind, um die User zu leiten und zufriedenzustellen. Für eine Landingpage zur Lead-Generierung sind bspw. folgende Elemente sinnvoll.

Quelle: morefire

Auf Unternehmenswebsites und in Online-Shops gilt es natürlich auch, die globalen Elemente zu untersuchen. Neben dem Logo sind das unter anderem:

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

In unserem Artikel erfahrt Ihr, welches die für unsere User besten Conversion-Optimierungstools sind, mit denen Ihr Eure Conversion-Rate verbessern und Umsätze erhöhen könnt.

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

Selbst wenn alle relevanten Inhalte auf Eurer Website vorhanden sind, bringt Euch das leider (noch) nichts, wenn Eure User direkt abspringen. Also stellt sicher, dass Nutzer:innen sich auf Euren Seiten umgehend mit ihrem Anliegen aufgehoben fühlen. Eure User entscheiden zahlreicher Studien zur Folge in den ersten Sekunden (die Ergebnisse schwanken zwischen 3 und 10 Sekunden), ob sie grundsätzlich conversion-bereit sind oder wieder abspringen. Also gilt es, die Inhalte above the fold so aufzubereiten, dass sie direkt wahrgenommen und verarbeitet werden können. Dieser erste Eindruck beeinflusst Eure Nutzer:innen bei allem, was sie danach auf Eurer Seite wahrnehmen (Framing). 

Um dies zu überprüfen, bieten sich Eyetracking Forecast Tools an. Wir nutzen bspw. Eye Quant. Dieses Tool analysiert über 1,6 Mio. Datenpunkte aus 20.000 Experimenten, um zu erkennen, welche Designmerkmale innerhalb der ersten 3 bis 5 Sekunden wahrgenommen werden. 

Quelle: morefire

Aus den daraus resultierenden Heat- oder Perception-Maps kann abgeleitet werden, ob der erste Eindruck Eurer Website Eure Nutzer:innen optimal abholt.

Hilfreiche Elemente dabei sind:

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

Die ersten beiden Elemente sind dabei am wichtigsten, um den Inhalt und Mehrwert einer Seite zu vermitteln. Alle weiteren sind “nice to have” und werden relevant, wenn nach Rezeption von Packshot und Headline genügend Aufmerksamkeit übrig ist.

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

Natürlich sollten alle wesentlichen Informationen und Funktionen nicht nur faktisch vorhanden sein, sondern auch zielgruppengerecht aufbereitet werden. Hier werden die subjektiven, emotionalen Faktoren der User Experience wichtig.

Neben der schlichten Verständlichkeit des Contents, gilt es hier, Eure Produkte und Dienstleistungen so aufzubereiten, dass die Motive Eurer Zielgruppe gezielt angesprochen werden. Dabei kann es sinnvoll sein Eure Nutzer:innen in psychologische Modelle einzuordnen.

Im Online-Marketing-Kontext haben sich unserer Erfahrung nach besonders drei Modelle bewährt:

• Limbic Ansatz
• DISG-Modell
• Sinusmilieus

Der Limbic® Ansatz beispielsweise geht von drei Haupt-Emotions- bzw. Motivations-

systemen aus, welche die menschliche Persönlichkeit und somit seine Präferenzen wesentlich bestimmen:

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

Diese Systeme sind in der Limbic Map kreisförmig angeordnet und mit entsprechenden Schlagworten, welche für Präferenzen und Motive der Zielgruppe stehen, angereichert.

Quelle: nymphenburg.de

Wenn Ihr Eure Zielgruppe auf dieser Map einordnet, könnt Ihr Eure Werbemittel direkt mit diesen abgleichen.

Grundsätzlich bieten alle drei Modelle viele weitere Insights und Gestaltungsempfehlungen für Euer Online Marketing. Es lohnt sich auf jeden Fall, hier tiefer einzusteigen.  

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

Leider herrscht häufig die Annahme vor, dass Webdesign reine Geschmackssache ist – Das ist schlichtweg falsch. Neben dem persönlichen ästhetischen Empfinden gibt es objektive Qualitätskriterien, die erfüllt sein müssen, damit eine Seite nutzungsfreundlich ist.

Hier eine kleine Auswahl an wichtigen Kriterien, die Ihr auch als Nicht-Designer überprüfen solltet:

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

Neben diesen objektiven Kriterien sind natürlich auch die subjektiven Präferenzen Eurer Zielgruppe relevant. Um Eure Seite darauf zu überprüfen, könnt Ihr wieder die psychologischen Modelle aus Abschnitt 2.4 zurate ziehen.

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

Für eine positive User Experience sollten die grundlegenden technischen Aspekte Eurer Website stimmen. Auch ohne ein “Techie” zu sein, könnt Ihr diese unkompliziert mit Tools überprüfen und erste Optimierungs-Schritte ableiten:

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

Quelle: Google PageSpeed Insights

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

Das erweitert nicht nur Eure potenzielle Zielgruppe (knapp 10% der Bevölkerung haben eine schwere Einschränkung), sondern dient auch der SEO Eurer Seite.

Betrachtet Eure Website also auch unter folgenden Aspekten:

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

Zur Beantwortung dieser Fragen können Euch diese Tools helfen: 

• Screenreader 
• Farbkontraste
  

Testing – Optimierung ist kein Projekt, sondern ein Prozess

Wenn Ihr Eure Analyse durchgeführt und abgeschlossen habt, geht es erst richtig los. Denn eine Website ist niemals endgültig fertig. User-Gewohnheiten ändern sich ebenso ständig, wie Device-Techniken und -Größen. Um hier Schritt halten zu können, hilft eine agile Arbeitsweise. Durch das Begreifen von Optimierung als dauerhaften Prozess könnt Ihr den Gesamtaufwand langfristig planbar und im vertretbaren Rahmen halten und trotzdem mit dem Wettbewerb Schritt halten. Das klassische (A/B-) Testing hat sich hier als Instrument bewährt.

Hier eine kurze Inspiration, wie so ein Test- bzw. Optimierungszyklus aussehen kann:

Abbildung 5: morefire

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

Zugegeben, das Ganze klingt nach viel Arbeit – ist es auch. Aber eine gute User Experience macht sich meist schnell bezahlt – schlicht durch mehr Leads oder Verkäufe. Außerdem ist UX langfristig unerlässlich für ein positives und konsistentes Markenbild. 

Wenn Ihr selbst keine Kapazitäten dafür habt, investiert in eine Agentur, die Euch unterstützt.

Grundsätzlich gilt: Einfach mal anfangen – jede Verbesserung der User Experience ist ein Schritt nach vorn und auch kleinste Optimierungen können sich massiv auf die Conversion-Rate und somit Euren Umsatz und Gewinn auswirken.