Benutzerschnittstelle (User Interface, UI)

Was ist eine Benutzeroberfläche (User Interface, UI)?

Die Benutzeroberfläche (UI) ist der Punkt der Interaktion und Kommunikation zwischen Mensch und Computer. Dazu können Bildschirme, Tastaturen, eine Maus und das Aussehen eines Desktops gehören. Sie ist auch die Art und Weise, wie ein Benutzer mit einer Anwendung oder einer Website interagiert, indem er visuelle und akustische Elemente wie Schriftarten, Symbole, Schaltflächen, Animationen und Töne verwendet.

Eine gute Benutzeroberfläche hält sich an Designprinzipien, die es den Benutzern ermöglichen, durch die Oberfläche zu navigieren und sie problemlos für die beabsichtigten Zwecke zu nutzen.

Viele Unternehmen sind in der Praxis auf Web- und Mobilanwendungen angewiesen. Dies hat dazu geführt, dass Unternehmen der Benutzeroberfläche immer mehr Bedeutung beimessen, um das Gesamterlebnis für den Benutzer zu verbessern. UI- und Webdesign umfassen nicht mehr nur harte Fertigkeiten wie Codierung. Sie erfordern auch Kenntnisse über Designmuster für die Benutzerinteraktion und Barrierefreiheit, um sicherzustellen, dass die Benutzeroberflächen für jedermann benutzerfreundlich und nicht übermäßig kompliziert sind.

Arten von Benutzeroberflächen

Zu den verschiedenen Arten von Benutzeroberflächen gehören die folgenden:

• Grafische Benutzeroberfläche (GUI). Web-UIs und andere digitale Produkte verfügen oft über GUIs mit grafischen Elementen wie Fenstern, Pulldown-Menüs, Schaltflächen, Bildlaufleisten und Symbolen. Bei vielen Anwendungen werden zunehmend multimediale Elemente in die GUI integriert, zum Beispiel Ton, Sprache, Bewegtbild und virtuelle Realität (VR).
• Befehlszeilenschnittstelle (CLI). CLIs sind für Entwickler gedacht, die Programmiersprachen wie Python, Pearl, C, C++, PowerShell und Bash verwenden. Es wird ein Befehl eingegeben, und die Schnittstelle führt die mit diesem Befehl verbundene Aufgabe aus.
• Menügesteuerte Benutzeroberfläche. Die visuellen Elemente in einer menügesteuerten Benutzeroberfläche ermöglichen es den Benutzern, aus verschiedenen Optionen auszuwählen, um das zu bekommen, was sie brauchen. Online-Einkaufsseiten sind ein Beispiel für diese Art von UI.
• Touch-Benutzeroberfläche. Mit einem Touchscreen können Benutzer mit vielen Elementen einer Schnittstelle physisch interagieren.
• Sprachgesteuerte Benutzeroberfläche (VUI). VUIs empfangen verbale Befehle oder Anfragen von Menschen und können entsprechend reagieren.
• Formularbasierte UI. Diese Schnittstelle bietet elektronische Formulare mit Funktionen wie Kontrollkästchen, über die Benutzer Antworten und Formulare einreichen können.
• Natürliche Sprache UI. Diese Art von Benutzerschnittstelle versteht natürliche Sprache und kann mit Menschen kommunizieren und auf eine menschenähnliche Weise reagieren. Apples Siri und Amazons Alexa sind Beispiele für Geräte, die über natürlichsprachliche Benutzeroberflächen verfügen. Eine natürlichsprachliche Schnittstelle unterscheidet sich von einer natürlichen Benutzerschnittstelle, die sich auf die Schaffung von Interaktionen konzentriert, die kein Erlernen einer künstlichen Steuerung, wie das Tippen auf einer Tastatur, erfordern.
• Mobile UI. Die Popularität mobiler Anwendungen führte zur Entwicklung der mobilen UI. Sie befasst sich mit der Erstellung benutzbarer, interaktiver Schnittstellen auf den kleineren Bildschirmen von Smartphones und Tablets und der Verbesserung spezieller Funktionen wie der Touch-Steuerung.

Beispiele für Benutzeroberflächen

Eine Vielzahl von Geräten kann als Benutzeroberfläche dienen oder Teil einer Benutzeroberfläche sein. Beispiele hierfür sind die folgenden:

• Computermaus. Eine Computermaus ist ein Gerät, das als Punkt der Mensch-Computer-Interaktion dient. Benutzer interagieren auf diese Weise mit Software oder Webseiten.
• Fernbedienung. Wie die Computermaus sind Fernbedienungen ein Mittel zur drahtlosen Steuerung und Interaktion mit Bildschirmelementen.
• Virtuelle Realität (VR). Bei VR-Anwendungen interagieren Menschen durch körperliche Bewegung mit einem Computer. Das Computergerät erkennt die Bewegungen als Befehle zur Ausführung bestimmter Aufgaben.
• Automatische Geldautomaten. Benutzer interagieren mit visuellen Elementen auf dem Bildschirm eines Geldautomaten, um Transaktionen oder andere Aufgaben zu erledigen.
• Geschwindigkeitsmesser. Ein Tachometer liefert dem menschlichen Benutzer Informationen über die Geschwindigkeit seines Fahrzeugs auf dem Armaturenbrett des Fahrzeugs.
• iPod-Klickräder. Die Benutzer interagieren mit den Bildschirmelementen eines iPods über ein Klickrad, mit dem sie beispielsweise eine lange Liste von Liedern durchsuchen können.

Webseiten wie Airbnb, Dropbox und Virgin America zeichnen sich durch eine gute Benutzeroberfläche und ein ansprechendes Design aus. Websites wie diese haben ein angenehmes, einfach zu bedienendes, benutzerzentriertes Design, das sich auf den Benutzer und seine Bedürfnisse konzentriert. Mobile first wird zunehmend zu einer Handlungsaufforderung für das Design von Websites, da viele Benutzer Inhalte auf mobilen Geräten und nicht auf Desktop-Computern ansehen. Bestimmte Best Practices für die Gestaltung mobiler Websites bieten einen guten Ausgangspunkt, um diesen Anforderungen gerecht zu werden.

Design der Benutzeroberfläche

Der Prozess des UI-Designs umfasst mehrere Schritte, darunter die folgenden:

• Ermitteln Sie die Bedürfnisse der Endbenutzer. Eine Benutzeroberfläche hat immer einen bestimmten Zweck, und ihr Design muss letztlich den Bedürfnissen der Zielgruppe der Benutzer entsprechen.
• Untersuchen Sie vorhandene Funktionen. Bei der Gestaltung der Benutzeroberfläche kann das, was andere tun, ein guter Ausgangspunkt sein.
• Erstellen Sie Skizzen. Dies umfasst die Erstellung von Low-Fidelity-Zeichnungen, um eine Vision davon zu entwerfen, wie die endgültige Benutzeroberfläche aussehen könnte.
• Erstellen Sie einen Wireframe. In diesem Schritt werden detailliertere visuelle Darstellungen der Benutzeroberfläche erstellt, einschließlich der Frage, wo und wie die Komponenten zusammengesetzt werden sollen.
• Komponenten entwerfen. UI-Entwickler müssen die UI-Komponenten einzeln entwerfen und sie dann zusammensetzen, bevor ein Prototyp erstellt und getestet wird.
• Erstellen eines Prototyps. Ein Prototyp einer Benutzeroberfläche hilft dabei, Probleme zu erkennen und die Funktionalität der verschiedenen Komponenten zu testen, um sicherzustellen, dass sie vor der Implementierung reibungslos funktionieren.
• Implementieren Sie die Benutzeroberfläche. In diesem Schritt wird die offizielle Version der Benutzeroberfläche in einer Produktionsumgebung freigegeben.
• Kontinuierliche Aktualisierungen. Benutzeroberflächen erfordern eine Fehlerbehebung, um Probleme zu identifizieren, die von den Benutzern festgestellt werden, und um Erweiterungen zur Verbesserung der Benutzeroberfläche zu implementieren.

Typische Elemente einer Benutzeroberfläche

Es gibt viele UI-Elemente, die Designer implementieren können, um die Benutzerfreundlichkeit der UI zu verbessern und den Benutzern gute Interaktionen zu ermöglichen. Nicht alle dieser interaktiven Elemente sind obligatorisch, aber jedes hat einen anderen Grund, und Designer können bei der Erstellung ihrer UI-Komponenten so viele Elemente wie nötig kombinieren. Dazu gehören die folgenden:

• Informationselemente. Über diese Komponenten erhalten die Benutzer wichtige Informationen und Aktualisierungen, zum Beispiel Benachrichtigungen, Fortschrittsbalken und Tool-Tips.
• Eingabe-Steuerelemente. Benutzer geben Informationen in eine Schnittstelle ein oder wählen Optionen aus vorgefertigten Listen aus, indem sie eine Vielzahl von Eingabesteuerungen wie Dropdown-Listen, Optionsfelder, Textfelder und Kontrollkästchen verwenden.
• Navigationskomponenten. Benutzer navigieren durch eine Benutzeroberfläche, um das zu finden, was sie suchen, indem sie Komponenten wie Suchfelder, Paginierung und Schubladennavigation verwenden, mit denen Benutzer leicht zwischen Webseiten wechseln können.

UI und UX im Vergleich

Die Benutzeroberfläche wird oft in Verbindung mit der Benutzererfahrung (User Experience, UX) genannt. UX umfasst das ästhetische Erscheinungsbild des verwendeten Geräts, die Reaktionszeit und den Inhalt, der dem Benutzer im Kontext der Benutzeroberfläche präsentiert wird.

Beide Begriffe fallen unter das Konzept der Mensch-Computer-Interaktion, das sich mit der Entwicklung von Computertechnologie und der Interaktion zwischen Menschen und allen Formen des IT-Designs befasst. Im Einzelnen befasst sich die Mensch-Computer-Interaktion mit Bereichen wie nutzerzentriertes Design, UI-Design und UX-Design.

Die zunehmende Konzentration auf die Schaffung eines optimierten Benutzererlebnisses mit Hilfe von Benutzerforschung und responsivem Design hat dazu geführt, dass einige IT-Interssierte eine Karriere als UX- und UI-Experten anstreben. Bestimmte Sprachen, wie die Hypertext Markup Language (HTML) und Cascading Style Sheets (CSS), unterstützen eine starke UI und UX.

Eine kurze Geschichte der Benutzerschnittstelle

Bei den ersten Computern waren die einzigen Benutzeroberflächen ein paar Tasten auf der Bedienerkonsole. Viele dieser Computer verwendeten Lochkarten, die mit Hilfe von Lochkartenstanzern erstellt wurden, als primäre Eingabemethode für Computerprogramme und Daten. Obwohl Lochkarten in der Computertechnik seit 2012 veraltet sind, verwenden einige Wahlmaschinen in den USA immer noch ein Lochkartensystem.

Die Benutzeroberfläche entwickelte sich mit der Einführung der Befehlszeilenschnittstelle, die zunächst als fast leerer Bildschirm mit einer Zeile für Benutzereingaben erschien. Die Benutzer waren auf eine Tastatur und eine Reihe von Befehlen angewiesen, um Informationen mit dem Computer auszutauschen. Die CLI entwickelte sich zu Menüs mit Listen von Auswahlmöglichkeiten in Textform.

Die erste grafische Benutzeroberfläche wurde hauptsächlich im Palo Alto Research Center von Xerox entwickelt. Apple förderte dann die GUI-Entwicklung, und Microsoft standardisierte sie in den 90er Jahren und bis heute in seinen Windows-Betriebssystemen. Andere, weniger bekannte Beispiele wurden parallel dazu entwickelt. Diese Entwicklungen haben gemeinsam die aktuellen Trends bei Benutzeroberflächen und Web-Design geprägt.