it-swarm.com.de

Was ist das beste Webdesign-Muster für umschaltbare Optionen in einem übergeordneten umschaltbaren Menü?

Ich arbeite an einem Menü, das ein- oder ausgeschaltet werden kann, mit Unteroptionen innerhalb des Menüs, die selbst ein- oder ausgeschaltet werden können. Obwohl ich logischerweise denke, dass es sowohl für das übergeordnete Menü als auch für die untergeordneten Optionen sinnvoll ist, Schaltflächen zu haben, sieht es optisch etwas verwirrend aus. Ich habe eine Alternative ausprobiert, die stattdessen Kontrollkästchen für die untergeordneten Elemente verwendet, was für mich etwas klarer aussieht. Gibt es ein alternatives Entwurfsmuster, das besser funktioniert/sich intuitiver anfühlt als diese beiden Optionen?

enter image description hereenter image description here

3
rlawrence86

Designprioritäten können hier helfen.


Ich denke, eine Priorität hier ist, verwenden wir die beste Kontrolle für den Job.

  • Kontrollkästchen (ohne Beschriftungen) eignen sich für Ein/Aus-Zustände, in denen klar ist, was die Zustände zum Aktivieren/Deaktivieren bedeuten. Beschriftete Kippschalter geben Ihnen die Möglichkeit zu zeigen, was jeder Zustand bedeutet ("Ein" und "Aus").

  • Ich vermute, die beste Kontrolle für Ihre Situation ist der Kippschalter, da die Beschriftungen "Ein" und "Aus" für den Benutzer hilfreich sind. Also lasst uns das nutzen.

Jetzt haben Sie eine sekundäre Sorge, ob eine Spalte mit Umschaltern unangenehm aussehen wird. Da es sich um ein zweitrangiges Problem handelt, sollten wir versuchen, es anzugehen, ohne die Kontrolle insgesamt aufzugeben. Design kann viel helfen:

  • Eines der Probleme mit dem Drahtgitter ist, dass die abgerundeten Knebel auf der rechten Seite einen unangenehmen visuellen Fluss von oben nach unten erzeugen. Lassen Sie uns sie also ausrichten, um ein reibungsloseres Rasterlayout zu erhalten.
  • Ein weiteres Problem besteht darin, die Menüumschaltungen von den Kopfzeilenumschaltungen zu unterscheiden. Verwenden wir also Design, um den Unterschied viel deutlicher zu machen.
  • Zuletzt hasse ich kleine Schalter, weil sie nicht freundlich sind, Schnittstellen zu berühren. Lassen Sie uns sie alle super dimensionieren, um sie berührungsfreundlicher zu machen.

Hier ist ein Ergebnis, das möglicherweise erfolgreicher ist:

enter image description here

1
tohster

Erstens sind Umschalttasten etwas problematisch. Obwohl sie auf modernen Touchscreen-Geräten ein weit verbreitetes Designmuster sind, ist es nicht sofort offensichtlich, dass man sie nur durch Klicken aktivieren kann. Ein Benutzer, der mit diesem Bildschirmelement nicht vertraut ist, aber mit seinem realen Gegenstück vertraut ist, wird versuchen, es zu ziehen, da wir in der realen Welt nicht auf solche Schalter klicken.

https://ux.stackexchange.com/a/43889/332

https://ux.stackexchange.com/a/63886/332

Wenn Sie sich Websites wie GMail oder Amazon ansehen, die viel in UX investieren, werden Kontrollkästchen und keine Kippschalter angezeigt.

Kontrollkästchen bedeuten Ein/Aus (Ja oder Nein; oder wenn Sie geeky sind, 1 oder 0) und wurden im Web buchstäblich milliardenfach verwendet, um Ja oder Nein, Ein oder Aus-Typauswahl für Benutzer darzustellen.

Sie haben auch ein Problem, wenn Sie dasselbe Element für das übergeordnete und das untergeordnete Element (insbesondere ein Kontrollkästchen) verwenden, während Sie ein anderes sehr häufiges Webdesign-Muster imitieren, bei dem es sich um das Kontrollkästchenmuster für alle oder keine übergeordneten Elemente handelt. Dies geht über das ästhetische Problem hinaus, das Sie in Ihrer Frage ansprechen. Es gibt Tausende von Beispielen für dieses Muster im gesamten Web.

Was ich empfehlen würde, ist das folgende Design:

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Wo die Ein- und Ausschaltmöglichkeiten eindeutig anklickbar sind und wo die Kontrollkästchen selbst gesetzt bleiben, wenn der Benutzer sie verlässt. Der aktuelle Status wird klar definiert, durch welche Schaltfläche ausgewählt wurde

Außerdem wäre das gesamte Bedienfeld im ausgeschalteten Zustand entweder ausgegraut, zusammengeklappt oder beides. Diese beiden Aktionen und der Wechsel im Schnittstellenstatus je nach Auswahl würden dazu beitragen, die Aktion zu verstärken.

PS ... Ich gehe davon aus, dass Sie möchten, dass der Status des Kontrollkästchens unabhängig vom übergeordneten Status beibehalten wird. Wenn dies nicht der Fall ist und das übergeordnete Element eine Funktion zum Umschalten aller ist, verwenden Sie durchgehend Kontrollkästchen, da dies eine sehr gut etablierte, allgemeine und verwendbare Lösung ist .

1
Toni Leigh