Case Study: „Dashboard”

Browserbasiertes Tool für die Darstellung von Umfrageergebnissen und Handlungsempfehlungen

Tool: Figma

Rolle: UX und UI Designer

Firma: Questback GmbH

Dashboard“ initiale Ansicht

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:

Abb. 1: Alte Darstellung der Umfrageergebnisse und Handlungsempfehlungen auf Desktop
Abb. 2: Alte mobile Ansicht
Abb. 3: Alte mobile Ansicht
Abb. 4: Alte Tablet-Ansicht

In User-Tests hatte sich gezeigt, dass 

  1. 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.
  2. ein visueller Indikator für die Klickbarkeit der Kategorien fehlt 
  3. der Kategorie-Score (links) schlecht lesbar ist
  4. eine Angabe des erreichten Scores der einzelnen Fragen fehlt
  5. die Verteilung der Antworten bei den Fragen unklar ist (wie viele Menschen haben jeweils gar nicht zugestimmt, eher zugestimmt, zugestimmt oder sehr zugestimmt)
  6. die aktuelle Position unklar ist (Wo führt der Back-Button hin?)
  7. 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. 

Abb. 5: Wireframe Umfrageergebnisse – Fragen in einer Box

Die Fragen in getrennten Boxen darzustellen verbesserte zwar deren Übersichtlichkeit, verschlimmerte aber die Möglichkeit einer visuellen Zuordnung.

Abb. 7: Wireframe Umfrageergebnisse – Fragen in getrennten Boxen

Eine einspaltige, komplett verschachtelte Darstellung (ähnlich eines Akkordeon-Menüs) verschlechterte die Übersichtlichkeit ebenfalls.

Abb. 8: Wireframe Umfrageergebnisse – Kategorien und Fragen jeweils in Boxen
Abb. 9: Wireframe Umfrageergebnisse – Kategorien und Fragen jeweils in Boxen – ausgeklappt
Abb. 10: Wireframe Umfrageergebnisse – Kategorien und Fragen jeweils in Boxen – ausgeklappt 2

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:

Abb. 11: Scribble Umfrageergebnisse – Kategorien
Abb. 12: Scribble Umfrageergebnisse – Fragenansicht
Abb. 13: Wireframe Umfrageergebnisse – Kategorien
Abb. 14: Wireframe Umfrageergebnisse – Fragenansicht

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.

Abb. 15: Wireframe – Kategorie

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.

Abb. 16: Wireframe – Fragenansicht

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. 

Abb. 17: Wireframe – Breadcrumbs

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:

Abb. 19: Wireframe – Verlinkungen zu Helpful Actions und Selected Resources

Weitere Anforderungen:

Kommentare

Zusätzlich sollte die Möglichkeit bestehen Antworten auf offene Fragen in Form von Kommentaren darstellen zu können. 

Abb. 20: Wireframe – Verlinkung Kommentare

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:

Abb. 22: Wireframe – Kommentare

Abb. 23: Wireframe – Kommentare ausgeklappt

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:

Abb. 24: Wireframe – Response Rate

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