UI-Richtlinien

Konkrete Gestaltungsregeln für die Elemente einer Website oder App: Header und Footer, Schrift, Farbe, Texte, Bilder, Icons, Links und Buttons, Listen, Akkordeons, Animationen, Suche und Filter sowie Styleguides. Grundsatz: Standards einhalten, weil Nutzer die meiste Zeit auf anderen Websites verbringen.

Alle Angaben aus Teil III von Quelle - Praxisbuch Usability und UX (Stand 2017). Formulare, Labels und Fehlermeldungen stehen auf Formulargestaltung, Navigationsmenüs auf Informationsarchitektur.

Header und Footer

• Logo oben links, auf allen Seiten gleich, verlinkt zur Startseite (S. 275).
• Suche oben rechts, bei Onlineshops oben mittig; mobil als Lupensymbol.
• Sprachwahl, Metanavigation (Kontakt, Hilfe, Anmelden) oben rechts; Warenkorb oben rechts mit Icon und Anzahl.
• Sticky Header (bleibt beim Scrollen stehen): bis zu dreimal häufigere Menünutzung, im Shop bis 10 % mehr Konversion. Beim Scrollen verkleinern, damit er nicht zu viel verdeckt (S. 278–279).
• Footer holt Nutzer ab, die bis unten gescrollt haben: Impressum (in Deutschland Pflicht nach TMG), Datenschutz, AGB, Zahlungs- und Lieferinfos, Kontaktdaten, kleine Sitemap, Newsletter, Social-Media-Icons, Sprungmarke nach oben. Mobil als Akkordeon (Kap. 27).

Schrift

• Leserlichkeit hängt ab von Kontrast, Grösse und Schriftart; Text vor ruhigem Hintergrund (S. 298).
• Grösse: Fliesstext 16 px, unter 14 px nicht mehr zeitgemäss. Der Bildschirm ist weiter vom Auge als ein Buch. Nutzer ändern die Grösse im Browser fast nie (S. 305).
• Einheiten: Basis in px, alles andere relativ in % oder em. 1 pt = 1,25 px. Ein Pixel ist je nach Gerät verschieden gross (S. 301, 306).
• Zeilenbreite 45–85 Zeichen; Zeilenabstand 1,3–2,0 em statt des Browserstandards 1,2 (S. 308–309).
• Linksbündig. Blocksatz nie, zentriert nur für zwei, drei Zeilen (S. 307–308).
• Höchstens zwei Schriftarten, bewährt ist eine mit und eine ohne Serifen (Georgia/Arial). Dass Serifen besser lesbar seien, ist ein Mythos ohne Belege; eine oft zitierte Studie aus den 1950ern scheint erfunden (S. 304).
• Hervorhebung fett. Nicht farbig, blau oder unterstrichen, das sieht aus wie ein Link. Grossbuchstaben nur für kurze Labels.
• Vertrauen: Aussagen in Baskerville wurden in einer Studie der New York Times mit 45 000 Teilnehmern eher geglaubt als in Comic Sans (S. 303).
• Screen Real Estate (Jakob Nielsen): Bildschirmplatz ist kostbar wie Bauland in Manhattan; Weissraum ist trotzdem ein Gestaltungsmittel.

Farbe

• Wenige Farben: eine Grundfarbe, zwei benachbarte Töne im Farbkreis, höchstens eine Komplementärfarbe als Akzent (S. 289).
• Unterschiedliche Farbe nur für unterschiedliche Funktion oder Wichtigkeit; Wichtiges auffälliger; bei langer Nutzung nicht ablenken.
• Farbvorlieben hängen von Kultur, Alter und Mode ab; Rosa für Mädchen war vor hundert Jahren umgekehrt. Zuschreibungen wie „Blau = seriös“ sind nur grobe Anhaltspunkte.
• Kontrast und Farbenblindheit: Barrierefreiheit. Farbräume und Farbmodelle: Farbmetrik.

Texte

• Vier Kriterien: Leserlichkeit, Lesbarkeit, Verständlichkeit, Relevanz (S. 321).
• Vorbereiten: Zielgruppe (Personas), Tonalität, Ziel, Einstieg, Handlungsaufforderung am Schluss, grobe Gliederung.
• Menschen lesen im Web nicht, sie überfliegen. Deshalb aussagekräftige Überschriften ohne Wortspiele, Zwischentitel alle zwei bis fünf Absätze, Listen, Kästen, sparsame Fettung (S. 328–330).
• Kurz, aktiv, konkret, kein Nominalstil, keine Füllwörter, die Hauptbotschaft zuerst. Unnötig komplizierte Sprache lässt Autoren weniger intelligent wirken (S. 327).
• Lesbarkeitsformeln geben nur grobe Hinweise.
• SEO: Suchmaschinen bewerten zunehmend wie Menschen; gut geschriebener Text ist die „gelassene Suchmaschinenstrategie“ (S. 330).

Mehrsprachigkeit

• Sprachumschalter oben rechts, als Text in der jeweiligen Sprache („Français“), keine Flaggen; wenn Icon, dann ein Globus.
• Der Umschalter wechselt nur die Sprache und bleibt auf derselben Seite, statt zur Startseite zu springen.
• Voreinstellung aus IP-Adresse und Browsersprache; Wahl im Cookie merken, aber jederzeit änderbar.
• Platz für längere Übersetzungen vorsehen; Englisch braucht etwa 75 %, Französisch und Spanisch etwa 90 % der deutschen Länge. Asiatische Schriften brauchen grössere Schriftgrade. Datums-, Währungs- und Einheitenformate beachten. URLs mit übersetzten Verzeichnisnamen (Kap. 30).

Bilder

• Nur Bilder, die Information tragen: Produkte, Details, Produkte im Einsatz, eigene Räume und Mitarbeiter, Kontaktpersonen und zitierte Kunden. Austauschbare Agenturbilder schaden eher (S. 340).
• In Eyetracking-Studien sahen Nutzer nur 42 % der Bilder an, die meisten weniger als eine Zehntelsekunde. Ein generisches Foto neben einer Anlageaussage senkte sogar deren Glaubwürdigkeit, ein passendes Foto erhöht sie selbst bei falschen Aussagen (S. 337–338).
• Gute Bilder: kontrastreich, scharf, ein zentrales Motiv, wenig Details.
• Bildausschnitt: nicht symmetrisch, sondern nach Drittelregel, Goldenem Schnitt oder Goldener Spirale. Personen gross, gern mit angeschnittenem Haar (S. 345–348).
• Blickrichtung: Abgebildete Personen sollen zum Text schauen, dann wird er eher gelesen. Bilder, die nicht die ganze Spaltenbreite füllen, rechtsbündig setzen (S. 348–349).
• Mobil mindestens 320 px breit, Dateigrösse optimieren.

Bildbühne (Karussell, Slider)

Die meisten Nutzer beachten sie nicht: Das erste Bild bekommt oft 80 % der Klicks, die weiteren je höchstens 5 %. Wer eine will (S. 359–368):

1. höchstens fünf Elemente (bei Produktbildern bis zehn),
2. klare Motive, auch klein erkennbar,
3. jedes Bild beschriften, das ganze Bild verlinken,
4. anzeigen, wie viele Elemente es gibt und welches gerade zu sehen ist,
5. grosse Pfeile statt winziger Punkte, mobil zusätzlich Wischen,
6. bei Mouseover oder Tippen sofort anhalten,
7. Wechsel alle 5–15 Sekunden, nach dem letzten wieder zum ersten,
8. nur das erste Bild sofort laden.

Alternativen: das Wichtigste allein oben, ein grosses Produktbild (Hero Shot), Bilder untereinander, Themenkacheln.

Icons

• Nur eindeutige, gelernte Symbole, einfach und schematisch; bei nativen Apps die Plattform-Icons. 5-Sekunden-Regel: Wer länger als fünf Sekunden für ein passendes Icon braucht, sollte keines verwenden (S. 370).
• Mit Label: 88 % sagten die Funktion richtig voraus, bei gängigen Icons ohne Label 60 %, bei eigenen Icons nur 34 % (UserTesting-Studie; S. 370–371). Label nicht erst bei Mouseover zeigen.
• Label unter dem Icon in Tab Bars, sonst rechts davon.
• Touch: Ziel 7–10 mm bzw. 44–48 px, Icon selbst mindestens 24 px, mindestens 2 mm Abstand (S. 374–375).

Links und Buttons

• Lieber ein paar Klicks mehr, wenn jeder Klick sicher vorwärts führt. Jeder Link ist eine Entscheidung, die man dem Nutzer aufbürdet (S. 378).
• Links am Ende eines Abschnitts statt mitten im Text; sprechend formulieren („4-Farb-Laserdrucker HG-39 – Datenblatt (PDF, 1,2 MB)“) statt „mehr“ oder „hier klicken“; wichtigstes Wort zuerst; Zielseite nimmt die Linkformulierung auf (S. 380–381).
• Seitentitel beschreiben den Inhalt, Site-Name ans Ende; sprechende, flache URLs.
• Buttons: länglich, einheitliche Form, mit Verb beschriftet („Löschen“ statt „OK“). Hierarchie: primärer Button, sekundärer Button, Link (S. 384).
• Reihenfolge OK/Abbrechen: Windows setzt OK zuerst, macOS, iOS und Android Abbrechen zuerst; UX-Experten neigen zu Abbrechen–OK. Weiter-Buttons in Abläufen unten rechts, Zurück unten links. Gefährliche Aktionen weniger auffällig und nicht dort, wo man gewohnheitsmässig klickt, dazu eine Rückfrage (S. 385–387).
• Call to Action: Wirkt nur, wenn davor die richtigen Argumente stehen. Erfolgsgeschichten wie „Orange Buttons funktionieren am besten“ gelten nur für die getestete Site; Klarheit bringt ein A/B-Test (S. 388).
• Zustände: aktiv, inaktiv (ausgegraut, nie ausblenden), Mouseover, Fokus für die Tastatur (auffälliger als Mouseover), gedrückt, in Arbeit. Tooltips nach etwa einer Sekunde Verzögerung. Loslassen neben dem Button bricht die Aktion ab (S. 389–391).
• Grösse: Desktop mindestens 21–23 px hoch. Die Fingerkuppe ist 8–10 mm breit; ideal wären etwa 60 px. Plattformvorgaben für die Touch-Fläche: Apple 44 px, Google 48 px, Microsoft 34 px plus 8 px Abstand (S. 392–393). Das folgt aus Fitts' Gesetz (Wahrnehmungspsychologie). Seit 2023 verlangt WCAG 2.2 auf Stufe AA mindestens 24 × 24 CSS-Pixel pro Klickziel (Quelle - Recherche - Usability und UX heute 2026; Barrierefreiheit).
• Checkbox eckig, mehrfach wählbar; Radiobutton rund, genau einer aus einer Gruppe; Label rechts, klickbar. Segmented Control für höchstens drei Zustände.
• Buttons im Web ohne Ton; in Apps höchstens leise Töne für wichtige Abschlüsse.

Listen und Tabellen

• Aufzählungen gliedern und lockern Texte auf.
• Was man vergleichen will, in Spalten; horizontales Scrollen vermeiden; immer ein Tabellenkopf (S. 431–432).
• Text linksbündig, Zahlen rechtsbündig oder am Komma, Datum mit führenden Nullen, sinnvolle Nachkommastellen, Einheit im Kopf.
• Zebrastreifen (abwechselnde Zeilenfarben) mögen die meisten Nutzer.
• Sortierbar per Klick auf den Spaltenkopf mit Dreieck; lange Listen aufteilen, filtern, Akkordeons. Vergleichstabellen mit drei, höchstens fünf Varianten und einer hervorgehobenen Empfehlung (Paradox of Choice).

Akkordeons

• Gut mobil für Menüs, FAQ und lange Formulare. Nachteile: mehr Klicks, versteckte Inhalte, Verwechslung mit Links (S. 445).
• Mehrere Bereiche gleichzeitig öffnen lassen, nichts automatisch schliessen, offenen Bereich hervorheben.
• Animation höchstens 250 ms, kein Autoscroll. Pfeiltasten unterstützen.
• Plus-Zeichen statt Pfeil (Pfeile deuten auf eine neue Seite); geöffnet ein X statt Minus; das Symbol links vom Titel (S. 448–449).

(Mikro-)Animation

• Zeigt Status und Rückmeldung, gibt das Gefühl von Kontrolle, lenkt den Blick und überbrückt Wartezeit. Nie nur, weil sie jemand schön findet (S. 453).
• Start innerhalb von 0,1 s, Dauer 150–500 ms, bewährt 150–300 ms; auf grossen Bildschirmen etwas länger. Nicht linear, sondern mit Beschleunigen und Abbremsen (S. 457–459).
• Fortschrittsbalken zum Ende hin schneller laufen lassen, das wirkt kürzer.
• Möglichst ohne neue Elemente; muss auch beim tausendsten Mal noch angenehm sein. Vorsicht mit Humor und Sound, vor allem bei Fehlermeldungen und im Büro.

Suche

• Suchfeld mit Lupen-Button auf allen Seiten, oben rechts (Shops mittig); Enter-Taste startet die Suche. Die Suche durchsucht den gesamten Inhalt, optional mit Eingrenzung auf Bereiche (Kap. 42).
• Beispielbegriffe im Suchfeld, Autosuggest mit hervorgehobenem Eingabeteil.
• Trefferliste: Titel, Beschreibung, Bild, je nach Site Preis oder Datum; Anzahl Treffer oben; nach Relevanz sortiert, umsortierbar; nachfiltern.
• Null Treffer: freundlich, Suchbegriff zum Korrigieren wiederholen, Tipps, ähnliche Begriffe, Einstiege ins Angebot.
• Technik: Stammwort-Reduktion (Stemming: Campingplätze → Campingplatz → Camping) und „Meinten Sie …?“ bei Tippfehlern.
• Lieber keine Suche als eine schlechte (S. 475).

Filter und Facetten

• Hierarchischer Filter (Drill-down): schränkt schrittweise ein, eine Option pro Ebene, als Textlink. Facettensuche: mehrere Kriterien parallel, einzeln wieder aufhebbar, als Checkboxen (S. 477–480).
• Erst ab einer Datenmenge sinnvoll, bei der man sonst blättern müsste; sonst drohen Nullergebnisse.
• Kriterien aus Card Sorting, Suchanfragen und Personas ableiten; ähnlich grosse Gruppen, höchstens 15 Attribute, 5–6 sichtbar plus „alle anzeigen“; keine Überschneidungen; nach Relevanz ordnen.
• Kurze Begriffe in Grundform („Farbe“ statt „Farbauswahl“), „Filter zurücksetzen“ statt „Filter löschen“.
• Desktop links neben der Trefferliste; mobil über einen Filter-Button als Overlay, die Treffer bleiben abgedunkelt sichtbar.
• Trefferzahl in Klammern, Farbfelder statt Farbwörter, Schieberegler plus Eingabefelder für Preisspannen, Sterne für Bewertungen. Gewählte Filter oben als Buttons mit X, dazu „alle zurücksetzen“.

Standards und Styleguides

• Jakob's Law (Jakob Nielsen): „Nutzer verbringen die meiste Zeit auf anderen Websites.“ Deshalb Standards einhalten und Konsistenz wahren: gleiche Wörter („Login“ oder „Anmelden“, nicht beides), gleiche Elemente, gleiches Layout (S. 491–492).
• Styleguide: digitale, modulare Sammlung aller Oberflächenelemente mit Inhaltsverzeichnis, Raster, Farbpalette (HEX-Codes), Typografie, allen Elementen mit Einsatzkontext, Abständen, Code-Snippets und Dos and Don'ts. Beispiele: Googles Material Design, Apples Human Interface Guidelines, Mailchimp, Lonely Planet. Er spart Zeit und dient als Baukasten für Prototypen (S. 494–498).

Verwandt

• Formulargestaltung – Formulare, Labels, Fehlermeldungen
• Informationsarchitektur – Navigationskonzepte
• Responsives Webdesign – Anpassung an Bildschirmgrössen
• Barrierefreiheit – Kontrast, Farbe, Leichte Sprache
• Wahrnehmungspsychologie – psychologische Grundlagen der Regeln
• Angular-Komponente – wiederverwendbare Bausteine, wie sie ein Styleguide beschreibt