𝗗𝗲𝘀𝗶𝗴𝗻 𝗧𝗮𝘀𝘁𝗮𝘁𝘂𝗿𝗻𝗮𝘃𝗶𝗴𝗮𝘁𝗶𝗼𝗻 𝗳ü𝗿 𝗗𝗮𝘁𝗮 𝗚𝗿𝗶𝗱𝘀

Power-User möchten ohne Maus arbeiten.

Ein gut gestaltetes Data Grid ermöglicht es ihnen, nur mit der Tastatur zu navigieren, zu bearbeiten und zu agieren. Diese Nutzer sind zwei- bis dreimal schneller als Maus-Nutzer.

Wenn Ihr Grid für jede Aktion einen Klick erzwingt, werden Power-User Ihr Tool hassen.

Die Lösung ist einfach. Sie erfordert etwa hundert Zeilen Code und kluge Design-Entscheidungen.

Folgen Sie diesen Regeln für ein professionelles Grid:

• Tab: Nutzen Sie diese Taste, um das Grid zu betreten oder zu verlassen. Einmal im Grid, sollte Tab zwischen Schaltflächen oder Eingabefeldern innerhalb einer Zeile wechseln. Nutzen Sie Tab nicht, um zwischen Zellen zu navigieren.

• Pfeiltasten: Nutzen Sie diese, um zwischen Zellen zu wechseln. Hoch und runter bewegt zwischen Zeilen. Links und rechts bewegt zwischen Spalten.

• Enter: Nutzen Sie diese Taste, um die Hauptaktion für eine Zeile auszulösen, wie z. B. das Öffnen einer Detailansicht.

• Leertaste: Nutzen Sie diese, um eine Zeile auszuwählen oder abzuwählen.

• Escape: Nutzen Sie diese Taste, um eine Bearbeitung abzubrechen oder ein Menü zu schließen.

• Home und End: Nutzen Sie diese Tasten, um zum Anfang oder Ende einer Zeile zu springen.

Der größte Fehler besteht darin, Tab zum Wechseln zwischen Zellen zu verwenden. In einem großen Grid ist das zu langsam. Wenn ein Grid 7 Spalten und 20 sichtbare Zeilen hat, muss ein Nutzer die Tab-Taste 140 Mal drücken, um einen Bildschirm zu bearbeiten. Pfeiltasten lösen dieses Problem. Ein Tastendruck bewegt Sie zur nächsten Zeile.

Für die Inline-Bearbeitung folgen Sie dem Spreadsheet-Muster:

  • Drücken Sie Enter, um die Bearbeitung einer Zelle zu starten.
  • Drücken Sie erneut Enter, um die Änderung zu speichern.
  • Drücken Sie Escape, um die Bearbeitung abzubrechen.
  • Drücken Sie Tab, um zu speichern und zur nächsten bearbeitbaren Zelle zu springen.

Um Nutzern zu helfen, diese Tastenkombinationen zu finden, nutzen Sie diese Muster:

  • Fügen Sie eine „?“–Tastenkombination hinzu, um ein Hilfe-Menü zu öffnen.
  • Zeigen Sie Tastenkombinationen in Tooltips auf Schaltflächen an.
  • Nutzen Sie einen einmaligen Onboarding-Tipp.

Eine gute Tastaturnavigation ist ein Produktivitätsmultiplikator. Es ist eine kleine Investition für eine massive Steigerung der Nutzergeschwindigkeit.

Quelle: https://dev.to/137foundry/how-to-design-keyboard-navigation-for-a-data-grid-so-power-users-stop-reaching-for-the-mouse-mh4