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">Открыть</li>
<li role="menuitem">Скопировать ссылку</li>
<li role="menuitemcheckbox" aria-checked="true">В избранном</li>
<li role="menuitem" data-danger="true">Удалить</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).

Mobilen

• 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.