it-swarm.com.de

So bieten Sie externen Divs eine gute Benutzererfahrung für Drilldown / Klicken auf ein Raster

Meine Schnittstelle hat eine Tabelle (eine schöne, sortierbare Tabelle mit 3 oder 4 Spalten), die die Zusammenfassung einiger Daten darstellt. Jede Zeile repräsentiert ein wichtiges Datenelement.

Im Moment, wenn Benutzer auf eine Zeile klicken, erstelle ich ein neues Div (am Ende der Seite), das zusätzliche Informationen zu der Zeile enthält, auf die sie geklickt haben. Die Reihe ändert auch ihr Aussehen und wird etwas mutiger. Ich scrolle auch den Bildschirm zum neu erstellten Div.

Dies funktioniert, aber ich denke nicht, dass es eine sehr gute UX bietet.

Eine Lösung wäre, die Zeile innerhalb der Tabelle zu erweitern. Dies ist jedoch aus verschiedenen Gründen nicht einfach (die Tabelle ist eine Komponente von Drittanbietern und lässt sie nicht zu, selbst wenn das Scrollen erlaubt wäre, würde dies sehr verwirrend werden).

Kann jemand einen besseren Ansatz vorschlagen?

2
charles

Wenn es nicht erforderlich ist, Details für mehrere Zeilen gleichzeitig anzuzeigen, besteht eine Möglichkeit in einem faux-modalen Dialog. Legen Sie eine Überlagerung mit den Details der angeklickten Zeile auf den Bildschirm. Wenn Sie auf eine beliebige Stelle in der Überlagerung klicken, wird diese geschlossen. Dies gibt Ihnen auch eine einfache Möglichkeit, zeilenrelevante Schaltflächen (Löschen, Bearbeiten usw.) zu platzieren.

Die Überlagerung sollte über der angeklickten Zeile erscheinen und dieser entsprechen, um eine offensichtliche visuelle Verbindung damit zu haben.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Ich habe es nicht in dieses Modell eingefügt, aber Sie sollten auch eine explizite Schaltfläche haben, um das Overlay zu schließen, selbst wenn Sie auf eine beliebige Stelle klicken, um es zu entfernen.

1
Myrddin Emrys

Detailinformationen in der Zeile unten sind veraltete Modelle und es sieht auch seltsam aus.

Sie können alle Informationen im Mauszeiger (mit DIV) der Zeile (ODER) anzeigen. Sie können das Detailsymbol für die Klickaktion anzeigen, um weitere Informationen anzuzeigen.

Wenn Sie den Mauszeiger für die Zeile anzeigen, können Sie einige primäre Aktionen hinzufügen, z. B. "Details, Notiz hinzufügen, Zahlung hinzufügen, Guthaben hinzufügen usw.".

Example of hover control

@charles, wenn Sie DIV unterhalb der Zeile streichen, können Sie nur eine detaillierte Information gleichzeitig anzeigen.

besser, Sie zeigen die maximalen Details in der Liste (spaltenweise) an, dann können Sie die anderen ausblenden.

Punkt 2: Wenn sich der Benutzer einmal über die Zeile bewegt, weiß er, wie man schwebt.

0
jelumalai

Eine andere Möglichkeit ist ein zweites Feld, das Sie ausfüllen und dann anzeigen. Wenn Sie Elemente auswählen, indem Sie darauf klicken, werden sie in einem Bereich angezeigt, der sich größtenteils außerhalb des Bildschirms befindet. Durch Klicken auf den Bedienfeldteiler wird dieser nach vorne verschoben, wodurch der primäre Bildschirm verdeckt und die Details der ausgewählten Zeilen angezeigt werden. Dies ist für Benutzer etwas verwirrender (sie können verwirrt sein, wie das Panel angezeigt wird, oder sie bemerken nicht einmal, dass es eines gibt), kann jedoch mehrere Elemente gleichzeitig anzeigen, was bei einer einfachen Überlagerung nicht der Fall ist.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Wenn das zweite Bedienfeld größtenteils außerhalb des Bildschirms angezeigt wird, kann der Benutzer die Aktivität (den Rand der angezeigten Details) beim Auswählen von Zeilen sehen und bei der Auswahl Feedback geben und sie für diesen Rand des Bildschirms interessieren. Wenn es vollständig außerhalb des Bildschirms wäre, hätten sie weniger Grund zu untersuchen und herauszufinden, wie das Detailfenster angezeigt wird.

0
Myrddin Emrys