Wenn Sie <input type="number"> verwenden, geben Ihnen einige Browser eine Eingabe, die eine Benutzeroberfläche zum Erhöhen der Zahl aufweist, wie z. B. Pfeil-nach-oben/unten-Pfeile (oft als „Spinner“ bezeichnet).
Das ist manchmal etwas hilfreich. Aber Leute haben sicherlich ausgefallenere Wege erkundet, um diese Zahl zu aktualisieren. „Scrubbing“ ist einer dieser Wege. Ich denke hier immer an Photoshop, das diese Interaktion seit langem unterstützt.
Ich habe neulich eine Demo von Dominik Jančík gesehen, bei der dies innerhalb eines Codeblocks geschieht. Sehen Sie, wie Sie (wenn Sie ein Gerät mit einer Maus haben) über die Zahlen schweben und von links nach rechts „schrubben“ können, um die Zahlen zu erhöhen oder zu verringern.
Dominik hat nachgefragt, ob man es auf CodePen selbst einbauen kann. Ich denke, das wäre auch cool, aber ich bin auch ein wenig zurückhaltend, was Änderungen am Kerneditor angeht, da ich damit schon schlechte Erfahrungen gemacht habe. Es ist jedoch die perfekte Art von Sache für ein CodeMirror und/oder Monaco und/oder Ace Plugin, wenn jemand dazu geneigt ist.
Es muss für Ace irgendwie schon existieren, denn der Khan Academy Editor unterstützt es in seinem Editor.
Ich habe nach anderen Beispielen gesucht und bin auf ein gutes von Fabrice Weinberg mit vielen Optionen gestoßen.
Ich glaubte mich zu erinnern, dass Lea Verou’s Dabblet das tut, aber ich glaube, ich habe mich falsch erinnert. Es macht aber ein paar coole Popups.
Es unterstützt auch ⌥+↑ und ⌥+↓ zum Erhöhen von Zahlen. CodePen macht das! Wir unterstützen Emmet, das diese Funktion ermöglicht.
| Tastenkombination | Erhöhen |
|---|---|
Ctrl+↑ | Zahl + 1 |
Ctrl+↓ | Zahl – 1 |
Strg+Alt+↑ | Zahl + 10 |
Strg+Alt+↓ | Zahl – 10 |
Alt+ ↑ | Zahl + 0.1 |
Alt+ ↓ | Zahl – 0.1 |
Habt ihr schon mal ein Nummer-Scrubber-UX gesehen, das euch wirklich gefällt?
Den Preis für die beste Eingabe-/allgemeine UX geht meiner Meinung nach an Blender. Ich wünschte, alle Bearbeitungssoftware würde ähnliche Interaktionen implementieren.
Photoshop & Illustrator haben seit Ewigkeiten ähnliche Interaktionen.
Völlig unfreundlich für Mobilnutzer…
Wenn Sie eine Zahl nicht manuell eingeben können und die Interaktion nicht gut erklärt und berührungsfreundlich ist, ja.
Wenn Sie eine Zahl eingeben können, ist sie genauso freundlich wie jede andere Zahleneingabe.
Um ehrlich zu sein, das neue iOS 14 hat einen „Scrubber“, aber er ist vertikal, was schön ist. Sie können diese Zeit auch in Kalender und Uhr prüfen.
Ich frage mich, wie Bret Victor das macht (ich habe das Video noch nicht bis zum Ende gesehen)
https://vimeo.com/36579366
Nummer-Scrubber sind eine schreckliche Idee. Ich kann nicht ausdrücken, wie wütend ich werde, wenn ich sehe, wie sie schlecht implementiert werden. Ich habe Websites verlassen und mein Geld überall hingebracht, wenn ich auf eine Website mit einem Schieberegler stoße, der nicht einfach durch Eingabe einer Zahl bearbeitet werden kann. Vergessen Sie nie die Best Practices für Barrierefreiheit! Sie müssen sicherstellen, dass ein Benutzer Ihre cool aussehenden Widgets überschreiben kann, weil nicht jeder sie verwenden kann.
Ich habe kürzlich Tastenkombinationen erstellt, um Werte zu erhöhen/verringern, die der Funktionsweise der Entwicklertools folgen.
Pfeil nach oben/unten: Änderung um 1
Umschalttaste + Pfeil nach oben/unten: Änderung um 10
Strg/cmd + Pfeil nach oben/unten: Änderung um 100
Alt + Pfeil nach oben/unten: Änderung um 0.1
Ich habe hier darüber geschrieben: https://kilianvalkhof.com/2020/javascript/supercharging-input-type-number/
Ich werde wahrscheinlich die gleiche Logik für das Halten von Umschalttaste/cmd/alt und Scrollen implementieren. Scrubbing ist interessant, funktioniert aber am besten so, wie Photoshop es implementiert, indem man auf das Symbol zieht und nicht auf den Wert selbst. Das Ziehen auf den Wert stört wahrscheinlich das Ziehen zum Auswählen, und das ist oft erwähnenswert.
Das ist so cool! Ich liebe dieses Scrubbing-Ding. Ich kann die kleinen Pfeile wirklich nicht ausstehen.
Ich habe mich gefragt, ob das Scrubbing-Ding zugänglich ist, z. B. Tastaturfreundlich? Wenn nicht, sollten sie linke/rechte Pfeile zum Erhöhen und SHIFT-linke/rechte Pfeile für jede 10er-Erhöhung oder etwas Ähnliches verwenden.