Shortcuts – für alle ein Gewinn

Transparente, intuitive und voraussehbare Shortcuts sollten in jeder Web-Anwendung eingebaut werden, um die User Experience zu verbessern. Menschen mit Beeinträchtigung können die Anwendung besser nutzen und auch der durchschnittliche Nutzer erhält einen Effektivitätsvorteil. Shortcuts sollten grafisch zu erkennen sein, bereits bekannte Shortcuts nutzen und auf einem erkennbaren System basieren.

Shortcuts in Web-Anwendungen

Dienstleistungen werden in Unternehmen zunehmend als Web-Anwendungen angeboten. Diese sollen im Vergleich zu den lokal installierten Software-Applikationen mehr Flexibilität in Nutzung und Wartung bringen. 

Historisch betrachtet haben sich Keyboard Shortcuts aus der reinen Tastaturbedienung entwickelt, welche zu Beginn der Computer das primäre Eingabemedium war. Auch heute werden Shortcuts in lokalen Anwendungen gerne noch verbaut, in Web-Anwendungen lassen sie sich meist nicht mehr finden - dabei sind Keyboard Shortcuts kein komplexes Feature und jeder kann davon profitieren. Einige grundlegende Dinge sollten bei der Verwendung von Shortscuts dennoch beachtet werden.

Shortcuts für alle

Nicht jeder Mensch ist in der Lage, problemlos eine Computermaus zu bedienen. In vielen Anwendungen und auf den meisten herkömmlichen Webseiten müssen diese Nutzer mit der [TAB] Taste durch die Webseite navigieren. Shortcuts können hier eine Möglichkeit bieten, die Barrierefreiheit der Web-Anwendung zu erhöhen. Zeitgleich sind sie aber auch eine Bereicherung für die Menschen, die einfach lieber mit der Tastatur arbeiten.

Wenn bei der Entwicklung einer Web-Anwendung schon direkt zu Beginn auf die Barrierefreiheit geachtet wird, ist die Anwendung besser strukturiert und zudem müssen die Entwickler durch die verschiedenen zusätzlichen Anforderungen das Userinterface besser durchdenken. Dies ist Grundlage einer transparent und intuitiv gestalteten Anwendung. Barrierefreiheit und Shortcuts bringen generell eine Bereicherung für alle Nutzer. Das Implementieren von Shortcuts kann auch für eine verbesserte Struktur im Code sorgen, da die Funktionalitäten, die als Shortcut umgesetzt werden sollen, häufig als eigene Einheit implementiert sind. Dies erleichtert Entwicklern das Zurechtfinden im Code.

Die meisten Nutzer einer Web-Anwendung können diese ohne Einschränkungen bedienen. Trotzdem bieten Shortcuts auch für sie einen wesentlichen Effizienz-Vorteil. Der Nutzer muss nicht mehr die Maus nutzen, um die einzelnen Elemente anzuklicken. Jetzt kann er mit Shortcuts deutlich schneller die Funktionalitäten aufrufen und so die Anwendung bedienen.

Shortcuts bieten also einen Vorteil für Alle, für den Durchschnittsnutzer, den Entwickler und Menschen mit Beeinträchtigungen.

Shortcut Qualitäten

Beim Entwickeln einer modernen Web-Anwendung spielt die User Experience (Benutzererfahrung) eine wesentliche Rolle. Wir wollen, dass der Nutzer intuitiv mit der Anwendung interagiert und sich rundum wohlfühlt. Dafür müssen wir Shortcuts so gestalten, dass sie einfach zu verstehen sind. 

Auch die Keyboard Shortcuts sind Teil des Userinterface. Bereits 1986 formulierte Bob Stahl im Magazin „Computerworld"^[1] die drei „Software-Qualitäten" Transparenz, Intuition und Vorhersehbarkeit für ein tastaturbasiertes Userinterface. Heute können wir diese auch auf die Implementierung von Keyboard Shortcuts anwenden.

Transparenz

Gute Software sollte so transparent wie möglich gestaltet sein. Dies gilt auch für Shortcuts. Jeder Nutzer sollte gut und schnell erkennen können, dass Shortcuts in dieser Web-Anwendung unterstützt werden. Wenn ein neuer Nutzer zum ersten Mal mit Shortcuts in Berührung kommt, kennt er die Shortcuts nicht. Er sollte in der Lage sein, die Shortcuts zu entdecken. Umsetzen lässt sich dies auf verschiedene Arten. 

Jeder Shortcut setzt eine Funktionalität um, die über die grafische Oberfläche erreichbar sein sollte. Hierfür dient in vielen Fällen ein Menü. An diesen grafischen Elementen kann direkt ein Hinweis zur Benutzung des Shortcuts angebracht werden. Beispielsweise ist in der IDE „Visual Studio Code" von Microsoft neben jeder Funktionalität der korrespondierende Shortcut abgebildet. Der Menüpunkt „Save" wird um eine Beschreibung „Ctrl+S" erweitert, um dem Nutzer diesen Shortcut nahezulegen.

Wer mit immer sichtbaren kleinen Icons arbeitet oder nicht sehr viel Platz vorhanden hat, kann diese Art der Notizen nur schwer umsetzen. Eine sehr elegante Lösung für dieses Problem ist in der Standard-Software Excel implementiert. Nach dem Drücken der ALT-Taste werden weitere mögliche Keystrokes neben den entsprechenden Grafikelementen angezeigt. So kann der Nutzer die zugehörigen Shortcuts direkt ablesen. 

Eine weitere Alternative bietet ein Pop-up oder ein Seitenelement, welches eine Liste der Tastaturkürzel darstellt. Hier kann der Nutzer die Shortcuts bei Bedarf nachschlagen.

Mit einer transparenten Anwendung kann der User Shortcuts entdecken und lernen, diese in seinen Workflow einzubinden.

Intuition

Für ein System, welches nicht vollständig transparent ist, ist es wichtig, sehr intuitiv zu sein. Wenn der Nutzer nicht alles erneut lernen muss, sondern die Dinge so passieren, wie er es erwartet, zeugt dies von hoher Nutzerfreundlichkeit.

Es ist sehr wahrscheinlich, dass einige Nutzer der Anwendung nicht zum ersten Mal von einem Shortcut hören. Viele sind bereits mit Speichern [STRG ✚ S] oder anderen verbreiteten Shortcuts vertraut. Dies sollten wir uns zu Nutze machen, und diese Shortcuts ähnlich verwenden. Wenn der Shortcut, der überall zum Speichern genutzt wird, plötzlich jedoch alles löscht, sorgt das garantiert für viel Frustration und ein volles Postfach beim Entwicklerteam. Solche Standard Shortcuts sollten nur unter besonderen Umständen eine andere Funktionalität zugewiesen werden, da dies gegen ein intuitives Verhalten spricht.

Viele Unternehmen nutzen Web-Anwendungen, um eine vorausgegangene Desktop-Anwendung zu ersetzen. Grundsätzlich sollten in solchen Fällen alle Shortcuts aus den Vorgänger-Versionen übernommen werden. Dadurch finden sich die Nutzer intuitiv in der Web-Anwendung zurecht. In Einzelfällen, beispielsweise bei sehr ungeeignet ausgewählten Shortcuts im Vorgänger, sollten die Shortcuts neu vergeben werden, um eine intuitive Bedienung der neuen Web-Anwendung zu gewährleisten.

Vorhersehbarkeit

Ein System sollte in seiner Reaktion vorhersehbar sein. Das Drücken des „Kopieren" Buttons (oder Shortcuts) sollte zur Folge haben, dass das zugehörige Element in der Zwischenablage gespeichert wird. Hätte eben dieser Knopf das Einfügen zur Folge, wäre dies nicht sehr vorhersehbar. Die Vorhersehbarkeit lässt sich auch mit dem englischen Begriff consistency betiteln. Hierbei ist die Bedeutung „Konsistenz" zum einen der „strenge gedankliche Zusammenhang" und umschreibt so auch die Vorhersehbarkeit. Sind alle Shortcuts nach einer einheitlichen Regel gewählt, so ist der Nutzer in der Lage, basierend auf dieser Regel neue Shortcuts vorherzusehen.

Ein Beispiel hierfür liefert ein häufig verwendetes Schema: Das Erweitern eines [STRG] Shortcuts mit der [SHIFT] Taste. Viele Programme nutzen den Shortcut [STRG ✚ SHIFT ✚ S], um den Shortcut Speichern [STRG ✚ S] zu erweitern und die Dialogoption „Speichern unter" zu öffnen. Die Taste SHIFT erweitert also die Basisfunktion und erleichtert dem Nutzer das Zurechtfinden mit vielen Shortcuts. Dieses Schema kann der Nutzer nun beispielsweise auf die Shortcuts für andere Funktionalitäten anwenden, um so die Reaktion der Web-Anwendung vorherzusehen.

Bei der Wahl der Tastenkombinationen ist es sinnvoll, die einzelnen Tasten so zu wählen, dass sie zur Bezeichnung der Aktion passen. Hier bietet sich gelegentlich die Nutzung der auslösenden Taste in Kombination mit dem Anfangsbuchstaben der Aktion an. Beispielsweise [H] für „Hilfe" oder [A] für „Alles Auswählen".

Ausblick

Shortcuts bieten einen Vorteil für alle Nutzer. Mit Bibliotheken aus Sprachen wie JavaScript lassen sich Shortcuts sehr leicht in eine Web-Anwendung einbauen. Eine einfache Implementierung kann aber auch beispielsweise mit dem Framework Angular umgesetzt werden. Lernen Sie die Grundlagen hierzu in unserem Seminar Web-Anwendungen mit Angular kennen. Dann steht den Nutzern nichts mehr im Wege, mit der Tastatur die eigene Effektivität zu steigern.