UX für Software Engineers

Was bedeutet UX und warum ist es so wichtig für die Software Entwicklung? Markus Stolze und Mathias Lenz von der Fachhochschule Ost führen uns in einem interaktiven Workshop durch die vielseitige Welt der User Experience und geben uns viele nützliche Design-Tipps für Software Engineers mit auf den Weg.

Was ist UX?

Der Workshop beginnt. Auf der Leinwand flimmert ein bekanntes Bild. Eine klassische Fernbedienung mit unzähligen komplizierten Knöpfen, von denen jeder Normalsterbliche höchstens die Hälfte der Funktionen kennt. Unser Auftrag: Vereinfachen! Sofort machen wir uns mit Papier und Stift bewaffnet ans Werk und versuchen einen eleganteren Entwurf aufs Papier zu zaubern. Wir brechen die Fernbedienung brachial auf ihre nötigsten Funktionen herunter und reduzieren das Design auf eine Handvoll bedienerfreundlicher Tasten. Mit selbstzufriedenen Gesichtern präsentieren wir unsere vereinfachten Entwürfe, bis Markus Stolze schmunzelnd fragt: "Wissen wir überhaupt, wofür die Fernbedienung verwendet wird?" - Ratlose Gesichter im ganzen Raum. Wir hatten alle voreilig angenommen, dass es sich um eine Bedienung für einen Fernseher handelt. Stolze verrät uns dann, dass die Fernbedienung in Wahrheit die einfache Funktion hat, eine digitale Nummernanzeige hochzuschalten. Eine einzige Taste hätte also völlig ausgereicht.

Gleich zu Beginn wird uns klar gemacht, dass sich hinter dem Begriff User Experience (UX) viel mehr verbirgt, als eine Applikation grafisch aufzuhübschen oder Funktionen zu vereinfachen. Bei UX geht es viel mehr darum, den vollen Benutzungsumfang eines Produkts zu verstehen und daraus abzuleiten, welche Anforderungen das Design erfüllen muss.

Grundlegend gilt es als UX-Designer die drei folgenden Fragen beantworten:

Wer sind die Nutzer: Was kennen und können sie, was wollen sie erreichen?
Was ist der Nutzungskontext?
Wie sollen Nutzer zukünftig unterstützt werden?

Wie läuft der UX-Designprozess ab?

Es gibt die unterschiedlichsten Vorgehensweisen beim UX-Design, die stark vom Projekt und der Organisationsform abhängen können. Gemeinsam ist ihnen allen, dass sie das erste Ziel darin sehen, den Nutzer und den Nutzungskontext angemessen zu verstehen, bevor der iterative Prozess von Gestaltung und Test beginnt.

Der UX-Designprozess lässt sich grob in vier verschiedene Abschnitte unterteilen:

Verstehen des Nutzungskontext
Festlegen der Nutzungsanforderungen
Erarbeiten der Gestaltung
Testen und Analysieren

Es handelt sich dabei nicht um eine strikte sequenzielle Abfolge, sondern um einen iterativen Prozess bei jede Phase mehrfach durchlaufen werden muss.

Fail Fast - Learn quickly

Unsere nächste Herausforderung ist die Marshmallow-Challenge. Wir teilen uns in Fünfer-Teams auf und bekommen die folgende Aufgabe: In 15 Minuten einen Turm aus Schnur, Klebeband und einer Handvoll Spaghetti bauen, der ein Marshmallow trägt. Am Ende gewinnt das Team mit dem höchsten Marshmallow. Auf die Plätze, fertig, los! Während sich einige Teams in lange Diskussionen verstrickten, wie sich der Turm am besten bewerkstelligen liesse, fangen andere sofort damit an, einen ersten Versuchsaufbau zu basteln, um die Tragfähigkeit der Spaghetti und das Gewicht des Marshmallows zu testen. Am Ende sind die Türme der diskussionslastigen Teams hoffnungslos in sich zusammengekracht oder gar nicht erst zum Stehen gekommen, wohingegen die experimentierfreudigen Teams viel höhere und stabilere Strukturen zustande gebracht haben.

Abb.1: Der Spaghetti-Turm des Sieger-Teams

Unsere Erfahrungen decken sich auch mit bisherigen Forschungsergebnissen zur Marshmallow-Challenge. Spannenderweise schneiden Kinder beim Test in der Regel besser ab als Erwachsene. Grund dafür ist, dass Kinder viel schneller mit der Umsetzung beginnen und ungehemmter ausprobieren als Erwachsene, die durchschnittlich über die Hälfte der knappen Zeit mit planen verbringen. Um nicht in die gleiche Planungsfalle zu tappen und möglichst schnell in die Umsetzung zu kommen setzt UX auf einen schnellen, iterativen Gestaltungsprozess, bei dem ein anfänglicher primitiver Applikationsentwurf fortlaufend verbessert wird.

Ein nützliches Hilfsmittel können dabei Wireframes sein. Ein Wireframe ist eine grundlegende visuelle Darstellung einer Webseite oder eines Softwareprodukts, die die Struktur und Anordnung der Inhalte zeigt, ohne sich auf das Design oder die detaillierte Gestaltung zu konzentrieren. Wireframes werden häufig in der frühen Phase des Designprozesses verwendet, um eine klare Vorstellung davon zu bekommen, wie eine Seite oder Anwendung funktionieren wird und welche Elemente sie enthalten wird. Sie können in verschiedenen Detailstufen erstellt werden, von einfachen Skizzen auf Papier bis hin zu digitalen, interaktiven Modellen, die mit speziellen Design-Tools erstellt werden. Sie sind ein unverzichtbares Werkzeug im UX-Designprozess und helfen dabei, frühzeitig potenzielle Probleme zu identifizieren und zu lösen.

Abb. 2: Wireframe als App-Design Prototyp

Im Zusammenhang mit Prototying ist “Fail faster” ein wichtiger Begriff. Die Idee dahinter ist einfach: Anstatt viel Zeit und Ressourcen in ein Projekt zu stecken, nur um später festzustellen, dass es nicht funktioniert, sollte man früh und oft testen. So können Probleme frühzeitig erkannt und behoben werden. Das spart nicht nur Zeit und Geld, sondern führt auch zu besseren Endprodukten. Kurz gesagt, schnelles Scheitern führt zu schnellerem Lernen und letztlich zu grösserem Erfolg.

"You are not the User"

Der Leitsatz “You are not the User” erinnert daran, dass Entwickler und Nutzer sehr unterschiedliche Perspektiven haben können. Regelmässige Usability-Tests, wie das Hallway-Testing, helfen, diese Lücke zu schliessen. Beim Hallway-Testing werden zufällige Personen, die nicht am Projekt beteiligt sind, gebeten, eine Anwendung oder Webseite zu testen. Hallway-Testing hat den grossen Vorteil, dass relativ wenig Aufwand erfordert und schnelle und unvoreingenommene Rückmeldungen liefert.

Was es beim Hallway-Testing zu beachten gilt:

Definiere vorab, was durch den Test herausgefunden werden soll. Konzentriere dich auf spezifische Features oder allgemeine Navigation.
Entwickle eine klare, kurze und realistische Aufgabe, die die Teilnehmer während des Tests ausführen sollen.
Erkläre den Teilnehmern den Zweck des Tests und betone, dass das Produkt und nicht sie getestet wird. Weise die Teilnehmer darauf hin, dass sie während des Lösens des Szenarios möglichst laut denken sollen, damit die Handlungen transparenter sind.
Gebe den Teilnehmern die Aufgaben und lassen Sie sie diese ohne Hilfe lösen, um echte Benutzererfahrungen zu simulieren.
Beobachtungen notieren: Dokumentiere, wie die Teilnehmer die Aufgaben lösen und wo sie auf Probleme stossen.
Feedback erfragen: Nach Beendigung der Aufgaben, bitten Sie um Feedback zu spezifischen Features und zur allgemeinen Erfahrung.

Wie schaffe ich mehr Benutzerfreundlichkeit?

Grundsätzlich sollte die Funktion eines Features optisch direkt ersichtlich sein. Dabei ist es wichtig, sich auf etablierte Konventionen zu besinnen. Ganz nach dem Motto: Ein Texteingabefeld sollte aussehen wie ein Texteingabefeld, ein Button sollte aussehen wie ein Button, und auch ein Link sollte als solcher erkennbar sein. Ein User sollte nicht darüber nachdenken müssen, wie er ein Element benutzen muss. Die Benutzerfreundlichkeit hängt natürlich stark vom Vorwissen und den Erwartungen des Nutzers ab. Dabei können insbesondere kulturelle und branchenspezifische Aspekte eine Rolle spielen.

Grundsätzlich ist es wichtig, dass Funktionalitäten und Begriffe innerhalb einer Anwendung konsistent bleiben, um Verwirrung zu vermeiden. Ein Schaltfläche zum Hochladen sollte zum Beispiel nicht in einer Ansicht mit "Upload" und in einer anderen mit "Send" beschriftet sein. Um das Vokabular bei komplexen UIs einheitlich zu halten, ist es ratsam, ein Glossar mit wichtigen Begriffen anzulegen.

Augenführung im Webdesign

Wenn wir eine Webseite betrachten, nehmen wir zu jedem Zeitpunkt nur einen kleinen Bruchteil des gesamten UI wahr. Das liegt daran, dass das menschliche Auge nur einen kleinen scharfen Bereich im Zentrum des Blickfelds besitzt. Unsere Augen hüpfen also ständig von einem Element zum nächsten. Dabei ist es für uns leicht Dinge zu übersehen, nach denen wir nicht bewusst Ausschau halten. Durch geschickte Anordnung der UI-Elemente können wir die Aufmerksamkeit des Nutzers gezielt lenken und so Frustration und Missverständnisse vermeiden.

Aus der Wahrnehmungspsychologie sind Gestaltgesetze bekannt, die beschreiben, wie wir visuelle Informationen strukturieren und welche Elemente wir als zusammengehörig empfinden.

Eines der Gestaltgesetze, das bei falscher Anwendung schnell zu Fehlern führen kann, ist das Gesetz der Nähe. Es besagt, dass Elemente, die nahe beieinander liegen als zusammengehörig wahrgenommen werden. Das ist zum Beispiel bei der Gestaltung von Formularen relevant um allfällige Missverständnisse zu vermeiden (Siehe Abb. 4). Hier werden Beschriftungen und Linien die nahe beieinander sind, fälschlicherweise miteinander in Verbindung gesetzt.

Texte auf Webseiten werden von den meisten Nutzern nur grob überflogen und häufig nur nach einer bestimmten Information abgescannt. Deswegen sollten lange Fliesstexte wenn möglich vermieden werden. Wenn es aber nicht anders geht, können wir den Lesern immerhin mit einigen Layout-Optionen die Orientierung im Buchstaben-Jungel erleichtern. Zum Beispiel können Abstände, Trennsymbole, Farben oder Schriftgösse den Text in klar unterscheidbare Blöcke unterteilen und somit eine visuelle Hierarchie schaffen, an denen sich die Augen orientieren können.

Abb. 5: Struktur schaffen mit Text-Layout

Grundsätzlich gilt: Je mehr Auswahlmöglichkeiten vorhanden sind, desto länger benötigt eine Person, um eine Entscheidung zu fällen. Diese Phänomen ist in der Psychologie als Hick's Law bekannt. Es gilt also im UI, die Anzahl der auswählbaren Möglichkeiten auf ein überschaubares Mass zu reduzieren. Generell ist es nicht ratsam, das UI mit unnötigen oder ablenkenden Bildelementen zu überfrachten.

Wie mache ich meine Anwendung barrierefrei?

Für Menschen mit Behinderung ist die Benutzung vieler Apps und Webseiten schwierig. Die Erkenntnisse aus dem UX können uns auch hier helfen, für jede Beeinträchtigung geeignete Mittel zu finden, um den Betroffenen die Bedienung zu erleichtern.

Blinde Personen

Gut strukturierte Dokumente
Beschreibungstexte für visuelle Elemente
Bedienung über Tastatur möglich

Sehbehinderte Personen

Gute Kontraste
Gut vergrösserbares Layout
Trennung von Inhalt und Layout

Hörbehinderte Personen

Text-Alternativen für auditive Elemente
Visuelles Feedback für alle Aktionen
Einfach geschriebene Texte

Personen mit motorischen Einschränkungen

Grosszügige Schaltflächen
Bedienung über Tastatur möglich
Keine ungewollten automatischen Aktionen

Personen mit Lern- und Aufmerksamkeitsstörung

Einfach geschriebene Texte
Gut lesbare Schriftarten
Keine ablenkenden Elemente

Wichtig zu beachten ist zudem die Farbenblindheit, die besonders bei Männern weit verbreitet ist. Durchschnittlich ist jeder zehnte Mann farbenblind. Deswegen ist es ratsam, wichtige Informationen im UI nicht nur mit Farben zu codieren, sondern eine Mehrfach-Codierung zu verwenden, die auch die Form des Icons oder Text als Unterscheidungsmerkmal einsetzt.

Google Chrome bietet hier nützliche Native Webtools, um Webseiten auf Barrierefreiheit zu überprüfen.

Lighthouse beispielsweise ist für einen allgemeinen Accessability-Test geeignet. Das Tool untersucht dabei unter anderem die Farbkontraste für gute Lesbarkeit, die Benutzerfreundlichkeit für Screenreader und Tastaturzugänglichkeit.

Abb. 6: Lighthouse (Google Chrome Webtool)

Mit dem Rendering-Tool lassen sich gezielt Farbenblindheit und anderen Sehstörungen simulieren. So kann man eine Webseite zum Beispiel verschwommen, ohne Farbe oder mit niedrigeren Kontrasten anzeigen lassen, um zu schauen, wie das UI für eine beeinträchtigte Person aussehen könnte.

Checkliste - Designen für Software Engineers

• Weitere Person für “Design Reviews” involvieren
• Glossar für genutzte Ausdrücke im UI erstellen, testen und unterhalten
• Häufiges, billiges Usbility-Testen (“Hallway Testing”) mit (ideal) immer neuen Personen
• Standard Design-System einsetzen (z.B. http://Material.io , Headless UI, …)
• Accessibility beachten