Das Wichtigste in Kürze
- Tempo entscheidet zuerst: 53 Prozent der mobilen Besucher brechen ab, wenn eine Seite länger als drei Sekunden lädt. Schnelle Ladezeit ist daher kein Bonus, sondern Eintrittskarte.
- Klarheit schlägt Kreativität: Eindrücke entstehen in rund 50 Millisekunden. Eine logische Navigation und sichtbare Hierarchie wirken stärker als jede Animation.
- Barrierefreiheit ist Pflicht: Seit dem 28. Juni 2025 verpflichtet das BFSG viele private Anbieter zur barrierefreien Gestaltung digitaler Produkte.
- CTAs gehören dorthin, wo die Aufmerksamkeit ist: Laut Nielsen Norman Group verbringen Anwender 57 Prozent ihrer Lesezeit im ersten Sichtbereich (ohne Scrollen). Dort gehört der wichtigste Handlungsimpuls hin.
Schlechtes UX-Design lässt sich an drei Symptomen zuverlässig erkennen: lange Ladezeiten, unklare Navigation und schwache Handlungsaufforderungen. Studien zeigen, dass 53 Prozent der mobilen Sitzungen abbrechen, sobald eine Seite länger als drei Sekunden lädt. In diesem Leitfaden lesen Sie, woran Sie schwaches UX im B2B-Mittelstand früh erkennen und mit welchen konkreten Maßnahmen Sie Websites so verbessern, dass Besucher länger bleiben und häufiger anfragen.
Was ist gutes UX-Design eigentlich?
UX-Design beschreibt das gesamte Erlebnis, das eine Person auf Ihrer Website hat: vom ersten Klick über die Orientierung bis zur Anfrage. Forscher um Gitte Lindgaard zeigen, dass ein Urteil über eine Seite in rund 50 Millisekunden entsteht. Gutes UX nutzt diese Sekunde, schlechtes verliert sie.
Es geht also nicht um Geschmack. Es geht um Klarheit, Tempo und Vertrauen. Eine Seite mit gutem UX führt Anwender ruhig durch eine Aufgabe. Sie reduziert Reibung, statt sie zu verstecken. Drei Ebenen spielen zusammen: Technik (Ladezeit, Responsiveness), Information (Struktur, Inhalte) und Interaktion (CTAs, Formulare).
In Evelan-Projekten mit B2B-Mittelständlern sehe ich oft, dass schon kleine Eingriffe das Erlebnis verändern. Eine entrümpelte Navigation. Ein sichtbarer CTA. Ein Bild weniger. Das wirkt schneller als jeder Relaunch.
Was ist schlechtes UX-Design?
Schlechtes UX-Design zeigt sich, wenn Besucher mehr Energie aufwenden müssen, als die Aufgabe wert ist. Studien der Nielsen Norman Group belegen, dass Anwender 57 Prozent ihrer Aufmerksamkeit im ersten Sichtbereich verbringen, also dort, wo die Seite ohne Scrollen sichtbar ist. Wer dort nicht sofort liefert, verliert die Sitzung in Sekunden.
Typische Symptome sind technischer Natur: zu schwere Bilder, blockierende Skripte, verzögerte Server. Genauso häufig sind inhaltliche Schwächen. Menüs, die nach Abteilungen statt nach Nutzerzielen sortiert sind. Texte, die alles auf einmal sagen wollen. Calls-to-Action, die irgendwo am Seitenende stehen.
Welche Warnzeichen liefert die Analyse?
- Hohe Absprungrate: Sitzungen, die weit über dem Branchenmedian abbrechen, deuten auf unklare Inhalte oder mangelnde Relevanz hin und sollten zuerst untersucht werden.
- Kurze Verweildauer: Wenn zentrale Service-Seiten in unter 20 Sekunden verlassen werden, liefern Einstieg, Versprechen oder Lesefluss noch keine Antwort auf die Suchabsicht.
- Formular-Abbrüche: Hohe Abbruchquoten in Kontakt- oder Anfrage-Formularen zeigen, dass Reibung, Pflichtfelder oder Vertrauenslücken zwischen Interesse und Anfrage stehen.
- Wiederkehrende Support-Anfragen: Wenn das Support-Postfach immer dieselben Standardfragen empfängt, fehlt diese Information sichtbar genug auf der entsprechenden Seite.
Jedes dieser Muster ist für sich genommen schon ein Hinweis, in Kombination ist es eine klare Aufforderung zum Eingreifen. Die gute Nachricht: alle vier Signale lassen sich in unter einer Stunde aus Analytics und Support-Postfach ablesen.
Wie verbessern Sie die Ladezeit Ihrer Website?
Geschwindigkeit ist der härteste UX-Hebel. Google empfiehlt im Largest-Contentful-Paint-Leitfaden einen LCP-Wert unter 2,5 Sekunden, und Google dokumentiert 53 Prozent Abbruch bei mobilen Seiten über drei Sekunden Ladezeit. Tempo ist also direkt mit Conversion verknüpft, nicht nur mit dem Ranking.
Die Ursachen liegen fast immer im Bilderpaket, in zu vielen Drittskripten und in einem schwachen Hosting. Drei Maßnahmen wirken zuerst:
Bilder und Medien zähmen
Komprimieren Sie alle Hero-Bilder auf moderne Formate wie WebP oder AVIF. Aktivieren Sie Lazy Loading für alles, was außerhalb des ersten Sichtbereichs liegt. Liefern Sie Bildgrößen responsiv aus, also passend zum Endgerät. Eine schwere Startseite mit 8 MB Bildlast wird so leicht auf unter 1 MB reduziert.
Skripte sortieren
Jedes Tracking-Pixel kostet Zeit. Trennen Sie kritische Skripte vom Rest, laden Sie Analytics asynchron und entfernen Sie ungenutzte Plugins. Wer noch jQuery für ein modernes Frontend lädt, zahlt drauf.
Server, Caching, CDN
Ein modernes Hosting mit Edge-Caching liefert HTML in Millisekunden. Statische Inhalte über ein Content Delivery Network auszuspielen, ist die schnellste Variante, die Core Web Vitals deutlich zu verbessern. Achten Sie zusätzlich auf HTTP/2 oder HTTP/3, korrekte Cache-Header und ein Hosting mit Servern in Europa, wenn Ihre Zielgruppe in der DACH-Region sitzt. Die geographische Nähe zum Server reduziert Latenz spürbar, ohne dass der erste Sichtinhalt darunter leidet.
Wo lohnt sich Performance-Budgetierung?
Ein einfacher Performance-Budget-Ansatz hilft, das Tempo dauerhaft zu halten. Definieren Sie ein Maximum für die Gesamtseitengröße (etwa 1,5 MB für die Startseite) und ein Maximum für die Anzahl der Anfragen (etwa 50). Jede neue Komponente, jedes Tracking-Pixel, jedes Plug-in muss im Budget bleiben oder einen alten Posten verdrängen. So bleibt eine Seite über Jahre schnell, auch wenn das Marketing-Team neue Funktionen wünscht.
Wie schaffen Sie eine klare Struktur und Nutzerführung?
Eine Website braucht zwei Architekturen: eine für Menschen, eine für Suchmaschinen. Beide profitieren von derselben Logik. Wer in 50 Millisekunden urteilt, urteilt zuerst über Klarheit. Eine flache Hierarchie mit drei bis fünf Hauptpunkten reicht für die meisten KMU-Websites völlig aus.
Die Hauptnavigation sollte aus Nutzerziel-Begriffen bestehen, nicht aus internen Bereichsnamen. Statt "Lösungen" lieber "Webdesign". Statt "Über uns" lieber "Das Team". Ergänzend helfen Breadcrumbs, eine semantische Heading-Struktur und eine saubere interne Verlinkung zwischen Themenseiten.
Welche Elemente gehören in jede Seitenstruktur?
- Sichtbare Hauptnavigation: maximal sieben Hauptpunkte, formuliert in Nutzerziel-Begriffen statt in internen Abteilungsnamen.
- Breadcrumbs auf jeder Unterseite: zeigen den aktuellen Standort, ermöglichen schnelles Springen zwischen Ebenen und verbessern auch das Verständnis der Suchmaschine.
- Konsistentes Layout-Raster: dieselben Abstände, Schriften und Komponenten über alle Vorlagen hinweg, damit Anwender nicht jede Seite neu lernen müssen.
- XML-Sitemap im Footer und für Suchmaschinen: sorgt dafür, dass auch tief liegende Seiten zuverlässig indexiert werden.
- Interne Verlinkung zwischen verwandten Themen: etwa zu unseren Beiträgen über den ersten Eindruck einer Website und über klare Klick-Trigger.
Diese fünf Elemente bilden das Skelett einer übersichtlichen Website. Wer sie konsequent anwendet, baut nicht nur eine bessere Nutzerführung, sondern auch eine SEO-freundliche Hierarchie, die spätere Erweiterungen leicht macht.
Aus 21 Jahren Webentwicklung lerne ich immer wieder: Die meisten Strukturprobleme entstehen nicht im Konzept, sondern im Wildwuchs. Eine Seite kommt hinzu, dann eine Kategorie, dann eine Landingpage. Nach drei Jahren passt nichts mehr zusammen. Hier hilft eine jährliche IA-Inventur weit mehr als ein Relaunch.
Was macht eine barrierefreie Website aus?
Barrierefreiheit ist seit dem 28. Juni 2025 für viele private Anbieter Pflicht. Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet Wirtschaftsakteure zur barrierefreien Gestaltung bestimmter Produkte und Dienstleistungen. Wer B2C-Angebote online verkauft oder eine Online-Bestellfunktion betreibt, fällt sehr wahrscheinlich darunter.
Technische Grundlage sind die WCAG 2.1 auf Level AA. Konkret heißt das: Fließtext braucht ein Kontrastverhältnis von mindestens 4,5:1, Bilder brauchen aussagekräftige Alternativtexte, alle interaktiven Elemente müssen per Tastatur erreichbar sein. Videos benötigen Untertitel, Formulare brauchen verknüpfte Labels.
Welche Vorteile bringt Barrierefreiheit über die Pflicht hinaus?
Sie erschließt zusätzliche Zielgruppen, etwa ältere Personen und Menschen mit temporären Einschränkungen. Sie verbessert SEO durch sauberen, semantischen Code. Und sie reduziert Support-Aufwand, weil mehr Anwender die Seite ohne Hilfe bedienen können. Mehr zum Thema lesen Sie auch in unserem Beitrag über Trust-Elemente, die Vertrauenssignale auf einer barrierefreien Website tragen.
Wie messen Sie UX mit Analytics zuverlässig?
Datenbasiertes UX-Design beginnt mit klar definierten Ereignissen. In Google Analytics 4 wird eine Sitzung erst dann als 'engaged' gezählt, wenn sie länger als zehn Sekunden dauert, mindestens ein Conversion-Ereignis enthält oder mindestens zwei Seitenaufrufe umfasst. Diese Schwelle ersetzt die alte Absprungrate und ist deutlich aussagekräftiger.
Konzentrieren Sie sich auf wenige, harte Kennzahlen. Engagement-Rate pro Landingpage. Conversion-Rate pro Funnel-Schritt. Scrolltiefe auf Service-Seiten. Klickrate auf den primären CTA. Wer alles misst, sieht am Ende nichts.
Wie identifizieren Sie konkrete Schwachstellen?
Zwei Wege haben sich in der Praxis bewährt. Erstens: Pfadanalysen, die zeigen, wo Anwender aussteigen. Zweitens: qualitative Sessions mit Tools wie Microsoft Clarity oder Hotjar, die echte Bewegungen aufzeichnen. Eine Heatmap auf der Startseite verrät innerhalb von 200 Sitzungen mehr als jede Hypothese.
A/B-Tests sind das nächste Mittel, aber nur, wenn genug Traffic vorhanden ist. Für die meisten B2B-Websites ist eine sequenzielle Vorher-nachher-Messung über vier Wochen realistischer als ein klassischer Split-Test.
Welche Daten lügen am häufigsten?
Drei Kennzahlen werden regelmäßig falsch interpretiert. Die Engagement-Rate wirkt hoch, weil sie auch reine Lese-Sitzungen einschließt. Eine Conversion-Rate über dem Branchenschnitt sagt nichts, wenn der Funnel zu eng gefasst ist. Und die durchschnittliche Sitzungsdauer mischt sehr kurze und sehr lange Sitzungen zu einem Mittelwert, der für niemanden gilt. Hilfreicher sind Mediane, Pfadanalysen und segmentierte Reports nach Endgerät, Quelle und Landingpage.
Welcher UX-Prozess funktioniert im Mittelstand?
Im B2B-Mittelstand fehlt selten der Wille zur Verbesserung. Es fehlen Zeit, Daten und ein klarer Rhythmus. Wer UX nicht als Einzelprojekt, sondern als laufenden Prozess versteht, kommt deutlich schneller voran. Ein praktikabler Vier-Schritte-Rhythmus hat sich bewährt: messen, priorisieren, umsetzen, nachmessen.
Im ersten Schritt sammeln Sie quantitative Daten aus Analytics und Search Console, dazu zwei bis drei qualitative Sessions aus Clarity oder Hotjar. Im zweiten Schritt priorisieren Sie nach Impact und Aufwand. Eine simple Vier-Felder-Matrix reicht. Schritt drei besteht aus konkreten Eingriffen mit definiertem Erfolgskriterium. Schritt vier ist die Nachmessung nach vier bis sechs Wochen.
Worauf achten Sie bei der Priorisierung?
Beginnen Sie mit Hebeln, die mehrere Effekte zugleich erzeugen. Eine verbesserte Bildkomprimierung beschleunigt die Seite, senkt Mobilfunkkosten für Anwender und verbessert die Core Web Vitals. Eine schärfere Hauptnavigation reduziert Absprünge, verbessert SEO und entlastet den Support. Solche Mehrfach-Hebel sind selten teuer, wirken aber lange.
Aus dem Evelan-Alltag
Ein norddeutsches B2B-Unternehmen aus dem Mittelstand, das wir bei der Modernisierung seines Kundenportals begleitet haben, hatte ein wiederkehrendes Problem: Die alte Portalnavigation zwang Anwender durch tief verschachtelte Menüs, mobil war das Portal kaum bedienbar, und im Support liefen jede Woche dieselben Fragen zu Bestellstatus und Lieferdokumenten auf.
Wir haben die Informationsarchitektur entlang der echten Anwender-Aufgaben neu gebaut, eine flache Hauptnavigation eingeführt, die wichtigsten Aktionen direkt im ersten Sichtbereich platziert und das gesamte Portal mobil-first ausgerichtet. Das Ergebnis: Anwender finden Bestellungen und Lieferpapiere ohne Umwege, der Support wird spürbar entlastet, und die Stammkunden bewegen sich seither selbständig durch ihre Standardprozesse. Kein Relaunch, sondern eine konsequente UX-Schärfung.
Wie optimieren Sie Ihre CTAs?
Calls-to-Action sind die Punkte, an denen UX in Geschäft umschlägt. Die Nielsen Norman Group dokumentiert, dass Anwender 57 Prozent ihrer Lesezeit im ersten Sichtbereich (ohne Scrollen) verbringen. Der primäre CTA gehört also genau dorthin, kombiniert mit einer klaren Nutzenaussage und einer realistischen Mikrofrage.
Effektive CTAs erfüllen vier Bedingungen: hoher Kontrast zum Umfeld, handlungsstarke Sprache ("Erstgespräch sichern" statt "Mehr erfahren"), ein einzelnes klares Ziel pro Seite und eine sichtbare Position. Sekundäre CTAs sind in Ordnung, aber niemals gleichwertig gestaltet.
Wichtig im B2B-Mittelstand: viele Entscheider recherchieren lieber selbständig, bevor sie überhaupt mit dem Vertrieb sprechen. Gartner berichtet, dass 75 Prozent der B2B-Käufer eine Kaufreise ohne Vertriebskontakt bevorzugen. Ein guter CTA antwortet auf diese Haltung mit präziser Information statt mit einem Pop-up, das zur Eile zwingt.
Was sagt die Form-Forschung dazu?
Laut Baymard Institute brechen 18 Prozent der US-Online-Käufer den Checkout ab, weil der Prozess zu lang oder zu kompliziert ist. Übertragen auf B2B-Anfrageformulare bedeutet das: jedes Pflichtfeld zählt. Drei bis vier Felder reichen für eine Erstanfrage. Mehr macht den Funnel kaputt. Weitere praktische Trigger finden Sie in unserem Beitrag über 10 Klick-Trigger im Webdesign.
Tipps zur CTA-Optimierung
- Testen Sie verschiedene Texte, Farben und Positionen.
- Vermeiden Sie zu viele CTAs auf einer Seite, um Nutzer nicht zu überfordern.
- Nutzen Sie Dringlichkeit oder Exklusivität („Nur noch heute verfügbar“).
- Verknüpfen Sie CTAs mit klaren Nutzenversprechen.
Wann lohnt sich Storytelling auf Service-Seiten?
Storytelling wirkt dort, wo Erklärungsbedarf hoch und Vertrauensaufbau wichtig ist. Auf einer reinen Preisliste stört eine Geschichte. Auf einer Service-Landingpage rettet sie die Conversion. Die Mischung entscheidet: kurze konkrete Beispiele, sichtbare Referenzen, ein nachvollziehbarer Ablauf.
Drei Bausteine funktionieren besonders gut. Erstens: eine Mini-Fallstudie mit konkreter Ausgangslage, gewählter Maßnahme und messbarem Ergebnis. Zweitens: Originalzitate aus echten Kundenprojekten, idealerweise mit Foto, Vorname und Funktion. Drittens: ein realistischer Prozess in vier bis sechs Schritten, der zeigt, was Anwender konkret erwartet, wenn sie eine Anfrage stellen.
Visuelle Anker stützen Texte. Ein einfaches Vorher-nachher-Bild kann eine Argumentation kompakter erzählen als drei Absätze. Wer eigene Aufnahmen vom Team, vom Büro oder von einer Anlieferung zeigt, baut Distanz ab. Stockfotografie wirkt im B2B-Mittelstand inzwischen eher misstrauenerregend als professionell. Eine Sammlung von Vertrauenssignalen, die das ergänzen, finden Sie in unserem Beitrag zu Trust-Elementen für seriöse Websites.
Welche Fehler kosten am meisten Conversion?
Drei Muster tauchen in fast jedem UX-Audit auf, das wir in Hamburg und im DACH-Mittelstand durchführen. Erstens: ein unklarer primärer CTA, der entweder fehlt oder mit anderen Buttons konkurriert. Zweitens: eine überladene Hero-Sektion ohne ein einziges Versprechen, das hängen bleibt. Drittens: Formulare mit zu vielen Pflichtfeldern.
Hinzu kommen mobile Defizite. Zu kleine Tap-Targets, schlecht skalierende Schriften, klebende Banner, die den Inhalt verdecken. Ein einfacher Test: Bedienen Sie Ihre eigene Seite eine Woche lang ausschließlich vom Smartphone. Was Sie nervt, nervt Ihre Anwender doppelt.
Wie reagieren Anwender auf typische UX-Reibung?
Reibung wird selten direkt kommuniziert. Anwender klagen meistens nicht, sie gehen einfach. Bevor sie gehen, hinterlassen sie aber deutliche Spuren: ein abgebrochenes Formular, ein Tab, der nach acht Sekunden geschlossen wird, eine Anfrage, die per Telefon statt per Mail kommt, oder eine wütende Bewertung außerhalb der eigenen Seite. Wer diese Spuren liest, hat den UX-Audit eigentlich schon zur Hälfte gemacht. Der Rest ist Disziplin in der Umsetzung.
Eine kleine Routine hilft. Sammeln Sie alle E-Mails der letzten drei Monate, in denen Interessenten Standardfragen stellen, die auf der Seite stehen sollten. Jedes wiederkehrende Thema ist eine Aufforderung, die entsprechende Stelle der Website zu schärfen. So wird Support zur ehrlichsten UX-Quelle, die ein Unternehmen hat.
Häufig gestellte Fragen
UX-Design plant das gesamte Erlebnis: Struktur, Inhalte, Flows, Performance. UI-Design gestaltet die sichtbare Oberfläche: Farben, Typografie, Komponenten. UX entscheidet, ob Anwender ihr Ziel erreichen. UI entscheidet, wie angenehm der Weg dahin aussieht. Beide gehören zusammen, lassen sich aber methodisch trennen.
Verwandte Evelan-Artikel
- Erster Eindruck Website: Was in 50 Millisekunden entscheidet
- Core Web Vitals optimieren: Leitfaden zu LCP, INP, CLS
- 3 Anzeichen, dass Ihre Website heimlich Kunden vergrault
- Webdesign und Entscheidungen: 10 Trigger für mehr Klicks
Quellen
- Google AdSense Help: How site speed influences advertising performance (2024)
- Google web.dev: Largest Contentful Paint (LCP) (2024)
- Bundesfachstelle Barrierefreiheit: Barrierefreiheitsstärkungsgesetz BFSG (2025)
- W3C WAI: WCAG 2.1 Understanding Contrast (Minimum) (2018)
- Taylor and Francis: Lindgaard et al. Attention web designers 50 milliseconds (2006)
- Nielsen Norman Group: Scrolling and Attention (2018)
- Baymard Institute: Cart Abandonment Rate Statistics (2024)
- Google Analytics Help: Engaged sessions in GA4 (2023)
- Gartner: The B2B Buying Journey (2023)
