10 Regeln für ein benutzerfreundliches User Interface
Nur mit einem durchdachten User Interface wird eure App zu einem echten Erlebnis. Wir erlären die Prinzipien, mit denen euer UI zum Erfolg wird und Menschen begeistert.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Unsere Tipps & Tricks für Performance Design!
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.
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.
Jetzt melden, wenn ihr mehr darüber erfahren wollt!
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.
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.
Thomas hat nicht nur in Sachen Design jederzeit den richtigen Geistesblitz. Nach der Arbeit nutzt er diese Fähigkeit, um Gotham City zu befreien.
© 2022 . 247GRAD . Agentur für digitale Kommunikation
Kommentare
Keine Kommentare vorhanden
Vielen Dank, {{inputName}}!
Wir prüfen deinen Kommentar und veröffentlichen ihn in Kürze hier im Blog.