Was ist eine Benutzeroberfläche (User Interface)? Einfach ausgedrückt ist dies der Teil einer Anwendung oder Software, der für die Benutzerinteraktionen zuständig ist.
Wie funktioniert das Schnittstellendesign?
Es heißt, dass eine gut gestaltete Schnittstelle "unsichtbar" ist. Das bedeutet natürlich nicht, dass sie visuell nicht vorhanden ist, sondern dass sie als integrales, hilfreiches und bequemes Werkzeug wahrgenommen wird.
Das Thema Schnittstellendesign ist komplex. Sie kann nicht in einem oder zwei Artikeln beschrieben werden.
Es wurden viele Bücher über die Gestaltung von Schnittstellen geschrieben (z. B. Designing Interfaces: Patterns for Effective Interaction Design von Jennifer Tidwell), und es wurden viele Stunden an Schulungen vorbereitet. Deshalb ist dieser Artikel auch nur eine Einführung in das Thema Schnittstellendesign. Aber irgendwo muss man ja anfangen.
Wozu dient die Benutzeroberfläche?
Der Nutzer eines digitalen Produkts verwendet die Schnittstelle, um mit der Software zu interagieren. Es ist ein Werkzeug für die Kommunikation zwischen Mensch und Gerät. Sie dient der Kontrolle, der Durchführung von Aufgaben und der Erreichung von Zielen.
Wenn wir von Benutzeroberfläche sprechen, meinen wir in der Regel die grafische Benutzeroberfläche (Graphical User Interface). Sie ist jedoch nicht das einzige Mittel der Kommunikation zwischen Mensch und Gerät und Software.
So gibt es beispielsweise Befehlszeilenschnittstellen, textbasierte Benutzerschnittstellen und zunehmend verwendete Sprachschnittstellen.
Die grafische Benutzeroberfläche ist ein wesentlicher Bestandteil jeder Software, von Desktop-Programmen bis hin zu Web- und mobilen Anwendungen. Man darf jedoch nicht vergessen, dass sie nicht nur den Nutzern dienen, sondern auch zum Erreichen von Unternehmenszielen beitragen sollen.
Schnittstellen sind "unsichtbar" aufgrund ihrer Ästhetik, der Integration mit anderen Anwendungskomponenten, der Angemessenheit der einzelnen Funktionen und der Anpassung der Funktionsweise an die Bedürfnisse und Erwartungen der Nutzer.
Das UI Design, das Ihr Unternehmen braucht!
Wie sollte die grafische Benutzeroberfläche gestaltet sein?
Auf diese Frage gibt es wahrscheinlich so viele Antworten, wie es Schnittstellendesigner gibt. Aber es sind nicht ihre Vorlieben und Erwartungen, die von entscheidender Bedeutung sind.
Schnittstellen sollten benutzerorientiert sein, was sie in den meisten Fällen auch sind.
In der Praxis bedeutet dies, sie auf der Grundlage zuverlässiger und wiederholter Studien zu erstellen, um die Vorlieben und Erwartungen der Zielnutzer zu ermitteln.
Die beim Schnittstellendesign am häufigsten angewandten Forschungsmethoden sind direkte Beobachtungen der Benutzer anhand von Prototypen und Interviews.
Die Erstellung eines Schnittstellendesigns ist keine leichte Aufgabe, wie die Liste der Erwartungen an das Design beweist. Aus der Sicht des Benutzers sollte eine Schnittstelle in erster Linie sein:
- Effiziente.
- Verfügbar.
- Intuitiv.
- Visuell ansprechend, ästhetisch: Ästhetische Schnittstellen werden als benutzerfreundlicher wahrgenommen (Aesthetic Usability Effect).
- Funktionell.
- Zuverlässig.
- Hilfreich.
- Praktisch.
- Minimierung des kognitiven Aufwands und Verringerung der psychischen Energie, die für das Erlernen der Bedienung und Nutzung erforderlich ist.
Was sind die Komponenten einer grafischen Benutzeroberfläche?
Die Schnittstellen unterscheiden sich je nach Gerät sowie Art und Komplexität eines digitalen Produkts erheblich. Sie variieren je nach der Anzahl der Funktionen und dem Zweck, für den sie bestimmt sind.
Sie unterscheiden sich auch durch die Benutzer. So wird beispielsweise die Schnittstelle einer Anwendung für Senioren, Sehbehinderte oder Kinder anders gestaltet sein als für Personen ohne jegliche Einschränkungen.
Grundsätzlich können die Schnittstellenkomponenten einer der folgenden vier Kategorien zugeordnet werden:
- Eingabesteuerungen wie Dateneingabefelder, Kontrollkästchen (z. B. für Datum oder Ort), Dropdown-Listen, Schalter und Schaltflächen.
- Behälter, z. B. Akkordeons.
- Navigationskomponenten: Menü, Suchfeld, Schieberegler, Icons und Tags.
- Informationskomponenten: Fortschrittsbalken, Benachrichtigungen und Meldungsfenster.
Gestaltung der Benutzeroberfläche: Atomic Design
Wir bevorzugen eindeutig den Ansatz des Atomic Design, bei dem eine Schnittstelle aus Komponenten besteht.
Diese Komponenten führen bestimmte Aktionen aus und reagieren auf bestimmte Benutzer- und Systemanforderungen. Ein Textfeld dient z. B. zur Eingabe detaillierter Daten, z. B. des Vornamens.
Der von Brad Frost entwickelte Ansatz für das Design von Benutzeroberflächen ermöglicht es Ihnen, diese auf eine viel methodischere, organisiertere und durchdachtere Weise zu erstellen. Atomic Design erleichtert die Erstellung der Hierarchie der Komponenten.
Brad Frost schlug eine von der Chemie und den Atomen inspirierte Methode vor, die die Struktur, die Beziehungen und die gegenseitigen Abhängigkeiten in der materiellen Welt widerspiegelt.
Um ein komplexeres System, einen Organismus oder ein Objekt zu schaffen, benötigt man Komponenten aus niedrigeren, grundlegenderen Ebenen.
Daher auch der Name. Atome sind die Grundbausteine der materiellen Welt. Bei Web- und mobilen Anwendungen ist es genau dasselbe.
Die Atomic Design-Methode geht davon aus, dass der Entwurf einer grafischen Schnittstelle aus fünf Phasen besteht. Die drei grundlegenden Stufen ergeben sich aus der Analogie zu chemischen Verbindungen. Wir können also Folgendes unterscheiden:
- Atome
- Moleküle
- Organismen
- Schablonen
- Seiten.
Im Zusammenhang mit Schnittstellen sind Atome z. B. Schriftarten oder Schaltflächen. Wenn die kleinsten Komponenten bereits geschaffen sind, können wir uns auf eine höhere Ebene begeben, die Ebene der Moleküle. Es ist der Punkt, an dem einzelne Atome gruppiert werden und aus ihnen eine komplexere Struktur mit eigenen Merkmalen entsteht.
Aus den Molekülen schaffen wir noch komplexere Strukturen: Organismen. Wenn ein Organismus erstellt wird, haben wir eine Komponente, die wiederholt in Vorlagen verwendet werden kann. Die Vorlagen werden für die Erstellung von Seiten verwendet.
Der Hauptvorteil der Atomic-Design-Methode ist ihre Einfachheit, Bequemlichkeit, Klarheit und ihr Fokus auf die Struktur. Darüber hinaus bietet Atomic Design viel mehr Konsistenz bei den Schnittstellen (die Frage der Konsistenz wird im zweiten Teil dieses Artikels behandelt).
Gestaltung grafischer Benutzeroberflächen: Prinzipien
Bei der Gestaltung von Benutzeroberflächen greifen die Designer auf mehrere Prinzipien zurück. Sie sind bestrebt, die bestmöglichen Ergebnisse zu erzielen.
Es geht darum, die meisten oder vorzugsweise alle der oben genannten Erwartungen zu erfüllen. Ist das immer möglich? Nun, nicht so sehr. Aus diesem Grund werden die Prototypen der Schnittstellen analysiert und getestet.
Wir haben bereits die heuristische Analyse von Jakob Nielsen besprochen, die für die Bewertung der Benutzerfreundlichkeit von Schnittstellen sehr nützlich ist. Wir haben uns auch mit den Acht Goldenen Regeln von Ben Shneiderman beschäftigt, die ebenfalls sehr hilfreich für die Gestaltung von Benutzeroberflächen sind.
Obwohl sie einflussreich und weithin respektiert sind, sind sie nicht die einzigen Grundsätze, die bei der Gestaltung von Schnittstellen zu berücksichtigen sind. Wir werden sie durch einen anderen Ansatz ergänzen, nämlich den von Lucy Lockwood und Larry Constantine formulierten Vorschlag.
Als nächstes werden wir weitere Prinzipien vorstellen, die von Designern häufig verwendet werden. Dank ihrer Verwendung ist die Gestaltung von Anwendungsoberflächen wesentlich effektiver.
Larry Constantine und Lucy Lockwoods 6 Prinzipien der Benutzeroberflächengestaltung
Der Vorschlag dieser Autoren leitet sich aus dem nutzungsorientierten Ansatz der Schnittstellengestaltung ab. Das nutzungsorientierte Design basiert auf drei Modellen und Prozessen:
- Modell der Rollen, die die Benutzer bei der Interaktion mit dem System spielen.
- Modell der von den Nutzern benötigten Aufgaben.
- Modell des Inhalts und der Organisation der Benutzeroberfläche.
Anders ausgedrückt: Es geht darum, die Absichten und typischen Nutzungsmuster der Nutzer kennen zu lernen. Auf dieser Grundlage haben die Autoren 6 Prinzipien des Benutzeroberflächendesigns entwickelt. Diese sind:
Das Prinzip der Struktur
Sie bezieht sich auf die Beziehungen zwischen den Elementen einer Schnittstelle, ihre Architektur und ihre Organisation. Die miteinander in Beziehung stehenden Elemente sollten zusammen, strukturiert und klar von anderen Elementen getrennt sein. Die Verbindungen und Trennungen sollten eine klare Hierarchie bilden.
Die Verbindungen und Trennungen sollten außerdem so gestaltet sein, dass sie kohärent, konsistent und für den Benutzer erkennbar (vertraut) sind.
Mit anderen Worten: Die Elemente mit ähnlichen Funktionen und Aufgabenbereichen sollten ähnlich aussehen und ähnliche Funktionsweisen haben. Die Funktionen und Standorte der Elemente sollten sich nicht ändern.
Das Prinzip der Einfachheit
Die Schnittstelle sollte die Ausführung einfacher und typischer Aufgaben erleichtern. Sie sollte in einer klaren und einfachen Sprache mit dem Nutzer kommunizieren.
Komplexere Aufgaben sollten in einfachere, kürzere und leichtere Aufgaben unterteilt werden. Die Schnittstelle sollte sich durch Klarheit auszeichnen und nur die wesentlichen Komponenten enthalten.
Das Prinzip der Sichtbarkeit
Die Schnittstelle sollte nur die Optionen enthalten, die für die Durchführung einer bestimmten Aufgabe erforderlich sind. Der Vorteil dieses Prinzips besteht darin, dass die Konzentration des Nutzers gefördert und Ablenkungen durch unnötige Informationen vermieden werden. Nur wichtige und unverzichtbare Informationen und Funktionen sollten sichtbar und hervorgehoben sein.
Das Feedback-Prinzip
Die Schnittstelle sollte den Benutzern durch klare, spezifische und prägnante Meldungen Rückmeldung über die wichtigsten Änderungen, Ausnahmen, Fehler und Zustände geben.
Das Prinzip der Toleranz
Bei der Gestaltung der Schnittstelle sollte auch die Möglichkeit von Benutzerfehlern berücksichtigt werden.
Sie sollte unerwünschte Änderungen verhindern, indem sie Korrekturen und die Wiederaufnahme bestimmter Aktionen ohne Kosten (z. B. die Wiederholung bestimmter Arbeiten) ermöglicht.
Wo immer dies möglich ist, sollte der Grundsatz der Toleranz gegenüber zulässigen Fehlern gelten. Eine gut gestaltete Schnittstelle sollte auch Fehler durch Hinweise und Tipps verhindern und das Sicherheitsgefühl des Benutzers erhöhen.
Das Prinzip der Wiederverwendung
Es gilt, die Duplizierung von Schnittstellenelementen und -informationen zu vermeiden und die Konsistenz der Schnittstelle zu erhöhen, indem die Schaffung neuer Elemente für die Ausführung ähnlicher Aufgaben vermieden wird. Eine geringere Anzahl von Elementen erleichtert das Lernen und Einprägen der Funktionen der einzelnen Elemente.
Die Schlussfolgerung aus den oben genannten Grundsätzen ist ganz klar.
Bei der Gestaltung der Benutzeroberfläche sollten Sie unnötige Funktionen vermeiden, die kognitive Belastung minimieren, Verhalten vorhersagen und Prozesse vereinfachen.
Eine gut gestaltete Schnittstelle lenkt nicht ab und ermöglicht es dem Benutzer, sich auf die zu erledigende Aufgabe zu konzentrieren. Konsistenz kann auch durch die Schaffung gemeinsamer Elemente zur Ausführung verschiedener Aufgaben erreicht werden.
Schnittstellengestaltung: bewährte Designmuster
Die Gestaltung von Schnittstellen ist ein komplexes Problem, das die Berücksichtigung einer Reihe von Aspekten erfordert. Die oben genannten Grundsätze müssen durch weitere ergänzt werden.
Das Schnittstellen-Nullpunkt-Prinzip
Der erste Eindruck ist äußerst wichtig für die Bewertung, die Einstellung und die Empfindungen der Benutzer beim ersten Kontakt mit der Schnittstelle.
Es ist auch die Gelegenheit, den Nutzern die wichtigsten Funktionen, Erleichterungen und Vorteile vorzustellen.
Die Gestaltung des Nullzustands, d. h. des Zustands, in dem der Benutzer begrüßt und eingewiesen wird, ist von außerordentlicher Bedeutung.
Der Nullzustand fungiert als Host, der den Nutzer einbindet und ihm die Bedienung der Schnittstelle überlässt.
Dadurch lassen sich viele Probleme und Frustrationen beim Erlernen der Bedienung einer Schnittstelle vermeiden. Indem Sie den Nutzern die Regeln vorstellen, können Sie sich deren Sympathie und Dankbarkeit verdienen.
Das Prinzip der Reduzierung der kognitiven Belastung
Ich habe es bereits in diesem Artikel erwähnt. Es lohnt sich jedoch, dies zu wiederholen, denn es ist äußerst wichtig. Es kommt darauf an, die Schnittstelle so klein wie möglich zu gestalten:
- Arbeitsintensiv.
- Intellektuell so anspruchsvoll wie möglich.
Die Nutzung der Schnittstelle darf nicht zu einem Erlebnis werden, das dem Lösen eines Rätsels ähnelt. Es sollte so intuitiv wie möglich sein, fast ohne darüber nachzudenken.
Das Prinzip des Schutzes und der Korrektur der Benutzerarbeit
Bei der Gestaltung von Schnittstellen müssen Sie auch den Komfort der Speicherung der geleisteten Arbeit sicherstellen. Nichts ist entmutigender als die Notwendigkeit, Daten und Auswahlen erneut einzugeben und zu bestätigen.
Dies ist insbesondere in Situationen wichtig, in denen der Benutzer oder das System Fehler macht. Der Verlust der geleisteten Arbeit kann nicht die "Strafe" für einen Fehler sein.
Die Schnittstelle sollte es dem Benutzer auch ermöglichen, die Arbeit zu korrigieren und zu den vorherigen Zuständen und Schritten zurückzukehren. Dies steht natürlich im Zusammenhang mit dem Toleranzprinzip von Lucy Lockwood.
Das Prinzip der Verständlichkeit der Handlung
Das Erlernen der Benutzung einer Schnittstelle sollte ebenso schnell, problemlos und angenehm sein. Die Schnittstelle sollte die Benutzer durch spezifische, eindeutige, einfache und leicht verständliche Antworten auf die grundlegenden Fragen vertraut machen:
- Was kann getan werden?
- Wo kann man das tun?
- Womit kann das gemacht werden?
- Wann kann sie durchgeführt werden?
- Warum ist das möglich?
- Wie kann man das machen?
- Mit welchem Ergebnis kann das geschehen?
Das Prinzip der Schnittstellenanpassung (Konfiguration) und der maximalen Kontrolle
Moderne Schnittstellen müssen es dem Benutzer zunehmend ermöglichen, Einstellungen, Parameter und Zustände anzupassen.
Die Anpassbarkeit der Schnittstelle erhöht das Gefühl der Kontrolle, das für das Gefühl von Komfort, Zufriedenheit und Benutzerfreundlichkeit entscheidend ist.
Das Gefühl der Kontrolle sorgt in erster Linie für Folgendes und fördert es:
- Geschwindigkeit des Betriebs (Reaktion des Systems auf eine Aktion).
- Klare Kausalität: Die Aktion des Benutzers ist die Ursache, und die Reaktion des Systems ist die gewünschte Wirkung.
- Möglichkeit zum Anhalten, Rückgängigmachen, Bearbeiten und Korrigieren.
- Reibungsloser Betrieb, auch wenn der Benutzer einen Fehler macht.
- Anpassung der Schnittstelle an die Gewohnheiten, Erwartungen, Normen, Fähigkeiten und typischen Ziele.
- Es besteht die Möglichkeit, zu den Standardeinstellungen zurückzukehren.
- Durch die Bestätigung der Handlungsausführung mit Bild-, Text- und Audiomeldungen.
Das Prinzip der Effizienz
Die Effizienz der Schnittstelle kann durch subjektive Empfindungen der Benutzer, aber auch durch messbare Indikatoren bestimmt werden. Zum Beispiel die Geschwindigkeit der Aktionsausführung, die Geschwindigkeit des Seitenaufbaus und die Geschwindigkeit des Erreichens des Ziels (die Anzahl der notwendigen Klicks, Bildschirme und Unterseiten).
Das Prinzip der Flexibilität
Dieser Grundsatz spiegelt die vorangegangenen wider. Übrigens ergänzen sich die meisten Grundsätze gegenseitig. Ähnlich verhält es sich mit dem Flexibilitätsprinzip, bei dem es am wichtigsten ist, eine Schnittstelle zu entwerfen, die dies auch ist:
- Angepasst an die Kenntnisse, Fähigkeiten und Erfahrungen eines jeden Nutzers.
- Freundlich: stellt seinen Nutzern so wenige Bedingungen wie möglich.
- Offen für verschiedene Einstellungen und zur Konfiguration von Modi und Funktionen.
- Im Einklang mit Normen, Gewohnheiten und typischen Erwartungen, aber nicht auf dogmatische Art und Weise.
Grundlagen der Gestaltung von Benutzeroberflächen. Zusammenfassung
- Die Schnittstelle ermöglicht die Interaktion zwischen Benutzer und Software.
- Eine gut gestaltete Schnittstelle wird als ein "unsichtbares" Werkzeug wahrgenommen, das sowohl hilfreich als auch praktisch ist.
- Schnittstellen müssen eine Reihe von Erwartungen erfüllen und sich u.a. durch Effizienz, Verfügbarkeit, optische Attraktivität, Funktionalität und Zuverlässigkeit auszeichnen.
- Schnittstellen werden auf der Grundlage verschiedener Prinzipien, Muster und Ansätze erstellt (z. B. Atomic Design).
- Der Vorschlag von Lucy Lockwood und Larry Constantine geht auf den Ansatz der nutzungsorientierten Schnittstellengestaltung zurück.
- Der Kern dieses Ansatzes sind die Rollen, die Aufgaben und die Art der Schnittstellenorganisation.
- Bei der Gestaltung von Schnittstellen sollten Sie unnötige Funktionen vermeiden und die kognitive Belastung so gering wie möglich halten.
- Es ist auch sehr wichtig, Verhalten vorherzusagen und Prozesse zu vereinfachen.
- Zu den wichtigsten, wenn auch nicht den einzigen, gehören die Prinzipien Flexibilität, Effizienz, Anpassung, maximale Kontrolle, Verständlichkeit der Handlungen, Schutz und Korrektur der Arbeit des Benutzers, Reduzierung der kognitiven Belastung und Nullzustand der Schnittstelle.
