Living Styleguides – die Zukunft im UI-Design?

Wie so ziemlich alle Artefakte in der Softwareentwicklung befindet sich auch der Styleguide in einem stetigen Wandel. Dennoch werden heutzutage häufig noch klassische Varianten eingesetzt, obwohl sich mit dem technischen Fortschritt längst neue Möglichkeiten eröffnet haben, um klassische Dokumente zum Leben zu erwecken. Dieser Blogbeitrag greift diese Thematik auf und soll am Beispiel Styleguide zeigen, wie durch dessen Weiterentwicklung die Zusammenarbeit zwischen Designer und Entwickler verbessert werden kann: Sind Living Styleguides die Zukunft im UI-Design?

Es war einmal … der dokumentenbasierte Styleguide

Lange Zeit herrschte ein Artefakt über die Zusammenarbeit zwischen UX-Designer und Frontend-Entwickler: der dokumentenbasierte Styleguide. Dieser entsteht klassischerweise wie folgt:

  1. Als Erstes wird eine Anforderungsanalyse durchgeführt.
  2. Auf Basis der Anforderungen erstellt der Designer Mockups.
  3. Die Mockups werden mit dem Kunden diskutiert (x-Iterationen) und final abgenommen.
  4. Danach erstellt der Designer die abgestimmten Grafiken im Design-Tool.
  5. Aus den Grafiken inkl. beschreibendem Text entsteht dann das Dokument „Styleguide“.
  6. Bei Anpassungen müssen alle Schritte wiederholt werden.
Grafik zum dokumentenbasierten Styleguide
Abbildung 1: Der dokumentenbasierte Styleguide

Als Kommunikationsgrundlage sollte ein guter Styleguide folgende Punkte beinhalten:

  • Konzept (Anwendung aus Projektsicht, Produktvision, UX-Ziele)
  • Struktur (Aufbau der Anwendung)
  • Interaktionsdesign (Gestaltung des Dialogs zwischen Nutzer und System)
  • Farbgestaltung (Verwendungsregeln für Farben)
  • Typografie (Schriftarten und -größen)
  • Icons und Grafiken (Übersicht aller Icons und Grafiken der Anwendung)
  • Standard-Interaktionselemente (wiederholt benutzte User-Interface-Elemente)
  • Spezialansichten (nicht dem Standard entsprechende UI-Ansichten und Steuerelemente)
  • Sprache (Kommunikationsstil und Wortwahl)
  • Multimedia (Einsatz von Bildern, Audio und Video)

Doch vor allem die Auflistung der Standard-Interaktionselemente ist in einem starren, dokumentenbasierten Styleguide nicht optimal. Diese kann bei der Menge verschiedener UI-States wie hover, active, selected, … pro Element schnell etliche Seiten lang werden. Die wenigsten Entwickler wühlen sich gerne durch seitenlange Dokumente und so besteht die Gefahr, dass der Styleguide nicht beachtet wird.

Die klassische Variante des Styleguides beinhaltet weiterhin folgende zwei Probleme: Die starre Sicht auf ein meist sehr langes Dokument erfordert viel Vorstellungsvermögen und es besteht keine Interaktionsmöglichkeit mit den verschiedenen Elementen.

Status Quo & Zukunft im UI-Design … es wird lebendig

Um die oben beschriebenen Kritikpunkte zu verbessern, bieten sich mehrere Ansätze an. Beispielsweise können mit Hilfe eines parallel gepflegten UI-Prototypen die Inhalte des Styleguide zum Leben erweckt werden. So wird ermöglicht, verschiedenen States der Standard-Interaktionselemente im Anwendungskontext auszuprobieren oder aber auch Spezialansichten im Detail abzubilden. Mit dieser „Hands-on“-Mentalität wird schneller klar, was die Designanforderungen sind und das lange Blättern in Styleguide-Dokumenten fällt weg.

Dieser Lösungsansatz beseitigt jedoch noch nicht folgende Probleme: Oft ist es im Projektalltag der Fall, dass der Designer Vorlagen entwirft, welche zu außergewöhnlich sind und mit dem eingesetzten UI-Framework nicht ohne erheblichen Mehraufwand umsetzbar sind. Ein weiteres Problem besteht im eingeschränkten Funktionsumfang des Prototyping-Tools. Denn nicht immer ist es möglich, das Endverhalten eins zu eins nachzubilden, wodurch falsche Annahmen entstehen können.

Der aktuelle Trend geht daher in die Richtung, den kompletten Styleguide „lebendig“ als eigene Webanwendung umzusetzen. Die Elemente werden also vor ihrer Verwendung in der eigentlichen Anwendung implementiert und die Entwickler müssen sich nur noch den Quellcode kopieren.

Folgend ein paar gute Referenzen:

Beispiel aus dem IBM Styleguide
Abbildung 2: Beispiel aus dem IBM Styleguide (www.ibm.com)

Die Vorteile einer solchen Umsetzung liegen auf der Hand: Neben einer guten Strukturierung der benötigten Informationen und Elemente wird vor allem die Wartbarkeit erheblich verbessert. Denn falls eine Farbe geändert werden muss, ist dies im „Living Styleguide“ meist nur eine Farbcode-Änderung im Stylesheet, während im traditionellen, dokumentenbasierten Styleguide unzählige Abschnitte und Designs angepasst werden müssen. Darüber hinaus kann die QA-Abteilung schon vor der eigentlichen Entwicklung das angeforderte Verhalten testen. Es besteht sogar die Möglichkeit, Änderungen am Styleguide direkt in die Anwendung fließen zu lassen, wenn beide Anwendungen auf das gleiche Stylesheet referenzieren. Dadurch können Redundanzen und Inkonsistenzen von vornherein ausgeschlossen werden. Wie sehr der Styleguide in den Entwicklungsprozess integriert wird, ist sicherlich projektabhängig, jedoch sind den Möglichkeiten der Optimierung hierbei keine Grenzen gesetzt.

Der „Living Styleguide“ ist mittlerweile in aller Munde und wird von zahlreichen Top IT-Unternehmen wie beispielsweise Google oder IBM verwendet. Er lässt die Lücke zwischen Design und Entwicklung immer kleiner werden und am Ende lacht vor allem einer: der Nutzer :-)!

Der Custom Usability Index (CUI) In Action – Usability Tests in der agilen Softwareentwicklung

Ausgangspunkt – Was bisher geschah…

In zwei früheren Blogbeiträgen habe ich einerseits das Konzept des Custom Usability Index vorgestellt, sowie die Vorbereitungsphase genauer erläutert, in welcher Usability-Kategorien individualisiert und gewichtet werden. Mit diesem Blogbeitrag möchte ich tiefer auf die tatsächliche Anwendung eingehen und erklären, welche Schritte notwendig sind, um am Ende eine valide CUI-Bewertung zu erhalten.

Folgender Stand soll als Startpunkt unseres Anwendungsbeispiels dienen. Wir befinden uns in der Entwicklung einer neuen Web-Applikation für einen Business-Kunden. Der verantwortliche Product Owner hatte zu Projektstart die Usability-Kategorien durch einen UX-Experten erklärt bekommen und seine Zielzustände definiert. Diese hat er im Anschluss entsprechend seiner Anforderungen priorisiert und so den Grundstein zur regelmäßigen Messung der zukünftigen Anwendung mit dem CUI gelegt. Nach einiger Entwicklungszeit ist nun ein erster Release Kandidat auf das QA-System deployt worden und steht zum Test bereit.

Der Custom Usability Index (CUI) in Action – Jetzt geht es Ihrer Software an den Kragen!

Wie geht es jetzt weiter? Für den Test der 13 Usability-Kategorien sind mehrere, verschiedene Testmethoden möglich. Die Auswahl der Testmethodik orientiert sich neben der Eignung für die jeweilige Usability-Kategorie auch an zahlreichen weiteren Faktoren. Die Verfügbarkeit der Endnutzer, das Wissen des Usability-Testers sowie zeitliche und monetäre Ressourcen spielen eine wichtige Rolle. Das Wunschszenario, mit mehreren Usability-Testern inklusive Protokollanten zahlreiche Endnutzer einem ausgiebigen und zeitlich intensiven Test zu unterziehen, ist in der Praxis selten der Fall.

Was verlieren wir durch das Eindämmen der Ressourcen? Hauptsächlich Genauigkeit und Unabhängigkeit in der Messung. Jedoch ist dies nicht das primäre Ziel des CUI. Durch die Tests, egal in welchem Ausmaß, sollen hauptsächlich Probleme und Verbesserungspotentiale aufgezeigt werden. Das heißt, selbst wenn das Ergebnis von Test A zu Test B abweicht sind die Schmerzpunkte klar und ermöglichen so Ansätze für eine besser nutzbare Software zu schaffen. Eine ressourcenschonende Variante des Testens ist die heuristische Evaluation. Die heuristische Evaluation ist eine Inspektionsmethode, bei der eine Gruppe von Usability-Experten eine Anwendung auf die Einhaltung von ausgewählten Richtlinien und Heuristiken (in diesem Fall die dem Nutzungskontext angepassten Usability-Kategorien des CUI) untersucht. Nach Nielsen finden ca. 7 Tester 80% der gesamten Usability-Fehler, Folge-Tests sind weniger ergiebig, da kaum noch weitere Fehler gefunden werden.

Nielsen (1995): Anzahl der heuristischen Evaluationen vs. gefundene Usability Probleme https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/

In der Praxis von agilen Softwareentwicklungsprojekten ist es jedoch Luxus überhaupt mehrere Usability-Experten für den Test zu bekommen, so dass üblicher Weise 1-2 Experten die Evaluation durchführen. Ein mit der Anwendung vertrauter Usability-Experte sollte je nach Komplexität der Anwendung und dem Dokumentationsumfang in der Lage sein, innerhalb von 1-2 Tagen ein brauchbares Messergebnis zu erzielen. Das heißt Sie können auch schon mit mehreren „kleineren“ Usability-Tests die Qualität Ihrer Software steigern und erste Verbesserungen erzielen.

Ein Beispiel – Die Messung von 13 Kategorien, 31 Kriterien „in a nutshell“.
Starten wir mit der ersten Kategorie Effektivität. Der Product Owner hat für diese Kategorie folgenden Zielzustand definiert: „Der Nutzer hat jederzeit Zugriff auf die zur Aufgabenerledigung notwendigen Funktionalität und erreicht diese in höchstens 2 Schritten. Er wird dabei nur mit den für ihn im Moment notwendigen Informationen belastet (Daten sollen im Vordergrund stehen).“

Zusätzlich wurde Effektivität mit der Fibonacci-Zahl 3 gewichtet.
Die Kategorie Effektivität besteht aus den zwei Kriterien Funktionsumfang und Angemessenheit. Für das Kriterium Funktionsumfang müssen nun die verschiedenen Use-Cases der Webanwendung überprüft und zusätzlich geschaut werden, ob die dazu benötigten Funktionen in höchstens 2 Schritten erreichbar sind.

Der Zielzustand für dieses Kriterium ist für den aktuellen Release Kandidaten vollständig erfüllt und es wird somit die Maximalbewertung von 5 Punkten erteilt.
Weiter geht es mit dem zweiten Kriterium Angemessenheit. Es fordert, dass der Nutzer nur mit den für ihn im Moment notwendigen Informationen belastet wird und die Daten im Vordergrund stehen.

Durch mehrere kleinere Auffälligkeiten gibt es 2 Punkte Abzug und somit eine Bewertung von 3 Punkten. Zusammengerechnet mit der Bewertung des Kriteriums Funktionsumfang bedeutet dies eine durchschnittliche Bewertung von 4 Punkten für die übergeordnete Kategorie Effektivität.
Die Messung der übrigen 12 Kategorien und 29 Kriterien sollte analog zum obigen Beispiel erfolgen. Da die vollständige Dokumentation eines CUI-Tests jedoch den Rahmen dieses Blogbeitrages sprengen würde, springen wir einen Schritt weiter und schauen uns die Endberechnung einmal genauer an.

Beispiel einer fertiggestellten CUI-Berechnung

Obige Tabelle zeigt eine vollständig ausgefüllte CUI-Berechnungsmatrix nach Testbeendigung. Der finale CUI-Wert setzt sich wie folgt zusammen:

  • Berechnung des Durchschnittswertes einer Kategorie (Summe der Bewertung / Anzahl der Kriterien)
  • Berechnung der relativen Gewichtung (Gewichtungswert der Kategorie / Summe aller Gewichtungswerte)
  • Berechnung des finalen Kategorienwertes (Durchschnittswert der Kategorie * relative Gewichtung)
  • CUI-Wert = Summe der finalen Kategorienwerte
  • CUI-Erreichungsgrad = ((CUI-Wert – 1) / 4)

Rechnen wir dies einmal anhand unseres Beispiels nach:

  • Bewertung der Kategorie Effektivität (Funktionsumfang 5 Punkte + Angemessenheit 3 Punkte) / 2 Kriterien = 4 Punkte
  • Summe der Gewichtungen aller Kategorien = 24
  • Relative Gewichtung der Kategorie Effektivität = 3/24 = 0,125
  • Einzelwert der Kategorie Effektivität = Bewertung von 4 * relative Gewichtung 0,125 = 0,50

Juhu geschafft – Und nun?

Erst einmal herzlichen Glückwünsch, dass Sie sich um das Wohl Ihrer Nutzer gekümmert haben. Doch nun gilt es weitere Schritte einzuleiten:

  • Entwickeln Sie Lösungsvarianten für die aufgezeigten Probleme in Form von Wireframes und Prototypen
  • Zeigen Sie den Einfluss kommender User Stories in Bezug auf die verschiedenen Usability Kategorien auf
  • Hinterfragen Sie die Anforderungen Ihres Product Owners … Sie sind der Experte!
  • Zeigen Sie aktiv Alternativen auf und setzen Sie die vorgesetzten Anforderungen nicht einfach stillschweigend um
  • Führen Sie in regelmäßigen Abständen einen erneuten CUI-Test durch und tracken Sie so den Einfluss der Verbesserungen bzw. neuer Anforderungen auf die Nutzbarkeit Ihrer Software

Durch den Custom Usability Index ist es möglich mit geringem Ressourcenverbrauch hilfreiche Ergebnisse zu erzielen. Das leichtgewichtige Vorgehen bettet sich nahtlos in den agilen Softwareentwicklungsprozess ein und zeigt Schwachstellen Ihrer Software auf. Durch regelmäßige Tests wird ein langfristiges Tracking möglich und Usability tatsächlich greifbar gemacht. Trauen Sie sich, Ihre Nutzer werden es Ihnen danken!

Ein Einblick in Usability Tests in der agilen Softwareentwicklung!

Usability priorisieren mit dem CUI

Ausgangspunkt – Let‘s get started!

In einem früheren Blogbeitrag habe ich den Custom Usability Index vorgestellt. Mit dem Index hat man die Möglichkeit, die Usability in Softwareentwicklungsprojekten zu tracken. In diesem Blogbeitrag möchte ich tiefer ins Detail gehen und erklären, welche Schritte notwendig sind, um den CUI zu verwenden.

Die oben abgebildete Grafik zeigt die Verwendung des CUI im Projektverlauf und soll als Grundlage für die weitere Betrachtung dienen.

Zielzustand der Kategorien – Wünsch dir was!

Spätestens zum Projektstart sollten die gewünschten Zielzustände der CUI-Kategorien feststehen, d.h. die verantwortlichen Stakeholder müssen eine Aussage darüber treffen, was in ihren Augen der Optimalzustand ist. Dieser kann von Projekt zu Projekt unterschiedlich sein wie folgendes Beispiel zeigen soll. Nehmen wir uns die Kategorie Individualisierbarkeit. Diese sagt aus, dass das System flexibel genug ist, um verschiedene Herangehensweisen zur Erledigung einer Aufgabe zu unterstützen. Der Nutzer soll das System an seine Vorerfahrungen, Kultur und Bedürfnisse anpassen können. Die Beschreibung könnte dann wie folgt aussehen:

  • Projekt 1: Der Optimalzustand der Kategorie Individualisierbarkeit wäre, dass der Nutzer vom ersten Start der Anwendung an verschiedene Erfahrungslevel einstellen kann und sich das System automatisch danach anpasst.
  • Projekt 2: Der Optimalzustand der Kategorie Individualisierbarkeit wäre, dass der Nutzer einen Expertenmodus aktivieren kann, welcher weitere Einstellungsmöglichkeiten im System aktiviert.

Die unterschiedlichen Optimalzustände haben zur Folge, dass im obigen Beispiel in Projekt 2 leichter die Maximalbewertung vergeben werden kann als in Projekt 1. Bei den Beschreibungen der Zielzustände ist es von Vorteil die tatsächlichen Nutzer, beispielsweise den Fachbereich eines Unternehmens, für welchen die neue Anwendung erstellt werden soll, einzubeziehen. Dadurch wird gewährleistet, dass die Usability-Anforderungen nicht an den Haaren herbeigezogen sind und die tatsächliche Anwendung perfekt auf den Endnutzer abgestimmt wird. Ein allgemeiner Merksatz hierbei: Je konkreter die Formulierung des Wunschzustandes, desto besser die späterer Messergebnisse!

CUI-Priorisierung – Aber es ist doch alles wichtig?!

Wenn der Zielzustand für alle CUI-Kategorien feststeht kann es in der Praxis häufig zu dem Problem kommen, dass ein großer Wunschkatalog aufgebaut wurde und die verantwortlichen Auftraggeber Angst vor großen Kosten haben oder eventuell andere betriebswirtschaftliche Ziele mit der Systementwicklung verfolgen. Um dies zu berücksichtigen ist im nächsten Schritt eine Priorisierung der CUI-Kategorien notwendig. Dazu sollen folgende Fragen unterstützen:

Die in der obigen Tabelle dargestellten Fragen sollen dem Usability-Experten als Leitfaden für das Interview mit dem Kundenverantwortlichen dienen. Die Antworten des Kunden müssen dabei in Zahlen übersetzt werden. Für die CUI-Priorität wird die Fibonacci-Reihe verwendet (1, 2, 3, 5, 8, 13, …, soweit nötig). Je höher die Zahl, desto wichtiger ist die Kategorie für das Projekt.

Falls sich der Auftraggeber schwer tut eine direkte Aussage über die Wichtigkeit der Kategorien zu treffen bietet sich auch die aus dem agilen Umfeld kommende Magic Estimation Schätzungsmethode an. Hierbei werden die einzelnen Kategorien kurz vorgestellt und dann nach Wichtigkeit sortiert. Durch das Vergleichen fällt es oft leichter eine Priorisierung festzulegen.

<Vorbereitung> CUI </Vorbereitung> – Darf ich jetzt endlich loslegen?

Ja! Es ist nun einerseits die inhaltliche (Zielzustände der Kategorien) sowie die geschäftliche Voraussetzung (CUI-Priorisierung) geschaffen, um die ersten Usability-Tests durchzuführen. Alle beteiligten Stakeholder wurden automatisch für das Usability-Thema sensibilisiert und (hoffentlich) begeistert.

Usability in Softwareentwicklungsprojekten

Das Problem: Usability greifbar und nachvollziehbar machen

Wie steht es um die Usability meiner Software? Diese Frage stellt sich spätestens, wenn die tatsächlichen Nutzer die Anwendung das erste Mal zu Gesicht bekommen. Oft wird dann festgestellt, dass die geplante Software gar nicht optimal auf die Endnutzer abgestimmt ist. Zu diesem Zeitpunkt ist es meist zu spät größere Änderungen einzupflegen. Folgeprobleme wie die mangelnde Akzeptanz oder gar das Scheitern des Softwareprojektes sind mittlerweile durch zahlreiche Studien bestätigt. Ansätze wie das „User Centered Design“, welche den Nutzer in den Mittelpunkt des Entwicklungsprozesses stellen, zeigen wie erfolgreich diese Einbindung und die frühzeitige Betrachtung von Usability sein kann. Die Kernproblematik, welche jedoch bestehen bleibt, ist die Schwierigkeit Usability greifbar zu machen. Ein Lösungsansatz dazu soll mit diesem Beitrag vorgestellt werden.

Die Idee: Der Custom Usability Index

Der Custom Usability Index (CUI) stellt eine Kennzahl dar, welche zum aktuellen Projektzeitpunkt den Erreichungsgrad der Usability einer Software misst.

Die Basis: 13 Designprinzipien

Die Kennzahl repräsentiert dabei die aggregierte Bewertung von 31 Kriterien, welche 13 übergeordneten Kategorien zugeordnet sind. Die Kategorien basieren auf selbstentwickelten Designprinzipien, welche ihren Ursprung in ISO-Normen und der State-of-the-Art Literatur zu Usability haben.

Zu Beginn eines Projektes können Stakeholder die oben dargestellten Kategorien individuell nach ihren Anforderungen gewichten und so Schwerpunkte festlegen.

Die Bewertung: Where the magic happens

Da jedes Projekt einzigartig ist, muss zu Projektstart zusätzlich definiert werden, wann ein Kriterium die jeweils beste Usability erreicht hat. Um ein einheitliches Verständnis zu bekommen, welchen gewünschten Zielzustand die Anwendung in den jeweiligen Kriterien haben soll, ist es von Vorteil das komplette Team inklusive der beteiligten Stakeholder bei der Festlegung einzubeziehen. Ein positiver Nebeneffekt ist, dass beide Seite für das Thema Usability sensibilisiert werden.

Die eigentliche Bewertung der Kriterien erfolgt mit speziellen Usability-Testmethoden. Die Tests sind im Verlaufe eines Projektes regelmäßig am Teilprodukt durchzuführen. Die Maximalbewertung eines Kriteriums ist nur erreicht, wenn der vorher definierte Zielzustand zu 100% erfüllt ist. Der finale CUI-Wert spiegelt dann die gewichteten Durchschnittsbewertungen der 13 Kategorien wieder.

Das Ergebnis: Usability macht glücklich

Durch regelmäßiges Messen des CUI wird Usability für das Team sowie alle Stakeholder nachvollziehbar. Es ist jederzeit sichtbar, in welchem Zustand sich die Software in den einzelnen Kategorien befindet und an welchen Stellen eventuell noch nachgebessert werden muss.

Im obigen Beispiel ist eine stetige Verbesserung der Usability bis Release 2 erkennbar. Mit Release 3 wurde jedoch ein Rückgang festgestellt. Durch das Erkennen der betroffenen Kategorien konnte direkt in der Entwicklung nachgebessert werden. Das Ergebnis wird mit einem großen Usability Zuwachs mit Release 4 deutlich.

Mit dem in diesem Blogbeitrag vorgestellten CUI wurde eine Möglichkeit aufgezeigt, um die Usability einer Software über ihren Entwicklungsprozess hinweg zu messen und für alle Projektbeteiligten nachvollziehbar zu machen. Durch die hohe Transparenz und Sensibilisierung der Stakeholder für Usability allgemein erhält die Software ein unverkennbares Qualitätsmerkmal.