it-swarm.com.de

Wie können große Datenmengen kompakt angezeigt werden?

Ich habe eine datenbankgesteuerte asp.net mvc3-Webanwendung. Darin kann ein Benutzer zu einer Seite gehen und Daten eingeben, die auf dem Abschluss einer Aufgabe basieren. Ich habe die Aufgabe kühn gemacht, weil sie in dieser Anwendung enorm gewichtet ist. Die Auswahl einer Aufgabe enthält die referenzielle Verknüpfung zu einer Datenmenge. Derzeit (und im Aufbau) werden die Aufgaben in einer Dropdown-Liste aufgelistet.

Dies kann beispielsweise der Benutzer sehen, wenn er auf den Abwärtspfeil klickt, um das Dropdown-Menü zu erweitern:

[ id number  |   name   |  description  |  date  ]
[    1       |   Car    |  Repaired     |  4/20  ]
[    2       |   Door   |  Lock changed |  4/21  ]
[    3       |   Fridge |  cleaned      |  4/22  ]

Mit jedem dieser Daten sind jedoch weitaus mehr Daten verknüpft, z. B. wer die Aufgabe ausgeführt hat, welche Art von Tools verwendet wurden, wo die Arbeit ausgeführt wurde, wie lange es gedauert hat und vieles mehr. Insgesamt gibt es vier Tabellen, die mit ungefähr 11 kombinierten Feldern angezeigt werden müssen.

Es gibt viel zu viele Daten, um die gesamte Aufgabe in der Dropdown-Liste richtig anzuzeigen, und es wird für den Benutzer sehr schwierig, wie im Beispiel gezeigt, zu navigieren, sobald viele Daten vorhanden sind.

Ich habe versucht, in Google und SE nach einer guten Möglichkeit zu suchen, große Datenmengen wie diese anzuzeigen, konnte jedoch nichts finden, das zu dieser Situation passt.

Was ist ein guter Ansatz, um eine Sammlung großer Mengen relationaler Daten anzuzeigen und gleichzeitig dem Benutzer die Unterscheidung der verschiedenen relationalen Datensätze zu ermöglichen?

Bearbeiten

Die Aufgabe ist tatsächlich Teil einer größeren Datenerfassung, die schließlich festgeschrieben wird. In diesem Sinne stellt die Aufgabe einen großen Datensatz dar, der bereits eingegeben wurde. Dort gibt es nur Eins-zu-Eins-Beziehungen.

4
Travis J

Es gibt 11 Felder für jede Aufgabe ... aber müssen Sie dem Benutzer alle 11 in der Liste anzeigen? Warum finden Sie stattdessen nicht heraus, in welchen Feldern Benutzer die Aufgaben am einfachsten unterscheiden können (z. B. Datum, Kunde und Mitarbeiter), und zeigen dann den Rest der Informationen an, nachdem Sie einen Artikel ausgewählt haben, z damit:

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Sie haben jedoch in einem Kommentar angegeben, dass die Datenliste Zehntausende von Einträgen enthält. Dies sollte überhaupt nicht in einer Dropdown-Steuerung sein! Wenn ein Benutzer die Daten durchsucht, sollten sie in einem Rastersteuerelement wie einer Tabelle oder einer Tabelle angezeigt werden. Wenn der Benutzer ein Element aus dieser Liste auswählt, sollte dies über die Suche oder Filter in der Tabelle erfolgen. Sie können festlegen, dass die Zeile auf Hervorhebungen zeigt, und durch Klicken auf wird diese Aufgabe ausgewählt/aktiviert, wodurch sie vermutlich zu einem anderen verwandten Bildschirm weitergeleitet werden.

mockup

bmml Quelle herunterladen

Eine Dropdown-Steuerung ist jedoch für Tausende von Datensätzen völlig ungeeignet.

2
Myrddin Emrys

Sind Sie sicher, dass Sie das Dropdown-Menü verwenden müssen? Was passiert auf dem Rest der Seite? Dies ist ein klassischer Fall für das Master-Detail-Layout. Zum Beispiel:

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

2

Könnten Sie hier möglicherweise einen Drilldown-Ansatz verwenden? Das Beispiel von Myrddin Emrys beginnt sich ein wenig damit zu beschäftigen. Sie können dem Benutzer ein Dropdown-Menü mit all Ihren Datenpunkten (ID-Nummer, Name, Beschreibung usw.) anbieten, um dem Benutzer einen Ausgangspunkt zu geben, z.

Find job by:
[date |v]

Anschließend wird dem Benutzer eine Datumsauswahl angezeigt, um alle am ausgewählten Datum abgeschlossenen Aufträge zu finden. Der Benutzer kann dann die Ergebnisse weiter untersuchen, indem er beispielsweise einen "Namen" in den Ergebnissen der Datumssuche auswählt, bis er genau den Job findet, den er sucht.

Sie können sogar einige Tests durchführen, um die am besten verwendbare Option zum Starten einer solchen Suche zu ermitteln, und diese standardmäßig verwenden, anstatt die zusätzliche Dropdown-Auswahl anzubieten.

Ich hoffe, ich verstehe Ihr Problem richtig.

1
Tim

alle anderen haben es verstanden, warum nicht ich? :) :)

Diese Antwort kann sich ändern, wenn sich meine Lösung weiterentwickelt. Ich dachte, es wäre schön, wenn andere sehen würden, in welche Richtung ich gehen würde. Tut mir leid, wenn es nicht angegeben oder impliziert wurde, aber dies wird eine Webanwendung in asp.net sein.

Ich werde hier ein Tandem von Ansätzen verwenden. Filterung, Dropdown (nicht klassisch!), Gruppierung und Dashboard.

Filterung

Die Datensätze werden alle geladen, und oben in der Liste aller zu filternden Datensätze befindet sich ein Steuerelement, das anhand der relevanten Kriterien gefiltert wird.

DropDown

Diese Funktionalität wird insofern überladen, als sie auf den ersten Blick klassisch wie eine Dropdown-Auswahl aussieht, aber eine voll dynamische Erfahrung für die Interaktion darstellt. Stellen Sie sich eine Neuinterpretation des Dropdowns vor.

Gruppierung

Die Daten werden nach Beziehung in Feldern gruppiert, wobei das äußerste Feld die übergeordnete Beziehung ist. Eine einzelne Sammlung dieser Panels stellt eine Aufzeichnung dar und verfügt über eine Auswahlschaltfläche, die dem Thema eines "Dropdowns" entspricht (neu erfunden). Diese Bedienfelder füllen das Dashboard.

Dashboard

Das Dashboard wird ein Popout sein (denken Sie an einen Leuchtkasten, aber benutzerdefinierter). Am oberen Rand des Dashboards befindet sich ein Abschnitt zum Filtern von Datensätzen. Die Datensätze werden gruppiert und jede Gruppe befindet sich in einem Panel. Diese Bedienfelder werden in einer Listenform angezeigt (entsprechend dem Dropdown-Thema). Die Liste enthält eine Reihe von Datensätzen, ungefähr 50. Das Dashout-Popout ist scrollbar . Dies bedeutet, dass in einem eigenen Bereich gescrollt wird, ohne dass die gesamte Seite gescrollt wird. Wenn der Dashboard-Bildlauf das aktuelle Ende der Liste erreicht hat, werden weitere 50 Datensätze dynamisch geladen und angehängt.

Übersicht

Um eine visuelle Vorstellung zu bekommen, eine Übersicht, wenn Sie so wollen, stellen Sie sich ein <div> das sind 80% der Bildschirmbreite und etwa 40% der Höhe, die ein wenig vom oberen Rand der Seite nach unten eingerückt sind. Dies ist der Dashboard-Bereich. Der Dashboard-Bereich wird basierend auf der Benutzeraktivierung ausgeblendet und angezeigt (ich erfinde das Rad in gewisser Weise neu, indem ich die Funktionalität des Dropdowns hier überlade). Die Aktivierungssteuerung sieht folgendermaßen aus:

[ -- Select A Z -- ]

Wenn die Dropdown-Liste den Fokus erhält, wird das Dashboard angezeigt. Klicken Sie unten rechts [close] des Dashboards oder oben rechts [x] schließt das Dashboard. Wenn Sie außerdem auf eine beliebige Stelle außerhalb des Dashboards klicken, wird ein Dialogfeld angezeigt, in dem Sie gefragt werden, ob der Benutzer das Dashboard schließen möchte.

Der Benutzer navigiert dann durch die Bedienfelder und filtert nach Bedarf, um zur endgültigen Auswahl zu gelangen und diese dann mit einem Klick auf die Schaltfläche als ausgewählt zu markieren.

1
Travis J