Case Study: 360°-Umfrageergebnisse

Browserbasiertes Tool für die Darstellung von 360°-Umfrageergebnissen und Handlungsempfehlungen.

Tools: 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 360°-Umfrageergebnissen wies folgende Mängel auf:

Abb. 1: Alte Darstellung der 360°-Umfrageergebnisse auf Desktop
Abb. 2: Alte Darstellung der 360°-Umfrageergebnisse auf Desktop
Abb. 3: Alte Darstellung der 360°-Umfrageergebnisse auf Desktop
Abb. 4: Alte Darstellung der 360°-Umfrageergebnisse auf Desktop
Abb. 5: Alte Darstellung der 360°-Umfrageergebnisse auf Desktop
Abb. 6: Alte Darstellung der 360°-Umfrageergebnisse auf Desktop

In User-Tests hatte sich gezeigt, dass 

  1. die weißen Kacheln auf der initialen Ansicht (Abb. 1) als klickbar wahrgenommen werden, obwohl sie es nicht sind.
  2. nicht klar ist welche Aktion der Button “How can I improve” ausführt (müsste eigentlich ein Link sein, Benennung problematisch)
  3. unklar ist, dass die hellblauen Kacheln auf Abb. 2 anklickbar sind und was die Zahlen darin bedeuten 
  4. im Balkendiagramm nicht klar ist, wo die Eigenbewertung dargestellt wird
  5. der grüne Kreis mit dem Plus-Zeichen als Button wahrgenommen wird und die Bedeutung unklar ist.
  6. der Pfeil rechts zum ausklappen der Kategorien übersehen wird.
  7. unter Comments “Start”, “Continue” usw. nicht als klickbar empfunden wird.
  8. die QuestionsView sehr unübersichtlich ist.
  9. das Design als unprofessionell wahrgenommen wird.

Barrierefreiheit: Einige Informationen wurden nur beim “Hovern” (mit der Maus darüber “schweben”) angezeigt und konnten so von Nutzern ohne Maus nicht gesehen werden. (blaues Info-Icon (Abb 2) das eine Legende für die verwendeten Symbole enthält, Diagramm-Icon und die Verteilung der Antworten)

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, um die User Experience zu verbessern. Die für „Dashboard“ geschaffenen Design-Komponenten sollen außerdem weiterverwendet werden, um eine konsistente Corporate Identity zu schaffen (Die „Dashbo“ Case Study findest du hier). Da einige Kunden der Firma Questback große Konzerne sind lag ein weiteres Ziel in einer barrierefreien Gestaltung.

Die Herangehensweise

Zuerst überlegte ich wie ich die Design-Komponenten von „Dashboard“ auf das 360°-Umfrage-Szenario anwenden kann. Diese Umfragen unterscheiden sich von normalen dadurch, dass es verschiedene Bewertungsgruppen und eine Eigenbewertung gibt. Es sind also entsprechende Filtermöglichkeiten nötig. Als zusätzliche Transferleistung werden die Ergebnisse je nach Diskrepanz von Eigen- und Fremdbewertung kategorisiert:

  • Eigenbewertung entspricht Fremdbewertung: bewusste Stärke oder Schwäche
  • Eigenbewertung widerspricht Fremdbewertung: unbewusste Stärke oder Schwäche

Iterativer Design-Prozess

Der Einstieg

Ich entwickelte zunächst einige Ideen wie man den Einstieg gestalten könnte:

Abb. 7: Wireframe 360°-Umfrageergebnisse – Kategorieergebnisse
Abb. 8: Wireframe 360°-Umfrageergebnisse – Kategorieergebnisse mit Filter
Abb. 9: Wireframe 360°-Umfrageergebnisse – Kategorieergebnisse mit Filter und Icon-Legende

All diese Vorschläge sind für einen ersten Einstieg zu komplex. Sie stellen zu viele Informationen auf einmal dar. Die auf Abbildung 4 und 5 verwendeten Icon-Legenden erschweren die Erfassung der Informationen statt sie zu erleichtern.

Da diese Entwürfe zu viele Informationen auf einmal darstellen, entschied ich mich einen konkreten Einstiegspunkt zu schaffen:

Abb. 10: Wireframe 360°-Umfrageergebnisse – zwei Einstiegspunkte

Hier hat man zwei klare Einstiegspunkte: Über die Stärken oder die Schwächen. 

Ansicht für Stärken und Schwächen

Dann erfolgt die Unterscheiden zwischen bewussten und unbewussten Stärken oder Schwächen.

Abb. 11: Wireframe 360°-Umfrageergebnisse – Ergebnisse Stärken

Ein kurzer Pre-Test zeigte allerdings, dass Erklärungen für “Obvious” und “Hidden” Strengths benötigt werden. Zudem sorgen die Positionierung der Legende “Self perception” für Verwirrung. 

Abb. 12: Wireframe 360°-Umfrageergebnisse – Ergebnisse Stärken nach Pre-Test Änderungen

Außerdem besteht die Möglichkeit nach Bewertungsgruppen zu filtern. Hier habe ich mich für segmentierte Buttons entschieden. Diese bieten den Vorteil, dass alle Filteroptionen jederzeit sichtbar sind und keinen Content verdecken (wie beispielsweise durch ein Dropdowns) (https://uxmovement.com/buttons/why-segmented-buttons-are-better-filters-than-dropdowns/)

Abb. 13: Wireframe 360°-Umfrageergebnisse – Ergebnisse Stärken – Filter

Mit Klick auf eine Kategorie gelangt man zur Fragenansicht:

Abb. 14: Wireframe 360°-Umfrageergebnisse – Fragenansicht
Abb. 15: Wireframe 360°-Umfrageergebnisse – Fragenansicht – aufgeklappt

Die ähnelt stark der „Dashboard“-Ansicht. Man hat hier allerdings wieder die Möglichkeit nach Bewertungsgruppen zu filtern. Zudem hatte sich beim Pre-Test gezeigt, dass die Angabe des Gesamtrating noch gewünscht war. Dies habe ich oben rechts positioniert.

Kommentaransicht

Die Kommentare sind ebenfalls nach Bewertungsgruppen filterbar:

Abb. 16: Wireframe 360°-Umfrageergebnisse – Kommentaransicht

Das Ergebnis

Den klickbaren Prototypen findest du hier.

Usability-Evaluierung

Ich habe die Designs mithilfe von selbstdurchgeführten Inhouse-Usability-Tests evaluiert. Als Testpersonen habe ich Kollegen gewählt, die noch nicht mit 360°-Umfragen in Berührung gekommen sind.

Das Szenario

„Du bist Manager der IT Abteilung. Du hast heute von der HR Abteilung eine Email bekommen. Darin steht, dass deine Firma ein Tool gekauft hat, womit jeder Mitarbeiter eine Umfrage über sich selbst durchführen kann. Du kannst diese von verschiedenen Gruppen; deinen Mitarbeitern, Kollegen und deinen Vorgesetzten durchführen lassen.

Anschließend hast du eine Umfrage gestartet, die Fragen mit Bewertungsskalen zu 7 verschiedenen Kategorien und drei offene Fragen enthält. Die Kategorien sind bezogen auf deine Kompetenzen als Führungskraft. Du hast die Umfrage an Personen, die du selbst ausgewählt hast geschickt.

Zusätzlich hast du dich selbst bewertet mit dem Ziel deine Selbstwahrnehmung zu erfassen. 

Eine Woche später erhältst du einen Link zu den Ergebnissen. Du möchtest herausfinden, wie dein Ergebnis ist.“

Test-Ergebnisse und Lösungsvorschläge

Ich habe die gefundenen Probleme nach Schweregrad beurteilt. Zwei der gefundenen Probleme würde ich als kritisch bezeichnen. Das heißt, dass sie die vollständige Bearbeitung der Aufgabe verhindern. 

Diese sind:

  1. Bedeutung “hidden” und “obvious” in Bezug auf Stärken und Schwächen unklar.
  2. Zusammensetzung des Gesamtratings auf der Heatmap unklar

zu 1. Um diese Problematik zu lösen muss man andere Formulierungen finden. Ich habe mich entschieden die Überschriften in “Strengths you are aware of” und “Strengths you are not aware of” ändern. So kann man sich die Erklärtext sparen. Zumal auch moniert wurde, dass es auf dem Screen an Übersichtlichkeit hapert.

zu 2. Es muss gestalterisch klar werden, dass die Eigenbewertung nicht in die Gesamtbewertung miteinfließt. Daher habe ich die Selbsteinschätzung ganz nach rechts verschoben und durch einen größeren Abstand abgegrenzt. Da zudem nicht eindeutig war, was links dargestellt wird, habe ich die Überschrift “Categories” ergänzt.

Geringe Fehler verärgern Nutzer, behindern aber nicht die Erfüllung der Aufgabe.

So war nicht klar, was sich hinter “Resources” verbirgt. Ich habe mich entschieden sie in “Articles” umzubenennen.

Nächste Schritte

Da vielen Probanden nicht klar war, was Actions sind, wird eine Führung durchs Programm benötigt.