TM: Frage zum Wiki-Artikel „number“

problematische Seite

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.

Schieberegler

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

  1. problematische Seite

    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

    --
    sumpsi - posui - obstruxi
    1. problematische Seite

      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

      1. problematische Seite

        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

        --
        sumpsi - posui - obstruxi
        1. problematische Seite

          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

          1. problematische Seite

            Hallo JürgenB,

            okay, schaff ich, aber nur mit dem kleinen Finger. Oder vielleicht mit einem Stylus...

            Rolf

            --
            sumpsi - posui - obstruxi
      2. problematische Seite

        @@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

        --
        “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
        1. problematische Seite

          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

          1. problematische Seite

            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

    2. problematische Seite

      @@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

      --
      “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
      1. problematische Seite

        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

        --
        sumpsi - posui - obstruxi
        1. problematische Seite

          @@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

          --
          “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
          1. problematische Seite

            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

            --
            Wer respektiert werden will, sollte zunächst damit anfangen, andere zu respektieren.
          2. problematische Seite

            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

            --
            sumpsi - posui - obstruxi
            1. problematische Seite

              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

  2. problematische Seite

    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

  3. problematische Seite

    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.

    1. problematische Seite

      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

      1. problematische Seite

        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

        --
        200 ist das neue 35.