it-swarm.com.de

Was ist das beste Interaktionsmuster für die Eingabe eines Bereichs auf einem Mobiltelefon?

Ich habe eine mobile Anwendung, in der ich eine Liste nach einem Bereich filtern muss. (Stellen Sie sich eine Dating-App vor, in der Sie Personen nach Alter filtern möchten.) Wie soll man den Range Picker gestalten?

Eine Person sollte in der Lage sein, eine untere Grenze (Beispiel: ab Alter xx) und eine höhere Grenze (Beispiel: bis Alter XX) zu definieren, muss jedoch nicht beide festlegen und sollte sie auch auf "nichts" zurücksetzen können.

Beide Werte sind übrigens ganze Zahlen.

Ich kann mir vorstellen, dass es am einfachsten ist, es mit zwei Eingabefeldern und einem Zahleneintrag zu lösen, aber ich denke, ich vermisse möglicherweise eine bessere Lösung.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

7
Roland Studer

Die Texteingabe auf Mobilgeräten ist (physisch) sehr "teuer" und verursacht Reibung und sollte daher nach Möglichkeit vermieden werden.

Folgendes schlage ich vor:

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Die Altersbezeichnungen an den beiden Enden ändern sich, wenn der Benutzer die Knöpfe schiebt (setzen Sie das Kantenalter an beide Enden).

Hier ist ein Beispiel aus der App "Karma"range sliders on Karma

6
Yosef Waysman

Textfelder sind für Benutzer schwer zu verwalten, aber die integrierten Picker funktionieren sehr gut. Sie werden auch von iPhone, Android und Windows Phone - unterstützt - auch wenn sie anders aussehen. Der Schieberegler funktioniert auch gut, wenn die Reichweite niedrig ist, aber das Alter (über 60 Schritte) auf einer 3 unterstützt. 7 '' Bildschirm wäre schwer zu finden. Warum nicht die Picker versuchen?

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Viel Glück!

3
Benny Skogberg

Die Antwort von Yosef Waysman ist ein gutes Muster, aber denken Sie daran, dass es immer einfach sein sollte, beide Elemente zu steuern (auch wenn sie nahe beieinander liegen). Fügen Sie möglicherweise Registerkarten über dem ersten Steuerelement und unter dem zweiten Steuerelement hinzu, um sie zu trennen, wenn sie nahe beieinander liegen. Alternativ können Sie, wenn sie sich in der Nähe befinden und die 'Box' treffen, immer zuerst die 'From'-Steuerung auswählen.

1
vincent.io