KayTwo: Enterbutton öffnet Kreismenü

Hi!

Ich bräuchte wiedermal eure Hilfe!

Ich bin derzeit dabei, eine Enterpage zu basteln. Auf dieser soll sich ein Logo, etwas Text und ein "Enter"-Button befinden! Beim Klick auf den Enterbutton sollen sich in Kreisform um den Button herum 5 Menüpunkte öffnen. Wie das ganze aussehen soll seht ihr unten an dem Bild (Den Regler als Button vorstellen). So, nun zu den Fragen.

  1. In welcher Form ist es am einfachsten/effizientesten zu lösen? (Javascript, CSS,..)
  2. Wie gehe ich das ganze am besten an?

Ich freue mich auf eure Tipps, Vorschläge und Lösungen!

MfG KayTwo

Bildbeschreibung

  1. Hi,

    Ich bin derzeit dabei, eine Enterpage zu basteln.

    zum Technischen kann ich nicht viel sagen. Aber:

    Bedenke, daß die Besucher normalerweise über eine Suchmaschine auf Deine Seiten kommen, und dabei in den seltensten Fällen auf der "Enterpage" landen, sondern eher auf der Seite, deren Inhalt den Suchtreffer ergeben hat.

    cu,
    Andreas a/k/a MudGuard

  2. UI-Elemente müssen einen ganzen Anforderungskatalog erfüllen:

    Intuitiv: Man kann dem Ding ansehen was es tut.

    • Auch dann, wenn man rot-grün oder gelb-blau blind ist.
    • Auch dann, wenn man KOMPLETT BLIND ist und sich die Seite vom Screen-Reader vorlesen lässt. Man kann sich entscheiden, Accessibility wegzulassen. Aber nur, wenn man weiß, dass kein Benutzer dabei ist der darauf angewiesen ist (sprich: wenn es ein Web nur für Dich ist).

    Praktisch: Man muss möglichst wenig tun, um die gewünschte Funktion auszulösen.
    Bei Dir geht es um zwei Aktionen: Knopf in die richtige Richtung drehen, Knopf drücken. Eventuell auch noch: Icon-Kreis sichtbar machen. Hm. Wie genau macht das

    • ein Maus-Benutzer
    • ein Tastatur-Benutzer
    • ein Touch-Benutzer
    • ein Braille-Zeilen Benutzer (oder Sprachsteuerungs-Benutzer)?

    Nett aussehen. Ok. Kann man so sagen. Für Leute mit schlechten Augen wäre ein stärkerer Icon-Kontrast gut. Wie du das Ding Screenreader-kompatibel bekommst, ist eine andere Frage...

    Wenn Du die Fragen zum Punkt 2 beantworten kannst, dann kann man Dir vermutlich Konstruktionsvorschläge machen. Wenn Du Dich auf Mausbenutzer beschränken willst, wird die Sache einfacher...

    Rolf

    1. @@Rolf b

      Man kann sich entscheiden, Accessibility wegzulassen.

      “Never treat accessibility as an enhancement.” —Sara Soueidan heute auf der Smashing Conference

      Aber nur, wenn man weiß, dass kein Benutzer dabei ist der darauf angewiesen ist (sprich: wenn es ein Web nur für Dich ist).

      Auch dann nicht.

      Durch Unfall oder Krankheit kann man selbst ganz schnell zu den darauf Angewiesenen gehören.

      Oder durch ganz Banales.

      … dann kann man Dir vermutlich Konstruktionsvorschläge machen. Wenn Du Dich auf Mausbenutzer beschränken willst, wird die Sache einfacher...

      Das allerdings. ;-)

      LLAP 🖖

      --
      “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
      Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
  3. Hallo,

    du könntest die Grafik aus klickbaren SVG-Grafiken erzeugen, als Anregung: https://wiki.selfhtml.org/wiki/SVG/Anwendung_und_Praxis/responsive_Imagemaps.

    Gruß
    Jürgen