uxzentrisch erörtert:
Sortierbare Tabellen müssen sich am OS, nicht am Web orientieren

Thomas Link hat sich in einem interessanten, kleinen Test mit der Frage befasst, wie die ideal Gestaltung und Interaktion von sortierbaren Tabellen im Web-Tabellen aussehen sollte.

Sein Fazit zu den beiden Testkandidaten: Sie schnitten sehr ähnlich ab, die Version B ist aber zu bevorzugen, da sie Nutzern die Interaktion einfacher macht.

Das ist gut zu wissen und sollten wir in unseren Konzept- und Designbaukasten aufnehmen.

Ich frage mich dabei aber, warum wir im Web, wo ich die von Thomas getesten »Designs« für Standard halte, eigentlich ein so anderes Tabellen-Design haben als in Applikationen. Dort stellt sich diese Frage der Sortierung ja nicht – wir wissen und erwarten, dass man sortieren kann. Und das Interface muss entsprechend auch nicht so offensiv (überall Pfeile) daran erinnern.

Das Tablesorter Plugin (als Vertreter der Web-Tabellen) zeigt genau dieses Pfeile-Design: Demo.

Der OS X Finder (Screenshot) dagegen zeigt nur die aktive Sortierung+Pfeil, Ext JS handhabt es auch so (Demo), Windows auch.

Der klare Unterschied: Vergleicht man diese Varianten, liegt der Unterschied für mich in der klaren Click-Affordance/dem Click-Signifier, die die Beispielen aus der OS-Welt mitbringen. Diese zeigen, dass man die gesamte Tabellen-Spalte wie einen Link/Button klicken kann.

Gewinner wäre für mich dann also eine Variante B.2:

  • Pfeile nur für die aktive Spalte nutzten (aber lieber neben dem Text, das ist gewohnter)
  • durch Link/Button-Design den übrigen-Spalten einen Klickimpuls geben (hier Unterstreichung)
  • auch ohne MouseOver anzeige, wie groß die klickbare Fläche ist (hier Hinterlegung)

Quick&dirty visualisiert könnte das so aussehen:

Was meint ihr?

4 Kommentare

Maikel vor 5 Jahren

Sortieren kann man in zwei Richtungen, niedrigster oder höchster Wert zuerst. Version A bietet also die Möglichkeit, mit einem einzigen Klick in der gewünschten Richtung zu sortieren (auch wenn man dazu recht genau zielen muß). In den anderen Versionen muß man oft 2x klicken, um eine Sortierung in der gewünschten Richtung zu bekommen. Dem Vorschlag fehlt demnach auch eine Visualisierung (Unterstreichung) in der aktiven Spalte, die signalisiert, daß man durch Klick darauf die Sortierrichtung ändern kann.

Mal abgesehen davon, daß ein gänzlich unerfahrener Benutzer (mir fallen da so einige ein) nicht weiß, daß er durch Klick auf einen SpaltenHeader die Tabelle sortieren kann. Diese Möglichkeit wird in Version A besser visualisiert.

Desweiteren zum Sinn der vielen Pfeile in Version A: Im Web ist es nicht so selbstverständlich daß man Tabellen sortieren kann wie es das im OS ist.

Thomas Link vor 5 Jahren

@Maikel
Die Möglichkeit der Kontrolle der Sortierung ist im »Original« umgesetzt: http://boerse.raiffeisen.ch/raiffeisen2/listings/stockPrices.jsp
Was Du lapidar als »genau zielen müssen« beschreibst hat zur Folge, dass man zum Klicken/Treffen die Mausgeschwindigkeit massiv verlangsamt, damit man die Fläche trifft. Dieses Prinzip habe ich in meinem Artikel nur als Referenz zum wissenschaftlichen Bezeichnung (Fitt’s Law) erwähnt und diese Gleichung beinhaltet eine Logarithmus-Funktion. Demzufolge also keine lineare Verlangsamung!

Alleine die Darstellung der Pfeile hat dazu geführt, dass die Testpersonen tatsächlich vermehrt auf die Pfeilbereiche geklickt haben. Das bestätigen auch meine Beobachtungen im Testlabor.

Zudem bin ich erschrocken, wie falsch die Pfeile zur Sortierung von Testpersonen interpretiert werden! Auch wenn ich keine genauen Zahlen habe – ein entscheidender Teil der Testpersonen denkt bei einem nach unten zeigenden Pfeil ▼ an eine Richtungsangabe – also Klein-zu-Gross – , während andere den Pfeil als grafische Darstellung von Gross-zu-Klein interpretieren. Einfach mal selbst im Finder/Windows Explorer überprüfen: Es ist im Betriebssystem das Letztere.

@Tobias
Der Grund für meinen Vorschlag liegt ist der effizienten Nutzung des verfügbaren Platzes. Du hast in Deiner Skizze den Pfeil neben den Titel »Tiefst« gesetzt. Da hat er wunderbar Platz. Leider sieht das in der »+/-%« Spalte anders aus und man muss die Spaltenbreiten der Tabelle je nach sortierter Spalte ändern. Das wollte ich vermeiden.

Nebenbei: Die Darstellung ist nicht meine Idee – hab ich von Windows Vista geguttet ;-)
http://quince.infragistics.com/Patterns/Sortable%20Table.aspx

Tobias Jordans Autor vor 5 Jahren

Hallo Maikel, danke für deinen Kommentar.

Dein letzter Absatz beschreibt genau meinen Punkt: Weil es im Web nicht so selbstverständlich ist, dass man Tabellen sortieren kann, empfehle ich, sich an den »Tabellen« zu orientieren, bei denen es selbstverständlich ist: Im Betriebssystem (OS).

Was deine übrigen Anmerkungen angeht:
Du hast natürlich recht, dass quasi mehr Feature in Version A stecken und man auch noch mehr Feature einbauen könnte. Ich halte das aber für kontraproduktiv. Es ging in dem Artikel von Thomas ja darum, eine gut verständliche Lösung zu erzeugen und nicht die, die mit den wenigsten Klicks die meisten Funktionen erreichbar macht. Und sein Test hat ja schon gezeigt, dass solche Zusatzfunktionen die Interaktion sehr stark verkomplizieren. Ich würde große Klicktargets die man nötigenfalls 2x klicken muss immer kleinen, multifunktionalen Klicktargets vorziehen – und ich bin sicher, es hat sich im OS nicht ohne Grund durchgesetzt.

Auch halte ich die Entscheidung, diese Zusatzfeature eher erfahrenen, als unerfahrenen Nutzern anzuzeigen, für richtig: Die Primärfunktion der Tabelle ist nicht die Sortierung, sondern die Datendarstellung. Die Sekundärfunktion darf nicht (visuell) ablenken, was sie in Version A tut. Lieber lasse ich unerfahrene Nutzer aufwändiger in der Tabelle suchen, als *allen* Nutzern das Lesen und Wahrnehmen der Tabellen und Tabellenspalten zu erschweren.

@Thomas zur Pfeil-Platzierung: Ja, da hast du Recht. Bin wohl zu sehr an die WindowsXP- und OS X-Welt gewöhnt :).

Thomas Link vor 5 Jahren

Apropos: Die eigentliche Motivation, alle Icons in Variante A darzustellen war die Möglichkeit zur Sortierung sichtbarer zu machen.

Die Icons haben keinen Vorteil gegenüber der Linkauszeichnung. In Deiner Variante B2 sehe ich die beste Lösung – leider etwas unschön durch die vielen Linien.

Nun kann ich noch mal versuchen – mit vielen Argumenten und von Experten gestützt – die Pfeil-Orgie abzuwenden.
#Beratungsresistenz