Marketing Glossar

2.413 Fachbegriffe aus 22 Bereichen des Online Marketings

User Interface (UI)

Definition: Das User Interface (UI; Benutzeroberfläche; Mensch-Maschine-Schnittstelle) bezeichnet alle Elemente und Mechanismen über die ein Mensch mit einem System, einer Anwendung oder einem Gerät interagiert – die Kontaktfläche zwischen Nutzer und Technologie. UI-Typen nach Interaktionsmodalität: CLI (Command Line Interface; Kommandozeilen-Interface): texteingabe-basiert; hohe Lernkurve; maximale Effizienz für Experten; Terminal; Bash; PowerShell; GUI (Graphical User Interface; Grafische Benutzeroberfläche): visuelle Elemente (Windows; Icons; Menus; Pointer – WIMP); direkte Manipulation; dominierendes Paradigma seit Macintosh 1984; TUI (Touch User Interface): berührungsbasiert; direkte Objekt-Manipulation durch Finger; seit iPhone 2007 dominierendes Mobile-Paradigma; VUI (Voice User Interface): spracheingabe- und -ausgabebasiert; Siri (Apple; 2011); Google Assistant (2016); Alexa (Amazon; 2014); NUI (Natural User Interface): gestural; Eye-Tracking; Body-Movement; Microsoft Kinect; Apple Vision Pro; AR/VR-Interfaces. GUI-Komponenten-Taxonomie: Eingabe-Elemente (Input; Textarea; Select; Checkbox; Radio-Button; Toggle; Slider; File-Upload; Color-Picker; Date-Picker); Ausgabe-Elemente (Text; Bilder; Charts; Tables; Badge; Progress-Bar; Skeleton); Navigation-Elemente (Navbar; Tab-Bar; Sidebar; Breadcrumb; Pagination; Stepper); Container-Elemente (Card; Modal; Drawer; Accordion; Tabs; Tooltip; Popover); Feedback-Elemente (Toast; Alert; Snackbar; Loading-Spinner; Empty-State; Error-State). UI als Schnittstelle: das UI ist die einzige sichtbare Schicht eines Systems; alle Technologie dahinter (Backend; Datenbank; API; Business-Logic) ist für den Nutzer unsichtbar; das UI vermittelt was das System kann und wie es sich anfühlt.

Erläuterung

Vannevar Bush (Massachusetts Institute of Technology; Cambridge; MA; Director of Office of Scientific Research and Development im WWII) beschrieb 1945 in «As We May Think» (The Atlantic; Juli 1945) das konzeptionelle Vorläufer-System «Memex» (Memory Extender): ein hypothetisches Gerät das alle Dokumente, Bücher und Notizen einer Person speichert und durch «associative trails» navigierbar macht; Bush's Vision der nichtlinearen Informationsnavigation durch Assoziationen war direkter konzeptueller Vorgänger von Hypertext und grafischer Interface-Navigation. Ivan Sutherland (MIT Lincoln Laboratory; Cambridge; MA; dann University of Utah; Salt Lake City; UT; «Sketchpad: A Man-Machine Graphical Communication System»; MIT PhD-Dissertation; Januar 1963) entwickelte mit Sketchpad das erste System mit grafischer Interaktion: Nutzer zeichneten mit Lichtgriffel auf Oszilloskop-Bildschirm; Objekte konnten verschoben, skaliert, kopiert werden; Constraint-Solving (Parallellinien bleiben parallel nach Skalierung); Sutherland's Sketchpad demonstrierte erstmals dass direkte Manipulation visueller Objekte eine sinnvolle Interaktionsform ist – Grundlage aller grafischen Interfaces. Douglas Engelbart (Stanford Research Institute; Menlo Park; CA; «A Research Center for Augmenting Human Intellect»; NLS-System; «The Mother of All Demos»; 9. Dezember 1968; San Francisco Convention Center; San Francisco; CA) demonstrierte 90 Minuten lang alle Elemente moderner grafischer Interfaces: Computer-Maus (Engelbart erfand Holzmaus 1964; Patent 1970); Texteditoren; Hypertext-Links; gemeinsames Bearbeiten von Dokumenten in Echtzeit (frühe Kollaboration); Videokonferenz; Fenstersystem; die Demo wurde als «The Mother of All Demos» bekannt und zeigte 1968 Technologien die erst 20 Jahre später massentauglich wurden. Alan Kay (Xerox PARC; Palo Alto; CA; «Personal Dynamic Media», IEEE Computer, 1977; Alto-Computer; Smalltalk; Dynabook-Konzept) und sein Forscherteam bei Xerox PARC (1970–1983) entwickelten das erste vollständige GUI-Betriebssystem auf dem Alto-Computer (1973): Windows (überlappende Fenster); Icons (grafische Symbole für Dateien und Programme); Menus (Pull-Down-Menus); Pointer (Mauszeigersteuerung) – das WIMP-Interface; Alto war keine Massenmarkt-Produkt ($32.000 pro Einheit) aber der konzeptuelle Ursprung aller modernen grafischen Benutzeroberflächen. Steve Jobs (Apple Computer; Cupertino; CA) besuchte Xerox PARC im Dezember 1979 und adaptierte die GUI-Konzepte für Apple: Lisa (Apple Lisa; 19. Januar 1983; $9.995; kommerzieller Misserfolg) und Macintosh (24. Januar 1984; $2.495; Apple Macintosh) popularisierten GUI für breite Öffentlichkeit; der berühmte «1984»-Super-Bowl-Werbespot (Ridley Scott; 22. Januar 1984) positionierte Macintosh als demokratisierende Technologie gegen den IBM-Hegemon; der Macintosh Mac OS Classic definierte Desktop-Metapher (Dateien; Ordner; Papierkorb; Schreibtisch), Menüleiste oben, Doppelklick zum Öffnen als GUI-Paradigmen die bis heute gelten. Steve Jobs kehrte 2007 mit dem iPhone (9. Januar 2007; MacWorld Expo; San Francisco) zurück und revolutionierte UI erneut: das erste Smartphone ohne physische Tastatur; Multi-Touch-Gesten (Pinch-to-Zoom; Swipe; Double-Tap) als neue Interaktions-Metaphern; direkte Manipulation durch Finger statt Maus+Zeiger; Trägheits-Scrolling (Kinetic Scrolling) mit physikalisch plausiblem Abbremsen; iOS Human Interface Guidelines 2007 definierten neue Standards für Touch-UI die gesamte Mobile-Industrie beeinflussten.

UI-Paradigmen, Interface-Metaphern und Design-Patterns

UI-Konsistenz und Design-System-Aufbau

Praxistipp: Beginnen Sie jedes UI-Redesign mit einem «Interface Inventory» (Brad Frost; 2013; bradfrost.com): machen Sie Screenshots aller UI-Elemente auf jeder Seite Ihrer Website oder App; gruppieren Sie gleiche Element-Typen (alle Buttons; alle Formularfelder; alle Cards; alle Navigation-Elemente); wenn Sie für denselben Element-Typ mehr als 3 verschiedene visuelle Varianten finden haben Sie ein Konsistenz-Problem. Dieser Audit dauert 2–4 Stunden und zeigt sofort den Umfang der notwendigen Design-System-Arbeit – ohne eine einzige Zeile Code zu schreiben oder ein Design-Tool zu öffnen.