UI: Die Bausteine deiner Website verstehen und richtig einsetzen

Was UI bedeutet

Das User Interface ist die Schnittstelle zwischen einem Menschen und einem digitalen System. Auf einer Website heißt das ganz praktisch: alles Sichtbare und Bedienbare.

Dazu gehören:

• Bedienelemente — Buttons, Links, Auswahlfelder, Schieberegler
• Eingabeelemente — Formularfelder, Suchfelder, Dateiuploads
• Navigationselemente — Hauptmenü, Fußzeile, Brotkrumenpfade, Filter
• Anzeigeelemente — Überschriften, Fließtext, Bilder, Tabellen, Hinweismeldungen

Neben der grafischen Benutzeroberfläche, die im Web der Normalfall ist, gibt es weitere Formen: sprachgesteuerte Oberflächen wie bei Sprachassistenten oder textbasierte Kommandozeilen. Für deine Website ist die grafische Variante relevant.

UI und UX: der Unterschied in zwei Sätzen

Die beiden Begriffe werden ständig zusammen genannt und regelmäßig verwechselt.

UI ist, wie etwas aussieht und sich bedienen lässt: die Größe des Buttons, die Farbe, die Schrift. UX (User Experience) ist die gesamte Erfahrung: ob jemand am Ende sein Ziel erreicht hat, wie viele Schritte dafür nötig waren, ob der Vorgang frustrierend war.

Ein Beispiel, das den Unterschied greifbar macht: Ein perfekt gestalteter Bestellbutton ist gutes UI. Wenn der Bestellvorgang danach sieben Schritte hat und beim sechsten die Eingaben verloren gehen, ist die UX trotzdem schlecht.

Praktisch für dich: UI lässt sich einzeln verbessern und in kleinen Schritten prüfen. UX erfordert, den ganzen Weg zu betrachten. Dieser Artikel bleibt beim UI, weil dort die schnellen und eindeutigen Verbesserungen liegen.

Die gute Nachricht: vieles ist messbar

Der verbreitetste Irrtum lautet, gutes UI sei Geschmackssache und deshalb ohne Designausbildung nicht machbar.

Ein Teil ist tatsächlich Geschmack — welche Farbwelt zu deiner Marke passt, welche Bildsprache. Ein überraschend großer Teil ist aber schlicht messbar oder überprüfbar: Kontrastverhältnisse lassen sich berechnen, Klickflächen in Pixeln nachmessen, Schriftgrößen vergleichen.

Für diese Werte gibt es einen internationalen Standard: die Web Content Accessibility Guidelines (WCAG), aktuell in Version 2.2. Sie sind ursprünglich für Barrierefreiheit gedacht, funktionieren aber als allgemeine Qualitätsuntergrenze — was für Menschen mit Einschränkungen bedienbar ist, ist für alle anderen erst recht angenehm.

Die folgenden Abschnitte nennen deshalb konkrete Werte statt allgemeiner Empfehlungen.

Buttons

Der Button ist das wichtigste UI-Element, weil an ihm die Handlung hängt, die du dir wünschst.

Größe. Nach WCAG 2.2 (Erfolgskriterium 2.5.8, Stufe AA) muss die Klickfläche eines Bedienelements mindestens 24 × 24 CSS-Pixel groß sein — oder es muss ausreichend Abstand zu benachbarten Zielen bestehen. Das ist die Untergrenze, nicht das Ziel: Die strengere Stufe AAA verlangt 44 × 44 Pixel, und die Plattform-Richtlinien von Apple und Google empfehlen seit Langem 44 beziehungsweise 48 Pixel. Praxisempfehlung: mindestens 44 × 44 Pixel, besonders für alles, was auf dem Smartphone bedient wird.

Wichtig dabei: Es zählt die gesamte klickbare Fläche einschließlich Innenabstand, nicht nur das sichtbare Symbol.

Beschriftung. Schreib auf den Button, was danach passiert. „Termin anfragen" ist besser als „Absenden", „Zum Warenkorb hinzufügen" besser als „OK". Wer weiß, was ihn erwartet, klickt eher.

Erkennbarkeit. Ein Button muss wie ein Button aussehen — durch Fläche, Rahmen oder deutlich abgesetzte Farbe. Reiner Text ohne visuelle Abgrenzung wird häufig übersehen.

Hierarchie. Auf einer Seite sollte es eine erkennbar wichtigste Aktion geben, optisch hervorgehoben. Alles Weitere tritt zurück. Fünf gleich gestaltete Buttons nebeneinander bedeuten für Besucher: keine Entscheidungshilfe.

Zustände. Ein Button sollte sichtbar reagieren, wenn man mit der Maus darüberfährt, ihn anklickt oder per Tastatur ansteuert. Gerade der Tastaturfokus wird oft wegformatiert — dann ist die Seite ohne Maus praktisch unbedienbar.

Text und Schriftgrößen

Fließtext: mindestens 16 Pixel. Das ist die Standardgröße der meisten Browser und ein sinnvoller Ausgangspunkt. Kleiner wird für viele Menschen anstrengend, und der Anteil der Besucher über 50 ist in fast jeder Branche größer als gedacht.

Zeilenlänge: 50 bis 75 Zeichen. Zu lange Zeilen erschweren das Zurückspringen an den Zeilenanfang. Auf breiten Bildschirmen heißt das: Textbereich begrenzen, nicht über die volle Fensterbreite laufen lassen.

Zeilenabstand: etwa das 1,5-Fache der Schriftgröße für Fließtext. Zu eng gesetzte Absätze wirken als geschlossene Fläche und werden seltener gelesen.

Überschriften hierarchisch aufbauen. Eine H1 pro Seite, darunter H2 für die Hauptabschnitte, H3 für Unterpunkte. Das ist nicht nur eine Gestaltungsfrage: Suchmaschinen und Screenreader nutzen diese Struktur zur Orientierung. Überschriften dürfen nicht durch fett formatierten Text ersetzt werden — der sieht nur so aus.

Nicht in Großbuchstaben setzen. Längere Passagen in Versalien sind messbar langsamer zu lesen, weil die Wortumrisse verschwinden.

Farben und Kontraste

Hier liegt der häufigste und zugleich am leichtesten behebbare Fehler: hellgrauer Text auf weißem Grund. Sieht aufgeräumt aus, ist für viele Menschen kaum lesbar.

Die WCAG legen dafür feste Werte fest (Erfolgskriterium 1.4.3, Stufe AA):

Das Kontrastverhältnis kannst du kostenlos prüfen — es gibt zahlreiche Kontrastrechner im Web, in die du beide Farbwerte einträgst. Auch die Entwicklertools moderner Browser zeigen den Wert direkt an, wenn du ein Textelement auswählst.

Zwei weitere Punkte:

Farbe nie als einzigen Träger einer Information nutzen. Ein rot markiertes Pflichtfeld ist für farbfehlsichtige Menschen nicht erkennbar. Ergänze ein Symbol oder Text. Rot-Grün-Sehschwäche betrifft einen erheblichen Teil der männlichen Bevölkerung.

Wenige Farben reichen. Eine Hauptfarbe, eine Akzentfarbe für Aktionen, dazu Abstufungen von Grau. Mehr Farben machen ein Layout selten besser, aber häufig unruhig.

Formulare

Formulare sind die Stelle, an der die meisten Kontakte verloren gehen — und der Bereich mit den größten schnellen Gewinnen.

Jedes Feld weglassen, das nicht zwingend nötig ist. Jedes zusätzliche Feld kostet Abschlüsse. Für eine Kontaktanfrage brauchst du in der Regel Name, E-Mail und Nachricht. Anrede, Telefonnummer und Firmenname kannst du später erfragen.

Beschriftungen über das Feld, nicht hinein. Platzhaltertext im Feld verschwindet beim Tippen — dann weiß niemand mehr, was dort hingehörte. Sichtbare Beschriftungen bleiben stehen.

Pflichtfelder eindeutig kennzeichnen, und zwar nicht nur farblich.

Fehlermeldungen konkret formulieren und am Feld anzeigen. „Bitte gib eine gültige E-Mail-Adresse ein" direkt neben dem Feld hilft. „Es ist ein Fehler aufgetreten" am Seitenanfang hilft nicht.

Eingaben nach einem Fehler erhalten. Wenn nach einer Fehlermeldung alles neu getippt werden muss, brechen die meisten ab.

Passende Tastatur auf dem Smartphone. Feldtypen wie E-Mail oder Telefonnummer sorgen dafür, dass die richtige Tastatur erscheint. In Baukästen ist das meist eine Auswahl beim Anlegen des Feldes.

Navigation und Menüs

• Fünf bis sieben Punkte in der Hauptnavigation. Mehr überfordert und verwässert den Fokus.
• Verständliche Bezeichnungen. „Leistungen" statt „Portfolio", „Kontakt" statt „Get in touch". Klarheit schlägt Originalität — hier wird nicht gelesen, sondern gescannt.
• Feste Position. Das Menü gehört auf jeder Seite an dieselbe Stelle. Wechselnde Positionen zwingen zum Suchen.
• Aktuelle Seite markieren. Besucher sollen erkennen, wo sie sich befinden.
• Logo verlinkt zur Startseite. Das ist eine so etablierte Konvention, dass ihr Fehlen als Fehler wahrgenommen wird.

Auf dem Smartphone landet die Navigation meist hinter einem Menü-Symbol. Achte darauf, dass es als Menü erkennbar ist — im Zweifel mit dem Wort „Menü" daneben statt nur dem Symbol.

Abstände und Struktur

Der am meisten unterschätzte Hebel. Wer Layouts als unruhig empfindet, hat fast immer ein Abstandsproblem, kein Farbproblem.

Zusammengehöriges näher zusammen als Getrenntes. Eine Überschrift gehört näher an den zugehörigen Text als an den vorherigen Absatz. Das klingt trivial, ist aber der häufigste Grund, warum Seiten schwer zu erfassen sind.

Abstände aus wenigen Werten wählen. Zum Beispiel 8, 16, 24, 32, 48 Pixel statt frei geschätzter Zwischenwerte. Diese Systematik ist der Hauptgrund, warum professionelle Layouts ruhiger wirken.

Leerraum ist kein verschenkter Platz. Der Reflex, jede freie Fläche zu füllen, macht Seiten anstrengend.

Am Raster ausrichten. Elemente sollten an gemeinsamen Kanten beginnen. Die meisten Baukästen bieten dafür Hilfslinien.

Bilder und Icons

Alternativtexte für alle inhaltlich relevanten Bilder. Sie werden von Screenreadern vorgelesen und angezeigt, wenn ein Bild nicht lädt. Rein dekorative Bilder bekommen einen leeren Alternativtext, damit sie übersprungen werden.

Bildgrößen anpassen. Ein 4.000-Pixel-Foto aus der Kamera als Hintergrundbild kostet Ladezeit. Ladezeit ist ein Teil der Bedienqualität — und ein Rankingfaktor.

Icons brauchen Beschriftung. Ein Symbol allein wird oft anders verstanden als gemeint. Ein Wort daneben löst das Problem. Als Bedienelemente benötigen Icons zudem ein Kontrastverhältnis von mindestens 3:1 zur Umgebung.

Einheitlicher Stil. Icons aus verschiedenen Quellen mit unterschiedlichen Strichstärken wirken zusammengewürfelt. Nimm einen Satz aus einer Quelle.

Barrierefreiheit: was rechtlich gilt

Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG), die Umsetzung der europäischen Barrierefreiheitsrichtlinie. Es verpflichtet Anbieter bestimmter Produkte und Dienstleistungen gegenüber Verbrauchern zur Barrierefreiheit — betroffen sind vor allem Online-Shops, Banking, Telekommunikation und E-Books.

Wichtig für kleinere Betriebe: Es gibt eine Ausnahme für Kleinstunternehmen — Unternehmen mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz oder Jahresbilanzsumme. Diese Ausnahme gilt allerdings für Dienstleistungen und nicht pauschal für alles; im Produktbereich greift sie nicht.

Hinweis: Zu diesem Gesetz kursieren viele Angstangebote. Ob und wie das BFSG auf deinen konkreten Fall zutrifft, hängt von Unternehmensgröße, Angebot und Zielgruppe ab. Dieser Artikel ersetzt keine Rechtsberatung — bei Unsicherheit kläre den Fall mit einer fachkundigen Stelle, etwa deiner IHK.

Unabhängig von der rechtlichen Lage: Die genannten Werte für Kontraste, Klickflächen und Schriftgrößen sind kein Sonderfall für eine kleine Gruppe. Sie machen eine Website für alle besser bedienbar — bei schlechtem Licht, auf kleinen Bildschirmen, mit müden Augen.

Der 15-Minuten-Check für deine Website

Nimm dir deine Startseite vor und arbeite die Liste durch:

1. Lies den Fließtext aus einem Meter Entfernung. Zu klein oder zu blass? Dann für viele Besucher unlesbar.
2. Prüfe den hellsten Text auf hellem Grund mit einem Kontrastrechner. Unter 4,5:1 anpassen.
3. Zähle die Menüpunkte. Mehr als sieben? Zusammenfassen.
4. Bediene die Seite auf dem Smartphone mit dem Daumen. Was du nicht sicher triffst, ist zu klein.
5. Suche die wichtigste Aktion. Findest du sie in zwei Sekunden? Sonst hervorheben.
6. Fülle dein eigenes Kontaktformular aus — inklusive eines absichtlichen Fehlers. Ist die Meldung verständlich? Bleiben die Eingaben erhalten?
7. Navigiere die Seite nur mit der Tabulatortaste. Ist immer sichtbar, wo du gerade bist?
8. Lass jemanden Unbeteiligten eine Aufgabe erledigen — „finde die Öffnungszeiten" — und schau zu, ohne zu helfen. Das ist der wertvollste Teil der Liste.

Punkt 8 ersetzt jede Theorie. Beim Zusehen wird innerhalb von Sekunden sichtbar, was auf der eigenen Seite unklar ist.

Typische Fehler

Zu hell

Hellgrauer Text auf Weiß ist der Klassiker. Sieht in der Vorschau elegant aus, ist auf einem normalen Bildschirm bei Tageslicht kaum lesbar.

Zu viele Schriften

Zwei reichen: eine für Überschriften, eine für Fließtext. Oft genügt sogar eine in verschiedenen Stärken.

Zu viele gleichwertige Aktionen

Wenn alles hervorgehoben ist, ist nichts hervorgehoben.

Der Tastaturfokus wurde entfernt

In vielen Vorlagen wird der Fokusrahmen abgeschaltet, weil er als störend gilt. Damit ist die Seite ohne Maus unbenutzbar.

Nur am Desktop geprüft

Der Großteil des Traffics kommt heute über Smartphones. Prüfe dort zuerst.

Vorlage nie angepasst

Baukastenvorlagen sind ein guter Start, aber die Beispielinhalte sind auf ideale Textlängen ausgelegt. Mit echten Texten verschieben sich Abstände und Umbrüche.

FAQ

Was bedeutet UI?

UI steht für User Interface, deutsch Benutzeroberfläche. Gemeint ist alles, was Nutzer auf einer Website oder in einer Anwendung sehen und bedienen können.

Was ist der Unterschied zwischen UI und UX?

UI ist das Aussehen und die Bedienbarkeit der einzelnen Elemente. UX ist die gesamte Erfahrung: ob jemand sein Ziel erreicht und wie mühsam der Weg dorthin war. UI wird meist als Teilbereich von UX verstanden.

Brauche ich einen Designer für gutes UI?

Für ein individuelles Erscheinungsbild und eine eigene Markenwelt: ja. Für solide Grundlagen — lesbare Schriftgrößen, ausreichende Kontraste, treffbare Buttons, klare Formulare — nein. Das sind überprüfbare Werte, keine Geschmacksfragen.

Welche Schriftgröße ist richtig für eine Website?

Für Fließtext mindestens 16 Pixel. Überschriften entsprechend größer, mit erkennbaren Abstufungen zwischen den Ebenen.

Wie groß muss ein Button sein?

Nach WCAG 2.2 mindestens 24 × 24 CSS-Pixel auf Stufe AA. Empfehlenswert sind 44 × 44 Pixel, besonders für die Bedienung auf Smartphones.

Welcher Kontrast ist ausreichend?

Für normalen Fließtext mindestens 4,5:1, für großen Text und Bedienelemente mindestens 3:1. Prüfen lässt sich das mit kostenlosen Kontrastrechnern oder den Entwicklertools des Browsers.

Muss meine Website barrierefrei sein?

Das hängt von deinem Unternehmen und Angebot ab. Das BFSG gilt seit Juni 2025 für bestimmte Produkte und Dienstleistungen gegenüber Verbrauchern; für Kleinstunternehmen gibt es bei Dienstleistungen eine Ausnahme. Da die Einordnung im Einzelfall komplex ist, hol dir im Zweifel fachkundigen Rat.

Kann ich mit einem Homepage-Baukasten gutes UI umsetzen?

Ja. Baukastenvorlagen bringen viele Grundlagen bereits mit — abgestimmte Schriftgrößen, mobile Optimierung, funktionierende Formulare. Prüfen musst du trotzdem selbst, vor allem Kontraste nach eigenen Farbanpassungen und die Darstellung mit deinen echten Texten.