Bertie: Anekdote "Mein MacBook ist kaputt!"

"Hilfe, ich glaub' mein MacBook ist kaputt, ich kann nicht bestellen!"

Meine Schwiegermutter tönt am Telefon sehr verärgert. Vor Ihrer Pensionierung hatte sie in einer Behörde Jahre am Bildschirm gearbeitet, ist heute digital gut ausgestattet mit MacBook / iPad / iPhone.

"Ich kann diesen Haken nicht weg klicken, aber ich will doch mein glutenfreies Brot nicht am anderen Ende der Schweiz abholen gehen!"

Ich sehe mir das per Fernwartung an:

Screenshot eines Checkout Warenkorbs, es gibt einen Haken und zwei Optionen, aber scheinbar kein Feld, um die zweite Option auszuwählen

"Klick' einfach auf den unteren Haken" - "Was, warum? Ach so!!!".

Ich lege den Hörer auf und sehe mir im Seiteninspektor den Code an. Natürlich sind das Radio-Buttons:

Screenshot der Seite im Seiteninspektor: zwei Radio-Buttons

Ohne CSS sähen die so aus:

zwei Radio-Buttons - ohne CSS klar erkennbar!

… und meine Schwiegermutter hätte vermutlich problemlos alleine bestellen können.

Siehe auch:

  • Formulare/Auswahllisten
    Wie man Radio-Buttons und Checkboxen mit CSS so formatieren kann,
    dass Nutzer sie einfach bedienen können.
  1. @@Bertie

    Natürlich sind das Radio-Buttons. Ohne CSS sähen die so aus: … und meine Schwiegermutter hätte vermutlich problemlos alleine bestellen können.

    Ein schönes Beispiel, das Design nicht ist, etwas schön zu machen. Design ist, etwas funktional zu machen.[1] Und auch ansprechend.[2]

    Hier sind einige der Interaktionsprinzipien [ISO 9241-110][3] verletzt: Aufgabenangemessenheit, Selbstbeschreibungsfähigkeit, Erwartungskonformität.

    🖖 Live long and prosper

    --
    “In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
    — Bruce Springsteen, Manchester 2025-05-14

    1. “Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs ↩︎

    2. Was nicht dasselbe ist wie „schön“. Schön wäre eine Schriftart wie Zapfino; nur wäre diese bei sowas Ernstem wie einer Bestellung völlig unpassend. ↩︎

    3. s.a. Präsentation ISO 9241: Ergonomie der Mensch-System-Interaktion und dortige Links ↩︎

  2. Geht es darum, dass Radio-Buttons den ausgewählten Wert als Punkt und nicht als Haken wie bei einer Checkbox darstellen?

    Oder gibt es noch andere Probleme, die ich übersehe?

    1. @@ztiromoritz

      Geht es darum, dass Radio-Buttons den ausgewählten Wert als Punkt und nicht als Haken wie bei einer Checkbox darstellen?

      Ja, AFAIS.

      Oder gibt es noch andere Probleme, die ich übersehe?

      Dass ein Radiobutton aussieht wie eine Checkbox aussieht (wenn überhaupt), ist schon Problem genug.

      🖖 Live long and prosper

      --
      “In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
      — Bruce Springsteen, Manchester 2025-05-14
    2. Liebe(r) ztiromoritz,

      Geht es darum, dass Radio-Buttons den ausgewählten Wert als Punkt und nicht als Haken wie bei einer Checkbox darstellen?

      ja, das ist genau das Problem.

      Oder gibt es noch andere Probleme, die ich übersehe?

      Ja, der scheinbare Haken verhält sich nicht so, wie sich ein Haken üblicherweise verhält. Haken kann man individuell setzen und wieder entfernen. Radio-Buttons in einer Gruppe kann man nur verändern (sozusagen verrutschen). Das wäre hier das Bedienprinzip gewesen, wurde aber durch das geänderte Aussehen verschleiert. Damit wird der Benutzer in die Irre geführt. Und genau das hast Du anscheinend übersehen.

      Liebe Grüße

      Felix Riesterer