Meine Benutzer müssen eine Dauer in Tagen, Stunden und Minuten eingeben.
Im Moment habe ich das nur als drei Felder implementiert, das ist in Ordnung und funktioniert, aber das ist nicht gerade ein schönes Stück Design. Die Alternative besteht darin, nur ein Feld zu haben und sie 2 days, 3 hours, 45 minutes oder 15 m oder 1d 2h 35m oder 90m oder 2 days usw. eingeben zu lassen. Das scheint so zu sein, als würde man ein nicht-triviales Parsing benötigen, um wirklich zu kommen richtig und komplex zu internationalisieren.
Was sind einige Best-Practice-Beispiele für eine Web-UI-Komponente, mit der der Benutzer einfach eine Zeitspanne eingeben kann?
Bitte beachten Sie, dass dies keine DatePicker ist, sondern eine Dauer-Eingabekomponente.
Dinge zu beachten:
Wie viele verschiedene Eingaben erwarten Sie? z.B. ist es wahrscheinlich, dass ein Benutzer "10 Tage" und die anderen "2 Minuten" eingeben?
wollen Sie Effizienz oder erstmaliges intuitives Verhalten? Einige Anwendungen sind nicht direkt intuitiv, aber mit dem Training kann effizienter als ihre "leichteren" Gegenstücke verwendet werden.
bevorzugen Ihre Benutzer Tastatur oder Maus und wie kompetent sind sie? Ein Dateneingabe-Profi wird andere Bedürfnisse / Wünsche haben als ein "Zwei-Finger-Typist".
Natürlich gibt es keine richtige Lösung. Wenige Optionen:
Merken Sie sich den neuen (HTML 5) Eingabetyp="range" und den Eingabetyp="number", die in vielen Browsern verfügbar sind. Der Bereich wird oft als Schieberegler angezeigt (trotz seines Namens wird er nicht unbedingt zur Eingabe eines Bereichs verwendet); Die Nummer wird als numerisches Hoch / Runter mit vorgebbaren Inkrementen angezeigt. Dies kann die Dateneingabe erleichtern.
3 Dropdown-Listen (eine für Tage, Stunden, Minuten) können die narrensicherste Option sein, wenn Sie eine breite Palette von Eingaben erwarten. Dies hat auch vollständige Browser-Unterstützung, ist nicht auf JavaScript angewiesen, ist auf großen mobilen Geräten, etc. vorhersehbar.
Wenn Sie eine gemeinsame Dauer haben (z. B. 90 Minuten, 2 Stunden, 4 Stunden), können Sie eine Dropdown-Liste mit den angegebenen Zeiträumen und eine "erweiterte" Schaltfläche anzeigen, die genauere Angaben für die Ausnahmefälle enthält / p>
Haben Sie den jQuery-Datapicker in Betracht gezogen?
Wenn Sie ein Datum nicht direkt auswählen möchten, können Sie es in Ihrem Kontext anpassen, um einen längeren Zeitraum zu erhalten.
Überlegen Sie sich, was die Leute bereits für eine Datums- und / oder Zeitauswahl wissen. Das Verhaltensmuster wurde bereits für dich festgelegt. Sie müssen nur folgen. Denken Sie darüber nach, was auf einem mobilen Gerät geschieht. Von dort können Sie das Muster nutzen.
Werfen Sie einen Blick auf Ссылка Es hat eine Menge Features und mit ein paar kleinen Verbesserungen sieht es so aus, als könnten Sie es dazu bringen, das zu tun, was Sie brauchen.
Wenn Sie aus UX-Sicht so etwas verwenden, wird Ihre App den Nutzern bekannter erscheinen, da es sich um ein allgemeines Muster handelt, das sie bereits verstehen.
Tags und Links jquery jquery-ui css3 design user-experience