UX/UI Design für Websites: was 2026 wirklich zählt

Warum das schönste Redesign oft nichts bringt

Ein typisches Redesign beginnt mit einer Sammlung von Referenzseiten und endet mit einer Seite, die aussieht wie die Referenzen. Das Ergebnis wird intern gefeiert, und in den Zahlen passiert nichts. Das ist kein Zufall, sondern die logische Folge daraus, dass niemand vorher festgelegt hat, welche Entscheidung ein Besucher auf dieser Seite treffen soll.

Design im Sinne von UX ist nicht die Frage, wie etwas aussieht, sondern wie viele Hindernisse zwischen einer Absicht und ihrer Umsetzung liegen. Jede zusätzliche Entscheidung, jedes Feld, jeder Klick ist ein Hindernis. Wer nur die Oberfläche tauscht, lässt alle Hindernisse an Ort und Stelle und streicht sie neu an.

Der brauchbarste Test vor jedem Redesign dauert eine Minute: Nennen Sie in einem Satz, was ein Besucher auf dieser Seite tun soll. Wenn dabei drei Dinge herauskommen, ist das Problem nicht das Design.

Der wichtigste Teil des Designs ist die Ladezeit

Es gibt keine gute Gestaltung, die niemand sieht. Ein Aufbau, der auf dem Mobilfunknetz vier Sekunden braucht, verliert einen erheblichen Teil der Besucher, bevor das erste Element sichtbar ist. Diese Leute tauchen in keiner Absprungrate sinnvoll auf, weil sie nie richtig angekommen sind.

Die größten Bremsen sind fast immer dieselben: unkomprimierte Bilder im Originalformat, ein Schriftpaket mit sechs Schnitten, eingebettete Videos, die sofort laden, und eine Handvoll Skripte für Dinge, die kaum jemand nutzt. Das lässt sich messen und abstellen, bevor irgendjemand über Farben spricht.

Gemessen wird das seit einigen Jahren mit den Core Web Vitals von Google. Es sind drei Werte, und jeder davon ist eine Designentscheidung, auch wenn er technisch klingt. Maßgeblich ist, was 75 Prozent der echten Seitenaufrufe erreichen, getrennt nach Handy und Desktop, nicht der eine schnelle Test im Büro-WLAN.

Als Orientierung für den Alltag genügt: Der erste sichtbare Aufbau steht unter zwei Sekunden auf einer normalen mobilen Verbindung, nicht im WLAN am Schreibtisch. Wer nur am Schreibtisch testet, testet die Bedingungen, unter denen die Seite nie kritisch ist.

PageSpeed Insights zeigt oben die Werte echter Nutzer, sofern Ihre Seite genug Besucher hat, und darunter einen Labortest. Entscheidend sind die echten Werte. Der Labortest hilft beim Finden der Ursache.

Visuelle Hierarchie: eine Seite, ein nächster Schritt

Die verbreitetste Schwäche auf Unternehmensseiten ist nicht ein hässlicher Button, sondern zu viele gleichwertige Angebote nebeneinander. Termin buchen, Newsletter, Broschüre herunterladen, Rückruf anfordern, alles gleich groß und gleich laut. Für den Besucher ist das keine Auswahl, sondern eine Aufgabe.

Sinnvoll ist ein Hauptweg, der auf der ganzen Seite gleich aussieht und gleich heißt, plus höchstens einen ruhigeren Nebenweg für die, die noch nicht so weit sind. Alles Weitere gehört in die Fußzeile, nicht in den Hauptbereich.

Dieselbe Regel gilt für die Benennung. Wenn der Button oben Beratung anfragt, in der Mitte Kontakt aufnimmt und unten Erstgespräch heißt, sind das für den Leser drei verschiedene Angebote, auch wenn dahinter dasselbe Formular liegt.

Visuelle Hierarchie heißt, dass das Auge ohne Nachdenken in der richtigen Reihenfolge wandert. Dafür reichen wenige Mittel, konsequent eingesetzt:

• Eine Überschrift, die das Ergebnis nennt: für wen, was, mit welchem Nutzen. Kein Slogan, den man erst deuten muss.
• Eine Akzentfarbe, die nur für den Hauptweg reserviert ist. Wenn Links, Symbole und Hinweise dieselbe Farbe tragen, verliert der Button seine Signalwirkung.
• Weißraum statt Rahmen: Abstand gruppiert Inhalte ruhiger als Linien, Kästen und Schatten.
• Wenige Schriftgrößen: drei bis vier Stufen reichen für fast jede Seite. Mehr Stufen erzeugen Unruhe, keine Ordnung.
• Kein automatischer Slider im Kopfbereich. Er versteckt vier von fünf Botschaften und kostet Ladezeit.

Lesbarkeit ist kein Detail

Sehr viele Seiten scheitern an Kleinigkeiten, die nichts kosten. Fließtext unter 16 Pixel auf dem Smartphone, Zeilen, die über die gesamte Bildschirmbreite laufen, hellgraue Schrift auf weißem Grund, weil das in der Vorlage elegant aussah. Jede dieser Entscheidungen kostet Leser, und keine davon fällt jemandem auf, der den Text ohnehin kennt.

Brauchbare Richtwerte: Fließtext ab 17 Pixel, Zeilenlänge zwischen 60 und 80 Zeichen, Zeilenabstand um das Anderthalbfache, und ein Kontrast, der auch bei Sonnenlicht auf dem Handy trägt. Die Barrierefreiheitsrichtlinien WCAG verlangen für normalen Text mindestens ein Kontrastverhältnis von 4,5 zu 1, für große Schrift 3 zu 1. Das sind keine Geschmacksfragen, das sind Bedingungen dafür, dass der Text überhaupt gelesen wird.

Der Test dafür kostet nichts: Öffnen Sie Ihre eigene Seite draußen auf dem Handy, mit der Helligkeit auf mittlerer Stufe. Was Sie dort nicht mühelos lesen können, liest auch sonst niemand.

Mobil zuerst, und zwar wirklich

Mobil zuerst ist seit Jahren ein Schlagwort und in der Praxis selten die Wahrheit. Entworfen wird am großen Bildschirm, geprüft wird am großen Bildschirm, und die mobile Fassung entsteht am Ende als Anpassung. Das merkt man ihr an.

Sichtbar wird das an denselben Stellen: Tabellen, die seitlich aus dem Bild laufen, Buttons zu dicht nebeneinander, ein Menü, das drei Ebenen tief geht, und Bildunterschriften, die auf dem Handy länger sind als der Abschnitt darüber. Nichts davon ist schwer zu beheben, es fällt nur nie auf, wenn man nicht hinschaut.

Konkret heißt mobil zuerst vor allem, für den Daumen zu gestalten. Die meisten Menschen bedienen das Handy mit einer Hand, und die obere Ecke gegenüber dem Daumen ist am schwersten zu erreichen. Was oft gebraucht wird, gehört deshalb in die untere Bildschirmhälfte oder in die Mitte, nicht in die obere Ecke.

• Tippflächen: WCAG 2.2 verlangt im Kriterium 2.5.8 mindestens 24 mal 24 CSS-Pixel oder genug Abstand zu benachbarten Zielen. Das ist die Untergrenze. Für Hauptbuttons planen wir aus Erfahrung eher 44 bis 48 Pixel Höhe ein.
• Schriftgrößen: Fließtext ab 16, besser 17 Pixel. Eingabefelder mit mindestens 16 Pixel, sonst zoomt Safari auf dem iPhone beim Antippen ins Formular hinein.
• Navigation: höchstens eine Ebene im mobilen Menü, der Hauptbutton bleibt außerhalb des Menüs sichtbar.
• Tabellen und Vergleiche: auf dem Handy als gestapelte Karten oder horizontal scrollbar mit sichtbarem Hinweis, nie abgeschnitten.
• Telefonnummer und E-Mail als Link, damit ein Tippen genügt.

Bei uns ist die Reihenfolge umgedreht. Der erste Entwurf entsteht in Handybreite, und erst wenn er dort trägt, wird er für den großen Bildschirm geöffnet. Das klingt nach einer Formalie und ändert das Ergebnis mehr als jede Farbentscheidung.

Barrierefreiheit: Designqualität und, für manche, Pflicht

Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG), die deutsche Umsetzung des European Accessibility Act. Es verpflichtet Anbieter bestimmter Dienstleistungen, die für Verbraucher erbracht werden, diese barrierefrei zu gestalten. Für Websites relevant sind vor allem die Dienstleistungen im elektronischen Geschäftsverkehr, also Angebote, über die Verbraucher online einen Vertrag schließen: Shops, Buchungen, Abonnements.

Ehrlich gesagt: Viele reine B2B-Websites fallen nicht darunter. Das Gesetz knüpft an Leistungen für Verbraucher an, und eine Informationsseite mit Kontaktformular, über die kein Vertrag mit Privatpersonen zustande kommt, ist nach verbreiteter Auslegung kein Fall des BFSG. Dazu kommt eine ausdrückliche Ausnahme für Kleinstunternehmen, die Dienstleistungen erbringen: weniger als zehn Beschäftigte und höchstens zwei Millionen Euro Jahresumsatz oder Bilanzsumme. Ob Sie im Einzelfall darunterfallen, ist eine Rechtsfrage und keine Designfrage. Sie gehört einmal zu einem Anwalt und nicht in eine Agenturbroschüre.

Unabhängig von der Pflicht lohnt sich der größte Teil ohnehin, weil er mit guter Gestaltung deckungsgleich ist. Barrierefreiheit ist keine Zusatzfunktion, sondern ein Qualitätsmaß dafür, ob eine Seite unter schlechten Bedingungen funktioniert: mit müden Augen, im Zug, mit einer Hand, mit einer Lesebrille, die gerade woanders liegt.

• Kontrast von mindestens 4,5 zu 1 für Fließtext
• Bedienbarkeit per Tastatur mit sichtbarem Fokus
• Beschriftete Formularfelder statt reiner Platzhaltertexte
• Alternativtexte an Bildern, die etwas aussagen
• Eine saubere Überschriftenstruktur, die auch Screenreader und Suchmaschinen verstehen

Formulare und Terminbuchung

Am Formular endet die meiste Arbeit, die in eine Seite geflossen ist. Wer bis hierher gelesen hat, ist interessiert, und trotzdem brechen viele genau an dieser Stelle ab. Meist liegt es nicht an fehlender Motivation, sondern an Feldern, die mehr verlangen, als der Besucher in diesem Moment geben will.

• So wenige Felder wie möglich: Name, E-Mail, ein freies Feld. Alles, was Sie im Gespräch erfragen können, gehört nicht ins Formular.
• Pflichtfelder klar markieren und Fehler direkt am Feld erklären, nicht erst nach dem Absenden oben auf der Seite.
• Den Button nach dem Ergebnis benennen: Termin anfragen statt Absenden.
• Sagen, was danach passiert: wer sich meldet, wann, und wie lange das Gespräch dauert.

Für B2B-Anbieter, deren nächster Schritt ein Gespräch ist, ersetzt ein eingebetteter Kalender oft das Formular ganz. Der Besucher sieht freie Zeiten, wählt einen Termin und ist fertig, ohne auf eine Antwort zu warten. Wichtig ist, dass der Kalender auf der eigenen Seite lädt und nicht auf eine fremde Seite umleitet, dass er auf dem Handy bedienbar ist und dass er nicht zwanzig Zusatzfragen stellt. Zwei bis drei kurze Fragen zur Vorqualifizierung reichen.

Kalender-Widgets bringen oft viel Skript mit. Laden Sie sie erst, wenn der Besucher in die Nähe des Abschnitts scrollt oder auf den Button tippt, sonst bezahlen Sie die Buchungsfunktion mit einer schlechteren Ladezeit für alle.

Vertrauen im B2B: konkret statt glänzend

Im B2B kauft niemand auf den ersten Klick. Die Seite muss vor allem eine Frage beantworten: Kann ich diesen Leuten ein Gespräch, ein Budget und meinen Namen im Unternehmen anvertrauen? Hochglanz hilft dabei wenig. Was hilft, ist Überprüfbares.

• Echte Gesichter: Fotos der Menschen, mit denen man tatsächlich spricht, statt Stockbildern von Händeschütteln.
• Referenzen mit Namen: Kundenlogos, Zitate mit Person und Firma, Fallbeispiele mit Ausgangslage und Ergebnis. Anonyme Lobeszeilen wirken eher gegenteilig.
• Konkrete Zahlen statt Adjektive: Jahre am Markt, Anzahl Projekte, gebuchte Termine. Nur was stimmt und was Sie belegen können.
• Preise oder zumindest ein Preisrahmen, wo es möglich ist. Wer nichts nennt, wird oft für teurer gehalten, als er ist.
• Ein vollständiges Impressum und eine erreichbare Adresse. In Deutschland ist das Impressum ohnehin Pflicht, und B2B-Einkäufer schauen dort tatsächlich nach.

Vertrauenselemente wirken am stärksten in der Nähe des Hauptbuttons, nicht gesammelt auf einer eigenen Referenzseite, die kaum jemand öffnet.

Wo Design aufhört und Angebot anfängt

Eine gut gebaute Seite kann ein unklares Angebot nicht retten. Wenn nach dreißig Sekunden nicht klar ist, für wen das gedacht ist und was es kostet, hilft kein Layout. Der häufigste Grund für schwache Zahlen ist nicht die Gestaltung, sondern ein Text, der über die Firma spricht statt über das Problem des Lesers.

Wie sich das in Zahlen niederschlägt und woran man erkennt, ob das Problem vor oder auf der Seite liegt, haben wir hier aufgeschrieben: Conversion Rate, warum mehr Besucher selten die Antwort sind.

Und wenn die Seite steht, entscheidet die Auffindbarkeit über den Rest. Was sich daran durch KI-Suche gerade verschiebt, steht in SEO mit KI.

Checkliste vor dem Redesign

Bevor jemand ein neues Layout entwirft, sollten diese Punkte beantwortet sein. Die Reihenfolge ist Absicht: Die ersten Punkte kosten fast nichts und klären oft schon, ob ein Redesign überhaupt nötig ist.

1. Den einen nächsten Schritt pro Seite in einem Satz festlegen.
2. Die aktuellen Core Web Vitals mit echten Nutzerdaten prüfen, getrennt nach Handy und Desktop.
3. In der Webanalyse nachsehen, wo Besucher einsteigen und wo sie abbrechen.
4. Die Seite auf dem eigenen Handy draußen durchklicken, bis zum abgeschickten Formular oder gebuchten Termin.
5. Kontraste, Schriftgrößen und Tippflächen gegen die Richtwerte oben halten.
6. Das Angebot prüfen: Versteht ein Fremder in dreißig Sekunden, für wen es ist und was es kostet?
7. Vertrauenselemente sammeln, die belegbar sind, und neben den Hauptbutton stellen.
8. Klären, ob das BFSG für Ihr Angebot gilt, bevor die neue Seite gebaut wird, nicht danach.
9. Messpunkte festlegen, an denen Sie den Erfolg nach dem Relaunch ablesen: Anfragen, Termine, Ladezeit.

Wann ein Redesign nicht die Antwort ist

Ein kompletter Neubau ist teuer, dauert Monate und setzt oft Dinge zurück, die funktioniert haben, zum Beispiel gewachsene Suchmaschinen-Rankings. In vielen Fällen bringt gezieltes Optimieren mehr als ein neues Gesicht.

• Wenn zu wenige Besucher kommen: Dann ist das Problem die Reichweite, nicht die Seite. Ein Redesign ändert daran nichts.
• Wenn das Angebot unklar ist: Dann hilft neuer Text mehr als neues Layout.
• Wenn nur die Ladezeit schlecht ist: Bilder, Schriften und Skripte lassen sich meist ohne Neubau in Ordnung bringen.
• Wenn einzelne Seiten schwach sind: Dann werden diese Seiten überarbeitet, nicht die ganze Website.

Ein Neubau ist dagegen sinnvoll, wenn das System dahinter jede Änderung zur Qual macht, wenn die Seite auf dem Handy grundsätzlich nicht funktioniert oder wenn sich das Angebot so verändert hat, dass die alte Struktur nicht mehr passt.

Wie wir Seiten bauen

Wir fangen mit dem nächsten Schritt an und bauen die Seite rückwärts darauf zu. Erst wenn feststeht, was passieren soll, entstehen Struktur, Text und Gestaltung, in dieser Reihenfolge. Bilder werden komprimiert ausgeliefert, Schriften auf das Nötige reduziert, und alles, was nicht sofort gebraucht wird, lädt später.

Unser Blick auf Websites kommt dabei aus dem Vertrieb: Seit 2023 haben wir für Kunden mehr als 2.000 Termine gebucht, und bei jedem davon landet der Interessent früher oder später auf einer Website. Wie das im Detail aussieht, steht auf unserer Seite zu Websites. Wenn Sie eine bestehende Seite haben und wissen wollen, woran sie hakt, schauen wir im Erstgespräch gemeinsam drauf.

Häufige Fragen

Quellen

1. web.dev (Google): Web Vitals und Grenzwerte
2. web.dev (Google): Interaction to Next Paint (INP)
3. W3C: WCAG 2.2, Erfolgskriterium 2.5.8 Zielgröße (Minimum)
4. W3C: WCAG 2.2, Erfolgskriterium 1.4.3 Kontrast (Minimum)
5. Barrierefreiheitsstärkungsgesetz (BFSG), Gesetzestext
6. Richtlinie (EU) 2019/882, European Accessibility Act