Begriff
UI (User Interface)
Warum wichtig?
Dieser Begriff ist ein Knoten im SengakujiWorks-Wissensnetz. Nutze Level 0 für die erste Einordnung, Level 1 für Praxis, Level 2 für technische Struktur und Level 3 für Grenzen, Fallstricke und Expertenkontext.
Das UI (User Interface) ist alles, was du siehst und anfassen kannst, wenn du ein Gerät bedienst.
- Die Knöpfe auf der Fernbedienung.
- Das Menü auf deinem Handy.
- Die Webseite, die du gerade liest.
Es ist die Brücke zwischen Mensch und Maschine. Wenn das UI gut ist, findest du sofort den "Kaufen"-Button. Wenn das UI schlecht ist, suchst du 5 Minuten nach dem "Ausloggen"-Knopf.
Merksatz: Die grafische Oberfläche, über die ein Mensch mit einer Maschine interagiert.
Im Webdesign besteht UI aus:
- Layout: Wo sind die Dinge? (Header oben, Sidebar links).
Typografie: Welche Schriftart? Wie groß?
Musterantwort: Beginne mit dem konkreten Fall, prüfe die Fakten und erkläre den Begriff daran. Für diesen Abschnitt gilt: Im Webdesign besteht UI aus: 1. Layout: Wo sind die Dinge? (Header oben, Sidebar links). 2. Typografie: Welche Schriftart? Wie groß? 3. Farben: Signalrot für Fehler, Grün für Erfolg. 4. Elemente: Buttons, Eingabefelder, Checkboxen.- Farben: Signalrot für Fehler, Grün für Erfolg.
- Elemente: Buttons, Eingabefelder, Checkboxen.
UI-Designer nutzen Tools wie Figma oder Adobe XD, um das Aussehen zu malen, bevor Programmierer es bauen.
1. UI vs. UX (User Experience)
Die ewige Verwechslung.
- UI (Das Aussehen): "Der Button ist blau und hat runde Ecken." (Schönheit).
- UX (Das Gefühl): "Der Button ist leicht zu finden und ich weiß sofort, was er tut." (Benutzerfreundlichkeit). Ein schönes UI kann eine katastrophale UX haben (z. B. grauer Text auf grauem Grund – sieht edel aus, kann aber niemand lesen).
2. Design Systems
Große Firmen erfinden das Rad nicht jeden Tag neu. Sie haben ein Design System (z. B. "Material Design" von Google). Das ist ein Baukasten mit fertigen Regeln: "Ein Button ist immer 40px hoch und hat die Farbe #0055FF." Das garantiert Konsistenz über hunderte Apps hinweg.
1. Atomic Design Prinzipien
Bei der Erstellung eines UI-Produkts nutzt man oft den Ansatz von Brad Frost:
- Atome: Die kleinsten Einheiten (Buttons, Labels, Inputfelder).
- Moleküle: Gruppen von Atomen (Suchfeld + Button).
- Organismen: Komplexe Sektionen (Navigation, Hero-Sektion).
- Templates: Seiten-Layouts ohne echten Inhalt.
- Pages: Die fertige Seite mit echten Daten. Dieser modulare Aufbau erlaubt es, Änderungen im System (z. B. "Alle Buttons sollen jetzt schattenlos sein") an einer Stelle zu machen, die sich sofort auf das gesamte Produkt auswirkt.
2. Micro-Interactions & Lottie
Ein Premium-UI zeichnet sich durch Micro-Interactions aus. Das ist das kleine haptische Vibrations-Feedback beim Handy oder die flüssige Animation, wenn ein Häkchen erscheint. Technisch nutzt man dafür oft Lottie-Files (von Airbnb). Statt klobiger GIFs oder komplexem Javascript-Code exportiert der Designer seine Animation aus After Effects als winzige JSON-Datei. Das UI-Team bindet diese Datei ein, und sie wird verlustfrei und performant auf allen Geräten gerendert. Das spart massiv Ladezeit und macht das UI lebendig.
3. Accessibility (A11y) Technik
Ein UI ist wertlos, wenn blinde Menschen es nicht bedienen können.
Für Experten bedeutet UI-Entwicklung daher zwingend die Umsetzung von Sammantic HTML und WAI-ARIA Roles.
Attribute wie aria-label="Schließen" oder role="alert" sagen dem Screenreader: "Achtung, das hier ist ein Button mit einem X-Symbol, der das Fenster schließt."
Ein professionelles UI-Test-Framework prüft daher nicht nur die Farben, sondern auch die Fokus-Reihenfolge (kann ich alles mit der TAB-Taste bedienen?) und den Kontrast (ist der Text für Menschen mit Sehschwäche lesbar?).
Quick-Check
Ist UI nur für Webseiten?
Nein. Auch dein Auto-Armaturenbrett, die Mikrowelle und der Geldautomat haben ein UI. Sogar Sprachsteuerung (Alexa) ist ein UI (VUI - Voice User Interface).Was ist eine GUI?
Graphical User Interface. Das ist das UI mit Fenstern und Maus (Windows, macOS). Davor gab es CLI (Command Line Interface) – nur Textbefehle auf schwarzem Schirm.Was macht ein "Dark Pattern"?
Ein bösartiges UI-Design, das dich austricksen will. Z. B. ein riesiger grüner "Download"-Button (der Werbung ist) und ein winziger Link "Weiter zur Seite".