- die gebräuchlichen Bausteine sicher einsetzen
- Knopf und Link unterscheiden
- bewährte Muster statt Eigenerfindungen wählen
- erkennen, wann ein Muster nicht passt
Oberflächen bestehen aus einer überschaubaren Zahl wiederkehrender Bausteine. Sie sicher einzusetzen ist wichtiger als jede gestalterische Idee – denn der Besucher kennt diese Muster von hunderten anderen Seiten und erwartet, dass sie sich so verhalten wie gewohnt.
1. Warum bewährte Muster
Jedes Muster, das ein Besucher bereits kennt, kostet ihn keine Aufmerksamkeit. Jede Eigenerfindung muss er erst verstehen – und diese Aufmerksamkeit fehlt dann beim eigentlichen Inhalt. Das bekannte Gesetz dazu lautet: Menschen verbringen die meiste Zeit auf anderen Seiten als Ihrer und erwarten deshalb, dass Ihre sich so verhält wie die anderen.
Das heißt nicht, dass alles gleich aussehen muss. Es heißt, dass Abweichungen einen Grund brauchen, der dem Nutzer dient – nicht dem Wunsch nach Besonderheit.
2. Sieben Bausteine
Wann: Eine Handlung auslösen: absenden, speichern, buchen.
Regel: Beschriftet die Folge („Anfrage senden“), nicht die Mechanik („Absenden“). Je Ansicht genau ein hervorgehobener Knopf.
Häufiger Fehler: Drei gleich starke Knöpfe nebeneinander – der Besucher wählt keinen.
3. Knopf oder Link?
Die häufigste Verwechslung im Interface. Die Regel ist einfach: Ein Link führt woandershin, ein Knopf verändert etwas. „Zur Leistungsseite“ ist ein Link, „Anfrage senden“ ein Knopf. Wer das durcheinanderbringt, verwirrt nicht nur optisch – Menschen mit Screenreader bekommen die Elemente unterschiedlich angesagt und erwarten entsprechend Unterschiedliches.
Praktisch wichtig ist auch das Verhalten: Ein Link lässt sich in einem neuen Tab öffnen, ein Knopf nicht. Wenn Ihr „Knopf“ eigentlich zu einer anderen Seite führt, sollte er technisch ein Link sein, auch wenn er wie ein Knopf aussieht.
4. Die Rangfolge der Handlungen
| Stufe | Aussehen | Beispiel | Anzahl je Ansicht |
|---|---|---|---|
| Hauptsache | Gefüllt, in Akzentfarbe | Anfrage senden | genau eine |
| Nebensache | Umrandet, ohne Füllung | Unterlagen herunterladen | eine bis zwei |
| Beiläufig | Reiner Text mit Unterstreichung | Datenschutz, Abbrechen | beliebig |
Diese Abstufung entscheidet mehr über die Zahl der Anfragen als die Farbe des Knopfes. Wenn alle Handlungen gleich stark auftreten, überlässt man dem Besucher eine Entscheidung, die man selbst treffen sollte.
5. Wann ein Muster nicht passt
Drei Fälle kommen regelmäßig vor. Aufklappbereiche sind nützlich für nachrangige Details, aber schädlich für alles, was die Entscheidung trägt: Zugeklappte Preise werden nicht gefunden. Karussells, die automatisch weiterlaufen, werden nachweislich kaum wahrgenommen – meist sieht nur der erste Inhalt jemand. Und modale Fenster, die sich über die Seite legen, unterbrechen; sie sind gerechtfertigt bei Rückfragen vor unwiderruflichen Schritten und selten sonst.
6. Häufige Fragen
Darf man Muster verändern? In der Erscheinung ja, im Verhalten selten. Ein Knopf darf anders aussehen als gewohnt; er sollte sich beim Klicken so verhalten wie erwartet.
Woher nimmt man gute Muster? Aus etablierten Sammlungen und aus der Beobachtung, was Menschen bereits kennen. Für die meisten Websites im Mittelstand reichen die sieben aus Abschnitt 2 zusammen mit Navigation und Fußbereich.
Wie erkennt man, dass ein Muster nicht funktioniert? Am Zögern. Wer beim Test vor einem Element innehält, hat es nicht erkannt – unabhängig davon, ob er es anschließend richtig bedient.
7. Übung zum Selbermachen
Nehmen Sie eine Unterseite Ihrer Website und zählen Sie alle Handlungsmöglichkeiten: Knöpfe, Links im Text, Navigationseinträge, Kacheln. Ordnen Sie jede den drei Stufen aus Tabelle 2.1 zu. Wenn mehr als eine in der ersten Stufe landet, streichen Sie so lange, bis nur eine übrig bleibt – und prüfen Sie, ob die Seite dadurch schlechter wird. In den meisten Fällen wird sie deutlich klarer.
- [1]Krug, S. (2014): Don't Make Me Think, Revisited. New Riders.
- [2]Nielsen Norman Group (2025): UI Patterns and Button Hierarchy.
- [3]Tidwell, J. / Brewer, C. / Valencia, A. (2020): Designing Interfaces. 3. Auflage, O'Reilly.
Stand: September 2026. Kursmaterial der Klarwerk Akademie. Methoden und Werkzeuge der Konzeption entwickeln sich weiter – die Grundprinzipien nutzerzentrierter Gestaltung bleiben.