it-swarm.com.de

Besseres Layout vieler Kontrollkästchen mit Hilfetext

Ich habe eine Seite zum Konfigurieren von Zugriffsrechten auf einer Website. Das Formular enthält eine Reihe von Kontrollkästchen. Jedes dieser Kontrollkästchen verfügt über einen Hilfetext-Hover-Tooltip, der eine detailliertere Erläuterung der Option enthält. Das Layout sieht jedoch nicht besonders gut aus, insbesondere bei allen QuickInfos.

(checkboxes layout

Wie kann ich das Layout dieses Formulars verbessern? Ich dachte daran, den Hilfetext direkt neben dem Kontrollkästchen anzuzeigen, aber auch das sieht nicht ansprechend aus. Ich verwende derzeit Bootstrap Spalten für das Layout.

2
Daniel Holmes

Daniel,

Ich stimme Joaos Layoutvorschlag zu, da er verwandte Optionen näher beieinander platziert (denken Sie an " Gestaltgesetz der Nähe "), sodass die Wahrnehmung der Gruppierung stärker ist. Das vertikale Layout erleichtert auch das Scannen der Beschriftungen der Optionen, insbesondere wenn sich die Längen der Beschriftungen erheblich unterscheiden.

Was die Tooltips betrifft, bin ich bei der Arbeit auf ein ähnliches Problem in einem UX-Schuldenelement gestoßen. Es stellte sich heraus, dass die meisten QuickInfo-Texte lediglich den Beschriftungstext des Kontrollkästchens wiederholten, sodass überhaupt nicht viele Informationen hinzugefügt wurden.

Stellen Sie daher sicher, dass alles, was Sie in die QuickInfos einfügen, tatsächlich benötigt wird und , dass es korrekt ist. Halten Sie auch den Text knapp und vermeiden Sie lange Prosa. Um das Beispiel in Ihrem Drahtmodell zu verwenden, würde ich anstelle von "Administrator kann anzeigen" lieber "Administrator anzeigen lassen" verwenden, damit es ein bisschen einfacher zu erfassen ist.

Es tut mir leid, hier stumpf zu sein, aber in Bezug auf die beiden anderen hier gemachten Vorschläge möchte ich auf Folgendes hinweisen:

Kippschalter zeigen normalerweise an, dass alle Änderungen, die Sie an den jeweiligen Einstellungen vornehmen, sofort und ohne Klicken auf eine Senden-Schaltfläche angewendet werden. Kontrollkästchen erfordern dagegen einen zusätzlichen Schritt, um die Änderung zu bestätigen. Mit anderen Worten, wenn Sie diese Optionen in einem Dialogfeld bereitstellen, das der Benutzer mit einem Schaltflächenpaar Abbrechen/Speichern schließen muss, ist die Verwendung eines Kippschalters verwirrend, und das Kontrollkästchen ist das richtige Widget.

Lassen Sie "mich" (d. H. Ihre Benutzer) niemals über Elementen auf dem Bildschirm schweben, damit ich herausfinden kann, ob Sie kontextbezogene Hilfe leisten oder nicht. Wenn es einen Tooltip gibt, zeigen Sie das Tooltip-Symbol neben der Option an, damit ich sofort sehen kann, dass es verfügbar ist. Andernfalls könnte "Ich" es niemals entdecken und daher nützliche Informationen verpassen.

Übrigens, es gibt eine etwas andere Variante des Hilfesymbols, die umgekehrt zu der von Ihnen verwendeten ist. Das heißt, es ist ein Kreis mit einem Fragezeichen im Inneren anstelle der festen Scheibe, die Ihr Drahtgitter anzeigt. Ich finde diesen Kreis optisch etwas weniger auffällig.

Wenn Sie nur einen Tooltip für einige der Optionen anzeigen, sollten Sie ihn, wie bereits erwähnt, direkt unter der Option anzeigen. Und wenn jeder einzelne den Tooltip benötigt, können Sie A/B-Testlayouts mit allen zusätzlichen Informationen in Betracht ziehen, die angezeigt werden, und alle Tooltips ausführen, um zu sehen, welche Ihre Benutzer nützlicher finden.

2
JochenW

Das Fragezeichen mit dem schwarzen Ballonsymbol eignet sich für Einzelsituationen. Wenn ein Volltext jedoch für jede Option ein Tooltip-Symbol enthält, ist dies nicht nur ein redundantes visuelles Rauschen.

Die Hilfeinformationen können einfach angezeigt werden, wenn Sie den Mauszeiger ohne zusätzliches Symbol bewegen. Siehe dieses Beispiel

1
Danielillo

Hier ist mein Vorschlag:

Verwenden Sie anstelle von Kontrollkästchen die Option "Umschalten", da der Benutzer eine Funktion "aktiviert/deaktiviert", und zeigen Sie sie für das Hilfesymbol an, wenn der Benutzer mit der Maus über eine Option fährt.

Durch die Tatsache, dass alle Optionen vertikal ausgerichtet sind, können die Schalter nach links ausgerichtet und der Text von oben nach unten gelesen werden.

(Settings

1
Joao Carvalho