Interaktion

Geräte mit kleinem Bildschirm wie Smartphones haben oft Touchscreens. Geräte mit großen Bildschirmen wie Laptops und Desktop-Computer sind oft mit Hardware wie einer Maus oder einem Touchpad ausgestattet. Es ist verlockend, kleine Displays mit Touchbedienung und große Bildschirme mit Zeigern gleichzusetzen.

Die Realität ist jedoch differenzierter. Einige Laptops sind Touchscreen-Funktionen. Nutzer können einen Touchscreen, ein Touchpad oder beides verwenden. Ebenso ist es möglich, eine externe Tastatur oder Maus mit einem Touchscreengerät wie einem Tablet zu verwenden.

Anstatt zu versuchen, den Eingabemechanismus von der Bildschirmgröße abzuleiten, verwenden Sie Medienfunktionen in CSS.

Zeiger

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

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

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

Wenn ein Browser den pointer-Wert fine meldet, bedeutet dies, dass mit dem primären Eingabemechanismus eine detaillierte Steuerung möglich ist. Eine Maus oder ein Eingabestift ist ein feiner Zeiger.

Sie können die Größe der Elemente der Benutzeroberfläche an den pointer-Wert anpassen. Rufen Sie diese Website für verschiedene Gerätetypen auf, um zu sehen, wie die Benutzeroberfläche angepasst wird.

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

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

Es ist möglich, Elemente für feine Zeiger auch kleiner zu machen, aber seien Sie dabei vorsichtig:

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

Auch wenn jemand einen primären Eingabemechanismus hat, der eine fein abgestimmte Steuerung ermöglicht, sollten Sie sich gründlich überlegen, bevor Sie die Größe interaktiver Elemente reduzieren. Das Gesetz von Fit gilt weiterhin. Ein kleineres Ziel erfordert mehr Konzentration, selbst bei einem feinen Zeiger. Von einer größeren Zielregion profitieren alle, unabhängig vom Zeigegerät.

Beliebiger Zeiger

Die Medienfunktion pointer meldet die Feinheit des primären Eingabemechanismus. Viele Geräte haben jedoch mehr als einen Eingabemechanismus. Es ist möglich, dass jemand gleichzeitig über einen Touchscreen und eine Maus mit Ihrer Website interagiert.

Das any-pointer unterscheidet sich von der Medienfunktion pointer insofern, als es meldet, ob ein Zeigegerät den Test besteht.

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

Ein any-pointer-Wert von coarse bedeutet, dass mindestens ein Zeigegerät nicht sehr genau ist. Aber das ist vielleicht nicht der primäre Eingabemechanismus.

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

Da die any-pointer-Medienabfrage ein positives Ergebnis ausgibt, 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 ist die Reihenfolge Ihrer Medienabfragen wichtig. Das letzte hat Vorrang.

Wenn das Gerät in diesem Beispiel sowohl über einen feinen als auch über einen groben Eingabemechanismus verfügt, werden die groben Stile angewendet.

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

Mauszeiger bewegen

Die Medienfunktion hover gibt an, ob der primäre Eingabemechanismus den Mauszeiger auf Elemente bewegen kann. Normalerweise bedeutet das, dass sich eine Art Cursor auf dem Bildschirm befindet, der von einer Maus oder einem Touchpad gesteuert wird.

Im Gegensatz zur Medienfunktion pointer, die zwischen feinen und groben Zeigern unterscheidet, ist das Medienfeature hover binär. Wenn das primäre Eingabegerät den Mauszeiger auf Elemente bewegen kann, wird der Wert hover gemeldet. Andernfalls ist der Wert none.

In diesem Beispiel ist ein ergänzendes Symbol verfügbar, wenn der Mauszeiger darüber bewegt wird, aber nur, wenn das primäre Eingabegerät in der Lage ist, die Maus über ein Element zu bewegen.

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 eingeblendet. Wenn Sie jedoch die Tastatur verwenden, um mit der Tabulatortaste zur Schaltfläche zu navigieren, bleibt das Symbol unsichtbar. Wenn Sie die Tastatur verwenden, fokussieren Sie sich, anstatt den Mauszeiger darüber zu bewegen. Ein Desktop-Gerät mit angeschlossener Maus meldet, dass der primäre Eingabemechanismus die Mausbewegung ausführen kann. Dies ist der Fall. Nutzer, die eine Tastatur mit angeschlossener Maus verwenden, profitieren jedoch nicht von den :hover-Stilen. Es empfiehlt sich daher, 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 in der Lage ist, sich über Elemente zu bewegen, sollten Sie darauf achten, dass Informationen nicht hinter einer Mouseover-Interaktion verborgen sind. Die Informationen sind dann weniger auffindbar. Blenden Sie wichtige Informationen oder ein wichtiges Element der Benutzeroberfläche nicht durch Bewegen des Mauszeigers aus.

Beliebiger Mauszeiger

Die Medienabfrage hover meldet nur den primären Eingabemechanismus. Einige Geräte haben mehrere Eingabemechanismen: Touchscreen, Maus, Tastatur, Touchpad.

So wie any-pointer einen der Eingabemechanismen meldet, ist any-hover "true", wenn einer der verfügbaren Eingabemechanismen in der Lage ist, den Mauszeiger auf Elemente zu bewegen.

Wenn Sie die Logik im vorherigen Beispiel umkehren möchten, könnten Sie die Hover-Stile als Standard festlegen und sie 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.

Bildschirmtastaturen

Sie verwenden Cursor und Finger, um in Oberflächen zu navigieren, aber wenn sie Informationen eingeben möchten, benötigen sie eine Tastatur. Das ist völlig in Ordnung, wenn das Gerät mit einer physischen Tastatur verbunden ist. Bei Verwendung eines Touchscreens ist das jedoch etwas komplizierter. Diese Geräte haben Bildschirmtastaturen.

Eingabetypen

Anders als bei einer physischen Tastatur können virtuelle Tastaturen an die erwartete Eingabe angepasst werden. Wenn Sie Informationen zur erwarteten Eingabe bereitstellen, können Geräte die am besten geeignete Bildschirmtastatur bereitstellen.

HTML5-Eingabetypen eignen sich hervorragend zur Beschreibung Ihrer input-Elemente. Das type-Attribut akzeptiert Werte wie email, number, tel, url und mehr.

  <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

Mit dem inputmode-Attribut kannst du Bildschirmtastaturen präzise steuern. Es gibt beispielsweise ein input type mit dem Wert number, aber du kannst das Attribut inputmode verwenden, um zwischen ganzen Zahlen und Dezimalzahlen zu 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 eine Zahl mit Dezimalstellen anfordern möchten, z. B. einen Preis, verwenden Sie inputmode="decimal".

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

Automatische Vervollständigung

Niemand füllt gerne Formulare aus. Als Designschaffende können Sie die User Experience für Ihre Nutzenden verbessern, indem Sie ihnen ermöglichen, Formularfelder automatisch ausfüllen zu lassen. Das autocomplete-Attribut bietet Ihnen eine Vielzahl von Optionen, mit denen Sie Kontaktformulare, Anmeldeformulare und Zahlungsformulare verbessern können.

<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">

Die folgenden HTML-Attribute (type, inputmode und autocomplete) sind kleine Ergänzungen der Formularfelder, können jedoch die Nutzerfreundlichkeit erheblich verbessern. Indem Sie die Gerätefunktionen Ihrer Nutzer antizipieren und darauf reagieren, können Sie Ihre Nutzer unterstützen. Für ausführlichere Informationen gibt es einen speziellen Kurs zum Lernen von Formularen.

Als Nächstes in diesem Kurs untersuchen wir einige gängige Oberflächenmuster.

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über Interaktionen