Digitale Plattformen müssen technisch einwandfrei und wunderschön sein - Die Bedeutung von UI und UX Design

Inhaltsverzeichnis

1. Unterschied UI und UX
2. Grundbedürfnisse von User:innen
3. Leichte Bedienbarkeit
4. Immer Mobile first?
5. Joy of use
6. Das Aussehen eines Interface

Unterschied UI und UX

Das UI Design gibt beispielsweise vor, welche Farben und welche Schrift eingesetzt werden, welche Bildsprache und welche Icons passen oder wie Elemente angeordnet werden. Das UX Design beschäftigt sich mit dem Verhalten von Nutzer:innen. Dazu muss man erst einmal wissen, welche User:innen das Produkt benutzen, wie sie denken, was sie wollen und wie man ihnen Lösungen anbieten kann.

Grundbedürfnisse von User:innen

Je besser die User:innen auf der digitalen Plattform abgeholt werden, umso besser. Dabei sind vier Grundbedürfnisse wichtig, um ein erfolgreiches Produkt zu bauen:

Diese Reihenfolge bildet ein stabiles Gerüst für erfolgreiche Formate. Zu Beginn steht immer die Problemlösung. Denn wenn ein Produkt kein Problem einer Zielgruppe löst, dann braucht die Zielgruppe das Produkt auch nicht. Gerade bei digitalen Plattformen folgt dann gleich die Zuverlässigkeit. Eine Webseite, die ständig Fehlermeldungen anzeigt, ist schnell uninteressant, eine App, die häufig abstürzt, wird nicht benutzt. User:innen möchten sich auf eine Plattform verlassen können. Eine leichte Bedienbarkeit muss sein. Der bekannte Usability-Berater Steve Krug drückt es so aus “Don´t make me think”. Nutzer:innen möchten auf einer Webseite nicht darüber nachdenken, wie sie nun von der Startseite zur benötigten Information kommen. Alles sollte intuitiv, logisch und simpel sein. Wer dann mit seiner digitalen Plattform noch Begeisterung auslösen kann, hat alles richtig gemacht.

Leichte Bedienbarkeit

Wenn es um die Bedienbarkeit geht, landet man bei den sogenannten Mentalen Modellen. Dieses Konstrukt machen es User:innen leichter Vorgänge zu erfassen. Algorithmen, Programmierung oder die Verarbeitung von Daten sind komplex. Zum Beispiel werden beim Speichern von Daten temporäre Daten zu dauerhaften Daten gewandelt und dementsprechend an anderer Stelle gespeichert. Das ist technisch und für den durchschnittlichen User bzw. Userin nicht zu abstrakt. Daher ist es sinnvoll mit Dingen zu arbeiten, die den User:innen bekannt sind. Ein Beispiel dafür ist der Button “Save”. Jeder weiß, dass durch diesen Klick Daten dauerhaft abgelegt werden. Mentale Modelle sind also bekannte Dinge, die den technischen Vorgang in Einfach abbilden. Ein weiteres gutes Beispiel für ein mentales Modell ist die Oberfläche eines Worddokuments. Dies ist einer Werkbank nachempfunden. Am Kopf sind die Haupt-Tools und an den Seiten die Details und Spezialtools platziert. Mentale Modelle helfen den User:innen sich auf einer Plattform schnell zurechtzufinden. Bei einem modernen App-Design für Jugendliche wäre es beispielsweise eine kluge Adaption, sich an Interaktionsmöglichkeiten aus Social Media zu orientieren. Swipen oder quadratische Newsfeed-Formate wären zwei bereits gelernte Strukturen, die einem mentalen Modell entsprechen.

Immer Mobile first?

Wer eine digitale Plattform designt, überlegt sich ebenfalls, ob die Nutzer:innen eher ein Smartphone oder doch eher einen Computer benutzen. Schaut man auf die allgemeine Statistik, dann hat die Nutzung über mobile Geräte ganz klar die Nase vorn. Das gilt für alle allgemeinen Webseiten, oder eben für Apps. Für mobile Anwendungen ist es beispielsweise wichtig, dass Interaktionsbuttons unten sind, damit die User:innen sie mit dem Daumen erreichen können oder dass die wichtigsten Punkte oben stehen, damit der Nutzende gleich weiß, worum es geht.

Allerdings gibt es auch Fälle, in denen die Desktop-Anwendung durchaus noch Sinn ergibt, zum Beispiel bei wissenschaftliche Datenbanken. Hier geht es eher darum klare Hierarchien zu schaffen oder eine komplexe Suche zu ermöglichen. Die Frage “Mobile first” ist also immer individuell zu beantworten. Es geht eher darum, nutzerzentriert zu überlegen, was die User:innen brauchen.

Joy of use

Begeisterungsfähigkeit erreicht man durch einen persönlichen Charakter in der Anwendung. Das zeigt sich durch eine individuelle Bildsprache oder die Art der Ansprache. Falls Nutzer:innen das Passwort vergessen haben wirkt ein freundlicher, persönlicher Hinweis auf einer Log In Seite wesentlich persönlicher als ein technischer Hinweis. Je nach Zielgruppe kann das auch humoristisch oder sehr soft sein. Ein ansprechendes Erscheinungsbild verstärkt die emotionale Wahrnehmung zusätzlich. Die Ästhetik bringt User:innen dazu, eine Anwendung häufiger zu nutzen.

Außerdem sollte auf den Flow und Ease of Use geachtet werden. Dabei geht es darum, dass eine Anwendung ohne große Hürden läuft. Angenommen es handelt sich um ein Tool zur Erstellung von Texten. Dann sollten gängige Funktionen, wie etwa fett, kursiv und Schriftart, mit einem Klick nutzbar sein. Es wäre fatal, wenn User:innen für die Fett-Funktion die Eingabemaske erst verlassen müssten - der Flow wäre gestört. Der Streaminganbieter Netflix achtet zum Beispiel sehr auf den Flow. Wenn der Film oder die Serie zu Ende ist, erhalten Nutzer:innen gleich Vorschläge dafür, was sie als Nächstes anschauen könnten. Die Zuschauer:innen bleiben im Flow und müssen nicht erst zurück in das Hauptmenu springen, um den nächsten Film oder die nächste Folge der Serie herauszusuchen.

Egal, um welche digitale Plattform es sich handelt, die Nutzer:innen sollten Spaß an der Bedienung haben. Das gelingt durch eine einfache Handhabung und wenn das Programm bereits erahnt, was die User:innen als Nächstes benötigen.

Das Aussehen eines Interface

Ein UI Design entsteht meist auf einem Moodboard. Dort werden die Unternehmenswerte, der Unternehmensauftritt und die Bildwelten der potenziellen Nutzer:innen zusammengelegt. Daraus entsteht eine Bildsprache, um eine passende Stimmung der digitalen Plattform zu kreieren. Das ist beispielsweise sehr gut sichtbar bei der Webseite von Dropbox oder Airbnb. Beide setzen auf Illustrationen, die Einfachheit und Nahbarkeit transportieren. Neben der Schriftart und den Grafiken haben Farben eine große Wirkung. Pastell wirkt weich und freundlich, Blautöne eher kühl und Rottöne warm. Auch unsere emotionale Beziehung zu Farben ist wichtig. Stop oder Halt assoziieren wir beispielsweise mit der Farbe Rot. Ein Decline-Button in der Farbe Grün wirkt verwirrend und wäre irreführend.

^{Natee Meepian/Adobe Stock}

Moderne Webseiten arbeiten viel mit Icons. Auch hier sollte sich eine einheitliche Gestaltung durchziehen. Und so ganz ohne Fließtext geht es dann aber auch nicht. Eine geeignete Schriftgröße für Fließtexte liegt zwischen 16px und 21px.

Digitale Plattformen haben einen sehr vielschichtigen Aufbau und im Mittelpunkt steht immer die Nutzerzentrierung. Eine reine Fokussierung auf die technische Umsetzung ist heutzutage nicht mehr denkbar. Neben der leichten und logischen Bedienbarkeit, kann durch die Ästhetik die Häufigkeit der Nutzung gesteigert werden.