Email: Trenne niemals st...

0 52

Trenne niemals st...

Email
  • html
  1. -1
    Matthias Scharwies
    1. 2
      Rolf B
      1. 0
        Matthias Scharwies
        1. 0
          Rolf B
        2. 0
          Der Martin
      2. 0
        Email
        1. 1
          Gunnar Bittersmann
          • css
          1. 0
            Email
            1. 0
              Gunnar Bittersmann
              1. 0
                Email
                1. 0
                  Gunnar Bittersmann
                  • ux
                  1. 0
                    Email
                    1. 0
                      Gunnar Bittersmann
                  2. 0
                    Tabellenkalk
                  3. 1
                    dedlfix
                    1. 0
                      Email
                    2. 0
                      Christian Kruse
                      1. 0
                        dedlfix
                        1. 0
                          Christian Kruse
                          1. 0
                            dedlfix
                            1. 0
                              Christian Kruse
                              1. 0
                                dedlfix
                                1. 0
                                  Christian Kruse
                                  1. 0
                                    dedlfix
                                    1. 0
                                      Auge
                                    2. 1
                                      Der Martin
                                      1. 0
                                        TS
                                        • barrierefreiheit
                                        • ux
                                      2. 0
                                        Gunnar Bittersmann
                            2. 0
                              TS
                              • humor
                              • ux
                      2. 0
                        TS
                        • barrierefreiheit
                        • design/layout
                        • ux
                    3. 0
                      TS
                      • design/layout
                      • ux
                      1. 0
                        dedlfix
                        1. 0
                          TS
                          • barrierefreiheit
                          • design/layout
                          • ux
                    4. 0
                      Gunnar Bittersmann
                      1. 0
                        TS
                        • barrierefreiheit
                        • ux
                        1. 0
                          Gunnar Bittersmann
                          1. 0
                            TS
                          2. 2
                            dedlfix
                            1. 0
                              Gunnar Bittersmann
                      2. 0
                        dedlfix
                    5. 0
                      MudGuard
                      1. 0
                        TS
                        • barrierefreiheit
                        • ux
                      2. 1
                        dedlfix
              2. 1
                klawischnigg
                1. 0
                  TS
                  • css
                  • webstandards
                  1. 0
                    klawischnigg
                    1. 0
                      TS
                      1. 0
                        klawischnigg
                2. 0
                  Gunnar Bittersmann
                  1. 0
                    klawischnigg
      3. 0
        Email

Problem:

<label>%name%:<input type="checkbox" name="bas" value="%value%"></label>

Der Browser bricht zwischen %name% und Checkbox um so daß die Checkbox auf eine neue Zeile rutscht. Wie kann ich das verhindern?

MFG

  1. Servus!

    Problem:

    <label>%name%:
     <input type="checkbox" name="bas" value="%value%">
    </label>
    

    Der Browser bricht zwischen %name% und Checkbox um so daß die Checkbox auf eine neue Zeile rutscht. Wie kann ich das verhindern?

    Dazu müsste man das CSS kennen; am Besten in einem Live-Beispiel.

    Das es anders geht, kannst du hier sehen:

    Herzliche Grüße

    Matthias Scharwies

    --
    25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
    1. Hallo Matthias,

      Das es anders geht, kannst du hier sehen:

      da bist Du aber ziemlich im Irrtum. Mach dein Browserfenster mal schmal genug:

      Das Innere eines Labels ist Fließtext. Wenn man erzwingen will, dass Text und Checkbox auf einer Zeile bleiben, kann man per CSS white-space:pre setzen. Dann rutscht der Text aber ggf. aus der Label-Box hinaus und hängt irgendwo rum, wo man ihn nicht haben will, oder wird abgeschnitten.

      Alternativ macht man aus dem Label eine Flexbox, packt den Labeltext in ein Span und ordnet so Text und Checkbox zwingend nebeneinander. Der Text bricht dann innerhalb des span um und die Checkbox bleibt daneben stehen.

      Beispiel für Flexbox: https://jsfiddle.net/wcsh7z8b/

      Das steht im Fiddle:

      HTML

      <h2>Ihre köstlichen Pizzazutaten</h2>
      <ul>
      <li><label><input type="checkbox" name="zutat[]" value="sci">Bester Vorderschinken vom Eifelschwein</label></li>
      <li><label><input type="checkbox" name="zutat[]" value="ana">Saftig-süße karibische Ananas</label></li>
      <li><label><input type="checkbox" name="zutat[]" value="ore">Frisch gepflückter Oregano</label></li>
      <li><label><input type="checkbox" name="zutat[]" value="kas">Mozzarellakäse von handgestreichelten Büffelkühen</label></li>
      <li><label><input type="checkbox" name="zutat[]" value="art">Zarte Artischockenherzen</label></li>
      </ul>
      

      und CSS

      ul {
        list-style: none;
        padding: 0;
      }
      
      li label {
        display: flex;
      }
      li label input[type=checkbox] {
        margin-top: 0.4em;
        margin-right: 0.5em;
      }
      

      Rolf

      --
      sumpsi - posui - clusi
      1. Servus!

        Hallo Matthias,

        Das es anders geht, kannst du hier sehen:

        da bist Du aber ziemlich im Irrtum. Mach dein Browserfenster mal schmal genug:

        Ich hab nur große Handys - duckundwech!

        Ne, im Ernst, dass ein Formular weniger als 5em breit sein sollte, wär ich nie drauf gekommen - aber solche use cases gibt's wohl.

        Das Innere eines Labels ist Fließtext. Wenn man erzwingen will, dass Text und Checkbox auf einer Zeile bleiben, kann man per CSS white-space:pre setzen. Dann rutscht der Text aber ggf. aus der Label-Box hinaus und hängt irgendwo rum, wo man ihn nicht haben will, oder wird abgeschnitten.

        Alternativ macht man aus dem Label eine Flexbox, packt den Labeltext in ein Span und ordnet so Text und Checkbox zwingend nebeneinander. Der Text bricht dann innerhalb des span um und die Checkbox bleibt daneben stehen.

        Beispiel für Flexbox: https://jsfiddle.net/wcsh7z8b/

        Coole Lösung - vielen Dank - again what learned

        Herzliche Grüße

        Matthias Scharwies

        --
        25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
        1. Hallo Matthias,

          dass ein Formular weniger als 5em breit sein sollte, wär ich nie drauf gekommen

          Die Zeiten der Größeninflation von Viewports wurden von Smelly[1] Steve leider iTerminiert. Statt dessen kommen immer neue Mikroformfaktoren auf den Markt. Zeige die Speisekarte mal auf einer Smartwatch an.

          Aber generell gibt es 2 Gründe, warum der Platz für ein Label nicht reicht.

          • unerwartet schmaler Bildschirm
          • unerwartet langer Labeltext

          Gerade bei programmatische eingestreuten Labels, die von enthusiastischen Usern statt vom Webdesigner verfasst wurden, kann einem #2 zustoßen. Meine Pizzazutaten sind ein Beispiel dafür 😂

          Rolf

          --
          sumpsi - posui - clusi

          1. wenn die Gerüchte über seine Studentenzeit der Wahrheit entsprechen... ↩︎

        2. Hallo Matthias,

          Ich hab nur große Handys - duckundwech!

          vor ein paar Jahren haben wir uns über einen Kollegen amüsiert, der keine Gelegenheit ausgelassen hat, stolz sein Tablet in Szene zu setzen. Besonders lustig war es, wenn er damit telefonierte.
          Wir haben dann immer gelästert und ihn gefragt, warum er sich sein Frühstücksbrettchen ans Ohr hält ...

          again what learned

          Autschn.

          Ciao,
           Martin

          --
          Wissen ist Macht.
          Wir wissen nichts. Macht auch nichts.
      2. Danke schonmal. Mit display:flex stehen aber alle Checkboxen grundsätzlich untereinander. Ich möchte jedoch beibehalten, daß nur bei Bedarf umgbrochen wird, also je nach Fensterbreite. Nur eben nicht zwischen dem Label und der Checkbox. Sonst geht ja der Sinn des Labels verloren.

        MFG

        1. @@Email

          Ich möchte jedoch beibehalten, daß nur bei Bedarf umgbrochen wird, also je nach Fensterbreite. Nur eben nicht zwischen dem Label und der Checkbox.

          Mit label { white-space: nowrap } Verhinderst kannst du den Zeilenumbruch zwischen Checkbox und Beschriftung verhindern. Musst dann den Zeilenumbruch für die Beschriftung wieder erlauben: label > span { white-space: normal } (erstes Beispiel im Codepen)

          Besser wäre aber vieleicht, den ganzen Block aus Checkbox und Beschriftung in eine neue Zeile zu tun, wenn er nicht in die vorige passt: label { display: inline-block } (zweites Beispiel)

          Noch besser dürfte es allerdings sein, die Optionen überhaupt nicht inline nebeneinander, sondern untereinander darzustellen: label { display: block } (drittes Beispiel)

          Screenshot

          Und warum steht die Beschriftung bei dir vor der Checkbox anstatt dahinter?

          LLAP 🖖

          --
          „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
          „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

          —Marc-Uwe Kling
          1. Vielen Dank!!!

            Und warum steht die Beschriftung vor der Checkbox anstatt dahinter?

            Des Kunden Wunsch. MFG

            1. @@Email

              Und warum steht die Beschriftung vor der Checkbox anstatt dahinter?

              Des Kunden Wunsch. MFG

              Der Wurm muss dem Fisch schmecken, nicht dem Angler.

              und:

              Gib Kunden nicht das, was sie wollen, sondern das, was sie brauchen!

              LLAP 🖖

              --
              „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
              „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

              —Marc-Uwe Kling
              1. Genau. Der Kunde möchte Labels mit Doppelpunkt. MFG

                1. @@Email

                  Genau. Der Kunde möchte Labels mit Doppelpunkt. MFG

                  Du hast aber schon verstanden, dass relevant ist, was die Nutzer möchten?

                  Und die sind es gewohnt, dass die Beschriftung hinter der Checkbox steht.

                  LLAP 🖖

                  --
                  „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
                  „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

                  —Marc-Uwe Kling
                  1. Und die sind es gewohnt, dass die Beschriftung hinter der Checkbox steht.

                    Woher willst Du das denn wissen? Abgesehen davon daß da ein Doppelpunkt hinter dem Label auf die falsche Checkbox oder in die Pampa zeigt.

                    MFG

                    1. @@Email

                      Und die sind es gewohnt, dass die Beschriftung hinter der Checkbox steht.

                      Woher willst Du das denn wissen?

                      Weil es alle™ so machen.

                      Abgesehen davon daß da ein Doppelpunkt hinter dem Label auf die falsche Checkbox oder in die Pampa zeigt.

                      ?? Setz keinen Doppelpunkt hinter die Beschriftung einer Checkbox/eines Radiobuttons. Problem gelöst.

                      LLAP 🖖

                      --
                      „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
                      „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

                      —Marc-Uwe Kling
                  2. Hallo,

                    Und die sind es gewohnt, dass die Beschriftung hinter der Checkbox steht.

                    Vermutlich arbeitet der Kunde mit einem rtl-Schriftsystem...

                    scnr

                    Gruß
                    Kalk

                    Edith vermutet, der Kunde ist RTL

                  3. Tach!

                    Du hast aber schon verstanden, dass relevant ist, was die Nutzer möchten?

                    Und die sind es gewohnt, dass die Beschriftung hinter der Checkbox steht.

                    Und, ist das sinnvoll? Zuerst eine Checkbox zu haben, ohne zu wissen, wofür sie steht, dann den Text dazu lesen und nun bei Bedarf wieder zurückzugehen, um den Haken zu setzen. Der normale Links-nach-rechts-Lesefluss wäre zu lesen, zu entscheiden, Haken zu setzen.

                    Die Checkboxen links von der Beschriftung zu haben, hat eigentlich nur optische Gründe. Denn so können sie gerade untereinander stehen. Möchte man sie rechts untereinander stehen haben, gibt es das Problem, dass man für kleinere Beschriftungen Platz lassen muss, und als Leser muss man die Zeile genau verfolgen. Eine senkrechte Ausrichtung sehe ich nicht als sinnvoll an, denn so bilden sich Spalten, aber Label und Checkbox gehören stattdessen zeilenweise zusammen.

                    dedlfix.

                    1. Der normale Links-nach-rechts-Lesefluss wäre zu lesen, zu entscheiden, Haken zu setzen.

                      Genau. Was ja auch durch den Doppelpunkt unterstützt wird.

                      MFG

                      --
                      Beim Vorwärtsgehn nach hinten schaun, das hat schon manchen umgehaun.
                    2. Hallo dedlfix,

                      Und die sind es gewohnt, dass die Beschriftung hinter der Checkbox steht.

                      Und, ist das sinnvoll?

                      Das ist so erstmal nicht wichtig.

                      Wichtig ist: erzeugst du Verwirrung und/oder Irritation beim User, wenn du es anders herum machst? Und das ist meiner Erfahrung nach in der Tat so.

                      Freundliche Grüße,
                      Christian Kruse

                      1. Tach!

                        Und die sind es gewohnt, dass die Beschriftung hinter der Checkbox steht.

                        Und, ist das sinnvoll?

                        Das ist so erstmal nicht wichtig.

                        Wichtig ist: erzeugst du Verwirrung und/oder Irritation beim User, wenn du es anders herum machst? Und das ist meiner Erfahrung nach in der Tat so.

                        Gut, aber was war zuerst da, die Leser, die das so wollen, oder die Formulardesigner, die die senkrechte Ausrichtung schöner finden, und damit einen Standard erschaffen haben, an den man sich gewöhnt hat?

                        dedlfix.

                        1. Hallo dedlfix,

                          Wichtig ist: erzeugst du Verwirrung und/oder Irritation beim User, wenn du es anders herum machst? Und das ist meiner Erfahrung nach in der Tat so.

                          Gut, aber was war zuerst da, die Leser, die das so wollen, oder die Formulardesigner, die die senkrechte Ausrichtung schöner finden, und damit einen Standard erschaffen haben, an den man sich gewöhnt hat?

                          Diese Frage ist doch akademisch. Folgende Fakten stehen im Raum:

                          1. Labels zu Checkboxen werden seit ihrer Erfindung rechts von der Checkbox angeordnet
                          2. die User haben sich daran gewöhnt
                          3. es anders zu machen ruft Irritation/Verwirrung hervor

                          Dass es anders herum logischer wäre, mag ja sein, ist aber jetzt halt zu spät.

                          Freundliche Grüße,
                          Christian Kruse

                          1. Tach!

                            Folgende Fakten stehen im Raum:

                            1. Labels zu Checkboxen werden seit ihrer Erfindung rechts von der Checkbox angeordnet
                            2. die User haben sich daran gewöhnt
                            3. es anders zu machen ruft Irritation/Verwirrung hervor

                            Ich bitte um Belege der Fakten. Ansonsten bitte ich das Wort Fakten durch Annahmen zu ersetzen.

                            dedlfix.

                            1. Hallo dedlfix,

                              Folgende Fakten stehen im Raum:

                              1. Labels zu Checkboxen werden seit ihrer Erfindung rechts von der Checkbox angeordnet
                              2. die User haben sich daran gewöhnt
                              3. es anders zu machen ruft Irritation/Verwirrung hervor

                              Ich bitte um Belege der Fakten. Ansonsten bitte ich das Wort Fakten durch Annahmen zu ersetzen.

                              Warum? Hast du einen begründeten Verdacht, dass diese Einschätzung unstimmig oder unwahr ist? Wenn ja, welcher Teil davon?

                              Freundliche Grüße,
                              Christian Kruse

                              1. Tach!

                                Warum? Hast du einen begründeten Verdacht, dass diese Einschätzung unstimmig oder unwahr ist? Wenn ja, welcher Teil davon?

                                Danke, also Einschätzung statt Fakten. Damit gebe ich mich auch zufrieden.

                                dedlfix.

                                1. Hallo dedlfix,

                                  Warum? Hast du einen begründeten Verdacht, dass diese Einschätzung unstimmig oder unwahr ist? Wenn ja, welcher Teil davon?

                                  Danke, also Einschätzung statt Fakten. Damit gebe ich mich auch zufrieden.

                                  Einschätzung der Fakten 😉

                                  Wortklauberei. Mich interessiert tatsächlich, was dich zu deinem Einwand gebracht hat. Sonst hätte ich hier nicht nachgehakt.

                                  Freundliche Grüße,
                                  Christian Kruse

                                  1. Tach!

                                    Warum? Hast du einen begründeten Verdacht, dass diese Einschätzung unstimmig oder unwahr ist? Wenn ja, welcher Teil davon?

                                    Danke, also Einschätzung statt Fakten. Damit gebe ich mich auch zufrieden.

                                    Einschätzung der Fakten 😉

                                    Wortklauberei.

                                    Geschätze Fakten ist ein Widerspruch in sich. Wenn du mit Fakten argumentierst, musst du auch in der Lage sein, sie belegen zu können. Vom Diskussionspartner eine Widerlegung zu fordern ist einfach, finde ich aber nicht seriös. Ich möchte das aber nicht weiter vertiefen. Dass die Anordnung meistens so erfolgt und es Richtlinien gibt, ist nicht mein Punkt.

                                    Mich interessiert tatsächlich, was dich zu deinem Einwand gebracht hat. Sonst hätte ich hier nicht nachgehakt.

                                    Meine Gründe, warum das eine Designerentscheidung gewesen sein könnte, habe ich ja schon genannt. Optisch ist das schöner, aber es wird dem normalen Lesefluss nicht gerecht. Das lässt mich vermuten, dass hier die Optik im Vordergrund gestanden haben könnte und nicht unbedingt der Leserwille.

                                    Meine Frage war ja, ob das sinnvoll ist, und nicht der Wunsch nach Bestätigung, dass sich das so eingebürgert hat. Ich würde gern darauf zurückkommen, und wissen wollen, ob es abgesehen vom optischen Effekt, Gewöhnungen und Normen weitere/echte Gründe für diese Anordnung gibt.

                                    Zum Punkt Verwirrung der Leser kann ich sagen, dass es zumindest mir nicht wichtig ist, wo das Feld in Bezug zum Label steht. Ich muss nur die Zugehörigkeit erkennen.

                                    [ ] Label
                                    [ ] Label
                                    

                                    ↑ Hier ist es recht einfach.

                                    Label [ ] 
                                    Beschriftung [ ]
                                    

                                    ↑ Der Fall ist es auch.

                                    Label        [ ] 
                                    Beschriftung [ ]
                                    

                                    ↑ Das wird schwieriger, je weiter der Abstand nach rechts ist und mit zunehmender Anzahl an der Zeilen.

                                    [ ] Label [ ] Label [ ] Label
                                    
                                    Label [ ] Label [ ] Label [ ]
                                    

                                    ↑ Beide Varianten finde ich unvorteilhaft, weil ich synchronisiert lesen muss, um die Zugehörigkeit nicht zu verlieren.

                                    Label: [ ] Label: [ ] Label: [ ]
                                    

                                    ↑ Der Doppelpunkt hilft jedenfalls beim Erkennen, aber auch mehr Abstand zwischen den Einheiten.

                                    Die waagerechte Anordnung ist aber eher dem Platzproblem von Papier zu schulden. Auf dem Bildschirm hat man eigentlich genügend Scroll-Platz in der Senkrechten, so dass eine waagerechte Anordnung im Prinzip nicht notwendig ist.

                                    Ähnlich sehe ich die Problematik bei Beschriftungen zu Eingabefeldern. Da es genügend Formulare gibt, wo jemand meinte, Labels darunter zu schreiben, muss ich immer davon ausgehen, auf solch ein Formular zu stoßen. Gewohnheit nützt mir in solchen Fällen nichts. Wie auch immer es aber im konkreten Fall ist, es muss (für mich) nur gut erkennbar sein, was zusammengehört. Der Abstand zwischen den Feldern als Hervorhebung der Zugehörigkeiten ist mir als Leser wichtiger als die Positionierung des Labels. Label oben, Feld darunter und kein Abstand zum nächsten Paar ist für mich trotz genormter Anordnung schwer zu erkennen. Das betrifft vor allem solche Fälle, wo ich in einem Datensatz ein Feld ändern möchte und dieses dazu finden muss, und nicht von oben nach unten durchgehend alles ausfülle.

                                    dedlfix.

                                    1. Hallo

                                      Mich interessiert tatsächlich, was dich zu deinem Einwand gebracht hat. Sonst hätte ich hier nicht nachgehakt.

                                      Meine Gründe, warum das eine Designerentscheidung gewesen sein könnte, habe ich ja schon genannt. Optisch ist das schöner, aber es wird dem normalen Lesefluss nicht gerecht. Das lässt mich vermuten, dass hier die Optik im Vordergrund gestanden haben könnte und nicht unbedingt der Leserwille.

                                      Fakt ist aber auch, dass es, wie Gunnar so schön schrieb, alle™️ so machen. ich weiß, ich weiß, Millionen Fliegen …

                                      Mir ist jedenfalls kein Betriebssystem/keine Desktopumgebung bekannt, die die Checkboxen und Radiobuttons nicht vor die Beschriftung setzen würde. Die Benutzer sind es gewohnt, dass die Checkbox oder die radiobuttons vor deren Beschriftungen stehen. Selbst auf manchen Papier-Formularen finde ich diese Anordnung. Auch wenn es den Lesefluss unterstützen würde, die Beschriftung vor das Eingabefeld zu setzen, sind die Benutzer doch auf den umgekehrten Fall konditioniert.

                                      [ ] Label
                                      [ ] Label
                                      

                                      ↑ Hier ist es recht einfach.

                                      Label [ ] 
                                      Beschriftung [ ]
                                      

                                      ↑ Der Fall ist es auch.

                                      Label        [ ] 
                                      Beschriftung [ ]
                                      

                                      ↑ Das wird schwieriger, je weiter der Abstand nach rechts ist und mit zunehmender Anzahl an der Zeilen.

                                             Label [ ] 
                                      Beschriftung [ ]
                                      

                                      ↑ Das wäre eine Möglichkeit, den Bezug bei Formatierung mit senkrechten Achsen und Beschriftung vor dem Eingabefeld optisch herzustellen.

                                      Tschö, Auge

                                      --
                                      Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
                                      Hohle Köpfe von Terry Pratchett
                                    2. Hallo,

                                      Meine Gründe, warum das eine Designerentscheidung gewesen sein könnte, habe ich ja schon genannt. Optisch ist das schöner, aber es wird dem normalen Lesefluss nicht gerecht. Das lässt mich vermuten, dass hier die Optik im Vordergrund gestanden haben könnte und nicht unbedingt der Leserwille.

                                      je länger ich darüber nachdenke, desto mehr komme ich zu der Ansicht, dass ich Labels vor den Checkboxen eigentlich sinnvoller finde. Und ich habe auch schon oft Papier-Formulare gesehen, bei denen das so angeordnet ist.

                                      Zum Punkt Verwirrung der Leser kann ich sagen, dass es zumindest mir nicht wichtig ist, wo das Feld in Bezug zum Label steht. Ich muss nur die Zugehörigkeit erkennen.

                                      Völlig klar.

                                      [ ] Label
                                      [ ] Label
                                      

                                      ↑ Hier ist es recht einfach.

                                      Label [ ] 
                                      Beschriftung [ ]
                                      

                                      ↑ Der Fall ist es auch.

                                      Den finde ich durch die unregelmäßige Anordnung sehr unübersichtlich, es wirkt für mich chaotisch.

                                      Label        [ ] 
                                      Beschriftung [ ]
                                      

                                      ↑ Das wird schwieriger, je weiter der Abstand nach rechts ist und mit zunehmender Anzahl an der Zeilen.

                                      Ja. Aber das kann man durch visuelle Hilfsmittel kompensieren, z.B. eine dünne horizontale Hilfslinie in jeder Zeile, oder zeilenweise alternierende Hintergrundfarben.

                                      Ähnlich sehe ich die Problematik bei Beschriftungen zu Eingabefeldern. Da es genügend Formulare gibt, wo jemand meinte, Labels darunter zu schreiben, muss ich immer davon ausgehen, auf solch ein Formular zu stoßen. Gewohnheit nützt mir in solchen Fällen nichts. Wie auch immer es aber im konkreten Fall ist, es muss (für mich) nur gut erkennbar sein, was zusammengehört. Der Abstand zwischen den Feldern als Hervorhebung der Zugehörigkeiten ist mir als Leser wichtiger als die Positionierung des Labels.

                                      Ja, oder ein anderes optisches Merkmal anstelle des Abstands, z.B. wieder der Zebrastreifen-Hintergrund oder dezente Rasterlinien.

                                      Ciao,
                                       Martin

                                      --
                                      "Wenn man ein Proton aufmacht, sind drei Quarks drin."
                                      - Joachim Bublath in der Knoff-Hoff-Show
                                      1. Hello,

                                        Zum Punkt Verwirrung der Leser kann ich sagen, dass es zumindest mir nicht wichtig ist, wo das Feld in Bezug zum Label steht. Ich muss nur die Zugehörigkeit erkennen.

                                        Jein. Die Technik (Barrierefreiheit) muss auch mitspielen!

                                        Ja. Aber das kann man durch visuelle Hilfsmittel kompensieren, z.B. eine dünne horizontale Hilfslinie in jeder Zeile, oder zeilenweise alternierende Hintergrundfarben.

                                        Ähnlich sehe ich die Problematik bei Beschriftungen zu Eingabefeldern. Da es genügend Formulare gibt, wo jemand meinte, Labels darunter zu schreiben, muss ich immer davon ausgehen, auf solch ein Formular zu stoßen. Gewohnheit nützt mir in solchen Fällen nichts. Wie auch immer es aber im konkreten Fall ist, es muss (für mich) nur gut erkennbar sein, was zusammengehört. Der Abstand zwischen den Feldern als Hervorhebung der Zugehörigkeiten ist mir als Leser wichtiger als die Positionierung des Labels.

                                        Ja, oder ein anderes optisches Merkmal anstelle des Abstands, z.B. wieder der Zebrastreifen-Hintergrund oder dezente Rasterlinien.

                                        Ich stimme dir da zu.

                                        Es ist außerdem immer noch die Frage nach Screenreader + Spracheingabe offen.

                                        Glück Auf
                                        Tom vom Berg

                                        --
                                        Es gibt nichts Gutes, außer man tut es!
                                        Das Leben selbst ist der Sinn.
                                      2. @@Der Martin

                                        ich Labels vor den Checkboxen … Und ich habe auch schon oft Papier-Formulare gesehen, bei denen das so angeordnet ist.

                                        Wahlzettel?

                                        ↑ Das wird schwieriger, je weiter der Abstand nach rechts ist und mit zunehmender Anzahl an der Zeilen.

                                        Ja. Aber das kann man durch visuelle Hilfsmittel kompensieren, z.B. eine dünne horizontale Hilfslinie in jeder Zeile, oder zeilenweise alternierende Hintergrundfarben.

                                        Nein, bitte nicht.

                                        Du willst hier mit zweifelhaften Mitteln ein Problem lösen, dass bei der Anordnung der Beschriftung hinter Checkbox/Radiobutton gar nicht auftritt.

                                        Der Abstand zwischen den Feldern als Hervorhebung der Zugehörigkeiten ist mir als Leser wichtiger als die Positionierung des Labels.

                                        Ja, oder ein anderes optisches Merkmal anstelle des Abstands, z.B. wieder der Zebrastreifen-Hintergrund oder dezente Rasterlinien.

                                        Und wieder: Nein, bitte nicht. Abstand sollte das Mittel der Wahl sein.

                                        LLAP 🖖

                                        --
                                        „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
                                        „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

                                        —Marc-Uwe Kling
                            2. Hello,

                              Tach!

                              Folgende Fakten stehen im Raum:

                              1. Labels zu Checkboxen werden seit ihrer Erfindung rechts von der Checkbox angeordnet
                              2. die User haben sich daran gewöhnt
                              3. es anders zu machen ruft Irritation/Verwirrung hervor

                              Ich bitte um Belege der Fakten. Ansonsten bitte ich das Wort Fakten durch Annahmen zu ersetzen.

                              Das sind dann "shaky facts" :-)

                              Glück Auf
                              Tom vom Berg

                              --
                              Es gibt nichts Gutes, außer man tut es!
                              Das Leben selbst ist der Sinn.
                      2. Hello Christian,

                        Und die sind es gewohnt, dass die Beschriftung hinter der Checkbox steht.

                        Und, ist das sinnvoll?

                        Das ist so erstmal nicht wichtig.

                        Wichtig ist: erzeugst du Verwirrung und/oder Irritation beim User, wenn du es anders herum machst? Und das ist meiner Erfahrung nach in der Tat so.

                        Wie meinst Du das jetzt?
                        Meintest Du, es sei richtig, erst wählen zu lassen und dann erst zu verraten, was man gerade gewählt hat?

                        Ich bin jetzt leider nicht sicher: wie wirkt das auf Sehbehinderte, die einen Screenreader und die Spracheingabe benutzen? Wo steht da der Focus, wenn das Label bereits verlesen worden ist?

                        Glück Auf
                        Tom vom Berg

                        --
                        Es gibt nichts Gutes, außer man tut es!
                        Das Leben selbst ist der Sinn.
                    3. Hello,

                      da will ich jetzt mal ketzern:

                      Das rechtfertigt meiner Meinung nach eine tabellarische Darstellung mit den Spalten Funktion und Auswahl ;-P

                      Das Problem wäre damit beseitigt, zumal man die Zeilen der Tabelle dann auch noch unterschiedlich einfärben könnte!

                      Glück Auf
                      Tom vom Berg

                      --
                      Es gibt nichts Gutes, außer man tut es!
                      Das Leben selbst ist der Sinn.
                      1. Tach!

                        Das rechtfertigt meiner Meinung nach eine tabellarische Darstellung mit den Spalten Funktion und Auswahl ;-P

                        Nicht wirklich, oder worin siehst du den Zusammenhang innerhalb einer Spalte, abgesehen von der rein technischen Klassifizierung als Labels und Checkboxen?

                        dedlfix.

                        1. Hello,

                          Das rechtfertigt meiner Meinung nach eine tabellarische Darstellung mit den Spalten Funktion und Auswahl ;-P

                          Nicht wirklich, oder worin siehst du den Zusammenhang innerhalb einer Spalte, abgesehen von der rein technischen Klassifizierung als Labels und Checkboxen?

                          In der bequemen Art und Weise, ein verständliches und vermutlich auch barrierefreies Design/Layout hinzubekommem. Simple Technik, schlankes Markup, schlankes CSS.

                          Und wie gesagt: die Ketzervariante!

                          Glück Auf
                          Tom vom Berg

                          --
                          Es gibt nichts Gutes, außer man tut es!
                          Das Leben selbst ist der Sinn.
                    4. @@dedlfix

                      Und die sind es gewohnt, dass die Beschriftung hinter der Checkbox steht.

                      Und, ist das sinnvoll?

                      Ja. Denn:

                      Die Checkboxen links von der Beschriftung zu haben, hat eigentlich nur optische Gründe. Denn so können sie gerade untereinander stehen. Möchte man sie rechts untereinander stehen haben, gibt es das Problem, dass man für kleinere Beschriftungen Platz lassen muss, und als Leser muss man die Zeile genau verfolgen. Eine senkrechte Ausrichtung sehe ich nicht als sinnvoll an, denn so bilden sich Spalten, aber Label und Checkbox gehören stattdessen zeilenweise zusammen.

                      Du sagst es. Die Checkbox vor dem Label ist die einzig sinnvolle Anordnung.

                      Zuerst eine Checkbox zu haben, ohne zu wissen, wofür sie steht, dann den Text dazu lesen und nun bei Bedarf wieder zurückzugehen, um den Haken zu setzen.

                      Zurückgehen (CR) musst du nach dem Label sowieso. Zur Checkbox ohne LF, zu nächten Zeile mit.

                      LLAP 🖖

                      --
                      „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
                      „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

                      —Marc-Uwe Kling
                      1. Hello Gunnar,

                        Und die sind es gewohnt, dass die Beschriftung hinter der Checkbox steht.

                        Und, ist das sinnvoll?

                        Ja. Denn:

                        Die Checkboxen links von der Beschriftung zu haben, hat eigentlich nur optische Gründe. Denn so können sie gerade untereinander stehen. Möchte man sie rechts untereinander stehen haben, gibt es das Problem, dass man für kleinere Beschriftungen Platz lassen muss, und als Leser muss man die Zeile genau verfolgen. Eine senkrechte Ausrichtung sehe ich nicht als sinnvoll an, denn so bilden sich Spalten, aber Label und Checkbox gehören stattdessen zeilenweise zusammen.

                        Du sagst es. Die Checkbox vor dem Label ist die einzig sinnvolle Anordnung.

                        Zuerst eine Checkbox zu haben, ohne zu wissen, wofür sie steht, dann den Text dazu lesen und nun bei Bedarf wieder zurückzugehen, um den Haken zu setzen.

                        Zurückgehen (CR) musst du nach dem Label sowieso. Zur Checkbox ohne LF, zu nächten Zeile mit.

                        häh?

                        Glück Auf
                        Tom vom Berg

                        --
                        Es gibt nichts Gutes, außer man tut es!
                        Das Leben selbst ist der Sinn.
                        1. @@TS

                          Zurückgehen (CR) musst du nach dem Label sowieso. Zur Checkbox ohne LF, zu nächten Zeile mit.

                          häh?

                          CR: carriage return – Wagenrücklauf
                          LF: line feed – Zeilenvorschub

                          Kommt von der guten alten Schreibmaschine, wo man mit dem Hebel erst den Wagen nach rechts geschoben hat (also den „Cursor“ an den Zeilenanfang 😉) und dann die Walze gedreht und damit das Papier eine Zeile verschoben hat.

                          LLAP 🖖

                          --
                          „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
                          „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

                          —Marc-Uwe Kling
                          1. Hello,

                            Zurückgehen (CR) musst du nach dem Label sowieso. Zur Checkbox ohne LF, zu nächten Zeile mit.

                            häh?

                            CR: carriage return – Wagenrücklauf
                            LF: line feed – Zeilenvorschub

                            Kommt von der guten alten Schreibmaschine, wo man mit dem Hebel erst den Wagen nach rechts geschoben hat (also den „Cursor“ an den Zeilenanfang 😉) und dann die Walze gedreht und damit das Papier eine Zeile verschoben hat.

                            Verstehe ich leider immer noch nicht!

                            Wie arbeitet ein Screenreader hier und wann kann man did Checkbox toggeln, im vollen Umfang wissend, was ihre Funktion ist? Also wann wird das Label verlesen?

                            Glück Auf
                            Tom vom Berg

                            --
                            Es gibt nichts Gutes, außer man tut es!
                            Das Leben selbst ist der Sinn.
                          2. Tach!

                            Kommt von der guten alten Schreibmaschine, wo man mit dem Hebel erst den Wagen nach rechts geschoben hat (also den „Cursor“ an den Zeilenanfang 😉) und dann die Walze gedreht und damit das Papier eine Zeile verschoben hat.

                            Die Schreibmaschinen, die ich gesehen habe, hatten alle ein Häkchen, das beim Linksdrücken des Hebels in ein Zahnrad der Walze griff und diese gedreht hat, bevor der eigentliche Wagenrücklauf stattfand. Das war also nur ein Bedienvorgang: LFCR.

                            dedlfix.

                            1. @@dedlfix

                              Kommt von der guten alten Schreibmaschine, wo man mit dem Hebel erst den Wagen nach rechts geschoben hat (also den „Cursor“ an den Zeilenanfang 😉) und dann die Walze gedreht und damit das Papier eine Zeile verschoben hat.

                              Die Schreibmaschinen, die ich gesehen habe, hatten alle ein Häkchen, das beim Linksdrücken des Hebels in ein Zahnrad der Walze griff und diese gedreht hat, bevor der eigentliche Wagenrücklauf stattfand.

                              Hm, bei der Reihenfolge bin ich mir jetzt nicht sicher. Hab gerade keine Schreibmaschine zum Testen.

                              Das war also nur ein Bedienvorgang:

                              Was mein „mit dem Hebel erst … dann …“ auch ausdrückte. Zumnidest ausdrücken sollte.

                              LLAP 🖖

                              --
                              „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
                              „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

                              —Marc-Uwe Kling
                      2. Tach!

                        Die Checkboxen links von der Beschriftung zu haben, hat eigentlich nur optische Gründe. Denn so können sie gerade untereinander stehen. Möchte man sie rechts untereinander stehen haben, gibt es das Problem, dass man für kleinere Beschriftungen Platz lassen muss, und als Leser muss man die Zeile genau verfolgen. Eine senkrechte Ausrichtung sehe ich nicht als sinnvoll an, denn so bilden sich Spalten, aber Label und Checkbox gehören stattdessen zeilenweise zusammen.

                        Du sagst es. Die Checkbox vor dem Label ist die einzig sinnvolle Anordnung.

                        Nein, das habe ich nicht aussagen wollen, wenn das so bei dir ankam. Das sehe ich nur dann als sinnvoll, wenn die Optik im Vordergrund steht.

                        Zuerst eine Checkbox zu haben, ohne zu wissen, wofür sie steht, dann den Text dazu lesen und nun bei Bedarf wieder zurückzugehen, um den Haken zu setzen.

                        Zurückgehen (CR) musst du nach dem Label sowieso. Zur Checkbox ohne LF, zu nächten Zeile mit.

                        Logisch gesehen würde ich gern zum nächsten Element gehen, wenn ich mit dem Feld fertig bin. Ich sehe hier eine Inkonsistenz zwischen Textfeldern und Checkboxen/Radios. Ist das wirklich das, was der Leser eigentlich will, oder will er das nur noch aus Gewohnheitsgründen? Ich stelle nicht infrage, dass man das aus optischen Gesichtpunkten entschieden haben könnte, denn das Auge isst schließlich auch mit. Könnte man das überhaupt noch untersuchen, was der Leser wirklich will, oder ist er bereits durch die Gewohnheit vorbelastet? Aber eigentlich ist mir die Klärung der Frage auch nicht wichtig.

                        dedlfix.

                    5. Hi,

                      Und, ist das sinnvoll? Zuerst eine Checkbox zu haben, ohne zu wissen, wofür sie steht, dann den Text dazu lesen und nun bei Bedarf wieder zurückzugehen, um den Haken zu setzen.

                      Warum zurückgehen? Einfach auf den Text klicken, wo man gerade ist …

                      cu,
                      Andreas a/k/a MudGuard

                      1. Hello,

                        Hi,

                        Und, ist das sinnvoll? Zuerst eine Checkbox zu haben, ohne zu wissen, wofür sie steht, dann den Text dazu lesen und nun bei Bedarf wieder zurückzugehen, um den Haken zu setzen.

                        Warum zurückgehen? Einfach auf den Text klicken, wo man gerade ist …

                        Wo ist man denn gerade, wenn das Label gerade verlesen wurde?
                        Steht man dann nicht schon im nächsten Element?

                        Könnte hier mal bitte jemand ausführen, was ein Screenreader wann vorliest und worauf der Focus steht, wenn das Label verlesen wurde?

                        Ich krieg das auf meinem Tablet nicht hin.

                        Glück Auf
                        Tom vom Berg

                        --
                        Es gibt nichts Gutes, außer man tut es!
                        Das Leben selbst ist der Sinn.
                      2. Tach!

                        Und, ist das sinnvoll? Zuerst eine Checkbox zu haben, ohne zu wissen, wofür sie steht, dann den Text dazu lesen und nun bei Bedarf wieder zurückzugehen, um den Haken zu setzen.

                        Warum zurückgehen? Einfach auf den Text klicken, wo man gerade ist …

                        Geht am Bildschirm, wenn man es richtig gemacht hat. Weiß aber auch nicht jeder Anwender, denn offensichtlich ist nur die Checkbox/Radiobutton. Dass man das Label klicken kann, ist quasi ein hidden Feature. Papier hat den Luxus auch nicht.

                        dedlfix.

              2. Hi there,

                Der Wurm muss dem Fisch schmecken, nicht dem Angler.

                Nachdem aber der Angler die Angler-Lizenz bezahlt und nicht der Fisch, ist ein wohlschmeckender Wurm bestenfalls wünschenswert aber nicht relevant.

                Und weil Du das vielleicht nicht weißt sag ich Dir auch noch, Diskussionen gibt es immer nur mit dem Mann, der die Angel hält, nie mit dem Fisch, der daran hängt...

                1. Hello,

                  Der Wurm muss dem Fisch schmecken, nicht dem Angler.

                  Nachdem aber der Angler die Angler-Lizenz bezahlt und nicht der Fisch, ist ein wohlschmeckender Wurm bestenfalls wünschenswert aber nicht relevant.

                  Und weil Du das vielleicht nicht weißt sag ich Dir auch noch, Diskussionen gibt es immer nur mit dem Mann, der die Angel hält, nie mit dem Fisch, der daran hängt...

                  Demnach müssten wir in jede Webpräsentation eine Remote-Löschfunktion einbauen, die wir nutzen müssten, wenn den Auftraggeber und/oder uns die Erkenntnis der Realität oder bessere technische Möglichleiten eingeholt haben?

                  Glück Auf
                  Tom vom Berg

                  --
                  Es gibt nichts Gutes, außer man tut es!
                  Das Leben selbst ist der Sinn.
                  1. Hi there,

                    Demnach müssten wir in jede Webpräsentation eine Remote-Löschfunktion einbauen, die wir nutzen müssten, wenn den Auftraggeber und/oder uns die Erkenntnis der Realität oder bessere technische Möglichleiten eingeholt haben?

                    Nein, wir dürfen nur nicht aus den Augen verlieren, warum wir überhaupt eine Webpräsentation machen...

                    1. Hello @klawischnigg,

                      Demnach müssten wir in jede Webpräsentation eine Remote-Löschfunktion einbauen, die wir nutzen müssten, wenn den Auftraggeber und/oder uns die Erkenntnis der Realität oder bessere technische Möglichleiten eingeholt haben?

                      Nein, wir dürfen nur nicht aus den Augen verlieren, warum wir überhaupt eine Webpräsentation machen...

                      Geht es hier nicht eher um "für wen"?

                      Es nützt dem Auftraggeber nichts, wenn seine Kunden die Präsentation nicht verstehen oder nicht bedienen können. Oder?

                      Und es nützt dem Auftraggeber nichts, wenn sein Auftragnehmer die Präsentation nicht pflegen mag, bzw. ein neuer Anbieter durch das Zeugs des Vorgängers nicht durchsteigt.

                      Glück Auf
                      Tom vom Berg

                      --
                      Es gibt nichts Gutes, außer man tut es!
                      Das Leben selbst ist der Sinn.
                      1. Hi there,

                        Es nützt dem Auftraggeber nichts, wenn seine Kunden die Präsentation nicht verstehen oder nicht bedienen können. Oder?

                        Keine Ahnung, ich kenn' die Kunden des Auftraggebers nicht, ich weiß nur, daß ich von denen nicht bezahlt werde, sondern vom Auftraggeber.

                        Und es nützt dem Auftraggeber nichts, wenn sein Auftragnehmer die Präsentation nicht pflegen mag, bzw. ein neuer Anbieter durch das Zeugs des Vorgängers nicht durchsteigt.

                        Naja, von einem Nacharbeiter, der in einen Schreckzustand fällt, weil eine Checkbox auf der anderen Seite ist, würd' ich als Auftraggeber ohnehin besser die Finger lassen...

                2. @@klawischnigg

                  Der Wurm muss dem Fisch schmecken, nicht dem Angler.

                  Nachdem aber der Angler die Angler-Lizenz bezahlt und nicht der Fisch, ist ein wohlschmeckender Wurm bestenfalls wünschenswert aber nicht relevant.

                  Für den Pächter des Teiches nicht. Für den Angler sieht das anders aus: der Geschmack des Wurms hat entschiedenden Einfluss auf seinen Fang.

                  Und weil Du das vielleicht nicht weißt sag ich Dir auch noch, Diskussionen gibt es immer nur mit dem Mann, der die Angel hält, nie mit dem Fisch, der daran hängt...

                  Das weiß ich. Fische Nutzer beschweren sich höchst selten über schlechte Webseiten. Sie verlassen sie einfach.

                  LLAP 🖖

                  --
                  „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
                  „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

                  —Marc-Uwe Kling
                  1. Hi there,

                    Nachdem aber der Angler die Angler-Lizenz bezahlt und nicht der Fisch, ist ein wohlschmeckender Wurm bestenfalls wünschenswert aber nicht relevant.

                    Für den Pächter des Teiches nicht. Für den Angler sieht das anders aus: der Geschmack des Wurms hat entschiedenden Einfluss auf seinen Fang.

                    Man kann sich auch aus rein kontemplativen Gründen mit einer Angel an den Teich stellen. Warum auch immer, der Angler hat immer recht. Das ist jedenfalls unkomplizierter und lukrativer, als über Fische Mutmaßungen anszustellen.

                    Und weil Du das vielleicht nicht weißt sag ich Dir auch noch, Diskussionen gibt es immer nur mit dem Mann, der die Angel hält, nie mit dem Fisch, der daran hängt...

                    Das weiß ich. Fische Nutzer beschweren sich höchst selten über schlechte Webseiten. Sie verlassen sie einfach.

                    Mit Fischen, die eine Webseite verlassen, weil die Checkbox auf der "falschen" Seite ist würd' ich weder als Angler noch als Teichbetreiber etwas zu tun haben wollen...

      3. white-space:pre tuts. Danke Dir!