Browserbasiertes Tool für die Darstellung von Umfrageergebnissen und Handlungsempfehlungen
Tool: Figma
Rolle: UX und UI Designer
Firma: Questback GmbH
Das Problem
Die Firma Questback möchte nicht nur Umfrageergebnisse übersichtlich darstellen. Den Kunden sollen zudem Handlungsempfehlungen zur Behebung der gefundenen Probleme angeboten werden.
Die bisherige Darstellung von Umfrageergebnissen wies einige Mängel auf:
In User-Tests hatte sich gezeigt, dass
- die Zuordnung von Kategorie (links) und den dazugehörigen Fragen (rechts unten) unklar ist. Dies trifft insbesondere bei kleinen Bildschirmen zu, auf denen man die Fragen initial nicht sieht.
- ein visueller Indikator für die Klickbarkeit der Kategorien fehlt
- der Kategorie-Score (links) schlecht lesbar ist
- eine Angabe des erreichten Scores der einzelnen Fragen fehlt
- die Verteilung der Antworten bei den Fragen unklar ist (wie viele Menschen haben jeweils gar nicht zugestimmt, eher zugestimmt, zugestimmt oder sehr zugestimmt)
- die aktuelle Position unklar ist (Wo führt der Back-Button hin?)
- nicht klar ist auf welche Problembereiche sich die empfohlenen “Actions” beziehen.
Schwächen im responsiven Design: Da das Design nur für Desktop konzipiert wurde, war die Darstellung auf anderen Bildschirmgrößen nicht optimal.
Das Ziel
In erster Linie galt es die aufgetretenen Usability-Probleme gestalterisch zu beheben. Zudem sollten Design-Komponenten entwickelt werden, die sich für verschiedene Umfragetypen weiterverwenden lassen. Da einige Kunden der Firma Questback große Konzerne sind lag ein weiteres Ziel in einer barrierefreien Gestaltung.
Die Herangehensweise: Iterativer Design-Prozess
1. Optische Zuordnung Kategorien und Fragen
Nach dem Gestalt-Gesetz der Nähe werden Elemente, die nah beinander stehen als zugehörig empfunden.
Die optische Zugehörigkeit von Kategorien und Fragen zu verbessern, gestaltete sich zunächst schwierig. Ich versuchte zuerst die Fragen in die initiale Ansicht (viewport) zu holen, indem ich die „Recommended Actions“ entfernte. Die ausgewählte Kategorie hob ich zudem optisch hervor. Dies verbesserte jedoch nicht die fehlende optische Zuordnung zwischen Kategorien und Fragen. Zudem war dieser Entwurf sehr unübersichtlich, da sich alle Fragen in einer ausklappbaren weißen Box befanden.
Die Fragen in getrennten Boxen darzustellen verbesserte zwar deren Übersichtlichkeit, verschlimmerte aber die Möglichkeit einer visuellen Zuordnung.
Eine einspaltige, komplett verschachtelte Darstellung (ähnlich eines Akkordeon-Menüs) verschlechterte die Übersichtlichkeit ebenfalls.
Die Lösung lag darin die Fragen auf eine weitere Seite auszulagern. Man würde also zuerst eine Kategorie auswählen und käme dann auf eine gesonderte Seite mit den jeweiligen Fragen in getrennten, aufklappbaren Boxen.
Auf diese Weise kann auch eine optimale mobile Darstellung erzielt werden:
Für die Visualisierung des Scores habe ich ein kürzeres Balkendiagramm mit Trennstrichen gewählt. So ist besser erkennbar, wie weit der Balken gefüllt ist.
2. Visueller Indikator für Klickbarkeit
Die Pfeile dienen als visuelle Indikatoren für die Klickbarkeit der Kategorien. Maus-Nutzer bekommen zusätzlich einen Hover-Effekt angezeigt: Der Schatten der Kachel verstärkt sich.
3. Lesbarkeit Kategorie-Score
Die Zahl (Score) vergrößert. Durch die Ergänzung “/5” verdeutlicht was der höchste Score ist.
4. Die erreichten Scores der Fragen und die Verteilung der Antworten
Nun findet man den jeweiligen Score der Fragen wie auch die Verteilung der einzelnen Antworten auf der Fragenseite.
6. Aktuelle Position
Statt eines Back-Buttons habe ich mich für ein Breadcrumb-Navigation entschieden. Diese bieten den Vorteil, dass der User nicht nur sofort sehen kann, wo er sich befindet. Er kann die zurückliegenden Bereiche auch direkt per Link ansteuern.
7. Bezug zwischen Problembereichen und empfohlenen “Actions”
Ich entschied mich die empfohlenen Actions sowie die Hilfeartikel ebenso auf separate Seiten auszulagern. Die Darstellung der Verlinkungen sollte der der Kategorien ähneln:
Weitere Anforderungen:
Kommentare
Zusätzlich sollte die Möglichkeit bestehen Antworten auf offene Fragen in Form von Kommentaren darstellen zu können.
Es können bis zu drei verschiedenen offenen Fragen Kommentare verfasst werden. Da die Länge der Fragen variieren kann sind ausklappbare Boxen auch hier die erste Wahl:
Die untereinander angeordneten weißen Boxen ermöglichen eine flexible Länge der gestellten Fragen (Mehrzeiligkeit). Durch die Möglichkeit des Einklappens bleibt die Übersichtlichkeit gewahrt. Mit Klick auf das Plus-Zeichen können die Kommentare direkt als Handlungsmaßnahme übernommen werden.
Response Rate
Die Darstellung der Response Rate (Antwortrate) hat zuvor gefehlt und wird nun in einer weiteren weißen Box dargestellt:
Das Ergebnis
Auf der Artikelübersichtsseite habe ich mich für verlinkte Überschriften entschieden, um der Problematik der “Learn more”-Links aus dem Weg zu gehen (https://www.nngroup.com/articles/learn-more-links/). Um die Lesbarkeit zu verbessern, ist die Zeilenlänge für die Artikel für Desktop auf die empfohlenen 60 Buchstaben pro Zeile begrenzt (https://marketingunited.org/wiki/Zeichen_pro_Zeile). Da es wichtig ist Dead-Ends zu vermeiden, findet sich am Ende jedes Artikels eine Verlinkung zum nächsten Artikel:
Bei den Actions sieht man nun genau, welchen Problembereichen diese zugeordnet sind. Diese können zu einer Liste von Handlungen hinzugefügt werden. Das System sucht automatisch die passenden Handlungsempfehlungen aus einer Datenbank heraus. Der Kunde kann diese bearbeiten oder auch löschen. Die obersten Empfehlungen werden initial ausgeklappt dargestellt. So kann der User direkt Empfehlungen sehen.
Erstellung eines Prototypen (Clickdummy)
Für die interne Evaluierung habe ich einen Clickdummy erstellt:
Den klickbaren Prototypen findest du hier.
Responsive Design
Alle Designs sind für fünf verschiedene Breakpoints entworfen: 1199px, 992px, 767px, 480px und 320px. Hier eine Auswahl der responsiven Entwürfe:
Übersichtsseite
Fragenansicht
Kommentaransicht
Nächste Schritte
Als nächstes sollen die Designs mithilfe von Usability-Tests evaluliert werden. Um eine konsistente Corporate Identity zu schaffen werden die gestalteten Design-Komponenten für 360°-Umfrageergebnisse weiterverwendet. Den Leadership Use Case findest du hier.
Weitere Projekte
LV1871 Homepage
360°-Umfrageergebnisse
Questback Access
wao.io Applikation
