Interaktion

Geräte mit kleinen Bildschirmen wie Smartphones haben oft Touchscreens. Geräte mit großem Bildschirm wie Laptops und Computer werden oft mit Hardware wie einer Maus oder einem Touchpad geliefert. Es ist verlockend, kleine Bildschirme mit Touchbedienung und große Bildschirme mit Zeigergeräten gleichzusetzen.

Die Realität ist jedoch differenzierter. Einige Laptops haben Touchscreens. Nutzer können entweder über einen Touchscreen oder ein Touchpad oder beides interagieren. Ebenso ist es möglich, eine externe Tastatur oder Maus mit einem Touchscreen-Gerät wie einem Tablet zu verwenden.

Anstatt den Eingabemechanismus anhand der Bildschirmgröße zu ermitteln, sollten Sie Medienfunktionen in CSS verwenden.

Zeiger

Mit der Medienfunktion pointer können Sie drei mögliche Werte testen: none, coarse und fine.

Wenn ein Browser einen pointer-Wert von none meldet, verwendet der Nutzer möglicherweise eine Tastatur, um mit Ihrer Website zu interagieren.

Wenn ein Browser einen pointer-Wert von coarse meldet, ist der primäre Eingabemechanismus nicht sehr genau. Ein Finger auf einem Touchscreen ist ein grober Zeiger.

Wenn ein Browser einen pointer-Wert von fine meldet, bedeutet das, dass der primäre Eingabemechanismus eine detaillierte Steuerung ermöglicht. Eine Maus oder ein Eingabestift eignen sich gut als Zeiger.

Sie können die Größe der Benutzeroberflächenelemente an den Wert von pointer anpassen. Rufen Sie diese Website auf verschiedenen Geräten auf, um zu sehen, wie sich die Benutzeroberfläche anpasst.

In diesem Beispiel werden Schaltflächen für grobe Zeiger vergrößert:

button {
  padding: 0.5em 1em;
}
@media (pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

Sie können Elemente auch kleiner machen, um sie genauer zu steuern. Seien Sie dabei jedoch vorsichtig:

Don'ts

@media (pointer: fine) {
  button {
    padding: 0.25em 0.5em;
  }
}

Auch wenn Nutzer einen primären Eingabemechanismus haben, der eine detaillierte Steuerung ermöglicht, sollten Sie sich zweimal überlegen, ob Sie die Größe interaktiver Elemente reduzieren. Fitts' Gesetz gilt weiterhin. Ein kleineres Ziel erfordert auch mit einem feinen Cursor mehr Konzentration. Von einem größeren Zielbereich profitieren alle Nutzer, unabhängig vom Eingabegerät.

Beliebiger Zeiger

Die Medienfunktion pointer gibt die Genauigkeit des primären Eingabemechanismus an. Viele Geräte haben jedoch mehrere Eingabemechanismen. Möglicherweise interagiert jemand gleichzeitig mit einem Touchscreen und einer Maus mit Ihrer Website.

Die any-pointer unterscheidet sich von der Medienfunktion pointer dadurch, dass sie meldet, ob ein Eingabegerät den Test besteht.

Der Wert none für any-pointer bedeutet, dass kein Zeigegerät verfügbar ist.

Ein Wert von any-pointer = coarse bedeutet, dass mindestens ein Zeigegerät nicht sehr genau ist. Dies ist jedoch möglicherweise nicht der primäre Eingabemechanismus.

Ein any-pointer-Wert von fine bedeutet, dass mindestens ein Zeigegerät eine detaillierte Steuerung ermöglicht. Dies ist aber möglicherweise nicht der primäre Eingabemechanismus.

Da die any-pointer-Medienabfrage ein positives Ergebnis meldet, wenn einer der Eingabemechanismen den Test besteht, kann ein Browser ein Ergebnis für any-pointer: fine und auch ein Ergebnis für any-pointer: coarse melden. In diesem Fall spielt die Reihenfolge Ihrer Medienabfragen eine Rolle. Die letzte hat Vorrang.

In diesem Beispiel werden die groben Stile angewendet, wenn das Gerät sowohl einen feinen als auch einen groben Eingabemechanismus hat.

@media (any-pointer: fine) {
  button {
    padding: 0.5em 1em;
  }
}
@media (any-pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

Mauszeiger hierher bewegen

Die Medienfunktion hover gibt an, ob der primäre Eingabemechanismus den Mauszeiger auf Elemente bewegen kann. Das bedeutet in der Regel, dass sich auf dem Bildschirm ein Cursor befindet, der mit einer Maus oder einem Touchpad gesteuert wird.

Im Gegensatz zur Medienfunktion pointer, bei der zwischen feinen und groben Zeigern unterschieden wird, ist die Medienfunktion hover binär. Wenn das primäre Eingabegerät Elemente anklicken kann, wird der Wert hover zurückgegeben. Andernfalls ist der Wert none.

In diesem Beispiel ist beim Hovern ein zusätzliches Symbol verfügbar, aber nur, wenn das primäre Eingabegerät das Element ansteuern kann.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:hover .extra {
    visibility: visible;
  }
}

Wenn Sie den Mauszeiger auf diese Schaltfläche bewegen, wird das Symbol angezeigt. Wenn Sie jedoch mit der Tastatur zur Schaltfläche wechseln, bleibt das Symbol unsichtbar. Wenn Sie die Tastatur verwenden, legen Sie den Fokus statt den Mauszeiger auf ein Element. Bei einem Desktop-Gerät mit angeschlossener Maus wird angegeben, dass der primäre Eingabemechanismus zum Schweben geeignet ist. Das ist richtig. Nutzer, die eine Tastatur verwenden, während eine Maus angeschlossen ist, können die :hover-Stile jedoch nicht nutzen. Daher ist es eine gute Idee, die Stile :hover und :focus zu kombinieren, um beide Interaktionen abzudecken.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:is(:hover, :focus) .extra {
    visibility: visible;
  }
}

Auch wenn das primäre Eingabegerät Elemente anklicken kann, sollten Sie Informationen nicht hinter einer Hover-Interaktion verstecken. Die Informationen sind dann weniger leicht zu finden. Verwenden Sie das Hover-Effekt nicht, um wichtige Informationen oder ein wichtiges Benutzeroberflächenelement auszublenden.

Beliebiger Hover

In der hover-Medienabfrage werden nur Daten zum primären Eingabemechanismus erfasst. Einige Geräte haben mehrere Eingabemechanismen: Touchscreen, Maus, Tastatur, Touchpad.

Genau wie any-pointer für alle Eingabemechanismen gilt, ist any-hover wahr, wenn mit einem der verfügbaren Eingabemechanismen der Mauszeiger auf Elemente bewegt werden kann.

Wenn Sie die Logik im vorherigen Beispiel umkehren möchten, können Sie die Hover-Stile als Standard festlegen und dann entfernen, wenn any-hover den Wert none hat.

button .extra {
  visibility: hidden;
}
button:hover .extra,
button:focus .extra {
  visibility: visible;
}
@media (any-hover: none) {
  button .extra {
    visibility: visible;
  }
}

Auf einem Gerät ohne Eingabemechanismus, mit dem sich der Mauszeiger bewegen lässt, ist das zusätzliche Symbol immer sichtbar.

Virtuelle Tastaturen

Nutzer verwenden den Cursor und ihre Finger, um sich Oberflächen anzusehen, aber wenn es an die Eingabe von Informationen geht, benötigen sie eine Tastatur. Das ist in Ordnung, wenn an das Gerät eine physische Tastatur angeschlossen ist. Bei einem Touchscreen-Gerät ist es etwas komplizierter. Diese Geräte bieten virtuelle Bildschirmtastaturen.

Eingabetypen

Im Gegensatz zu einer physischen Tastatur können virtuelle Tastaturen an die erwartete Eingabe angepasst werden. Wenn Sie Informationen zur erwarteten Eingabe angeben, können Geräte die am besten geeignete virtuelle Tastatur anzeigen.

HTML5-Eingabetypen eignen sich hervorragend, um Ihre input-Elemente zu beschreiben. Das Attribut type akzeptiert Werte wie email, number, tel und url.

  <label for="email">Email</label>
  <input type="email" id="email">

  <label for="number">Number</label>
  <input type="number" id="number">

  <label for="tel">Tel</label>
  <input type="tel" id="tel">

  <label for="url">URL</label>
  <input type="url" id="url">

Eingabemodi

Browser Support

• 66
• 79
• 95
• 12.1

Source

Mit dem Attribut inputmode können Sie virtuelle Tastaturen genau steuern. Wenn es beispielsweise eine input type mit dem Wert number gibt, können Sie mit dem Attribut inputmode zwischen Ganzzahlen und Dezimalzahlen unterscheiden.

Wenn Sie nach einer ganzen Zahl fragen, z. B. nach dem Alter einer Person, verwenden Sie inputmode="numeric".

<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">

Wenn Sie nach einer Zahl mit Dezimalstellen fragen, z. B. nach einem Preis, verwenden Sie inputmode="decimal".

<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">

Automatische Vervollständigung

Niemand mag es, Formulare auszufüllen. Als Designer können Sie die Nutzerfreundlichkeit verbessern, indem Sie es den Nutzern ermöglichen, Formularfelder automatisch auszufüllen. Mit dem Attribut autocomplete haben Sie zahlreiche Möglichkeiten, Kontaktformulare, Anmeldeformulare und Zahlungsformulare zu verbessern.

<label for="name">Name</label>
<input type="text" id="name" autocomplete="name">

<label for="country">Country</label>
<input type="text" id="country" autocomplete="country">

<label for="email">Email</label>
<input type="email" id="email" autocomplete="email">

Diese HTML-Attribute – type, inputmode und autocomplete – sind kleine Ergänzungen zu Ihren Formularfeldern, können aber einen großen Unterschied für die Nutzerfreundlichkeit ausmachen. Wenn Sie die Gerätefunktionen der Nutzer antizipieren und darauf reagieren, stärken Sie die Nutzer. Weitere Informationen finden Sie im Kurs Formulare.

Als Nächstes in diesem Kurs sehen wir uns einige allgemeine Muster für Benutzeroberflächen an.

Wissen testen

Ihr Wissen über Interaktionen testen

Welche Funktion sollten Sie verwenden, anstatt den Eingabetyp eines Nutzers anhand der Bildschirmgröße zu ermitteln?

CSS-Medienfunktionen

z. B. @media (pointer: coarse) oder @media (-any-pointer: coarse)

Nutzer mit JavaScript-prompt() fragen

Es ist nicht ideal, direkt nachzufragen.

CSS-Medientyp handheld

Diese Option wurde in Media Queries 4 eingestellt.

Was ist der Unterschied zwischen @media (pointer) und @media (any-pointer)?

Zu einem Zeiger gehören auch Dinge wie Ihr Finger.

Der Eingabetyp „Maus“ umfasst bereits Touchbedienung.

Zu den Zeigergeräten gehören keine Mäuse.

Zu den Eingabegeräten gehören auch Mäuse.

Bei jedem Eingabestift wird „wahr“ zurückgegeben, wenn zusätzliche, nicht primäre Eingaben wie ein Eingabestift den Test bestehen.

any-pointer fragt alle Geräteeingabetypen auf Übereinstimmungen ab.

Bei welchen Eingabetypen wird Nutzern eine geeignetere virtuelle Tastatur angezeigt?

type="url"

Die Tastatur bietet Schaltflächen zum Eingeben von URLs.

type="tel"

Die Tastatur bietet Schaltflächen zum Eingeben von Telefonnummern.

type="number"

Die Tastatur bietet Tasten, mit denen nur Zahlen eingegeben werden können.

type="email"

Die Tastatur bietet Schaltflächen zum Eingeben von E-Mail-Adressen.