Kontextmenüs und schnelle Aktionen

1) Zweck und Umfang

• Lokale Aktionen am Objekt (Karte, Tabellenzeile, Koeffizient).
• Batch-Aktionen über Auswahl.
• Versteckte, aber nicht kritische Optionen (sekundär).
• Regel: Kritische und primäre Aktionen nicht nur im Kontextmenü verstecken.

2) Trigger und Varianten

Right-Click/Shift + F10/Menu Key ist ein klassischer Kontext.
Icon button (kebab '⋮', meatballs'...', context) - universell für Touch/Desktop.
Long-Press (400-600 ms) ist das mobile Äquivalent von Right-Click.
Befehlspalette (⇧⌘P/Strg + K) - globale schnelle Befehle mit Suche.
Swipe-reveal (iOS/Android-Listen) - Öffnet eine Reihe schneller Shortcuts.

Empfehlung: Stellen Sie mindestens zwei Anrufarten (Icon + Kontextklick/Taste) zur Verfügung.

3) Inhalt und Priorität

Die ersten 1-3 Punkte - häufige Aktionen; dann ein Trennzeichen; weiter - weniger häufig verwendet.
Destruktiv - am Ende, mit Farbe/Symbol gekennzeichnet (und oft - durch Bestätigung/undo).
Formulierungen - Verb + Objekt („Zu Favoriten hinzufügen“, „ID kopieren“).
Das Label ≠ nur ein Symbol: Das Symbol ist ein Verstärker, kein Textersatz.

4) Gruppierung und Zustand

Trennzeichen für logische Blöcke (Anzeigen, Bearbeiten, Admin, gefährlich).
Состояния: `disabled`, `checked` (`menuitemcheckbox`/`menuitemradio`), `destructive`.
Zeigen Sie nicht unzugänglich durch Rolle, wenn es verwirrt; alternativ - zeigen als' deaktiviert 'mit einem Hinweis auf die Ursache.

5) Verfügbarkeit (A11y)

Container: „role =“ menu „“, Elemente: „role =“ menuitem „“/„ menuitemcheckbox “/„ menuitemradio“.
Roving tabindex: der einzige' tabindex ='0 'auf dem aktuellen Element, der Rest' -1'.
Pfeile ↑↓ - Verschieben, →/← - Eingabe/Ausgabe des Untermenüs. Enter/Space - Aktivierung, Esc - schließen.
Typeahead: Der Druck des ersten Buchstabens bringt den Fokus auf den Punkt.
Der Fokusring ist sichtbar; Kontrast von Text und Icons ≥ AA.
Verwenden Sie für das Schaltflächensymbol 'aria-haspopup =' menu''und' aria-expanded'.

html
<button id="more" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-1">Еще</button>
<ul id="menu-1" role="menu" aria-labelledby="more" hidden>
<li role = "menuitem" tabindex = "0 "> Open </li>
<li role = "menuitem"> Copy link </li>
<li role = "menuitemcheckbox" aria-checked =" true"> Favorites </li>
<li role = "menuitem" data-danger = "true "> Delete </li>
</ul>

js const menu = document. getElementById('menu-1');
menu. addEventListener('keydown', e=>{
const items=[...menu. querySelectorAll('[role^="menuitem"]')];
let i=items. findIndex(n=>n. tabIndex===0);
if(e. key==='ArrowDown'){ items[i].tabIndex=-1; items[(i+1)%items. length].tabIndex=0; items[(i+1)%items. length].focus(); e. preventDefault(); }
if(e. key==='ArrowUp'){ items[i].tabIndex=-1; items[(i-1+items. length)%items. length].tabIndex=0; items[(i-1+items. length)%items. length].focus(); e. preventDefault(); }
if(e. key==='Escape'){ menu. hidden=true; document. getElementById('more'). focus(); }
});

6) Positionierung und Performance

Öffnen Sie das Menü an der Quelle (Klick-Punkt/Symbol), Verschiebung 4-8 px; Achten Sie auf die Bildschirmränder (Flip/Shift).
Portal/Ebene oben ('z-index') mit Klickfängen heraus.
Rendern Sie faul, recyceln Sie die Liste in langen Menüs (Virtualisierung ist nicht notwendig, aber vermeiden Sie Hunderte von Elementen).
Animationen nur 'opacity/transform', Dauer 140-200 ms (out schneller: 100-160 ms).
Öffnen Sie das Untermenü durch 'ArrowRight' und hover mit einer Verzögerung von 80-120 ms (Anti-Flicker).

7) Mobile Muster

Langpresse mit Haptik; Das Timing beträgt 450 ± 100 ms.
Bottom sheet als Form des Kontextmenüs (thumb-reachable).
Swipe-Aktionen in Listen: links „Archiv/Favoriten“, rechts „Löschen“ (Bestätigung/undo).
Klickzonen ≥ 44 × 44, Beschriftungen kurz, Icons 20-24 px.

8) Bestätigungen, Undo und Sicherheit

Destruktive Aktionen: entweder eine zweite Bestätigung (modal/confirm pattern) oder undo 5-10s.
Finanziell/riskant - durch explizite Bestätigung mit dem Kontext der Konsequenzen.
Zeigen Sie den Grund für „deaktiviert“ („Nicht genügend Rechte“, „Limit erreicht“).

9) Schnelles Handeln ohne Menü

Inline-Shortcats in der Zeile (Symbole „“, „“, „⋯“).
Hover-reveal (Desktop): Zeigen Sie Aktionen an, wenn Sie geführt werden, aber lassen Sie auch einen klaren Auslöser.
Befehlspalette: Suche nach Aktionen, Hotkeys in Aufforderungen („⌘S“, „Strg + Enter“).

10) Copywriting und Icons

Verb + Objekt, 2-3 Wörter.
Beginnen Sie mit einer Aktion („Datensatz löschen“...), nicht mit einem Substantiv („Datensatz löschen“).
Symbole aus einem einzigen Satz; Verwenden Sie die gleichen Piktogramme für die gleichen Aktionen im gesamten Produkt.
Erklärende Hinweise ('title '/tooltip) für mehrdeutige Punkte.

11) Telemetrie und Experimente

CTR Punkt für Punkt, Median der Zeit von der Eröffnung bis zum Klick, Stornierungsrate/undo.
Anzahl der Misclicks (destruktiv → aufgehoben).
A/B: Reihenfolge und Gruppierung der Punkte, Vorhandensein von schnellen Shortcuts in der Liste.
Protokolle von „unsichtbaren“ Klauseln (niemand verwendet) - Kandidaten für die Löschung/Übertragung.

12) Design-System-Token (Beispiel)

json
{
"menu": {
"minWidth": 208,
"itemHeight": 36,
"gap": 4,
"padding": 8,
"radius": 12,
"elev": 8,
"anim": { "inMs": 180, "outMs": 120, "ease": "cubic-bezier(0. 2,0,0. 2,1)" }
},
"swipe": { "revealThresholdPx": 56, "confirmDestructive": true }
}

css
.menu{min-width:208px; padding:8px; border-radius:12px; box-shadow:var(--elev-3); background:var(--bg-elevated)}
.menu [role^="menuitem"]{height:36px; padding:0 12px; display:flex; gap:8px; align-items:center; border-radius:10px}
.menu [role^="menuitem"]:hover,
.menu [role^="menuitem"][tabindex="0"]{background:var(--bg-hover)}
.menu [data-danger="true"]{color:var(--role-danger)}

13) Muster nach Komponenten

Karten/Kacheln: Symbol „⋯“ in der oberen rechten Ecke; auf hover - gezeigt, auf touch - immer sichtbar.
Zeilen der Tabelle: „⋯“ in der letzten Spalte; Bei Mehrfachauswahl - Stapelaktivitätsleiste oben/unten.
Chat-/Benachrichtigungslisten: swipe-actions (Archiv/gelesen/gelöscht) mit undo.
Mediengalerien: langes Tippen → Mehrwahlmodus + unteres Aktionsfeld.

14) Besonderheiten von iGaming

Quick Bet: Im Kontextmenü des Koeffizienten - „Setzen Sie X“ (Voreinstellungen), „Zum Coupon hinzufügen“, „Abonnieren Sie die Änderung des Koeffizienten“. Bestätigung/undo ist erforderlich.
Favoriten/Abonnements: „Anbieter/Spiel zu Favoriten hinzufügen“, „Turnier abonnieren“.
Cache-Out: mit Inline-Bestätigung und aktuellem Betrag; nur mit Marktstatus verfügbar.
Moderation/Berichte: „Beschweren“, „Chat blockieren“ - sicher, sichtbar durch Rollen.
Verantwortungsvolles Spiel: „Limit setzen“, „Pause 24h“ - ohne aggressive Farben, mit klarer Beschreibung der Folgen.

15) Anti-Muster

Kritische Aktionen sind nur im Kontextmenü versteckt.
Elemente ohne Text (einzelne Symbole), insbesondere in Listen.
Versehentliches Schließen des Cursors beim Übergang zum Untermenü (keine Verzögerung/kein Korridor).
Das Menü überlappt das Quellelement oder geht hinter den Bildschirm (kein Flip/Shift).
Destruktiv ohne Bestätigung/undo.
Nicht offensichtliche Rechte (der Punkt verschwindet ohne Erklärung).

16) QS-Checkliste

Fassbarkeit

• 'role =' menu '/' menuitem 'sind korrekt, roving tabindex und Pfeile funktionieren.
• Esc schließt das Menü, der Fokus kehrt zur Quelle zurück.
• Kontrast und Fokusringe entsprechen AA.

Verhalten

• Die Reihenfolge der Punkte spiegelt die Häufigkeit und das Risiko wider. destruktiv unten.
• Die Positionierung berücksichtigt die Kanten (Flip/Shift); Animationen sind schnell (≤ 200 ms).
• Das Untermenü öffnet sich per ArrowRight und „zittert“ nicht (hover-intent 80-120 ms).

Mobil

• Langpresse mit Haptik; bottom-sheet ist bequem mit dem Daumen.
• Swipe-Aktionen haben undo; Klickzone ≥ 44 × 44.

Sicherheit

• Bestätigung/undo für gefährliche Aktivitäten; Die Gründe für disabled sind klar.
• Keine privaten Datenlecks in den Hinweisen/Labels.

Metriken

• CTR/Zeit bis zum Klick wird aufgehoben; misclick/undo werden überwacht.

17) Umsetzung: Öffnen/Schließen und Click-out

js const btn=document. getElementById('more'), menu=document. getElementById('menu-1');
const open=()=>{ menu. hidden=false; btn. setAttribute('aria-expanded','true'); menu. querySelector('[role^="menuitem"]'). focus(); };
const close=()=>{ menu. hidden=true; btn. setAttribute('aria-expanded','false'); btn. focus(); };
btn. addEventListener('click', e=>{ menu. hidden? open():close(); });
document. addEventListener('pointerdown', e=>{ if(!menu.hidden &&!menu.contains(e. target) && e. target!==btn) close(); });
window. addEventListener('blur', close);

18) Dokumentation im Konstruktionssystem

Компоненты: `ContextMenu`, `MenuItem`, `Submenu`, `BottomSheet`, `SwipeAction`, `CommandPalette`.
Bemaßungen/Höhen-/Radius-/Animations-Token.
Gaids nach Verfügbarkeit (ARIA, Tastatur, Typeahead).
„Do/Don't“ mit Beispielen für Gruppierung, Positionierung und Bestätigungen.

Kurze Zusammenfassung

Kontextmenüs und schnelle Aktionen beschleunigen die Arbeit, wenn sie vorhersehbar, zugänglich und sicher sind: zwei Anrufpfade, klare Etiketten mit Symbolen, intelligente Gruppierung, Bestätigung/Undo für das Risiko, korrekte Tastaturnavigation und klare Positionierung. Fixieren Sie Token und Muster im Designsystem - und Benutzer werden schnell handeln, ohne Angst vor Fehlern zu haben.