Als User Interface (UI) bzw. Be­nut­zer­ober­flä­che be­zeich­net man den sicht­ba­ren und be­dien­ba­ren Teil einer Software oder Hardware. Ty­pi­scher­wei­se haben Sie hierfür Elemente wie Tasten, Menüs und Icons zur Verfügung. Es gibt al­ler­dings auch eine Reihe von al­ter­na­ti­ven Ober­flä­chen, die sich bei­spiels­wei­se per Text, Sprache oder Ge­hirn­ak­ti­vi­tät steuern lassen.

Was ist ein UI (User Interface)?

Ein User Interface (UI) (deutsch: „Be­nut­zer­ober­flä­che“) be­zeich­net die Ober­flä­che, über die Menschen mit Maschinen in­ter­agie­ren. Es ist die Schnitt­stel­le, die es Ihnen er­mög­licht, einen Computer zu bedienen, in einem On­line­shop eine Be­stel­lung zu tätigen oder eine App auf Ihrem Smart­phone zu bedienen. Dabei umfasst das User Interface sämtliche Be­dien­ele­men­te einer Ober­flä­che, die Nutzende sehen und mit denen sie agieren. Das kann von simplen text­ba­sier­ten Kom­man­do­zei­len bis zu aufwändig ge­stal­te­ten gra­fi­schen Be­nut­zer­ober­flä­chen reichen.

Das User Interface hat einen starken Einfluss auf den Be­dien­kom­fort einer Software oder Website. Beim Design eines UI geht es daher längst nicht mehr darum, eine zweck­dien­li­che Be­nut­zer­ober­flä­che zu schaffen, sondern auch um Ästhetik und einfache Be­dien­bar­keit. Die User Ex­pe­ri­ence ist zu einem zentralen Fokus innerhalb des UI-Designs geworden. Ziel eines jeden Web­de­si­gners ist es, mit einem intuitiv be­dien­ba­ren User Interface den Grund­stein für eine gute User Ex­pe­ri­ence zu legen. Das funk­tio­niert über eine grafische Be­nut­zer­ober­flä­che meist am besten. Aber auch andere in­no­va­ti­ve Arten von UIs er­leich­tern zunehmend die In­ter­ak­ti­on mit Computern und anderen Geräten.

Profi-Website in Sekunden dank KI.
  • Profi-Website in Sekunden dank KI
  • Aus tausenden Vorlagen auswählen
  • 30 Tage kostenlos testen

Welche Arten von UIs gibt es?

Seit der Erfindung des Computers wurden immer fort­schritt­li­che­re Methoden der Mensch-Maschinen-In­ter­ak­ti­on ent­wi­ckelt. So gibt es mitt­ler­wei­le mehrere un­ter­schied­li­che Arten von User In­ter­faces. Am Anfang dieser Ent­wick­lung standen simple Command Line In­ter­faces (CLI), doch zahl­rei­che tech­ni­sche In­no­va­tio­nen wie Natural User In­ter­faces (NUI) führten zu einer leich­te­ren bzw. di­rek­te­ren Be­dien­bar­keit. In der folgenden Tabelle finden Sie einen Überblick über die wich­tigs­ten UI-Methoden, bevor diese einzeln vor­ge­stellt werden.

UI-Methode Be­schrei­bung Anwendung
Command Line Interface (CLI) Eine text­ba­sier­te Be­nut­zer­ober­flä­che, bei der die In­ter­ak­ti­on über Tas­ta­tur­ein­ga­ben erfolgt. MS-DOS, cmd.exe in Windows
Text User Interface (TUI) Eine text­ba­sier­te Schnitt­stel­le, die den Bild­schirm flächig nutzt und eine größere Zei­chen­an­zahl als CLI erlaubt. Boot­loa­der, BIOS-Setup
Graphical User Interface (GUI) Eine grafische Be­nut­zer­ober­flä­che, die durch Symbole und visuelle Steue­rungs­ele­men­te bedient wird. Windows, macOS, Websites
Voice User Interface (VUI) Eine sprach­ge­steu­er­te Be­nut­zer­ober­flä­che, die In­ter­ak­tio­nen über ge­spro­che­ne Befehle er­mög­licht. Siri, Google Assistant, Copilot
Natural User Interface (NUI) Eine Schnitt­stel­le, die auf Gesten, Be­we­gun­gen, Sprache und Ob­jekt­er­ken­nung reagiert. Smart­phones, Smart­wat­ches, Tablets, Konsolen
Ge­ne­ra­ti­ve User Interface (GenUI) KI-gestützte Be­nut­zer­ober­flä­che, die dynamisch in Echtzeit erzeugt oder angepasst wird. In­tel­li­gen­te An­wen­dun­gen, adaptive Da­sh­boards und AI-Native In­ter­faces

Command Line In­ter­faces (CLI)

Am Anfang war nicht nur die Erde, sondern auch das UI wüst und leer. Lediglich eine Kom­man­do­zei­le und ein Prompt zur Anzeige der aktuellen Position bzw. eine Ein­ga­be­auf­for­de­rung zierte den dunklen Bild­schirm bei­spiels­wei­se der ersten MS-DOS-Computer. Via Be­fehls­ein­ga­be kom­mu­ni­zier­te man über ein Command Line Interface mit dem Computer. Dieser zeigt nach der Ver­ar­bei­tung der Anfrage das Ergebnis an – natürlich ebenfalls in Textform. Diese Form des User In­ter­faces gilt in­zwi­schen als veraltet, kommt aber bei­spiels­wei­se noch bei der cmd.exe in Windows-Be­triebs­sys­te­men zur Anwendung – wobei sich die Syntax noch weit­ge­hend an dem DOS-Urahnen ori­en­tiert. Die Steuerung über ein CLI erfolgt aus­schließ­lich über die Tastatur; eine Maus kommt dabei nicht zum Einsatz.

Zu­sam­men­ge­fasst:

CLI ist die erste Methode zur Bedienung des UI.

Mit einer text­ba­sier­ten Be­nut­zer­ober­flä­che wird die In­ter­ak­ti­on über Tas­ta­tur­ein­ga­ben gesteuert.

Eingaben werden in einer Kom­man­do­zei­le ein­ge­tra­gen und aus­ge­führt (zei­len­ori­en­tiert).

Text User Interface (TUI)

Etwas kom­for­ta­bler sind Text User In­ter­faces. Auch hier läuft die In­ter­ak­ti­on mit dem Computer aus­schließ­lich via Tastatur ab. Das TUI markiert dabei den Übergang von reinen Command Line In­ter­faces zu gra­fi­schen Be­nut­zer­ober­flä­chen. Der Begriff eta­blier­te sich nach der Ent­wick­lung der gra­fi­schen Be­nut­zer­ober­flä­chen, damit man Text User In­ter­faces fortan be­griff­lich von CLIs und gra­fi­schen Be­nut­zer­ober­flä­chen abgrenzen konnte.

Der Un­ter­schied zu CLIs besteht darin, dass die Schnitt­stel­le den Bild­schirm flächig und nicht zei­len­ori­en­tiert nutzt. Dennoch wird die Schnitt­stel­le weiterhin im Textmodus aus­ge­führt. Ty­pi­scher­wei­se stehen hier 256 Zeichen zur Verfügung. Zum Einsatz kommen TUIs heute noch bei­spiels­wei­se bei Boot­loa­dern oder BIOS-Setup-Pro­gram­men.

Zu­sam­men­ge­fasst:

TUIs sind text­ba­sier­te Schnitt­stel­len, die den Bild­schirm flächig nutzen und eine größere Zei­chen­an­zahl als CLIs erlauben (zei­chen­ori­en­tiert).

Graphical User In­ter­faces (GUI)

GUIs (Graphical User In­ter­faces), also grafische Be­nut­zer­ober­flä­chen, sind heut­zu­ta­ge der eta­blier­te Standard. Software wird heut­zu­ta­ge über grafische Steu­er­ele­men­te und Sym­bol­bil­der bedient, die ge­stal­te­risch häufig an Ge­gen­stän­de aus der „echten Welt“ angelehnt sind. Meist nutzen die Userinnen und User Maus und Tastatur als Steu­er­ge­rät, immer häufiger aber auch Touch­screens, die auf Be­rüh­run­gen reagieren. Mit der gra­fi­schen Be­nut­zer­ober­flä­che zogen auch Elemente wie der Desktop, einzelne Fenster oder der Pa­pier­korb in die digitale Welt ein. Mit der Maus oder einer Berührung auf dem Touch­screen werden die ge­wünsch­ten Elemente aus­ge­wählt und durch simples Klicken be­zie­hungs­wei­se Antippen geöffnet.

Das grafische Design lehnt sich dabei meist an das tra­di­tio­nell-analoge Büro an. Die Folge: Sämtliche Elemente lassen sich leicht iden­ti­fi­zie­ren und die Bedienung geht in­tui­ti­ver von der Hand als über die Be­fehls­lis­te eines Command Line In­ter­faces. Selbst Neulinge verstehen die Funk­tio­nen der Icons schnell, denn weder ein Pa­pier­korb noch ein Brief bedürfen zu­sätz­li­cher Er­läu­te­run­gen, um ver­stan­den zu werden. Diese Form der Symbolik ist für User In­ter­faces in­zwi­schen ebenso Standard geworden wie die GUIs selbst: So gibt es kaum ein Gra­fik­pro­gramm, dessen Werkzeug-Icons nicht auf Objekte der realen Welt verweisen.

Zu­sam­men­ge­fasst:

GUIs sind heut­zu­ta­ge Standard.

GUI be­schreibt eine grafische Be­nut­zer­ober­flä­che, bei der die Bedienung über ein Klicken oder Antippen gra­fi­scher Symbole funk­tio­niert.

Voice User Interface (VUI)

Auch wenn grafische Be­nut­zer­ober­flä­chen nahezu überall zum Einsatz kommen, hat die Ent­wick­lung der User In­ter­faces mit GUIs noch längst kein Ende gefunden: Mit dem Voice User Interface ist die In­ter­ak­ti­on mit Maschinen auch über die Sprach­steue­rung möglich. Jedes gängige Be­triebs­sys­tem bietet in­zwi­schen ein solches UI auf die ein oder andere Weise an: Apple kommt mit der Siri-Sprach­as­sis­tenz und auch die Google-Suche funk­tio­niert in­zwi­schen über Sprach­ein­ga­be. Dadurch, dass An­wen­dun­gen per Sprech­be­fehl geöffnet oder ge­spro­che­ne Texte au­to­ma­tisch ver­schrift­licht werden, können An­wen­den­de ef­fek­ti­ver arbeiten. Ein weiterer Vorteil: Sprach­steue­rung sorgt für mehr Bar­rie­re­frei­heit.

Zu­sam­men­ge­fasst:

VUIs bieten eine sprach­ge­steu­er­te Be­nut­zer­ober­flä­che, die In­ter­ak­tio­nen über ge­spro­che­ne Befehle er­mög­licht.

VUIs dienen der Bar­rie­re­frei­heit.

Natural User Interface (NUI)

Besonders intuitiv verläuft die Kom­mu­ni­ka­ti­on mit der Maschine über ein Natural User Interface: Das NUI kann als eine Wei­ter­ent­wick­lung der gra­fi­schen Be­nut­zer­ober­flä­che und des Voice User In­ter­faces be­trach­tet werden: Die in­ter­ak­ti­ve Be­dien­ober­flä­che reagiert sowohl auf Gesten als auch auf Bewegung und Sprache. Darüber hinaus setzt sie auch auf Gesichts- und Ob­jekt­er­ken­nung. Ver­schie­de­ne Sensoren, Kameras und Mikrofone er­mög­li­chen die Kom­mu­ni­ka­ti­on mit der Maschine auf un­ter­schied­lichs­ten Wegen.

Viele aktuelle Smart­phones und Tablets setzen zunehmend auf NUI-Tech­no­lo­gien, aber auch Nintendos Wii-Konsole macht sich die Gesten- und Be­we­gungs­er­ken­nung spie­le­risch zunutze. Auch viele Smart­wat­ches und Geräte bzw. An­wen­dun­gen mit Augmented Reality (AR) bzw. Virtual Reality (VR) arbeiten mit Natural-User-Interface-Tech­no­lo­gien. Ges­ten­steue­rung, Sprach­er­ken­nung und sogar Ge­sichts­er­ken­nung gehören zu den Schlüs­sel­funk­tio­nen dieser Geräte, die die In­ter­ak­ti­on mit der Tech­no­lo­gie noch in­tui­ti­ver machen. Immer häufiger werden NUIs auch durch den Einsatz von KI ergänzt, um gestische und sprach­li­che Eingaben noch präziser zu in­ter­pre­tie­ren und mit der phy­si­schen Welt zu in­ter­agie­ren, was zu einer noch in­tui­ti­ve­ren und dy­na­mi­sche­ren Be­nut­zer­er­fah­rung führt.

Zu­sam­men­ge­fasst:

NUI er­mög­li­chen eine einfache Bedienung, die auf Gesten, Be­we­gun­gen, Sprache und Ob­jekt­er­ken­nung basiert.

NUI werden oft mit KI-Tech­no­lo­gien ergänzt und optimiert.

Hinweis

Im Jahr 2011 sorgte eine NUI-Pro­jekt­vor­stel­lung von Microsoft für Aufsehen: Unter dem Namen OmniTouch wurde eine Tech­no­lo­gie ent­wi­ckelt, die es möglich macht, Touch­screens auf jede er­denk­li­che Ober­flä­che zu pro­ji­zie­ren. OmniTouch basiert dabei auf Mi­cro­softs Be­we­gungs­steue­rung Kinect, die für die Xbox 360 als Kon­kur­renz zu Nintendos Wii auf den Markt gebracht wurde. Darüber hinaus kommen ein la­ser­ba­sier­ter Projektor und eine Spe­zi­al­ka­me­ra zum Einsatz.

Ge­ne­ra­ti­ve User In­ter­faces (GenUI)

Ein ge­ne­ra­ti­ves User Interface (oft auch GenUI genannt) be­zeich­net eine neue Form von Be­nut­zer­ober­flä­che, bei der künst­li­che In­tel­li­genz Teile der Be­nut­zer­ober­flä­che dynamisch in Echtzeit generiert oder anpasst. Das bedeutet, dass sich Layouts, Kom­po­nen­ten oder Funk­tio­nen au­to­ma­tisch verändern, je nachdem, was der oder die Nutzende gerade tut oder benötigt. Anders als klas­si­sche statische UIs, die für viele Nut­ze­rin­nen und Nutzer gleich aussehen, kann ein ge­ne­ra­ti­ves UI per­so­na­li­siert, kon­text­sen­si­tiv und situativ angepasst werden, sodass zum Beispiel relevante In­for­ma­tio­nen, Schalt­flä­chen oder Ansichten genau dann angezeigt werden, wenn sie gebraucht werden.

Zu­sam­men­ge­fasst:

GenUIs sind dynamisch ge­ne­rier­te Be­nut­zer­ober­flä­chen, die mit künst­li­cher In­tel­li­genz arbeiten.

Sie lernen aus Daten und In­ter­ak­tio­nen, um die Ober­flä­che kon­text­sen­si­tiv, in­di­vi­du­ell und adaptiv zu gestalten.

Ge­ne­ra­ti­ve UIs ver­schie­ben den Fokus vom festen Design hin zu maß­ge­schnei­der­ten Er­leb­nis­sen.

Welche be­son­de­ren Arten von UIs gibt es?

Neben diesen im Alltag ge­bräuch­li­chen Formen von UIs gibt es einige „Exoten“ und In­no­va­tio­nen, die den Mas­sen­markt noch nicht erreicht haben: So etwa das Tangible User Interface, das auch mit TUI abgekürzt wird, das Per­cep­tu­al User Interface (PUI) oder das Brain Computer Interface (BCI). In der an­schlie­ßen­den Tabelle erhalten Sie einen Überblick zu diesen UIs, bevor sie einzeln vor­ge­stellt werden.

UI-Methode Be­schrei­bung Anwendung
Tangible User Interface (TUI) Eine physische Be­nut­zer­ober­flä­che, bei der In­ter­ak­tio­nen über echte Objekte wie Würfel oder Kugeln erfolgen. Museums- und Mes­se­instal­la­tio­nen
Per­cep­tu­al User Interface (PUI) Eine wahr­neh­mungs­ge­steu­er­te Be­nut­zer­ober­flä­che, die ver­schie­de­ne Sinne kom­bi­niert, z. B. visuelle und gestische Eingaben. For­schungs­pro­jek­te, aktuelle Ent­wick­lun­gen
Brain Computer Interface (BCI) Eine Schnitt­stel­le, die Hirn­strö­me misst und diese in Steu­er­be­feh­le übersetzt. Forschung zur Steuerung von Prothesen und Maschinen durch Gedanken

Tangible User Interface

Tangible User In­ter­faces (ebenfalls TUI abgekürzt, nicht zu ver­wech­seln mit Text User Interface) sind ge­gen­ständ­li­che bzw. an­fass­ba­re Be­nut­zer­schnitt­stel­len. Das heißt, die In­ter­ak­ti­on mit der Maschine geschieht über physische Ge­gen­stän­de. Würfel, Kugeln oder andere Objekte werden dazu vom Menschen ma­ni­pu­liert (gedreht, gedrückt o. Ä.), wodurch Me­cha­nis­men ausgelöst oder digitale In­for­ma­tio­nen abgerufen werden. Zum Einsatz kommen Tangible User In­ter­faces häufig in Museen oder auf Messen.

Per­cep­tu­al User In­ter­faces

Die Ent­wick­lung von Per­cep­tu­al User In­ter­faces (PUI) steckt noch in den Kin­der­schu­hen, wird von der Wis­sen­schaft aber zunehmend vor­an­ge­trie­ben. Dabei handelt es sich um eine wahr­neh­mungs­ge­steu­er­te Be­nut­zer­ober­flä­che, also um eine Ver­bin­dung von VUI, GUI und einer elek­tro­ni­schen Ges­ten­er­ken­nung.

Brain Computer In­ter­faces

Auch Brain Computer In­ter­faces (BCI) sind längst keine Science-Fiction mehr: Mithilfe von Elek­tro­den werden Hirn­strö­me gemessen und von Al­go­rith­men in Steu­er­be­feh­le übersetzt. Erste Erfolge konnte die Forschung bereits feiern und es bei­spiels­wei­se einer gelähmten Patientin in den USA er­mög­li­chen, einen Ro­bo­ter­arm mit ihren Gedanken zu steuern. BCIs könnten dem­entspre­chend ir­gend­wann die bar­rie­re­freie Bedienung von Computern oder anderen Maschinen re­vo­lu­tio­nie­ren.

Wie können Sie Ihr User Interface op­ti­mie­ren?

Alle, die sich mit Webdesign befassen, sollten sich auch mit dem Thema UI aus­ein­an­der­set­zen: Denn wenn Sie Nutzende Ihrer App, Be­su­chen­de Ihrer Website be­geis­tern oder mit Ihrem On­line­shop er­folg­reich 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 Ziel­grup­pe zu iden­ti­fi­zie­ren, damit Sie das UI und die damit ein­her­ge­hen­de User Ex­pe­ri­ence möglichst passend gestalten können. Funk­tio­na­li­tät, Be­dien­kom­fort und Ästhetik Ihres Produkts sind ent­schei­den­de Kriterien für eine gute User Ex­pe­ri­ence.

Schritt 1: Be­nut­zer­freund­lich­keit op­ti­mie­ren

Um Ihre UX zu op­ti­mie­ren, sollte Ihr Fokus zunächst auf der gra­fi­schen Be­nut­zer­ober­flä­che liegen. Dabei müssen Sie stets die Usability, also die Effizienz, Ef­fek­ti­vi­tät und Zu­frie­den­heit der Nutzenden, im Blick haben: Denn ist eine App oder eine Website schwer zu bedienen, wird auch ein äs­the­tisch an­spre­chen­des Design nicht vom Angebot über­zeu­gen.

Um Ihre Website oder App zu op­ti­mie­ren, sind in der Regel aus­führ­li­che Tests notwendig. Studien mit Userinnen und Usern können ebenso wie tech­ni­sche Messungen via Heatmap-Analyse hilf­rei­che Er­kennt­nis­se liefern. Dabei wird die Usability vi­sua­li­siert: Das Nut­zungs­ver­hal­ten wird durch Click-, Scroll-, Mouse-Movement- oder Eye-Tracking nach­ver­folgt und in farb­li­chen Ab­stu­fun­gen auf­ge­zeich­net.

Schritt 2: Optischer Fein­schliff

Nachdem nun die Funk­tio­na­li­tät und der Be­dien­kom­fort ge­währ­leis­tet sind, können Sie sich im nächsten Schritt der Ästhetik Ihres Projekts widmen. Hier gilt: Weniger ist meist mehr. Das Design sollte die Funk­tio­na­li­tät der gra­fi­schen Be­nut­zer­ober­flä­che un­ter­stüt­zen und dem­entspre­chend klar und struk­tu­riert sein. Das bedeutet nicht, dass man sich als Designer nicht auch austoben darf! Es gilt dabei nur, die Nut­zungs­ge­wohn­hei­ten der Ziel­grup­pe zu kennen und die Funk­tio­na­li­tät durch das Design nicht ein­zu­schrän­ken.

Warum sind intuitive UIs im Webdesign und der Soft­ware­ent­wick­lung so wichtig?

Warum aber ist ein in­tui­ti­ves UI so wichtig? Ein simples Beispiel: Ein Schmet­ter­lings­zei­chen mag hübsch sein und mit hoher Wahr­schein­lich­keit wird es der einen oder anderen Ziel­grup­pe gefallen. Doch kaum jemand wird verstehen, dass das Schmet­ter­ling-Icon „Speichern“ bedeutet. Ein Disketten-Icon ist dagegen längst mit dieser Funktion verknüpft – auch wenn das ab­ge­bil­de­te Spei­cher­me­di­um an sich längst veraltet ist. Nutzende erwarten dieses Symbol und suchen fast schon in­stink­tiv nach solchen bekannten Icons. Dem­entspre­chend sollte man gängige Zei­chen­kon­ven­tio­nen be­rück­sich­ti­gen und sich im Sinne einer guten User Ex­pe­ri­ence und einer intuitiv ver­ständ­li­chen gra­fi­schen Be­nut­zer­ober­flä­che nicht un­über­legt über sie hin­weg­set­zen.

Das Beispiel zeigt: Man muss als Web­de­si­gne­rin oder Web­de­si­gner stets den Spagat zwischen Ästhetik und Funk­tio­na­li­tät meistern, um mit einem Produkt er­folg­reich zu sein. Die Op­ti­mie­rung des UI ist wichtig, um den Nutzenden immer das best­mög­li­che Erlebnis zu bieten. Daraus re­sul­tie­ren letztlich je nach Aus­rich­tung der Website oder Software mehr Con­ver­si­ons oder Emp­feh­lun­gen des Produkts.

Tipp

Über die GUI hinaus lohnt sich zudem die In­te­gra­ti­on weiterer Be­nut­zer­schnitt­stel­len: Ist bei­spiels­wei­se eine Sprach­steue­rung der App möglich oder ein Notebook auch via Touch­screen bedienbar, sorgt das für mehr Bar­rie­re­frei­heit und führt zu einer besseren User Ex­pe­ri­ence. Nutzende haben so mehr Mög­lich­kei­ten, das Produkt zu bedienen. Das sorgt für eine größere Fle­xi­bi­li­tät und erhöht auch die Reich­wei­te des Produkts.

Welche Bedeutung hat die grafische Be­nut­zer­ober­flä­che für SEO?

Eine gute grafische Be­nut­zer­ober­flä­che wirkt sich positiv auf Ihr Ranking aus. Finden sich Nutzende auf Ihrer Website zurecht, dann fühlen sie sich wohl und ver­brin­gen mehr Zeit dort – ein wichtiger Faktor, da Such­ma­schi­nen in­zwi­schen auch anhand der Ver­weil­dau­er erkennen, wie relevant eine Seite für die jeweilige Such­an­fra­ge war. Daher sollten Sie sich bei der Ge­stal­tung der GUI Ihrer Website stets in die Be­su­chen­den hin­ein­ver­set­zen, die Ihren Web­auf­tritt zum ersten Mal aufrufen. Finden diese sich beim ersten Besuch nicht zurecht, verlassen sie die Seite schnell und suchen nach besser zu be­die­nen­den Al­ter­na­ti­ven. Demnach lautet das ent­schei­den­de Stichwort hier ebenso wie bei der Soft­ware­ent­wick­lung: intuitive Na­vi­ga­ti­on.

Eine gute Na­vi­ga­ti­ons­struk­tur erreichen Sie bei­spiels­wei­se über sinnvolle interne Links, über die sich die Be­su­chen­den durch Ihre Website klicken können. Diesen Links folgen auch die Web­craw­ler der Such­ma­schi­nen. Ein Pfad sollte dabei stets über­sicht­lich und nicht zu lang sein. Eine sinnvolle Maßnahme ist bei­spiels­wei­se eine so­ge­nann­te Bread­crumb-Na­vi­ga­ti­on (deutsch: „Brot­krü­mel-Na­vi­ga­ti­on“): Sie macht das UI we­sent­lich be­nut­zungs­freund­li­cher, da Be­su­chen­de immer genau im Blick behalten, wo sie sich auf der Seite konkret befinden und wohin sie ge­ge­be­nen­falls zu­rück­keh­ren können.

User Interface: Best Practices aus dem Webdesign

Da es zahl­rei­che Arten von User In­ter­faces gibt, würde es den Rahmen sprengen, für jede einzelne Gattung Best Practices auf­zu­lis­ten. Die folgenden Beispiele aus dem Webdesign ver­deut­li­chen aber grund­le­gen­de Richt­li­ni­en für ein in­tui­ti­ves UI und ver­an­schau­li­chen, wie die Umsetzung in der Praxis aussehen kann.

Evernote

Evernote ist ein Programm zum Erstellen von Notizen. Diese lassen sich leicht syn­chro­ni­sie­ren, sodass An­wen­de­rin­nen und Anwender von jedem Gerät aus auf ihre notierten Ideen zugreifen können. Die grafische Be­nut­zer­ober­flä­che der Start­sei­te ver­dich­tet sehr elegant Features, An­wen­dungs­ge­bie­te und Vorteile und macht den Einstieg denkbar einfach.

Bild: Registrierungsformular von Evernote
Das Re­gis­trie­rungs­for­mu­lar von Evernote ist schlicht und einfach in der Anwendung. Quelle: https://evernote.com/de-de

Das Re­gis­trie­rungs­for­mu­lar ist schlicht gehalten. Es wird lediglich eine E-Mail-Adresse erfragt, ab­schlie­ßend soll das Passwort gesetzt werden. Al­ter­na­tiv bietet Evernote die Re­gis­trie­rung über ein Google- oder Apple-Konto an, wodurch der Re­gis­trie­rungs­auf­wand bei den Nutzenden deutlich minimiert wird.

Evernote gibt es als native App für nahezu jede Plattform. Die grafische Be­nut­zer­ober­flä­che der Web­an­wen­dung ist responsiv und damit perfekt auf jede Bild­schirm­grö­ße ab­ge­stimmt. Auch diese UI-Design-Ent­schei­dung bewirkt letztlich eine bessere User Ex­pe­ri­ence, 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 funk­tio­nal und optisch an­spre­chend ist. Eine Such­leis­te und zwei Buttons auf einem tra­di­tio­nell weiß ge­hal­te­nen Hin­ter­grund reichen aus für eine der re­vo­lu­tio­närs­ten Tech­no­lo­gien der Com­pu­ter­ge­schich­te. Über­flüs­si­ge De­sign­spie­le­rei­en findet man ebenso wenig wie ver­schach­tel­te Menüs. Mit den Google-Doodles beweist das Un­ter­neh­men trotzdem einen Sinn für Humor und lockert das Design zu be­son­de­ren Anlässen auf. Natürlich ohne die Usability zu be­ein­träch­ti­gen.

Bild: Screenshot der Website von Google Deutschland
Das UI-Design von Google ist reduziert und eingängig, die App-Icons sind leicht ver­ständ­lich und sogar eine Sprach­su­che ist in­zwi­schen Be­stand­teil des User In­ter­faces. Quelle: https://www.google.com/?hl=de

Die App-Icons für YouTube, News, Maps und Co. sind mit einem Klick aus­ge­klappt und schnell gefunden. Sie sind leicht ver­ständ­lich, logisch und un­ter­strei­chen bildlich die Funktion der je­wei­li­gen Ein­zel­an­wen­dun­gen. Sehr vor­bild­lich ist auch die Ein­bin­dung einer VUI-Schnitt­stel­le: Google versteht Sprach­su­chen prak­ti­scher­wei­se auch über die mobile App. Wenn Sie Voice Match ak­ti­vie­ren, lernt der Assistant Ihre Stimme, um per­so­na­li­sier­te Er­geb­nis­se zu liefern.

Zum Hauptmenü