Was ist eine bessere Benutzererfahrung: Eine scrollbare Tabelle oder eine Tabelle in voller Größe, in der das Browserfenster scrollen kann?
Was ist eine bessere Benutzererfahrung:
- Eine scrollbare Tabelle mit Überlauf-CSS-Einstellungen in einem DIV?
- Eine Tabelle in voller Größe, in der das Browserfenster einen Bildlauf durchführen kann?
Eine Tabelle in voller Größe, in der die Bildlaufleiste (2) des Browsers das Scrollen der Daten ermöglicht, ist eine bessere Benutzererfahrung, da mehrere Bildlaufleisten auf derselben Seite die Benutzer verwirren und ein wenig wütend machen würden.
Dies gilt natürlich nur, wenn die Daten, über die wir hier sprechen, im Mittelpunkt der Seite stehen. In diesem Fall wäre es akzeptabel, eine Bildlaufleiste für diesen Teil des Bildschirms zu haben.
- Mehrere vertikale Bildlaufleisten im selben Browserfenster können verwirrend sein, insbesondere wenn Sie ein Bildlaufrad verwenden.
Solange es im Kontext der Schnittstelle sinnvoll ist, kann jede Methode verwendet werden. Ich versuche jedoch, in der Regel keine scrollenden DIVs innerhalb von DIVs zu verwenden, da diese unordentlich werden. Wenn der Benutzer beim Scrollen den unteren Rand eines DIV erreicht, beginnt der Browser häufig mit dem Scrollen des nächsten DIV oder der Seite, was zu Problemen führen kann.
Nach meiner Erfahrung hat eine weniger komplizierte Benutzeroberfläche eine kürzere Akzeptanz-/Lernkurve, alle anderen Faktoren sind gleich.
Ich würde sagen, wenn Sie eine sehr große Datentabelle haben, ist der beste Weg, dies zu tun, CSS zu verwenden, um den Überlauf auf Ihrem <tbody> Tag in der Tabelle. Auf diese Weise wird Ihr Header (gespeichert in <thead>) bleibt sichtbar, egal wie viel der Benutzer scrollt. Dies gibt dem Benutzer eine ähnliche Erfahrung wie in einer Standard-App beim Anzeigen von Tabellendaten.
Ich denke, dies ist die beste Lösung, da sich der Benutzer beim Scrollen zwangsläufig daran erinnern muss, was diese Spaltenüberschriften sind. Wenn Sie es schaffen, dass sie die Überschriften immer sehen können, geben Sie ihnen definitiv eine bessere Erfahrung (Erinnern Sie sich an die unsterblichen Worte von Steve Krug - "Lass mich nicht nachdenken").
Geschah bei einem perfektes Beispiel einer sehr schlechten Implementierung eines scrollbaren Fensters im Browserfenster direkt nach dem Lesen dieses Beitrags. Ich denke, es ist klar, wie umständlich dies zu verwenden ist.
Ich habe zuerst versucht, die äußere Bildlaufleiste zu verwenden, mit der alle Hunde weggerollt wurden. Durch Bewegen der Maus innerhalb des inneren Fensters werden die Hunde gescrollt. Jetzt sehe ich nur noch die Hälfte des Fensters und muss zur ersten Bildlaufleiste zurückkehren, um sie zurückzuschieben. Primärer Inhalt sollte nicht in einen kleinen inneren Rahmen wie diesen verwiesen werden.
Fahren Sie mit Option 2 fort. Das Scrollen innerhalb des Bildlaufs verwirrt die Benutzer immer und es ist ärgerlich, wenn Sie nach unten gelangen und die Seite nach unten fliegt.
Meine Frage ist, haben Sie eine Möglichkeit, die Daten so zu sortieren, dass der angezeigte Datensatz zunächst kleiner ist? Entweder durch Verstecken mit einer Mischung aus JavaScript und CSS oder durch Verwendung von Skripten? Das Anzeigen vieler Datenzeilen ist nie so benutzerfreundlich. Wenn der Benutzer die Wunder von Strg + F nicht versteht, kann viel Zeit mit dem Scrollen verschwendet werden.
Sie können auch darüber nachdenken, Überschriften hinzuzufügen, die beim Scrollen am Anfang der Liste stehen. Auf diese Weise müssten Benutzer nicht nach oben scrollen, um herauszufinden, wie die Spaltennamen lauten.
Im Allgemeinen sollten verschachtelte Bildlaufleisten vermieden werden. Das einzige Mal, wenn sie wirklich verwendet werden sollten, ist, wenn Sie Steuerelemente unter der Tabelle haben, die möglicherweise übersehen werden, wenn die Tabelle sehr lang ist.
Dies hängt von der geplanten Verwendung ab.
Es gibt viele gute Gründe, verschachtelte Bildlaufleisten zu vermeiden, aber es gibt auch Fälle, in denen die Tabelle gescrollt werden sollte. Hier sind einige:
- Abgesehen vom Tisch passt alles andere auf den Bildschirm. Wenn dies der Fall ist, haben Sie keine verschachtelten Bildlaufleisten (d. H. Der Browser hat sie nicht), und es kann gute Gründe geben, nur die Tabelle scrollbar zu machen.
- Die Tabelle wird hauptsächlich verwendet, um einen kleinen Teil davon auf etwas anderes auf der Seite zu verweisen. Zum Beispiel müssen Sie drei Informationen basierend auf etwas in der Tabelle eingeben, nach dem der Benutzer suchen muss (das 'Etwas' ist zu intuitiv, um es zu automatisieren). Wenn Sie die gesamte Seite scrollbar machen, muss der Benutzer die Tabelle nach dem suchen, was er möchte, und dann nach oben scrollen, um die Informationen einzugeben, dann erneut suchen usw. Wenn Sie die Tabelle scrollbar machen, dann den Teil 'Ausfüllen' der Benutzeroberfläche bleibt auf dem Bildschirm.
beim vertikalen Scrollen kann der Browser das horizontale Scrollen verarbeiten (Sie sollten es vollständig eliminieren). Verwenden Sie dazu die Einstellungen für den CSS-Überlauf.
Studien haben gezeigt, dass es Benutzern nichts ausmacht, nach unten zu scrollen, aber sie hassen es, darüber zu scrollen.