it-swarm.com.de

Alternativen zu Kontrollkästchen und Optionsfeldern in webbasierten Umfragen?

Ich wurde beauftragt, ein einfaches Fragebogendesign mit vielen verschiedenen Arten von Fragen zu entwerfen. Ich habe selbst viele webbasierte Umfragen durchgeführt und einige mit Benutzern getestet. Das größte Problem war, dass es schwierig ist, auf Optionsfelder und Kontrollkästchen in Standardgröße zu klicken, insbesondere wenn der Benutzer aufgrund zu vieler Fragen in der Umfrage müde wird. Eine Abhilfe besteht darin, sicherzustellen, dass auch die Beschriftung des Kontrollkästchens/Optionsfelds anklickbar ist, aber nur wenige Benutzer verstehen dies tatsächlich.

Meine Lösung besteht also darin, eine Art von Schaltflächen/Containern zu erstellen, die ausgewählt werden können. Wie würden Sie jedoch zwischen Alternativen mit einfacher Auswahl (Optionsfeld) und Mehrfachauswahl (Kontrollkästchen) unterscheiden? Oder würden Sie es anders lösen? Meine Lösung im Balsamiq-Stil:

Gleiches gilt für die Anzeige von Matrixfragen. In diesem Fall ist es noch schwieriger, die gewünschte Alternative zu finden. Daher basiert meine Lösung auf einem Raster mit einem viel größeren Klickbereich und einer einfacheren Auswahl der gewünschten Alternative mit mehreren Fragen. Meine Lösung für dieses Problem:

Anregungen wäre sehr dankbar!

47

Martin, schauen Sie sich an, was jQuery Mobile mit Optionsfeldern und Kontrollkästchen gemacht hat. Hier ist eine Demoseite:

jQuery Mobile Docs: Galerie der Formularsteuerelemente

Sie bieten Ihnen zwei praktikable Optionen, von denen ich denke, dass Sie sie genießen werden.

  1. Achten Sie darauf, dass Kontrollkästchen und Optionsfelder gleich aussehen, aber dass ihre Oberfläche größer und anklickbarer ist.

  2. Das neue Apple iOS inspirierte UISegmentedControl. Dies ist eine neue Benutzeroberfläche, die einen ähnlichen Zweck wie Optionsfelder hat. Es ist eine kompakte horizontale Steuerung, die leicht zu drücken und zu lesen ist.

Hier ist ein Screenshot:

(

Ein weiteres gutes Webframework ist Jo , aber es gibt keine Demo, auf die Sie direkt verlinken können. Laden Sie einfach das Framework herunter und öffnen Sie die Beispiele. Es ist genauso beeindruckend.

Ich habe die Antworten vieler anderer hier gelesen, die sagen, warum es mit dem bricht, was Apple in ihren UI-Richtlinien in den frühen 1980er Jahren angegeben hat. Trotzdem brach sogar Apple aus der Form, als sie das iOS durch Erstellen des UISegmentedControl erstellten. Ich glaube, Martin hat einen guten Grund, seine Frage zu stellen, und ich glaube, es gibt sehr überzeugende Alternativen, die in der realen Welt funktionieren.

28

Vielleicht können Sie eine Mischung aus üblichen Schaltflächen (um einen großen Bereich zum Klicken zu haben) und den üblichen Radio-/Kontrollkästchen-Steuerelementen ausprobieren. Ich würde diese Steuerelemente nicht vollständig entfernen, da Sie dann Textbeschreibungen wie "Nur eine auswählen" hinzufügen müssten. oder "Mehrere auswählen".

Sie können auch die Radios/Kontrollkästchen ausgrauen, die nur einen subtilen Hinweis darstellen.

enter image description here

41
erikrojo

Die Probleme, die ich mit Ihrer Lösung sehe:

  • Schaltflächen werden normalerweise nicht ausgewählt, führen jedoch eine Aktion aus (unerwartetes Verhalten).
  • Sie können nicht zwischen Einzel- und Mehrfachauswahloptionen unterscheiden
  • Benutzer sind an Optionsfelder und Kontrollkästchen gewöhnt, sie wissen, wie sie funktionieren und was sie zu erwarten haben
  • Rasterlösung: Hier sehen Sie überhaupt nicht, was anklickbar ist

Eine einfache Lösung: Erstellen Sie Schaltflächen, die wie Optionsfelder und Kontrollkästchen aussehen und sich verhalten, diese jedoch vergrößern, damit Sie leichter darauf klicken können.

Hoffe das hilft, Phil

10
Phil

Optionen:

  1. Ein Schieberegler . Ich finde den Schieberegler eine interessante Wahl, insbesondere Fragen wie "bewerte dies zwischen 1-10". Mit und ohne Rillen.
  2. Auswahlfeld. Manchmal muss nicht jede Auswahl sichtbar sein. Entscheiden Sie, wie wichtig es ist, alle Auswahlmöglichkeiten anzuzeigen.
  3. Die, die Sie oben demonstriert haben.

Hmm, ich denke das sind deine Entscheidungen. Siehe Alan Coopers Buch: About Face für weitere Details.

3
Glen Lipka

Ich würde im Allgemeinen wiederholen, was Phil oben gesagt hat, aber ich würde auch vorschlagen, dass Sie sich wirklich fragen, warum Sie einige Webformularkonventionen ändern möchten, die buchstäblich so alt sind wie der moderne Browser. Wie Phil sagt, wissen Benutzer, wie Optionsfelder und Kontrollkästchen funktionieren, und selbst wenn sie ihren Zweck nicht explizit formulieren können, ist es selbstverständlich, dass Kontrollkästchen mehrere Auswahlmöglichkeiten zulassen, während Radios nur eine zulassen.

Oben sagen Sie: "Das größte Problem war, dass es schwierig ist, auf Optionsfelder und Kontrollkästchen in Standardgröße zu klicken, insbesondere wenn der Benutzer aufgrund zu vieler Fragen in der Umfrage müde wird." Ich bin mir jedoch nicht sicher, warum Sie sich so fühlen würden. Welche Endbenutzerforschung haben Sie darauf hingewiesen, dass dies wahr ist? Form-/Umfrageermüdung tritt normalerweise auf, wenn eine Seite zu viele Felder/Fragen enthält. Dies kann behoben werden, indem das Formular in logische Segmente unterteilt und ein Fortschrittsbalken angezeigt wird.

Wie Phil sagt, macht Ihr Raster in Ihrer vorgeschlagenen Lösung nicht klar, was anklickbar ist, und Ihre Schaltflächen bieten keine einfache Möglichkeit, Mehrfachauswahl zu treffen. Es gibt die Konvention einer Dropdown-Liste, in der der Benutzer STRG + Klick-Vielfache gedrückt halten kann. Warum sollten Sie dies jedoch tun, wenn Sie ihnen nur Kontrollkästchen geben können?

Wie Sie bereits sagten, können Sie festlegen, dass das gesamte Formularfeld, einschließlich der Beschriftung, anklickbar ist, um das Klicken zu vereinfachen. Sie können auch die Schriftgröße und die Zeilenhöhe erhöhen, um die Benutzer weiter zu unterstützen. Abgesehen von diesen Überlegungen verstehe ich nicht, warum Sie die Konvention so brechen würden, wie Sie es vorschlagen.

3
jameswanless

Normalerweise finde ich, dass das Bereitstellen von Standardsteuerelementen für Benutzer intuitiver ist als Standard-Kontrollkästchen anstelle von Schaltflächen wie Kontrollkästchen. Da wir von unserer Seite weniger arbeiten, müssen wir die Dinge oft einzigartig machen, aber die Sache ist, dass einfach gut funktioniert und weniger ist oft mehr, auf der anderen Seite ist die Matrixfrage eine ziemlich gute Idee, genau wie vorgeschlagen, stellen Sie sicher, dass die Alternativen visuell klickbar sind, viel Glück!

2
fernando lee

Ich denke, Ihre beste Lösung besteht darin, weiterhin Standardtypen von Eingabesteuerungen zu verwenden, diese jedoch zu vergrößern.

Dadurch können die Eingabetypen erkannt werden, die Benutzerfreundlichkeit wird jedoch erhöht, indem die Zielgröße vergrößert wird. Dies könnte wahrscheinlich mit unterschiedlichen Bildern für die Eingangssteuerungszustände erfolgen.

Wie ich unter Phils Antwort betonte, könnte dies nur mit CSS zu Problemen führen, aber ich bin sicher, dass Sie es mit Javascript umgehen können. Natürlich müssen Sie viele Tests durchführen, um sicherzustellen, dass die Benutzererfahrung zwischen den Browsern konsistent ist.

2
bendur

Ich bin mit der Lösung von erikrojo für das Koppeln von Kontrollkästchen und Etiketten einverstanden (unter Verwendung einer Form von "das Ganze ist klickbar, Schwebeflug-Erschwinglichkeit")

Was die Matrix betrifft, wäre ein Vorschlag eine Form des "Sternebewertungssystems", das jedoch möglicherweise um eine Achse (neutral) visualisiert wird:

bad           great
[        |        ]

Beim Schweben sehen Sie, wo Sie sich entlang der Achse befinden, mit einem Bild in der Bereichsleiste sowie einem Tooltip, der Ihnen die aktuelle Bewertung in Klartext (und nicht nur eine Zahl) anzeigt:

bad           great
[        |---     ]
            ^good

Und dann würde ein Klick es einschließen:

bad           great
[        |XXX     ] good
2
DA01

Hat jemand jemals getestet, ob Ihr durchschnittlicher Joe den Unterschied zwischen einem Kontrollkästchen und einem Optionsfeld wirklich kennt? Stellen Sie ihnen beispielsweise eine Frage, die eine oder mehrere Antworten haben könnte, aber nur Optionsfelder zur Auswahl bietet. Dann können Sie sehen, ob sie versuchen, mehr als eine auszuwählen, oder ob sie erkennen, dass die Funkgeräte bedeuten, dass sie nur eine auswählen können. Könnte sogar einfach ein Kontrollkästchen und ein Optionsfeld vor sie stellen und sie bitten, den Unterschied zu erklären.

Ich habe an etwas Ähnlichem gearbeitet und ein Design entwickelt, das Ihrem sehr ähnlich ist, aber wie die Leute bereits betont haben, gab es keine Möglichkeit, festzustellen, welches eine Mehrfachauswahl ist. Ich war nicht davon überzeugt, dass der Benutzer feststellen kann, dass es sich um eine Mehrfachauswahl handelt, nur weil sich auf der linken Seite der Schaltfläche ein Quadrat und kein Kreis befindet. Im Moment lautet die Frage "Meine Frage hier? Bitte wählen Sie alles aus bewerben ", aber ich bin mir nicht sicher, wie ich mich dabei fühle.

2
Jenna Smith

Die Herausforderung bei Ihrem Vorschlag zum Ersetzen von Kontrollkästchen und Optionsfeldern besteht darin, dass zwischen den beiden Verhaltenstypen keine visuelle Unterscheidung besteht. Das beste UI-Design legt immer die Benutzererwartungen fest, bevor sie mit dem Steuerelement interagieren müssen. Ich habe noch nicht genug Repräsentanten, um die Antwort von erikrojo zu kommentieren, aber das hat sicherlich den Vorteil, bekannte Redewendungen zu nutzen und gleichzeitig eine größere Trefferzone zu genießen.

Ein Schieberegler hat, wie Glen vorschlägt, den Vorteil, dass er sich an realen taktilen Benutzeroberflächen modelliert, die jeweils nur einen Status haben können - dort gibt es keine Unklarheiten, wie dies bei Optionsfeldern der Fall ist. Der Schieberegler bringt leider auch eigene Implementierungs- und Usability-Herausforderungen mit sich und ist im Kontext eines Formulars mit einem vielfältigen Kontrollsatz viel schwieriger darzustellen.

Ein Zifferblatt ist eine Variante eines Schiebereglers, der sich bei einem erheblichen Usability-Treffer besser in ein Layout integriert (es ist im Allgemeinen kompakter) (die Bewegung des Steuerelements ist rotierend - aber die Benutzereingabe des Benutzers ist in der Regel axonometrisch, und dies kann dazu führen Verwirrung zwischen verschiedenen Implementierungen)

Ein anderer Ansatz könnte darin bestehen, eine zusätzliche Komponente sowohl für die Einzelauswahl- als auch für die Mehrfachauswahlsteuerung zu entwerfen, die den Benutzer genau darüber informiert, wie viele Auswahlen er zur Verfügung hat. Ich werde versuchen, das Visuelle anhand realer Elemente zu erklären, und Sie können es dann nach Belieben in eine digitale Darstellung abstrahieren. Stellen Sie sich eine Reihe von Glühbirnen vor. Wenn ich 5 mögliche Antworten habe und alle, einige oder keine auswählen kann, habe ich 5 Glühbirnen, alle eingeschaltet. Wenn ich auf meine Antwortschaltflächen klicke (nicht auf die Glühbirnen - sie sind nicht direkt interagierbar), erlischt eine Glühbirne und die Schaltfläche, auf die ich auf irgendeine Weise geklickt habe, wird ausgewählt. Während ich weiterhin zusätzliche Antworten auswähle, erlöschen mehr Glühbirnen.

Wenn ich mit diesem Konzept fortfahre und eine Multiple-Choice-Frage mit einer Antwort habe, gibt es nur eine Glühbirne in der Bank. Mir ist von Anfang an klar, dass ich eine Antwort bekomme.

Natürlich wird die Verwendung von Glühbirnen in Ihrer Benutzeroberfläche albern aussehen (oder vielleicht auch nicht?), Aber Sie haben die Idee - wir legen sofort die Erwartung fest, wie viele Auswahlen/Antworten der Benutzer für jede Frage treffen darf. Ein Nachteil dieses Ansatzes wäre, dass der Benutzer möglicherweise das Gefühl hat, alle seine Entscheidungen "verbrauchen" zu müssen, bevor er fortfährt. Dies kann leicht gemildert werden, indem klargestellt wird, dass die nächste Frage aktiv oder verfügbar wird, nachdem der Benutzer seine erste Auswahl getroffen hat (auch wenn mehrere Antworten möglich sind). Dies kann auf vielfältige Weise geschehen, angefangen beim Deaktivieren/Ausblenden der nächsten Frage bis hin zum einfachen Anzeigen eines Häkchens oder eines anderen Indikators, dass die Anforderungen für die aktuelle Frage erfüllt wurden.

1
Tom Auger