Benutzerfreundliches Webdesign: So findest und behebst du die Hürden auf deiner Website

Kurz gesagt: Benutzerfreundlich ist eine Website, wenn Besucher in kurzer Zeit finden, was sie suchen, verstehen, was du anbietest, und ohne Umweg anfragen oder kaufen können. Ob das gelingt, siehst du nicht am Bildschirm deines Designers, sondern wenn fremde Menschen deine Seite benutzen. Fünf Testpersonen decken schon den größten Teil der Probleme auf. Behebe zuerst, was die wichtigste Aufgabe blockiert: Kontakt, Anfrage, Kauf. Danach kommen Ladezeit, Lesbarkeit und Barrierefreiheit.

Deine Website sieht ordentlich aus, aber die Anfragen bleiben aus? Oft liegt es an Kleinigkeiten, die dir selbst nicht mehr auffallen: eine Telefonnummer, die man auf dem Handy nicht antippen kann, ein Menüpunkt, unter dem niemand die Preise vermutet, ein Formular, das nach der Faxnummer fragt. Du kennst deine Seite zu gut, um über diese Hürden zu stolpern. Deine Besucher stolpern jeden Tag darüber.

Was benutzerfreundliches Webdesign bedeutet

Benutzerfreundlichkeit (englisch Usability) lässt sich auf drei Fragen herunterbrechen:

• Finden: Kommt der Besucher ohne Suchen zu der Information, wegen der er da ist?
• Verstehen: Begreift er in wenigen Sekunden, was du anbietest, für wen und was es ungefähr kostet?
• Erledigen: Kann er den nächsten Schritt gehen, also anrufen, eine Anfrage schicken oder kaufen, ohne an Technik oder Formularen zu scheitern?

User Experience (UX) ist der weitere Begriff. Er umfasst alles, was jemand mit deinem Unternehmen online erlebt, auch Vertrauen und Gefühl. Barrierefreiheit wiederum sorgt dafür, dass auch Menschen mit Seh-, Hör- oder motorischen Einschränkungen deine Seite benutzen können. In der Praxis überschneiden sich die drei stark: Was für einen Screenreader klar gegliedert ist, ist es meist auch für alle anderen.

Als Prüfraster eignen sich die zehn Heuristiken von Jakob Nielsen, etwa „Sichtbarkeit des Systemstatus“ oder „Fehler vermeiden statt melden“ (Nielsen Norman Group, 1994, überprüft 2024). Nielsen hat sie 1994 veröffentlicht, sie werden bis heute genutzt und helfen, Probleme zu benennen statt nur ein ungutes Gefühl zu haben.

So findest du die Hürden auf deiner Website

Meinungen über Design gibt es viele. Belastbar wird es erst, wenn du beobachtest, was Besucher tatsächlich tun. Dafür brauchst du kein Labor.

Der Nutzertest mit fünf Personen

Jakob Nielsen hat gezeigt, dass ein Test mit fünf Teilnehmern rund 85 % der Usability-Probleme einer Seite aufdeckt. Mehr Personen finden vor allem dieselben Fehler noch einmal. Sein Rat: lieber mehrere kleine Testrunden als eine große (Nielsen Norman Group, 2000).

So gehst du vor:

• Aufgabe festlegen: Wähle eine echte Aufgabe, etwa „Finde heraus, ob die Firma in Offenbach arbeitet, und frag einen Termin an.“
• Fünf passende Personen suchen: Menschen, die zu deinen Kunden passen, aber deine Website nicht kennen. Kollegen und Familie sind zweite Wahl.
• Zuschauen, nicht helfen: Die Person arbeitet am eigenen Handy und spricht laut aus, was sie denkt. Du schreibst mit und greifst nicht ein.
• Stolperstellen sammeln: Notiere jede Stelle, an der jemand zögert, zurückgeht oder aufgibt. Was mindestens zwei Personen passiert, hat Vorrang.
• Beheben und wiederholen: Ändere die größten Hürden und teste mit fünf neuen Personen.

Was deine Zahlen verraten

Deine Statistik zeigt, wo Besucher aussteigen, aber nicht warum. Darum ergänzt sie den Nutzertest, ersetzt ihn aber nicht. Achte in Matomo oder Google Analytics vor allem auf:

• Seiten mit vielen Aufrufen und kaum Weiterklicks, etwa eine Leistungsseite ohne sichtbaren nächsten Schritt
• Formulare, die oft aufgerufen und selten abgeschickt werden
• große Unterschiede zwischen Handy und Computer bei denselben Seiten
• Suchbegriffe in der Suche deiner Website, die zeigen, was Besucher im Menü nicht finden

Heatmaps und Sitzungsaufzeichnungen, zum Beispiel mit Microsoft Clarity, machen Klicks und Scrollverhalten sichtbar. Weil sie das Verhalten einzelner Besucher aufzeichnen, gehören sie hinter eine Einwilligung im Cookie-Banner.

Was dir Kunden am Telefon sagen

Die günstigste Quelle wird oft übersehen: Fragen, die Kunden am Telefon oder per Mail stellen, obwohl die Antwort auf der Website steht. Wer dreimal im Monat gefragt wird, ob du auch am Wochenende kommst, hat diese Information an der falschen Stelle.

Die zehn häufigsten Hürden und was dagegen hilft

Diese Probleme finden wir bei der Prüfung von Websites kleiner und mittlerer Unternehmen immer wieder. Die Tabelle ist nach Wirkung auf Anfragen sortiert, die oberen Zeilen zuerst.

Die Werte für Tippziele und Kontrast stammen aus der Barrierefreiheits-Richtlinie WCAG 2.2, die 24 Pixel als Mindestgröße festlegt (W3C, Target Size Minimum) und 4,5:1 als Mindestkontrast für normalen Text (W3C, Contrast Minimum). Google empfiehlt für Touch-Ziele rund 48 Pixel (web.dev, Accessible tap targets).

Wie du eine Navigation mit vielen Unterseiten ordnest, steht in unserem Beitrag zur Navigation komplexer Websites. Formulierung, Farbe und Platzierung von Buttons behandelt der Beitrag CTA optimieren.

Mobil zuerst prüfen

Die meisten Probleme aus der Tabelle zeigen sich zuerst auf dem Handy. Prüfe deine Seite deshalb auf einem echten Smartphone, nicht nur in der verkleinerten Ansicht am Computer:

• Lässt sich jeder Menüpunkt mit dem Daumen treffen?
• Öffnet ein Tipp auf die Telefonnummer direkt die Wähl-App?
• Zeigt das Formular bei der Telefonnummer die Zahlentastatur?
• Musst du irgendwo seitlich wischen, um Text zu lesen?

Googles früherer „Test auf Optimierung für Mobilgeräte“ ist eingestellt, die alte Adresse leitet heute auf die Dokumentation von Lighthouse weiter. Für eine technische Prüfung nimmst du PageSpeed Insights, das Lighthouse für die Mobilansicht ausführt.

Ladezeit: die drei Werte, die Google misst

Eine langsame Seite ist für Besucher die erste Hürde, noch bevor sie Inhalt sehen. Google misst die Nutzererfahrung mit drei Core Web Vitals und nennt diese Grenzen für eine gute Bewertung (web.dev, Web Vitals):

INP hat am 12. März 2024 den älteren Wert FID ersetzt (web.dev, 2024). Wer noch FID-Werte in alten Berichten findet, vergleicht also nicht mehr dasselbe.

Google nutzt die Core Web Vitals für das Ranking, betont aber, dass gute Werte allein keine Spitzenplätze garantieren (Google Search Central, Page Experience). Der größere Hebel ist der Besucher: Wer warten muss, geht. Wie du eine WordPress-Seite Schritt für Schritt beschleunigst, steht in unserem Leitfaden zur WordPress-Pagespeed-Optimierung.

Barrierefreiheit gehört dazu

Barrierefreiheit ist kein Zusatz für wenige, sondern macht eine Seite für alle leichter bedienbar: bei Sonnenlicht auf dem Handydisplay, mit einer Hand im Bus, mit nachlassender Sehkraft. Die wichtigsten Punkte für den Anfang:

• Ausreichender Kontrast, für normalen Text mindestens 4,5:1, für große Schrift mindestens 3:1
• Beschreibende Alternativtexte für Bilder, die Inhalt tragen
• Überschriften in sinnvoller Reihenfolge, damit Screenreader die Seite gliedern können
• Alle Funktionen auch mit der Tastatur erreichbar, mit sichtbarem Fokus
• Farbe nie als einziges Signal, etwa bei Fehlermeldungen im Formular

Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz für viele Online-Angebote an Verbraucher. Ob deine Website darunter fällt und was zu tun ist, klären wir bei barrierefreiem Webdesign. Kontraste prüfst du selbst mit dem kostenlosen WebAIM Contrast Checker.

In welcher Reihenfolge du vorgehst

Nicht jede Hürde ist gleich teuer. Ein Kontrastfehler im Footer kostet weniger Anfragen als ein Formular, das auf dem Handy nicht abschickt. Gehe deshalb so vor:

• Erst die Hauptaufgabe: Alles, was Anruf, Anfrage oder Kauf blockiert, kommt zuerst.
• Dann die meistbesuchten Seiten: Startseite und die zwei, drei wichtigsten Leistungsseiten.
• Dann die Technik: Ladezeit und springendes Layout, gemessen mit PageSpeed Insights.
• Dann Lesbarkeit und Barrierefreiheit: Kontraste, Schriftgrößen, Alternativtexte, Tastaturbedienung.
• Danach erneut testen: fünf neue Personen, dieselbe Aufgabe.

Kleine Änderungen in kurzen Runden bringen mehr als ein großer Umbau nach einem Jahr Planung. Und jede Runde zeigt dir, ob die letzte gewirkt hat.

Ist die Website grundsätzlich veraltet, lohnt sich Flickwerk irgendwann nicht mehr. Dann ist ein Neubau günstiger als zehn Reparaturen. Als Webdesign-Agentur bauen wir Websites für kleine und mittlere Unternehmen, die von Anfang an auf Nutzerführung, Ladezeit und Barrierefreiheit ausgelegt sind. Willst du erst wissen, wo deine Seite heute hakt, zeigt dir unser kostenloser Website-Check die wichtigsten Baustellen.

Häufige Fragen zu benutzerfreundlichem Webdesign

Was ist benutzerfreundliches Webdesign?

Benutzerfreundliches Webdesign sorgt dafür, dass Besucher schnell finden, was sie suchen, verstehen, was du anbietest, und den nächsten Schritt ohne Hürde gehen können. Es geht weniger um Geschmack als um Aufgaben: Kann jemand in kurzer Zeit anrufen, anfragen oder kaufen? Ob das klappt, zeigt ein Test mit echten Besuchern.

Was ist der Unterschied zwischen UX und Usability?

Usability beschreibt, wie leicht sich eine Website bedienen lässt, also ob Besucher ihre Aufgabe schnell und ohne Fehler erledigen. UX (User Experience) ist der weitere Begriff und umfasst das gesamte Erlebnis, auch Vertrauen, Gefühl und den Eindruck vom Unternehmen. Gute Usability ist die Grundlage für eine gute UX.

Wie teste ich die Benutzerfreundlichkeit meiner Website?

Am einfachsten mit einem Nutzertest: Gib fünf Personen, die deine Seite nicht kennen, eine echte Aufgabe und schau ihnen zu, ohne zu helfen. Laut Nielsen Norman Group deckt diese Zahl rund 85 % der Probleme auf. Ergänze das mit deiner Statistik, um zu sehen, auf welchen Seiten Besucher aussteigen.

Wie verbessere ich die Nutzerführung auf meiner Website?

Benenne Menüpunkte mit den Begriffen deiner Kunden, gib jeder Seite ein klares Ziel und beende jede Leistungsseite mit einem sichtbaren nächsten Schritt. Telefonnummer und Kontakt gehören an eine feste, leicht erreichbare Stelle. Prüfe das Ergebnis mit einem Nutzertest, nicht nur am eigenen Bildschirm.

Beeinflusst Benutzerfreundlichkeit das Google-Ranking?

Teilweise. Google nutzt die Core Web Vitals, also Ladezeit, Reaktionszeit und Layoutstabilität, als Ranking-Signal, sagt aber selbst, dass gute Werte allein keine Spitzenplätze garantieren. Wichtiger ist die indirekte Wirkung: Besucher, die sich zurechtfinden, fragen an. Besucher, die scheitern, gehen zur Konkurrenz.

Wie groß müssen Buttons auf dem Handy sein?

Die Barrierefreiheits-Richtlinie WCAG 2.2 verlangt mindestens 24 mal 24 Pixel oder genügend Abstand zu benachbarten Zielen. Google empfiehlt rund 48 Pixel. Plane für Buttons und Menüpunkte lieber die größere Fläche ein, damit niemand daneben tippt.

Muss meine Website barrierefrei sein?

Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz für viele Online-Angebote an Verbraucher, etwa für Onlineshops und Buchungsstrecken. Kleinstunternehmen, die Dienstleistungen anbieten, sind nach § 3 Absatz 3 BFSG ausgenommen. Ob deine Website betroffen ist, hängt vom Angebot ab. Unabhängig davon macht Barrierefreiheit eine Seite für alle Besucher leichter bedienbar.