Die UX/UI-Chroniken: Grundlagen der Benutzeroberfläche (UI)
Wenn gutes Aussehen alleine nicht ausreicht
Die Bedeutung des Designs von Benutzeroberflächen (UI) wird nicht selten von Firmen und Entwicklern unterschätzt. Davon kann ich mit Rückblick auf einige (nicht alle) meiner vergangenen Jobs ein Lied singen. Doch für ein erfolgreiches IT-Produkt ist das UI-Design genauso relevant, wie das UX-Design und die funktionierende — hoffentlich Bug-freie — Programmierung von Frontend und Backend. Ein gutes UI ist nicht einfach nur “hübsch”, sondern ist so intuitiv, dass der/die Nutzer*in über die Nutzung der App/Website gar nicht groß nachdenken muss. Hier geht es nicht um irgendwelche UI-Trends wie Glassmorphism und hast du nicht gesehen. Es muss möglich sein, dein Produkt auch ohne den Durchlauf eines Tutorials innerhalb von Millisekunden fehlerfrei zu verwenden, als hätte man nie etwas anderes getan. Das ist doch ganz einfach, oder? Jein. Ein Fehler, den viele machen, ist Apps zu entwerfen, die sie selbst ohne Probleme verwenden können. Aber merke dir eines:
Du bist nicht die Mehrheit deiner Nutzer*innen.
Die Prinzipien des UI-Designs
Über Jahre haben sich einige Prinzipien für ein gutes und nutzerfreundliches UI Design entwickelt und wenn du sie beim Design deiner App berücksichtigst, hilft dir das dabei, eine sehr gute Benutzeroberfläche für deine App zu erstellen.
Konsistenz
Konsistenz ist eine einfache und zeitgleich schwierige Angelegenheit. Sie bedeutet, dass sowohl die Designelemente als auch Verhaltensmuster bei der Nutzung einer App einheitlich sein sollten und sich nicht ständig ändern sollten. Beispielsweise verwendet die Spotify durchgängig dieselben Elemente für die Navigation am unteren Bildschirmrand. Diese Konsistenz erleichtert das Verständnis der App-Navigation und verbessert die Nutzbarkeit der App. Diese Konsistenz sollte auch über verschiedene Updates der App beibehalten werden. Instagram hingegen ändert nicht selten manche Dinge bei der App so grundlegend, dass ich echt Schwierigkeiten bei der alltäglichen Nutzung der App habe. Wenn ich zum Beispiel einen Post von jemand anderem in der Story teilen möchte, drücke ich versehentlich immer noch auf den Button für das Teilen auf Threads, weil dort früher der Button für die Story war. Hier ist die Konsistenz nicht gegeben (und ich bin mittlerweile total genervt).
Navigations-Shortcuts
Navigations-Shortcuts erlauben es dem User, sich schneller durch die App zu bewegen und Funktionen zu nutzen. Bei Gmail kannst du zum Beispiel mit einer einfach Swipe-Geste nach links eine Email löschen oder archivieren. Ähnlich wie:
“Mit einem Wisch ist alles weg.” von Zewa
Allerdings musst du hier im Hinterkopf behalten, dass andere Apps vielleicht die gleiche Geste für eine andere Funktion verwenden. Verwende ich zum Beispiel exakt die gleiche Geste in der Protonmail App, so archiviere ich versehentlich die Email, die ich eigentlich löschen wollte (rate mal, was mir ständig passiert).
Informatives Feedback
Wenn dein*e Nutzer*in etwas in deiner App macht, sollte dies sofort eine Rückmeldung an den/die Nutzer*in geben, ob die Handlung nun erfolgreich war oder nicht. Teilst du zum Beispiel in Instagram einen Beitrag von einem anderen User in deiner Story, meldet die App, dass du es in deiner Story gepostet hast. Das ist schon einmal gut. Allerdings heißt das nicht, dass dein Storypost schon erfolgreich geladen wurde und Instagram informiert dich nicht darüber, dass das noch nicht der Fall ist und wann der Post nun erfolgreich geladen wurde. Gehst du also direkt nach der Message, dass du es in deiner Story gepostet hast, aus der App raus und erst nach Stunden wieder rein, wird erst dann der Upload weiter fortgesetzt. Mit einer kurzen Info könnte man diese Schwierigkeit umgehen.
Dialoggestaltung
Dialoggestaltung ist sehr wichtig, wenn du vielleicht doch mal eine Funktion in deiner App hast, die in der Handhabung vielleicht mal nicht so intuitiv ist. Dropbox leitet Nutzer*innen beispielsweise durch den Prozess des Datei-Uploads mit klaren Anweisungen und visualisiert den Fortschritt. Diese geführte Interaktion macht die Nutzung der App wieder intuitiver und auf jeden Fall effizienter.
Fehlervermeidung
Wenn es eine Funktion gibt, die eine möglicherweise kritische Handlung/unwiderrufliche Handlung für den/die Nutzer*in hat, die vielleicht auch unerwünscht sind, dann ist es hilfreich, wenn du dies über eine zusätzliche Bestätigung, ob dies wirklich gewünscht ist. Beispielsweise, wenn du deinen Twitter-Account nach der Machtübernahme durch Elon Musk löschen wolltest, musstest du dies auch bestätigen.
Umkehrbare Aktionen
Sind eine meiner Lieblingsfunktionen. Sagen wir, du willst ein Meme deiner BFF über Whatsapp schicken und versehentlich landet dieses — vielleicht nicht ganz angemessene — Meme im Chat mit deiner Mutter. Wie dankbar bin ich da für die Möglichkeit, das Meme löschen zu können.
Kontrolle durch den/die Nutzer*in
Was meine ich damit? Ich meine damit, dass der/die Nutzer*in kontrollieren kann, wie etwas geschieht. Nehmen wir hier Mal Medium als Beispiel. Wenn wir uns einen englischen Artikel (wann kommt diese Funktion endlich für die deutsche Sprache?) anhören wollen, können wir einstellen, welche Stimme, wie schnell die Artikel vorlesen soll. Wir können im Artikel vor- und zurückspringen und die Stimme pausieren lassen. Das gibt uns ein Gefühl von Kontrolle über die App.
Minimale Gedächtnisbelastung
Es ist hilfreich, wenn deine App sich für dich Dinge merkt, damit du es nicht tun musst. Wie YouTube, wenn du aktiviert hast, dass es sich deinen Verlauf bezüglich der Videos merkt, die du geschaut hast. Du willst das Video vielleicht Stunden/Tage später einem/einer Freund*in zeigen, aber erinnerst dich nicht mehr an den/die Creator*in? Im Verlauf findest du es bestimmt.
Ehrlich gesagt fehlt mir diese Funktion manchmal bei Medium. Andererseits bedeutet das, dass weniger Daten von mir gespeichert werden, weshalb mich das dann nicht so sehr stört.
Mehr als nur “hübsch”
Es ist leider wirklich so, dass, wenn sich UX/UI-Designer*innen in einigen meiner letzten Anstellungen mit bestimmten Anliegen zu Wort gemeldet haben, dies mit “Hübsch machen können wir auch später!” (direktes Zitat eines Managers) abgetan wurde. Es wird schlicht und ergreifend übersehen, dass es im UI nicht nur ums Aussehen geht, sondern um eine erfolgreiche Nutzung eines Produktes ohne welche so ziemlich jede App sehr schnell deinstalliert wird. Auch muss dies konsequent durchgezogen werden und nicht nur zu Anfang eines Produktes. Doch es gehört auch zur Wahrheit, dass es manchmal Designer*innen gibt, die wirklich eher auf die Optik und weniger auf die Nutzerfreundlichkeit achten. Ich denke da an einen Senior UI-UX-Designer, der für eine große, deutsche Bank ein Design von weißer Schrift auf gelben Hintergrund (mir fällt gerade auf, dass das Gelb meines Banners exakt das Gelb von seinem Design ist) gemacht. Eine echte Katastrophe, aber “so [sah] es besser aus”. Doch auf dieses Thema gehe ich noch ein anderes Mal näher ein.
Die anderen Artikel der UX/UI-Chroniken findest du hier:
Wenn dir dieser Artikel geholfen hat, zögere nicht, zu applaudieren und ihn zu teilen. Wenn du deine eigenen Erfahrungen mit mir teilen möchtest, freue ich mich auf deine Kommentare und wenn du meine anderen Artikel nicht verpassen möchtest, kannst du mir gerne folgen.
