nicht angemeldet
Rolf B
JürgenB
Gunnar Bittersmann
Rolf B
Gunnar Bittersmann
Der Martin
Rolf B
JürgenB
encoder
Tabellenkalk
Auge
Liebe Community, ich bitte höflichst um Hilfe. Ich muss für meine Umfrage eine Art "Affektbilanz" in den Fragebogen integrieren (siehe Foto). Diese besteht aus zwei nebeneinander liegenden vertikalen Skalen, welche in einem Wertebereich von 0-100 in Prozent (bis zweite Kommastelle xx,xxx) unabhängig voneinander den Wert erheben sollen. Nur die Endpunkte beider Skalen sind beschriftet und mit einem + und einem Minus beschriftet. Einen Anfangswert für den Regler soll es nicht geben, erst wenn der Proband draufklickt kann der Regler auf dieser Position - zum evtl. verschieben sichtbar werden. Letztlich 1:1 wie auf dem Foto. Wichtig wäre auch, dass die Skala auf allen Browsern sowie Endgeräten funktioniert, da es sich um eine Studie handelt.
Da mich der Anbieter der Umfragesoftware gebeten hat, diese am besten in HTML, CSS und Javascript darzustellen sowie einzubinden, musste ich umgehend an dieses Forum denken.
Ich würde mich sehr freuen, wenn mir jemand dabei helfen könnte.
Herzlichst, T
Hallo TM,
ein Schieberegler input[type=range] wäre dafür sicherlich angemessen, hat aber eine Menge eigener Probleme.
von 0-100 in Prozent (bis zweite Kommastelle xx,xxx)
1-100 in Prozent verstehe ich, die "zweite Kommastelle xx,xxx" dagegen nicht.
Genauer als auf 1% wirst Du keine Eingabe hinbekommen, zumindest nicht geräteübergreifend, und ich kann mir keinen Fragebogen vorstellen, wo ein Wert auf einer Skala von 1-100 genauer als Schrittweite 1 einzustellen ist. Wenn man sowas braucht, wäre ein Zahleneingabefeld sinnvoller.
Die Darstellung eines Schiebereglers obliegt allerdings dem Browser, und jeder macht es anders. Man kann in Grenzen mit CSS daran herumstylen, allerdings ist das nicht gut unterstützt, es ist sehr browserspezifisch und ich würde das lassen. Ana Tudor auf css-tricks.com übertitelte ihren Artikel dazu nicht ohne Grund "A Sliding Nightmare". Wobei das Artikellayout an sich ebenfalls ein Alptraum ist...
Ein weiteres Problem ist die vertikale Orientierung. Auch das ist schlecht bis gar nicht unterstützt, bzw. Du musst mit einem CSS Transform das Ding um 90° drehen.
Zusammen mit dem "Thumb ausblendbar" Problem bist Du vermutlich mit einem selbstgeschriebenen Slider besser bedient. Ich kann Dir keine fertige Lib empfehlen - und man sollte das auch nicht unterschätzen. Das muss ja mit Maus, Tastatur und Touch bedienbar sein (zu Spracheingabe trau ich mich gar nichts zu sagen).
Am leichtesten tust Du Dich, wenn Du davon Abstand nimmst, die vorgefertigten Schieberegler zu vergewaltigen und möglichst beim Standard bleibst. Das funktioniert dann auf den meisten Plattformen am besten.
Einen Anfangswert für den Regler soll es nicht geben, erst wenn der Proband draufklickt kann der Regler auf dieser Position - zum evtl. verschieben sichtbar werden.
Ein Foto zeigt nicht, was beim Draufklicken passiert. Es zeigt einen ausgegraute und einen aktive Skala, ohne Schieber. Das Ausblenden des Schiebers ist Teil des Styling-Problems, das wirst Du mit einem input[type=range] nicht plattformübergreifend lösen können.
Ich denke, diese Anforderung kannst Du nur behelfsweise umsetzen. Du müsstest einen Button haben, auf den man klickt und der dann durch den Schieber ersetzt wird. Allerdings braucht der Schieber dann einen Startwert. Den kannst Du zwar aus der Position ableiten, wo man auf den Button geklickt hat - aber nur dann, wenn auch ein Klick stattfand. Ich denke, es geht Dir darum, keinen suggestiven Anfangswert zu setzen. Aber das wird nur mit einem selbstgeschriebenen Slider machbar sein.
Ich lasse mich gern eines anderen belehren 😉
Rolf
Hallo Rolf,
Ein weiteres Problem ist die vertikale Orientierung. Auch das ist schlecht bis gar nicht unterstützt, bzw. Du musst mit einem CSS Transform das Ding um 90° drehen.
ich habe hier senkrechte Slider, ich habe das mit
input[type=range] { width:7em; height:1.6em; margin:0; padding:0; transform: rotate(-90deg) translate(-2.8em,-2.5em) }
gelöst.
Gruß
Jürgen
Hallo JürgenB,
gelöst.
Ja, für einen gewissen Wert von "gelöst". Hast Du schon mal versucht, auf den Mobilgerät einen Slider zu verschieben? Mit Android-Chrome scrollt der Bildschirm UND der Slider. Keine Ahnung ob das an der 90° Drehung oder an einem Quirk deiner Seite liegt.
Rolf
Hallo Rolf,
auf dem iPhone kann ich die Slider bewegen, ohne die Seite zu scrollen. Ich muss aber den Schieber genau treffen.
Gruß
Jürgen
Hallo JürgenB,
okay, schaff ich, aber nur mit dem kleinen Finger. Oder vielleicht mit einem Stylus...
Rolf
@@JürgenB
ich habe hier
Kriegt man die Aktualisierung der Wellenform auch während des Schiebens der Regler hin und nicht erst danach? Oder ist das zu rechenintensiv dafür?
senkrechte Slider, ich habe das mit
input[type=range] { width:7em; height:1.6em; margin:0; padding:0; transform: rotate(-90deg) translate(-2.8em,-2.5em) }gelöst.
Look Ma, no rotate (im Firefox; funktioniert nicht in Chromia)
😷 LLAP
Hallo Gunnar,
ich habe hier
Kriegt man die Aktualisierung der Wellenform auch während des Schiebens der Regler hin und nicht erst danach? Oder ist das zu rechenintensiv dafür?
ich habe vor über 3 Jahren die Seite von selbstgebastelten Schiebereglern (Div-Suppe) auf Range-Inputs umgestellt. Aus einem Grund, der mir nicht mehr einfällt, habe ich bei den Schiebern damals auf das Change-Event gelauscht, und nicht auf input. Rechenzeit war nicht der Grund, ich habe das gerade mal im Safari getestet.
senkrechte Slider, ich habe das mit
input[type=range] { width:7em; height:1.6em; margin:0; padding:0; transform: rotate(-90deg) translate(-2.8em,-2.5em) }gelöst.
Look Ma, no rotate (im Firefox; funktioniert nicht in Chromia)
im Wiki wird diese Lösung vorgeschlagen
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* WebKit */
funktioniert das browserübergreifend?
Gruß
Jürgen
Hallo,
ich habe vor über 3 Jahren die Seite von selbstgebastelten Schiebereglern (Div-Suppe) auf Range-Inputs umgestellt. Aus einem Grund, der mir nicht mehr einfällt, habe ich bei den Schiebern damals auf das Change-Event gelauscht, und nicht auf input. Rechenzeit war nicht der Grund, ich habe das gerade mal im Safari getestet.
der IE11 war der Grund, also jetzt gibt es wohl keinen mehr.
Gruß
Jürgen
@@Rolf B
1-100 in Prozent verstehe ich, die "zweite Kommastelle xx,xxx" dagegen nicht.
Genauer als auf 1% wirst Du keine Eingabe hinbekommen, zumindest nicht geräteübergreifend, und ich kann mir keinen Fragebogen vorstellen, wo ein Wert auf einer Skala von 1-100 genauer als Schrittweite 1 einzustellen ist. Wenn man sowas braucht, wäre ein Zahleneingabefeld sinnvoller.
Braucht man nicht. Das gaukelt nur eine Genauigkeit vor, die nicht gegeben ist. Kein Nutzer stellt einen Schieberegler auf Zehntausendstel genau ein.
… bist Du vermutlich mit einem selbstgeschriebenen Slider besser bedient.
Echt jetzt?
… und man sollte das auch nicht unterschätzen. Das muss ja mit Maus, Tastatur und Touch bedienbar sein (zu Spracheingabe trau ich mich gar nichts zu sagen).
Eben. Und das nachzubauen, was der Browser mit nativem Slider schon hat – das kann eigentlich nur schiefgehen.
Da muss man schon sehr gute Kenntnisse in Eventhandling (einschließlich Touch-Events) und ARIA haben. Für alle anderen (also für so ziemlich alle) deshalb: Hände weg!
😷 LLAP
Hallo Gunnar,
Braucht man nicht.
Nasagichdoch 😉 Wenn Schieberegler, dann mit Werten für Grobmotoriker. Wenn fachlich eine Feinabstufung gebraucht wird (z.B. für die Pro-Version von Jürgens Fouriergedönsrath), sind Schieberegler das falsche Control. Oder man braucht zwei. Für Grob- und Feinjustierung. Scotty hatte sogar drei. Damit er Jim nicht wieder versehentlich ins Mirrorverse schickt.
Echt jetzt?
Nein, eigentlich nicht, das schreib ich ja auch später so.
Aber wenn er einen Auftraggeber hat, der unbedingt den Thumb ausblenden will, dann könnte es darauf hinauslaufen. Oder auf den erwähnten Button.
Rolf
@@Rolf B
Braucht man nicht.
Nasagichdoch 😉 Wenn Schieberegler, dann mit Werten für Grobmotoriker.
Etwas mehr darf’s schon sein. So viele Abstufungen, dass man sie beim Schieben nicht merkt, d.h. das Gefühl hat, tatsächlich einen analogen Schieberegler zu bedienen, nicht einen feinstufigen Umschalter.
Je nach Größe des Schiebereglers sollten das so in etwa zwischen 100 und 1000 Abstufungen sein. 10000 braucht man sicher nicht.
Und für die Auswertung gewiss nicht, da kann man den eingegebenen (eingeschobenen?) Wert vielleicht sogar auf 10 oder weniger Abstufungen runden.
Aber wenn er einen Auftraggeber hat, der unbedingt den Thumb ausblenden will
Keine so dumme Idee, um einem Bias entgegenzuwirken. (Bei TM ging’s ja um Psychologie?)
Und wie in meinem Codepen gezeigt, ist das initiale Ausblenden und Einblenden bei Interaktion ja auch kein Problem. S.a. Style Input Range.
😷 LLAP
Hallo,
Nasagichdoch 😉 Wenn Schieberegler, dann mit Werten für Grobmotoriker.
Etwas mehr darf’s schon sein. So viele Abstufungen, dass man sie beim Schieben nicht merkt, d.h. das Gefühl hat, tatsächlich einen analogen Schieberegler zu bedienen, nicht einen feinstufigen Umschalter.
das ist an sich richtig, aber ich denke da gerade an hochwertige HiFi-Komponenten, wo der Lautstärke-Drehknopf am Verstärker noch ein echtes analoges Poti betätigt, aber dem Bediener durch eine Kugelrastung suggeriert wird, die Einstellung sei stufenweise.
Das galt in der Ära als "schick", als man den Leuten überall einreden wollte, analog sei out, digital geht alles besser. Bei edlen und teuren Schiebepotis gibt (gab?) es das auch entsprechend.
Je nach Größe des Schiebereglers sollten das so in etwa zwischen 100 und 1000 Abstufungen sein. 10000 braucht man sicher nicht.
Ja. Aber je nach Größe des Schiebers, und je nachdem, wie feinfühlig man ihn überhaupt bedienen kann, sind auch 100 Schritte eventuell schon zu viel. Ich ärgere mich immer wieder, wenn ich etwa den Windows-Lautstärkeregler gezielt auf einen bestimmten Wert einstellen will, z.B. 25. Dann ziehe ich vorsichtig mit der Maus, treffe aber immer nur 24 oder 26, vielleicht auch mal die 27, aber die 25 nicht, sapperlot!
Mir ist bewusst, dass das für die Praxis keinen Unterschied macht, aber ich will einfach einen ganz bestimmten Wert einstellen, das ist so eine Art Zahlen-Ästhetik.
Und für die Auswertung gewiss nicht, da kann man den eingegebenen (eingeschobenen?) Wert vielleicht sogar auf 10 oder weniger Abstufungen runden.
Das wäre sehr von der konkreten Anwendung abhängig. Von 100 Schritten bei der Einstellung auf 10 bei der Auswertung zu runden, könnte schon auffallen. Dann wäre ich lieber so ehrlich, dem Schieber auch nur 10 einstellbare Stufen zu geben.
Live long and pros healthy,
Martin
Hallo Gunnar,
ich wollte auf das prefixgetriebene Styling eines Range-Control bewußt nicht eingehen. Dieses Browserchaos kann man doch keinem vermitteln.
Aber deckt man mit den -moz- und -webkit- Prefixen alle Browser ab, seit Edge zu Edgium geworden ist? In dem Nightmare-Artikel, den ich oben verlinkte, war Edge noch nicht verchromt und Ana Tudor regte sich da über diverse Darstellungsprobleme auf.
Rolf
Hallo Rolf,
ich wollte auf das prefixgetriebene Styling eines Range-Control bewußt nicht eingehen. Dieses Browserchaos kann man doch keinem vermitteln.
aber deswegen auf native Schieberegler verzichten? Ich hatte jahrelang einen selbstgebasteltet Schieber, der hat "perfekt" funktioniert, bis jemand Geräte ohne Maus erfunden hat, und jemand anderes so etwas wie a11y.
Man kann die Dinger mit transform rotate drehen, oder es machen, wie es im Wiki oder in Gunnars Pen vorgeschlagen wird. Das ist zwar etwas "Hampelei" aber immer noch besser, als alles selbst zu machen.
Gruß
Jürgen
Liebe alle,
herzlichen Dank für die vielen Antworten und die Unterstützung.
Ich werden das Feedback nutzen und versuchen die Skalen umzusetzen. Wobei ich erkenne, dass ihr eher davon abraten würdet und eine bereits in der Umfragesoftware integrierte Skala - in abgewandelter Form empfehlen würdet.
Ich melde mich in den nächsten tagen mit Feedback.
Danke und ein schönes WE, TM
Als ich das erste mal auf meinem Smartphone dieses Zahlenrad zum anschubsen gesehen habe, dachte ich wow das sieht ja mal cool aus und ist echt gut gemacht.
Dann ging es an die Einstellung einer bestimmten Zahl und ich dachte mir wow was für ein Scheiß, muss ich jetzt ernsthaft etliche male dieses Rad andrehen bis ich in die Nähe meiner Wunschzahl komme? Welcher Trottel hat die Tastatur entfernt?
Neuere Androidversionen haben sie zum Glück wieder. Da hat wohl doch die Nutzbarkeit über die Coolness gesiegt.
Frage dich und deinen Auftraggeber unbedingt, von welchem Nutzer ihr erwartet dass er mit einem grafischen Schieber eine Zahl bis auf zwei Stellen nach dem Komma eingibt.
Hallo,
Neuere Androidversionen haben sie zum Glück wieder.
Ist mir kürzlich auch aufgefallen, es ist aber beides möglich.
Da hat wohl doch die Nutzbarkeit über die Coolness gesiegt.
Also nutzbare Coolness…
Gruß
Kalk
Hallo
Neuere Androidversionen haben sie zum Glück wieder.
Ist mir kürzlich auch aufgefallen, es ist aber beides möglich.
Seit iOS 14.x (x = 3 oder 5) erfolgt die Zahleneingabe auch per Tastatur und wurde (meiner Meinung nach) bestenfalls schlecht gelöst.
Da hat wohl doch die Nutzbarkeit über die Coolness gesiegt.
Also nutzbare Coolness…
… in iOS: schlechte irgendwas.
Tschö, Auge