User Interface (UI): Alle Informationen zu Benutzeroberflächen

Als User Interface (UI) bzw. Benutzeroberfläche bezeichnet man den sichtbaren und bedienbaren Teil einer Software oder Hardware. Typischerweise haben Sie hierfür Elemente wie Tasten, Menüs und Icons zur Verfügung. Es gibt allerdings auch eine Reihe von alternativen Oberflächen, die sich beispielsweise per Text, Sprache oder Gehirnaktivität steuern lassen.

Was ist ein UI (User Interface)?

Ein User Interface (UI) (deutsch: „Benutzeroberfläche“) bezeichnet die Oberfläche, über die Menschen mit Maschinen interagieren. Es ist die Schnittstelle, die es Ihnen ermöglicht, einen Computer zu bedienen, in einem Onlineshop eine Bestellung zu tätigen oder eine App auf Ihrem Smartphone zu bedienen. Dabei umfasst das User Interface sämtliche Bedienelemente einer Oberfläche, die Nutzende sehen und mit denen sie agieren. Das kann von simplen textbasierten Kommandozeilen bis zu aufwändig gestalteten grafischen Benutzeroberflächen reichen.

Das User Interface hat einen starken Einfluss auf den Bedienkomfort einer Software oder Website. Beim Design eines UI geht es daher längst nicht mehr darum, eine zweckdienliche Benutzeroberfläche zu schaffen, sondern auch um Ästhetik und einfache Bedienbarkeit. Die User Experience ist zu einem zentralen Fokus innerhalb des UI-Designs geworden. Ziel eines jeden Webdesigners ist es, mit einem intuitiv bedienbaren User Interface den Grundstein für eine gute User Experience zu legen. Das funktioniert über eine grafische Benutzeroberfläche meist am besten. Aber auch andere innovative Arten von UIs erleichtern zunehmend die Interaktion mit Computern und anderen Geräten.

Welche Arten von UIs gibt es?

Seit der Erfindung des Computers wurden immer fortschrittlichere Methoden der Mensch-Maschinen-Interaktion entwickelt. So gibt es mittlerweile mehrere unterschiedliche Arten von User Interfaces. Am Anfang dieser Entwicklung standen simple Command Line Interfaces (CLI), doch zahlreiche technische Innovationen wie Natural User Interfaces (NUI) führten zu einer leichteren bzw. direkteren Bedienbarkeit. In der folgenden Tabelle finden Sie einen Überblick über die wichtigsten UI-Methoden, bevor diese einzeln vorgestellt werden.

Command Line Interfaces (CLI)

Am Anfang war nicht nur die Erde, sondern auch das UI wüst und leer. Lediglich eine Kommandozeile und ein Prompt zur Anzeige der aktuellen Position bzw. eine Eingabeaufforderung zierte den dunklen Bildschirm beispielsweise der ersten MS-DOS-Computer. Via Befehlseingabe kommunizierte man über ein Command Line Interface mit dem Computer. Dieser zeigt nach der Verarbeitung der Anfrage das Ergebnis an – natürlich ebenfalls in Textform. Diese Form des User Interfaces gilt inzwischen als veraltet, kommt aber beispielsweise noch bei der cmd.exe in Windows-Betriebssystemen zur Anwendung – wobei sich die Syntax noch weitgehend an dem DOS-Urahnen orientiert. Die Steuerung über ein CLI erfolgt ausschließlich über die Tastatur; eine Maus kommt dabei nicht zum Einsatz.

Zusammengefasst:

✓ CLI ist die erste Methode zur Bedienung des UI.

✓ Mit einer textbasierten Benutzeroberfläche wird die Interaktion über Tastatureingaben gesteuert.

✓ Eingaben werden in einer Kommandozeile eingetragen und ausgeführt (zeilenorientiert).

Text User Interface (TUI)

Etwas komfortabler sind Text User Interfaces. Auch hier läuft die Interaktion mit dem Computer ausschließlich via Tastatur ab. Das TUI markiert dabei den Übergang von reinen Command Line Interfaces zu grafischen Benutzeroberflächen. Der Begriff etablierte sich nach der Entwicklung der grafischen Benutzeroberflächen, damit man Text User Interfaces fortan begrifflich von CLIs und grafischen Benutzeroberflächen abgrenzen konnte.

Der Unterschied zu CLIs besteht darin, dass die Schnittstelle den Bildschirm flächig und nicht zeilenorientiert nutzt. Dennoch wird die Schnittstelle weiterhin im Textmodus ausgeführt. Typischerweise stehen hier 256 Zeichen zur Verfügung. Zum Einsatz kommen TUIs heute noch beispielsweise bei Bootloadern oder BIOS-Setup-Programmen.

Zusammengefasst:

✓ TUIs sind textbasierte Schnittstellen, die den Bildschirm flächig nutzen und eine größere Zeichenanzahl als CLIs erlauben (zeichenorientiert).

Website Design Service

Website erstellen lassen von Profis

• Der einfache Weg zur professionellen Internet-Präsenz
• Mit eigener Domain und E-Mail-Adresse
• Inklusive: Pflege und Aktualisierung nach Livegang

Kostenlose Beratung

Graphical User Interfaces (GUI)

GUIs (Graphical User Interfaces), also grafische Benutzeroberflächen, sind heutzutage der etablierte Standard. Software wird heutzutage über grafische Steuerelemente und Symbolbilder bedient, die gestalterisch häufig an Gegenstände aus der „echten Welt“ angelehnt sind. Meist nutzen die Userinnen und User Maus und Tastatur als Steuergerät, immer häufiger aber auch Touchscreens, die auf Berührungen reagieren. Mit der grafischen Benutzeroberfläche zogen auch Elemente wie der Desktop, einzelne Fenster oder der Papierkorb in die digitale Welt ein. Mit der Maus oder einer Berührung auf dem Touchscreen werden die gewünschten Elemente ausgewählt und durch simples Klicken beziehungsweise Antippen geöffnet.

Das grafische Design lehnt sich dabei meist an das traditionell-analoge Büro an. Die Folge: Sämtliche Elemente lassen sich leicht identifizieren und die Bedienung geht intuitiver von der Hand als über die Befehlsliste eines Command Line Interfaces. Selbst Neulinge verstehen die Funktionen der Icons schnell, denn weder ein Papierkorb noch ein Brief bedürfen zusätzlicher Erläuterungen, um verstanden zu werden. Diese Form der Symbolik ist für User Interfaces inzwischen ebenso Standard geworden wie die GUIs selbst: So gibt es kaum ein Grafikprogramm, dessen Werkzeug-Icons nicht auf Objekte der realen Welt verweisen.

Zusammengefasst:

✓ GUIs sind heutzutage Standard.

✓ GUI beschreibt eine grafische Benutzeroberfläche, bei der die Bedienung über ein Klicken oder Antippen grafischer Symbole funktioniert.

Voice User Interface (VUI)

Auch wenn grafische Benutzeroberflächen nahezu überall zum Einsatz kommen, hat die Entwicklung der User Interfaces mit GUIs noch längst kein Ende gefunden: Mit dem Voice User Interface ist die Interaktion mit Maschinen auch über die Sprachsteuerung möglich. Jedes gängige Betriebssystem bietet inzwischen ein solches UI auf die ein oder andere Weise an: Apple kommt mit der Siri-Sprachassistenz und auch die Google-Suche funktioniert inzwischen über Spracheingabe. Dadurch, dass Anwendungen per Sprechbefehl geöffnet oder gesprochene Texte automatisch verschriftlicht werden, können Anwendende effektiver arbeiten. Ein weiterer Vorteil: Sprachsteuerung sorgt für mehr Barrierefreiheit.

Zusammengefasst:

✓ VUIs bieten eine sprachgesteuerte Benutzeroberfläche, die Interaktionen über gesprochene Befehle ermöglicht.

✓ VUIs dienen der Barrierefreiheit.

Natural User Interface (NUI)

Besonders intuitiv verläuft die Kommunikation mit der Maschine über ein Natural User Interface: Das NUI kann als eine Weiterentwicklung der grafischen Benutzeroberfläche und des Voice User Interfaces betrachtet werden: Die interaktive Bedienoberfläche reagiert sowohl auf Gesten als auch auf Bewegung und Sprache. Darüber hinaus setzt sie auch auf Gesichts- und Objekterkennung. Verschiedene Sensoren, Kameras und Mikrofone ermöglichen die Kommunikation mit der Maschine auf unterschiedlichsten Wegen.

Viele aktuelle Smartphones und Tablets setzen zunehmend auf NUI-Technologien, aber auch Nintendos Wii-Konsole macht sich die Gesten- und Bewegungserkennung spielerisch zunutze. Auch viele Smartwatches und Geräte bzw. Anwendungen mit Augmented Reality (AR) bzw. Virtual Reality (VR) arbeiten mit Natural-User-Interface-Technologien. Gestensteuerung, Spracherkennung und sogar Gesichtserkennung gehören zu den Schlüsselfunktionen dieser Geräte, die die Interaktion mit der Technologie noch intuitiver machen. Immer häufiger werden NUIs auch durch den Einsatz von KI ergänzt, um gestische und sprachliche Eingaben noch präziser zu interpretieren und mit der physischen Welt zu interagieren, was zu einer noch intuitiveren und dynamischeren Benutzererfahrung führt.

Zusammengefasst:

✓ NUI ermöglichen eine einfache Bedienung, die auf Gesten, Bewegungen, Sprache und Objekterkennung basiert.

✓ NUI werden oft mit KI-Technologien ergänzt und optimiert.

Generative User Interfaces (GenUI)

Ein generatives User Interface (oft auch GenUI genannt) bezeichnet eine neue Form von Benutzeroberfläche, bei der künstliche Intelligenz Teile der Benutzeroberfläche dynamisch in Echtzeit generiert oder anpasst. Das bedeutet, dass sich Layouts, Komponenten oder Funktionen automatisch verändern, je nachdem, was der oder die Nutzende gerade tut oder benötigt. Anders als klassische statische UIs, die für viele Nutzerinnen und Nutzer gleich aussehen, kann ein generatives UI personalisiert, kontextsensitiv und situativ angepasst werden, sodass zum Beispiel relevante Informationen, Schaltflächen oder Ansichten genau dann angezeigt werden, wenn sie gebraucht werden.

Zusammengefasst:

✓ GenUIs sind dynamisch generierte Benutzeroberflächen, die mit künstlicher Intelligenz arbeiten.

✓ Sie lernen aus Daten und Interaktionen, um die Oberfläche kontextsensitiv, individuell und adaptiv zu gestalten.

✓ Generative UIs verschieben den Fokus vom festen Design hin zu maßgeschneiderten Erlebnissen.

Welche besonderen Arten von UIs gibt es?

Neben diesen im Alltag gebräuchlichen Formen von UIs gibt es einige „Exoten“ und Innovationen, die den Massenmarkt noch nicht erreicht haben: So etwa das Tangible User Interface, das auch mit TUI abgekürzt wird, das Perceptual User Interface (PUI) oder das Brain Computer Interface (BCI). In der anschließenden Tabelle erhalten Sie einen Überblick zu diesen UIs, bevor sie einzeln vorgestellt werden.

Tangible User Interface

Tangible User Interfaces (ebenfalls TUI abgekürzt, nicht zu verwechseln mit Text User Interface) sind gegenständliche bzw. anfassbare Benutzerschnittstellen. Das heißt, die Interaktion mit der Maschine geschieht über physische Gegenstände. Würfel, Kugeln oder andere Objekte werden dazu vom Menschen manipuliert (gedreht, gedrückt o. Ä.), wodurch Mechanismen ausgelöst oder digitale Informationen abgerufen werden. Zum Einsatz kommen Tangible User Interfaces häufig in Museen oder auf Messen.

Perceptual User Interfaces

Die Entwicklung von Perceptual User Interfaces (PUI) steckt noch in den Kinderschuhen, wird von der Wissenschaft aber zunehmend vorangetrieben. Dabei handelt es sich um eine wahrnehmungsgesteuerte Benutzeroberfläche, also um eine Verbindung von VUI, GUI und einer elektronischen Gestenerkennung.

Brain Computer Interfaces

Auch Brain Computer Interfaces (BCI) sind längst keine Science-Fiction mehr: Mithilfe von Elektroden werden Hirnströme gemessen und von Algorithmen in Steuerbefehle übersetzt. Erste Erfolge konnte die Forschung bereits feiern und es beispielsweise einer gelähmten Patientin in den USA ermöglichen, einen Roboterarm mit ihren Gedanken zu steuern. BCIs könnten dementsprechend irgendwann die barrierefreie Bedienung von Computern oder anderen Maschinen revolutionieren.

Wie können Sie Ihr User Interface optimieren?

Alle, die sich mit Webdesign befassen, sollten sich auch mit dem Thema UI auseinandersetzen: Denn wenn Sie Nutzende Ihrer App, Besuchende Ihrer Website begeistern oder mit Ihrem Onlineshop erfolgreich sein wollen, müssen Sie die Benutzung Ihres Produktes so intuitiv und einfach wie möglich gestalten. Hierfür ist es zunächst wichtig, Ihre Zielgruppe zu identifizieren, damit Sie das UI und die damit einhergehende User Experience möglichst passend gestalten können. Funktionalität, Bedienkomfort und Ästhetik Ihres Produkts sind entscheidende Kriterien für eine gute User Experience.

Schritt 1: Benutzerfreundlichkeit optimieren

Um Ihre UX zu optimieren, sollte Ihr Fokus zunächst auf der grafischen Benutzeroberfläche liegen. Dabei müssen Sie stets die Usability, also die Effizienz, Effektivität und Zufriedenheit der Nutzenden, im Blick haben: Denn ist eine App oder eine Website schwer zu bedienen, wird auch ein ästhetisch ansprechendes Design nicht vom Angebot überzeugen.

Um Ihre Website oder App zu optimieren, sind in der Regel ausführliche Tests notwendig. Studien mit Userinnen und Usern können ebenso wie technische Messungen via Heatmap-Analyse hilfreiche Erkenntnisse liefern. Dabei wird die Usability visualisiert: Das Nutzungsverhalten wird durch Click-, Scroll-, Mouse-Movement- oder Eye-Tracking nachverfolgt und in farblichen Abstufungen aufgezeichnet.

Schritt 2: Optischer Feinschliff

Nachdem nun die Funktionalität und der Bedienkomfort gewährleistet sind, können Sie sich im nächsten Schritt der Ästhetik Ihres Projekts widmen. Hier gilt: Weniger ist meist mehr. Das Design sollte die Funktionalität der grafischen Benutzeroberfläche unterstützen und dementsprechend klar und strukturiert sein. Das bedeutet nicht, dass man sich als Designer nicht auch austoben darf! Es gilt dabei nur, die Nutzungsgewohnheiten der Zielgruppe zu kennen und die Funktionalität durch das Design nicht einzuschränken.

Warum sind intuitive UIs im Webdesign und der Softwareentwicklung so wichtig?

Warum aber ist ein intuitives UI so wichtig? Ein simples Beispiel: Ein Schmetterlingszeichen mag hübsch sein und mit hoher Wahrscheinlichkeit wird es der einen oder anderen Zielgruppe gefallen. Doch kaum jemand wird verstehen, dass das Schmetterling-Icon „Speichern“ bedeutet. Ein Disketten-Icon ist dagegen längst mit dieser Funktion verknüpft – auch wenn das abgebildete Speichermedium an sich längst veraltet ist. Nutzende erwarten dieses Symbol und suchen fast schon instinktiv nach solchen bekannten Icons. Dementsprechend sollte man gängige Zeichenkonventionen berücksichtigen und sich im Sinne einer guten User Experience und einer intuitiv verständlichen grafischen Benutzeroberfläche nicht unüberlegt über sie hinwegsetzen.

Das Beispiel zeigt: Man muss als Webdesignerin oder Webdesigner stets den Spagat zwischen Ästhetik und Funktionalität meistern, um mit einem Produkt erfolgreich zu sein. Die Optimierung des UI ist wichtig, um den Nutzenden immer das bestmögliche Erlebnis zu bieten. Daraus resultieren letztlich je nach Ausrichtung der Website oder Software mehr Conversions oder Empfehlungen des Produkts.

Welche Bedeutung hat die grafische Benutzeroberfläche für SEO?

Eine gute grafische Benutzeroberfläche wirkt sich positiv auf Ihr Ranking aus. Finden sich Nutzende auf Ihrer Website zurecht, dann fühlen sie sich wohl und verbringen mehr Zeit dort – ein wichtiger Faktor, da Suchmaschinen inzwischen auch anhand der Verweildauer erkennen, wie relevant eine Seite für die jeweilige Suchanfrage war. Daher sollten Sie sich bei der Gestaltung der GUI Ihrer Website stets in die Besuchenden hineinversetzen, die Ihren Webauftritt zum ersten Mal aufrufen. Finden diese sich beim ersten Besuch nicht zurecht, verlassen sie die Seite schnell und suchen nach besser zu bedienenden Alternativen. Demnach lautet das entscheidende Stichwort hier ebenso wie bei der Softwareentwicklung: intuitive Navigation.

Eine gute Navigationsstruktur erreichen Sie beispielsweise über sinnvolle interne Links, über die sich die Besuchenden durch Ihre Website klicken können. Diesen Links folgen auch die Webcrawler der Suchmaschinen. Ein Pfad sollte dabei stets übersichtlich und nicht zu lang sein. Eine sinnvolle Maßnahme ist beispielsweise eine sogenannte Breadcrumb-Navigation (deutsch: „Brotkrümel-Navigation“): Sie macht das UI wesentlich benutzungsfreundlicher, da Besuchende immer genau im Blick behalten, wo sie sich auf der Seite konkret befinden und wohin sie gegebenenfalls zurückkehren können.

User Interface: Best Practices aus dem Webdesign

Da es zahlreiche Arten von User Interfaces gibt, würde es den Rahmen sprengen, für jede einzelne Gattung Best Practices aufzulisten. Die folgenden Beispiele aus dem Webdesign verdeutlichen aber grundlegende Richtlinien für ein intuitives UI und veranschaulichen, wie die Umsetzung in der Praxis aussehen kann.

Evernote

Evernote ist ein Programm zum Erstellen von Notizen. Diese lassen sich leicht synchronisieren, sodass Anwenderinnen und Anwender von jedem Gerät aus auf ihre notierten Ideen zugreifen können. Die grafische Benutzeroberfläche der Startseite verdichtet sehr elegant Features, Anwendungsgebiete und Vorteile und macht den Einstieg denkbar einfach.

Das Registrierungsformular ist schlicht gehalten. Es wird lediglich eine E-Mail-Adresse erfragt, abschließend soll das Passwort gesetzt werden. Alternativ bietet Evernote die Registrierung über ein Google- oder Apple-Konto an, wodurch der Registrierungsaufwand bei den Nutzenden deutlich minimiert wird.

Evernote gibt es als native App für nahezu jede Plattform. Die grafische Benutzeroberfläche der Webanwendung ist responsiv und damit perfekt auf jede Bildschirmgröße abgestimmt. Auch diese UI-Design-Entscheidung bewirkt letztlich eine bessere User Experience, da die Anwendung immer und überall mit jedem Endgerät verwendet werden kann.

Google

Google kennt fast jeder: Einer der vielen Gründe dafür ist, dass das User Interface so simpel wie funktional und optisch ansprechend ist. Eine Suchleiste und zwei Buttons auf einem traditionell weiß gehaltenen Hintergrund reichen aus für eine der revolutionärsten Technologien der Computergeschichte. Überflüssige Designspielereien findet man ebenso wenig wie verschachtelte Menüs. Mit den Google-Doodles beweist das Unternehmen trotzdem einen Sinn für Humor und lockert das Design zu besonderen Anlässen auf. Natürlich ohne die Usability zu beeinträchtigen.

Die App-Icons für YouTube, News, Maps und Co. sind mit einem Klick ausgeklappt und schnell gefunden. Sie sind leicht verständlich, logisch und unterstreichen bildlich die Funktion der jeweiligen Einzelanwendungen. Sehr vorbildlich ist auch die Einbindung einer VUI-Schnittstelle: Google versteht Sprachsuchen praktischerweise auch über die mobile App. Wenn Sie Voice Match aktivieren, lernt der Assistant Ihre Stimme, um personalisierte Ergebnisse zu liefern.