Tabelle sortieren – (k)eine leichte Aufgabe

Unzählige Stunden habe ich wohl schon mit dem UI-Pattern umsortierbarer Tabellen verbracht. Nicht nur im Verschieben einzelner Pixel – sondern auch in gemeinsamen Spekulationen über “was funktioniert und was nicht”…

Schluss mit Hypothesen, dachte ich mir.

Nun also wie versprochen – mit einem Tag Verspätung – die Auswertung meiner bescheidenen Chalkmark-Studie:

Hier die beiden Testkandidaten im Vergleich:
A:

B:

A – Jede sortierbare Spalte hat Pfeile für auf- und absteigende Sortierung. Die aktuelle Sortierung wird mit schwarzem Pfeil angezeigt.

B – Nur die aktuell sortierte Spalte ist hervorgehoben und besitzt nur den Pfeil der Richtung der Sortierung.

Die Testaufgaben waren explizit formuliert. Beispielsweise: “Du möchtest die SMI Tabelle nach Name sortiert haben.” So kann man ausschliessen, dass es sich um ein Problem im Verständnis der Frage handelt.

Das Management Summary vorneweg: Spürbare Vorteile für Variante B durch grosse Fehlertoleranz und leichteres Klicken durch grössere Klickfläche (Fitt’s Law).

Ich muss jedoch zugeben, dass beide Lösungen funktionieren können. Denn ganz durchfallen tut auch A nicht. Jetzt aber zu ausgewählten Details…

Problem: Verwirrung durch die unnötige Anzahl an Pfeilen

In beiden Testfällen gibt es – vermutlich unachtsame – Klicks auf die Pfeile der ersten Spalte, obwohl jeweils die Sortierung der anderen Spalte gefragt war.

Zum Vergleich das positive Resultat der übersichtlicheren Variante B. Die eine Testperson beim Sortieren der SMI Werte hat wohl zuweit gedacht: Die umgekehrte Reihenfolge von der Tiefst-Spalte ist nicht nach Höchstwerte sortiert ;-)

Zwang zum Pfeil-Klick

Interessantes Detail der exakten Klick-Positionen bestätigt eine Ahnung: 65% der Personen fühlen sich gezwungen exakt den jeweiligen Auf- oder Ab-Pfeil mit der Maus zu treffen. Das ist eine Klickfläche von ca. 11×8 Pixel!
Fatal wäre es, wenn tatsächlich nur die Klickfläche der Pfeile verlinkt wäre! Denn dann wären 25% der Klicks auf die Bezeichung im Spaltentitel wirklungslos.

Hingegen als sehr fehlertolerant erweist sich die Auszeichnung von Spaltentitel als Link. 85% treffen eine gültigen Bereich. Woher die deutlich ungenauen beiden Klicks oberhalb kommen kann ich mir jetzt so nicht erklären.

In der Summe heisst das für den Task-Erfolg – je nach Umsetzung – eine Patt-Situation (A: 90% zu B: 85%) oder ein deutlicher Vorteil für B, falls nur die Pfeile verlinkt sind.

Fitt’s Law

Je grösser die wahrgenommene Zielfläche für die Maus ist, desto schneller bewegt man die Maus darauf zu und kann natürlich auch leichter treffen. Die zu erwartende Verzögerung bei Verkleinerung ist nicht linear, sondern logarithmisch. Hier also der Heatmap Vergleich der geklickten Flächen, welcher zeigt dass der spontan geklickte Bereich durch weglassen der Pfeile weniger konzentriert ist.

Für diese Beurteilung ist auch nicht relevant, ob nun in Variante A 100% der Treffer auf dem kleineren Fleck vereint sind.

Abschliessend noch zwei Kommentare und die Auswertung der Präferenzen.

Zu Variante A:

Grösse der klickbaren Fläche beachten!

Zu Variante B:

Die grafische Darstellung der Sortierpfeile ist bei den auf- und absteigenden einleuchtender als bei der Version 2. Da aber die nächste Aktion bei einer Spaltensortierung klar ist, finde ich die mit den klickbaren Texten ausreichend und nicht so’n Gefummel. Nur die Pfeildarstellung sollte anders gemacht werden.

Die sechzehn Testpersonen haben sich nach Abschluss aller Tasks mit einer geringen Mehrheit für Variante B entschieden. Variante A bevorzugen 7 und Variante B bevorzugen 9 Testpersonen.

Natürlich möchte ich meine Entscheidung nicht aufgrund der quantitativen Betrachtung treffen – denn 7 zu 9 ist unentschieden.
Den Ausschlag für meine Wahl von Variante B sehe ich im grafisch überlegenen Resultat und der bestechend einfachen Umsetzung. Keine Pfeile bedeutet weniger “Noise” und gleichzeitig wird bei vielen Spaltentitel für die Pfeile kein zusätzlicher Platz benötigt. Was das im ungünstigsten Fall zur Folge hat zeigt die

Vorlage der Tabellensortierung

.