Zeigerinteraktionen

Desktopnutzer verwenden Zeigegeräte wie eine Maus oder ein Touchpad, um mit Ihrer App zu interagieren. Für eine optimale Desktopnutzung sollten Sie wichtige Zeigereignisse wie Hover, Scrollen, primärer Klick und sekundärer Klick unterstützen.

Wichtige Punkte bei der Anpassung an Computereingaben

  1. Fügen Sie Ihrem bestehenden System Hover-Zustände und Interaktionen hinzu.
  2. Berücksichtigen Sie die Rechtsklick-Interaktion, um die Effizienz zu steigern.
  3. Die Ausrichtung sollte präziser sein.

Primärklick

Der primäre Klick, in den meisten Fällen der Linksklick, ist die wichtigste Cursorinteraktion, die Desktopnutzer verwenden. Als Faustregel gilt, dass ein Nutzer alle primären User Journeys allein mit primären Klicks durchlaufen können sollte. Wenn Sie Funktionen nicht vor primären Klicks verbergen, ist das nicht nur gut für die Auffindbarkeit, sondern auch wichtig für assistive Technologien wie den Schalterzugriff.

Sekundärklick

Bei Touch-Interaktionen ist langes Drücken erforderlich, während Desktopnutzer erwarten, dass Kontextmenüs bei einem sekundären Klick angezeigt werden, z. B. bei einem Rechtsklick mit der Maus oder einem Tippen mit zwei Fingern auf einem Touchpad. Für eine optimale Nutzung auf dem Computer sollte Ihre App Kontextmenüs bei einem sekundären Klick auslösen und nicht bei einem langen Klick.

Mit der rechten Maustaste auf eine Karte klicken, um ein Kontextmenü mit weiteren Optionen aufzurufen
Mit einem Rechtsklick auf eine Karte wird ein Kontextmenü mit weiteren Optionen angezeigt.

Mauszeiger hierher bewegen

Neben der Änderung des Cursorsymbols kann Interaktivität auch durch eine Änderung des visuellen Status eines Elements beim Hovern angezeigt werden. Weitere Informationen zum Design finden Sie unter Status.

Durch Hovern können auch zusätzliche Informationen oder Aktionen angezeigt werden, z. B. Tooltips oder Listenaktionen, die in Kontextmenüs oder Dreipunkt-Menüs verschachtelt sind.

Hier wird der Mauszeiger verwendet, um zusätzliche Informationen in einer Kurzinfo und weitere Interaktionen anzuzeigen.
Hier wird der Mauszeiger verwendet, um zusätzliche Informationen in einer Kurzinfo und weitere Interaktionen anzuzeigen.

Drag-and-drop

Auf Touchscreens ist für das Ziehen ein langes Drücken erforderlich, da das Wischen mit einem Finger für das Scrollen reserviert ist. Das Klicken und Ziehen sollte mit Zeigegeräten mit speziellen Scrollmethoden, z. B. einem Scrollrad oder einem Zwei-Finger-Wischen auf einem Touchpad, sofort erfolgen.

Ziehbare Karten als alternative Interaktion
:

Auswahl

Die Auswahlinteraktionen für die Desktop-Version werden optimiert, indem ein separates Klickziel bereitgestellt wird.

Auf dem Computer werden Auswahlmöglichkeiten nicht durch Berühren und Halten, sondern durch Kästchen angezeigt, die beim Bewegen des Mauszeigers eingeblendet werden.

Zielgröße

Vermeiden Sie bei der Größenanpassung von UI-Elementen für Cursorinteraktionen Schaltflächen, die zu groß sind oder deren intrinsische Tippziele über die visuellen Grenzen des Elements hinausgehen.

Legen Sie eine maximale Breite für Schaltflächen und ihre Ziele fest, wenn Sie ein Zeigergerät verwenden.
Schaltflächen können auf die volle Breite ausgedehnt werden oder die intrinsischen Berührungszielbereiche beibehalten.

Zeigerziele können kleiner sein als der standardmäßige Berührungszielbereich von 48 × 48 dp, z. B. für alternative Cursorinteraktionen wie das Archivieren beim Hovern, das hauptsächlich nach der Auswahl des Elements angezeigt wird.

Weitere Informationen zum Design für Eingaben finden Sie unter Material Design-Eingaben. Weitere Informationen zur Implementierung mit Maus- und Touchpad-Unterstützung