it-swarm.com.de

Lange Tabellen und Grafiken auf einer Seite: Wie kann man Speicherplatz teilen?

Wir haben eine Site mit einer Seite, die eine große Tabelle enthält, zu der wir auch einige Grafiken hinzufügen möchten. Die Tabelle könnte die gesamte Seite in Bezug auf Breite und Höhe leicht ausfüllen. Die Frage ist also: Wo setzen wir die Grafiken ein?

  • Wenn wir sie nach dem Tisch platzieren, sind sie möglicherweise ausgeblendet, da der Tisch immer länger wird.
  • Eine Idee war, den Tisch horizontal zusammenzudrücken und dann die Grafiken rechts einzufügen. Dies stellt sicher, dass jeder sie sieht, hat aber den Nachteil, dass die Tabelle jetzt sehr eng aussieht und die Grafiken auch klein sind.
  • Etwas "Dynamisches" - kleine Diagrammsymbole oder Hyperlinks, die mehr oder weniger Vollbilddiagramme in so etwas wie jQuerys Dialogen aufrufen.
  • Etwas anderes? Nicht viel von einem UI-Typ, also könnte es gut sein, dass wir etwas ziemlich Offensichtliches vermissen!
4
David N. Welton

Ich denke, das Einfrieren Ihres Tisches und das Scrollen in einer Art "Rahmen" ist wahrscheinlich die praktikabelste Lösung. Dann ist Ihre Tabelle immer sichtbar und Ihre Diagramme können einfach darüber oder darunter platziert werden, je nachdem, wie Sie Ihre Inhalte organisieren möchten.

Die Einschränkung bei den Vorschlägen, die ich habe, ist, dass davon ausgegangen wird, dass Ihre Tabelle im Grunde ein Datenraster ist, aber einige der Konzepte sollten gelten, auch wenn dies nicht der Fall ist.

Microsoft Dynamics CRM handhabt dieses Konzept meiner Meinung nach ziemlich gut. Ich glaube, ihre Lösung gilt für Ihre Situation, auch wenn Sie das Scrollen nicht auf Ihre Tabelle anwenden können.

Grundsätzlich werden im Produkt zwei Arten von Designs verwendet:

  1. Diagrammorientiertes Design: Erstellen Sie ein "Dashboard", in dem sich mehrere Diagramme entweder unter oder über der Tabelle befinden, je nachdem, welcher Inhalt Priorität haben soll und welcher Inhalt wird am häufigsten verwendet.
  2. Inhaltstabellenfokussierung: Lassen Sie die Diagramme rechts von der Tabelle deaktiviert sein, und lassen Sie den Inhaltsbereich zusammenklappbar sein. Die Diagramme können über ein Dropdown-Menü ausgewählt werden, sodass nicht alle Diagramme gleichzeitig angezeigt werden. Abhängig von der verfügbaren Bildschirmfläche kann es möglich sein, mehr als eine anzuzeigen.

Ein Beispiel für # 2 mit der erweiterten und der reduzierten Ansicht.

enter image description here

enter image description here

3
GotDibbs

Wenn Sie versuchen, die Aufmerksamkeit auf das Diagramm über der Tabelle zu lenken, können Sie die Tabelle standardmäßig ausblenden und dann das Diagramm über der Tabelle hinzufügen. Wenn Benutzer die Tabelle an dem Punkt sehen möchten, der nur einen Klick entfernt ist. Siehe Modell unten:

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

2
JeffH

Haben Sie darüber nachgedacht, Tabs zu verwenden?

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

1

Warum nicht einen Umschalter einrichten, damit die Benutzer eine Tabellenansicht oder eine Diagrammansicht im selben Bereich sehen können?

Legen Sie einen Scroller oder eine Paginierung auf den Tisch, um eine angemessene Länge zu erhalten.

Dies funktioniert, wenn Sie denselben Datensatz nur auf zwei verschiedene Arten anzeigen. Siehe Skizze unten.

enter image description here

1
RobC