it-swarm.com.de

Wann ist eine Tabelle der richtige Weg, um Daten darzustellen?

UPDATE: Modelle hinzugefügt

Wir sind dabei, eine Webanwendungsoberfläche für die Verwaltung eines Online-Shops zu entwerfen. In einer solchen Oberfläche gibt es Seiten zum Verwalten von Produkten, Bestellungen und Kunden, auf denen jede Seite möglicherweise eine große Anzahl von Artikeln enthält.

Wir wechseln ständig zwischen den folgenden beiden Lösungen hin und her:

a) Tabellenmuster . Durch Klicken auf einen Artikel gelangen Sie zu einer neuen Seite mit dem Artikel. Zum Beispiel, während auf /products Seite Klicken auf Produkt 23 bringt dich zu /products/23 und zeigt Ihnen das Produkt.

b) Listenmuster . Haben Sie eine scrollbare Liste von Elementen auf der linken Seite (~ 20% Breite) und zeigt beim Klicken auf ein Element das Element auf der rechten Seite (~ 80% Breite). Mit anderen Worten, dasselbe Muster wie bei E-Mail-Clients (Mac Mail, Outlook usw.).

Ein Tabellenmuster erleichtert einerseits das Anzeigen von Elementen auf einen Blick, das Navigieren zu bestimmten Elementen jedoch schwieriger. Andererseits wird es mit einem Listenmuster schwieriger, eine bestimmte Spalte anzuzeigen (z. B. die Preise von Produkten anzuzeigen), aber viel einfacher, durch Elemente zu navigieren.

Wann ist eine Tabelle das "richtige" Muster? Offensichtlich hängt die Entscheidung von den präsentierten Daten ab (wie viele Spalten, wie viele Zeilen). Welche Faktoren sind bei der Bewertung der verschiedenen Lösungen zu berücksichtigen?

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

mockup

bmml Quelle herunterladen

8
Zack

In diesem Fall würde ich sicherlich das Tabellenmuster verwenden. Eines der häufigsten Dinge, die Benutzer tun müssen, ist, ein bestimmtes Produkt nach SKU, Titel oder Kategorie zu finden. Dies alles erleichtert eine Tabelle, insbesondere wenn die Spalten durch Klicken auf die Spaltenüberschriften sortierbar sind. Darüber hinaus erleichtert dies die Suche nach Produkten mit geringen Lagerbeständen. Sie können auch eine Filterfunktion über der Tabelle hinzufügen, wenn die Produktsammlung groß genug ist, um dies zu rechtfertigen (z. B. über 1.000).

Wenn der Benutzer auf den Bearbeitungslink klickt und dann seine Änderungen an den Produktdetails speichert, sollten Sie diese im selben Zustand wie beim Verlassen der Tabelle wieder in die Tabelle zurückbringen - dieselbe Sortierreihenfolge und dieselbe Seite, wenn Sie die Paginierung verwenden. Dies kann durch Anhängen einer Abfragezeichenfolge an die Bearbeitungslinks oder über Cookies erfolgen.

Darüber hinaus ist das Tabellenmuster (mit einer separaten Seite zum Bearbeiten von Produktdetails) ideal für eine Web-App, da es jeder Produktbearbeitungsseite eine eindeutige URL gibt. Dies ist sehr praktisch, wenn Sie beispielsweise Bestelldetails anzeigen. Sie können also einfach den Titel jedes Produkts in der Bestellung mit der Detailseite verknüpfen. Bei der Entwicklung solcher Systeme habe ich auf der Front-End-Website auch Links zu "Dieses Produkt bearbeiten" eingefügt, wenn der Benutzer als Administrator angemeldet ist. Dies ist weitaus einfacher, wenn Sie das Tabellenmuster verwenden.

PS: Sie sagen, dass E-Mail-Clients das Listenmuster verwenden. Beachten Sie, dass Google Mail nicht und äußerst schnell und einfach zu verwenden ist, mehr als andere webbasierte E-Mail-Systeme, die versuchen, das Listenmuster zur Nachahmung von Desktop-Software zu verwenden.

3
philwilks

Die Frage besagt, dass es schwieriger ist, mit einer Tabelle zu bestimmten Elementen zu navigieren, und dass es einfacher ist, durch Elemente mit einem Listenmuster zu navigieren.

Ein Tabellenmuster erleichtert einerseits das Anzeigen von Elementen auf einen Blick, das Navigieren zu bestimmten Elementen jedoch schwieriger. Andererseits wird es mit einem Listenmuster schwieriger, eine bestimmte Spalte anzuzeigen (z. B. die Preise von Produkten anzuzeigen), aber viel einfacher, durch Elemente zu navigieren.

Ich kenne nicht die vollständigen Umstände Ihres Szenarios, aber für das, was es wert ist, glaube ich nicht, dass die Behauptung zutrifft, wenn die von Ihnen verwendete Tabelle für jede Spalte und jede Paging-Funktion sortiert und gefiltert ist (ob Auswahlfeld oder Textfeld). (Das Beispiel ist nicht so hübsch, aber betrachten Sie eine Tabelle mit diesen Filtertypen: http://www.datatables.net/examples/api/multi_filter_select.html ).

1
mg1075