10 Regeln für ein benutzerfreundliches User Interface

Es ist schon ein wenig bezeichnend, dass gerade ich als Designer wieder mit Regeln um die Ecke komme. Eigentlich sollte ich doch mit Kreativität nur so um mich werfen und kunterbunte Regenbögen in die Welt malen. Aber Regeln sind nun einmal wichtig. Auch im Grafikdesign und vor allem beim Gestalten eines User Interfaces (UI). Okay, vielleicht überdenken wir die Bezeichnung „Regel“ nochmal, aber für diesen Beitrag klingt „Faustregeln und keine spezifischen Richtlinien für das User Interface“ einfach nicht benutzerfreundlich. Daher das Wichtigste zuerst: Diese Richtlinien für ein optimales UI sind nicht für jeden gedacht, sondern richten sich vor allem an:

• Entwickler, die in der Lage sein wollen, eigenständig ein gutes User Interface zu entwickeln
• Designer, die ein UI gestalten möchten, welches gleichzeitig eine gute User Experience bietet
• Verantwortliche, die für ihr Unternehmen eine App entwickeln lassen möchten

Wer anspruchsvolle Bedienoberflächen entwickelt, kann dies nur, weil er diese analysiert hat – nicht, weil er mit einem intuitiven Gespür für Schönheit und Balance geboren ist. Dieser Artikel ist keine Theorie. Er ist reine Verwertung. Ihr lernt hier nichts über den Goldenen Schnitt. Ich erwähne auch nicht die Farblehre. Stattdessen möchte ich euch weitergeben, was ich durch gewissenhaftes Üben gelernt habe. Und mit welchen Maßnahmen ihr selbst profitiert und euren Benutzer glücklich macht.

Nicht jede App lässt sich angenehm und intuitiv bedienen. Bei der massiven Konkurrenz in den unterschiedlichen App Stores sollten Entwickler der Nutzererfahrung, der User Experience (UX), daher besondere Beachtung schenken. Die Bedienung einer App ist häufig noch wichtiger als der Funktionsumfang. Beachtet ihr bei der Konzeption einer Applikation gewisse Regeln, ist eine positive UX kein Hexenwerk mehr.

Das Streben nach Konsistenz

Jeder Benutzer eines User Interfaces lernt bei der Bedienung dazu. Dabei ist es erstmal irrelevant, ob es sich um eine haptische oder digitale Oberfläche handelt. Das Gelernte und bereits vorhandene Wissen eines Benutzers sollte bei jedem UI-Designer stets im Hinterkopf bleiben. Für diesen Prozess ist es von großem Vorteil, wenn ihr eure Zielgruppe genau kennt. Benutzer müssen sich im Idealfall keine Gedanken über Funktion oder den Unterschied von mehreren Bedienelementen machen. Viel wichtiger ist es, Bedienelemente so eindeutig wie möglich zu gestalten. Euer Benutzer wird es euch danken, wenn ihr klare, schnell verständliche Bezeichnungen und Aktionen verwendet.

Buttons mit dem gleichen Styling sollten stets die gleiche Funktion behalten. Das gilt natürlich auch für Mobile Apps.

Ein gutes Beispiel für dieses Prinzip: Die Klimaanlage in eurem Auto.

Konsistenz lässt sich einfach gliedern in:

• Workflow / Prozesse
• Funktionalität
• Aussehen
• Terminologie

Warum ist sichtbares und informelles Feedback wichtig?

Ein User Interface sollte eurem Benutzer ein permanentes Feedback geben. Euer Benutzer möchte wissen, was gerade passiert und warum. Lasst ihn nicht raten, sondern sagt es ihm einfach.

Euer User möchte darauf vertrauen können, dass euer Interface sich richtig verhält und funktioniert, wie er es erwartet. Wir sind fast geneigt zu sagen: Benutzer mögen keine Überraschungen. Dieses Schema nennt sich „Principle of Least Suprise“ und bildet den Grundstein von einem eindeutigem User Interface. Bei häufigen Klicks und Aktionen innerhalb eures User Interfaces kann das Feedback schlicht ausfallen. Während bei seltenen Aktionen die Reaktion umfangreicher gestaltet ausfallen sollte.

Das Feedback eurer Benutzeroberfläche sollte also:

• Relevant sein
• Auf Wichtigkeit und Dringlichkeit Rücksicht nehmen
• Verständlich und sinnvoll sein
• In angemessenem Kontext ablaufen

Passt euer User Interface der echten Welt an

Ja, hier kommt wieder ein gelerntes Prinzip zum Tragen. Je weniger euer Benutzer raten muss, desto besser ist die User Experience. Euer System sollte die Sprache eures Benutzers sprechen. Das bezieht sich auf Inhalte und Design. Verwendet Wörter, Phrasen und Gestaltungselemente, die eurem Benutzer vertraut sind. Verzichtet auf nicht relevante themenspezifischen Inhalte.

Quelle: April9 Dezign / Behance

Die einzelnen Prozesse und Aktionen innerhalb eurer Benutzeroberfläche sollten zudem gegliedert sein. Wenn eine Aktion abgeschlossen ist, lasst es euren Nutzer wissen. Auch in der realen Welt sind Prozesse gegliedert. Beim Einkaufen im Supermarkt werdet ihr auch mehrere Aktionen durchführen, bis der Prozess des Einkaufs abgeschlossen ist. Wenn man UI-Design aus dieser Perspektive betrachtet, wirkt die digitale Welt gar nicht so weit entfernt von der echten.

Gestaltet euer Design mit

• Gruppierten Prozessen und Aktionen
• Explizitem Abschluss von Prozessen
• Optionen für die nächsten Schritte des Benutzers

Fehlervermeidung und einfaches Error-Handling

Benutzer hassen Fehlermeldungen. Aber was sie noch mehr hassen als das? Das Gefühl, dass sie etwas falsch gemacht haben. Ihr solltet also bereits bei der Konzeption des User Interfaces permanent einzelne Schnittstellen überprüfen, die fehleranfälligen Situationen und Bedingungen im Blick behalten, bzw. nach diesen suchen und euren Benutzer ggf. vor ihnen warnen.

Ein klassisches Beispiel für eine fehleranfällige Situation ist die Passwortvergabe. Webseiten und Mobile Apps waren vor nicht allzu langer Zeit sehr frustrierend. Denn die präventive Warnung, dass euer Passwort, Großbuchstaben, Zahlen und „eure Blutgruppe“ enthalten muss, ist kein weiterverbreiteter Standard. Ihr könnt euch sicher vorstellen, wie enttäuschend das für den User ist.

Ein User Interface mit gutem Error-Handling bietet also:

• Fehlerkorrekturen
• Automatische Fehlererkennung
• Präventive Warnungen
• Hinweise zur Lösung des Problems

Error-Fixing

Noch viel nerviger als eigene Fehler sind Alerts, die euer Nutzer nicht versteht. Fehlermeldungen sollten im Idealfall erst gar nicht im User Interface auftauchen. Falls sich dennoch ein Defekt einstellt, kommuniziert ihn transparent und verständlich für euren Benutzer. Verwendet keine Systemsprache, um zu beschreiben, was gerade für einen Fehler gesorgt hat. Beschreibt lieber das Problem kurz und eindeutig und schlagt im Idealfall eine konstruktive Lösung vor. Sagt eurem User klar und deutlich, was vor sich geht. Sowohl die Hintergrundaufgaben als auch die Live-Performance sind für den Benutzer relevant.

Ästhetik und Minimalismus

Okay, jetzt kommt wieder der Designer in mir raus. Minimalistisch bedeutet nicht direkt eingeschränkt. Alle relevanten Informationen müssen für den Benutzer in angemessener Form aufbereitet werden. Vereinfachen könnt ihr das User Interface ganz einfach: Verzicht auf nicht benötigte Inhalte oder Designelemente, die keine Benutzeraufgaben unterstützen. Bei diesem Prozess ist es sehr wichtig, die Pain Points und die User Journey eurer Zielgruppe zu kennen und genau zu analysieren.

Abkürzungen für User Interface

Ermöglicht den Benutzern eures User Interfaces es zu personalisieren und bietet ihm Shortcuts für häufig genutzte Funktionen. Abkürzungen, Funktionstasten und Makrofunktionen sind für einen erfahrenen Benutzer sehr hilfreich.

Abkürzungen könnt ihr mit folgenden Methoden in die Benutzeroberfläche integrieren:

• Shortcuts über Tastatur (Tastaturkürzel)
• Manuelles Speichern von Funktionen (z. B. Lesezeichen im Browser)
• Aktionsautomatisierungen (z. B. Passwort speichern / automatischer Login)

Entlastet das Kurzzeitgedächtnis eures Users

Es ist einfacher etwas zu erkennen, als sich daran zu erinnern.  Im Alltag passiert das meist unterbewusst und wir als „Benutzer“ nehmen diese Mechanik nicht war. Als UI-Designer können wir unsere Benutzeroberfläche auf diese Mechanik abstimmen. Minimiert also den internen Arbeitsspeicher im Kopf eures Benutzers. Der User soll sich keine Informationen aus verschiedenen Dialogfenstern merken müssen, um mit eurem Interface interagieren zu müssen. Ihr könnt mit einer eindeutigen Ikonografie und anderen visuellen Hilfsmitteln, z. B. thematische Farbgebung und konsistente Platzierung von Elementen, arbeiten, um wiederkehrenden Benutzern zu helfen, Funktionen zu verstehen.

Ein gutes Beispiel für diese Mechanik ist der Lautstärke-Switch an modernen Smartphones.

Reduziert den Speicherplatz eures Benutzers mit:

• Einer klaren Struktur
• Visuellen Hilfen
• Eindeutiger Sprache

Benutzerkontrolle und -freiheit

Beim Bedienen sollte euer User immer das Gefühl haben, dass er die App steuert – nicht umgekehrt. Klingt logisch, ist aber in vielen User Interfaces nicht selbstverständlich. Ihr würdet z. B. auch keiner Banking-App vertrauen, wenn ihr nicht abschätzen könnt, was mit euren Daten passiert.
Aber viel wichtiger als die Kontrolle, ist die Freiheit. Die Freiheit, welche es dem Benutzer ermöglicht, Fehler und Aktionen rückgängig zu machen und in Prozessen zwischen einzelnen Schritten zu wechseln. Diese Funktion ist besonders wichtig. Sie lindert Ängste und gibt dem User das notwendige Vertrauen in das User Interface. Markiert stets einen Notausgang in eurer Benutzeroberfläche, um einen unerwünschten Zustand zu verlassen, ohne den kompletten Dialog durchlaufen zu müssen.

Hilfestellung oder Dokumentationen für ein User Interface

Auch wenn es für Benutzer (und Designer) immer angenehmer ist, ein User Interface zu bedienen, welches ohne Dokumentation verständlich und intuitiv wirkt, ist es in einigen Fällen sinnvoll, eine Hilfestellung zu bieten. Bei umfangreichen CMS-Systemen oder komplexen Mobile Apps bietet es sich tatsächlich an, eine Dokumentation zu hinterlegen. Diese Hilfe sollte einfach zu finden sein und sich auf Pain Points des Users fokussieren – Stichwort User Experiences. Kein User Interface ist ermüdender als eine endlose Dokumentation über selbiges.

Kunden möchten digitale Marken nicht mehr nur als einseitigen Service erleben – das ist im Zeitalter von Social Media und mündigen Verbrauchern nicht mehr gefragt. Zumal sich Markenbotschaft und User Experience bei einer digitalen Benutzeroberfläche gar nicht mehr klar voneinander trennen lassen.

Begeistert mit eurem User Interface

Viele der angesprochenen Punkte, die zu einem positiven Nutzererlebnis führen, sind nicht neu. Einige sind sogar offensichtlich – nachdem man sie gelesen hat. Trotzdem werden diese einfachen Regeln häufig nicht beachtet. Interaktionsdesign ist für Unternehmen ein wichtiges Instrument, um positive Erlebnisse zu erzeugen. Eine gute Strategie und Umsetzung eines User Interfaces macht aus Kunden treue Markenbotschafter. Wenn ihr eure Nutzer wirklich und nachhaltig begeistern möchtet, müsst ihr lernen, euch zuerst in die Nutzerschaft hineinzudenken. Erst wenn ihr in erster Linie an die Nutzer und wie diese denkt, lassen sich Apps entwickeln, die so einfach, so hübsch und so angenehm zu benutzen sind wie möglich. Eine App, die ihr selbst gerne benutzen möchtet, ist eine erfolgreiche App.

Wir bei 247GRAD arbeiten treu nach diesem Credo … und die Benutzer der von uns entwickelten Interfaces danken es uns. Aber seht selbst: Testet die von uns entwickelte evm Mobile App oder inspiriert euch mit den von uns konzipierten und entwickelten User Interfaces.

Wenn euch dieser Artikel gefallen hat und ihr euch nun selbst für ein eigenes User Interface interessiert oder zu dem Thema Fragen habt, meldet euch einfach. Wir unterstützen euch gern und beantworten auch eure Fragen, sofern ihr welche dazu habt.