it-swarm.com.de

Aktivieren Sie alle Kontrollkästchen für die Benutzerfreundlichkeit

Ich frage mich nur, wie Sie am besten alle Funktionen für eine HTML-Tabelle mit mehreren Zeilen mit einer Spalte mit Kontrollkästchen aktivieren/deaktivieren können.

Einige Möglichkeiten:

Zusätzliches Kontrollkästchen in der Tabellenüberschrift, ähnlich wie bei Google Mail. z.B. [ ] Is enabled?

Überprüfen Sie alle Links in der Tabellenüberschrift. z.B. Is enabled? (check all)

Aktivieren Sie alle Links in der Tabellenfußzeile direkt unter den Kontrollkästchen.

19
bcmcfc

Ich finde diesen Ansatz ziemlich selbsterklärend (keine Notwendigkeit für " Alle auswählen"):

screenshot
(Von: http://www.ibm.com/developerworks/web/library/wa-jquery1/ )

Das Schlüsselwort hier ist jedoch " ich finde"! @ ChrisF hat einige gute Punkte in seine Antwort , aber ich denke, dass Sie die verschiedenen Ansätze mit echten Benutzern in der richtigen Reihenfolge vergleichen müssen um herauszufinden, welche Lösung am besten passt.

Ein paar Hinweise zum gezeigten Ansatz:

  • Machen Sie die Antwort sofort. d.h. alle Kästchen sollten sofort auf dem Kunden deaktiviert sein (keine Hin- und Rückfahrt oder verspätete Formularübermittlung), um die Erwartungen des Benutzers zu erfüllen.
  • Lassen Sie das UI-Widget "Alle auswählen" mit dem für jedes Element identisch sein. Es ist immer noch ein Kontrollkästchen - dies betrifft nur die gesamte Spalte (und wird daher in die Spaltenüberschrift eingefügt).

[~ # ~] edit [~ # ~]

12
jensgram

Aktivieren Sie alle und deaktivieren Sie alle Aktionen. Als solche sollten sie so dargestellt werden, wie Aktionen dargestellt werden: als Schaltflächen.

Ich habe dies als Kommentar in einer anderen Antwort gepostet, möchte es aber hier einfügen, um zu erklären, warum die Verwendung eines Kontrollkästchens eine schlechte Idee ist:

Das Problem bei der Verwendung eines Kontrollkästchens "Alle überprüfen" ist, was bedeutet das? Was passiert, wenn Sie das Kontrollkästchen Header deaktivieren? Deaktiviert es alles? Was passiert, wenn Sie eines der folgenden Elemente deaktivieren? Deaktiviert es das Kontrollkästchen Header? Was passiert, wenn Sie alle Artikel einzeln prüfen? Aktiviert es das Kontrollkästchen Header? Das Kontrollkästchen vermittelt nicht die richtige Bedeutung, damit es eine gute Lösung ist.

Schaltflächen (oder Links), die angeben, was sie tun, lassen absolut keinen Raum für Verwirrung. Es gibt nichts zu überlegen, und ist es nicht unser Ziel, es so zu gestalten, dass die Grundfunktionen eines Systems ohne nachzudenken ausgeführt werden können (damit die Gehirnleistung für die tatsächlich ausgeführte Funktion verwendet werden kann)?

12
Charles Boyung

Früher mochte ich das einfache Kontrollkästchen oben, was gut daran ist, ist Erfahrung, fast jeder weiß, was es tut, und wenn er es nicht tut, braucht er einen Klick, um es herauszufinden ... aber ich habe gesehen, wie LinkedIn etwas getan hat ordentlich:

enter image description here

7
Ayyash

Das zusätzliche Kontrollkästchen in der Kopf- oder Fußzeile ist direkter. Die Option ist eng mit der Spalte verknüpft, auf die sie verweist. Dies ist besonders nützlich, wenn Sie mehr als eine Kontrollkästchenspalte haben.

Der Nachteil dabei ist, dass die Aktion möglicherweise nicht für alle Benutzer sofort ersichtlich ist.

Ein Link "Alle auswählen/abwählen" ist expliziter und Sie können (falls erforderlich) mehr erklärenden Text einfügen, aber Ihre Seite wird dadurch länger.

6
ChrisF

Interessanter Ansatz von Google in GMail, das "Alle aktivieren/deaktivieren" ist auch ein Dropdown-Menü mit zusätzlichen Optionen. Und hat den Status "Checked Some", wenn es ausgegraut ist.

1
Evgeny