Interaktion

Geräte mit kleinem Bildschirm, wie z. B. Mobiltelefone, haben oft einen Touchscreen. Geräte mit großem Bildschirm, wie Laptops und Desktop-Computer, sind häufig mit Hardware wie einer Maus oder einem Touchpad ausgestattet. Es ist verlockend, kleine Bildschirme mit Berührungen und große Bildschirme mit Zeigern sozusagen in Einklang zu bringen.

Aber die Realität ist viel differenzierter. Einige Laptops bieten Touchscreen-Funktionen. Nutzer können entweder mit einem Touchscreen, einem Touchpad oder beidem interagieren. Ebenso ist es möglich, eine externe Tastatur oder Maus mit einem Touchscreen-Gerä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“ lassen sich drei mögliche Werte ermitteln: 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, kann der primäre Eingabemechanismus genau steuern. Eine Maus oder ein Eingabestift sind feine Zeiger.

Sie können die Größe der Oberflächenelemente an den pointer-Wert anpassen. Versuchen Sie, diese Website auf verschiedenen Geräten aufzurufen, um zu sehen, wie die Benutzeroberfläche angepasst wird.

In diesem Beispiel sind die Schaltflächen für grobe Zeiger größer:

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

Es ist auch möglich, Elemente für feine Hinweise zu verkleinern. Gehen Sie dabei jedoch mit Bedacht vor:

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

Auch wenn eine Person über einen primären Eingabemechanismus verfügt, der eine präzise Steuerung ermöglicht, sollten Sie sich gut überlegen, ob Sie die Größe der interaktiven Elemente reduzieren. Das Fitts' Gesetz gilt weiterhin. Bei einem kleineren Ziel musst du dich besser konzentrieren, auch wenn du einen feinen Zeiger verwendest. Eine größere Zielregion kommt allen Beteiligten zugute, unabhängig vom Zeigegerät.

Beliebiger Cursor

Die Medienfunktion pointer gibt den Detaillierungsgrad des primären Eingabemechanismus an. Viele Geräte verfügen jedoch über mehrere Eingabemechanismen. Es ist möglich, dass ein Nutzer gleichzeitig über einen Touchscreen und eine Maus mit Ihrer Website interagiert.

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

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

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

Der any-pointer-Wert fine bedeutet, dass mindestens ein Zeigegerät detailliert gesteuert werden kann. Auch hier ist dies möglicherweise nicht der primäre Eingabemechanismus.

Da die Medienabfrage any-pointer ein positives Ergebnis zurückgibt, 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 der Medienabfragen eine Rolle. Die letzte Option hat Vorrang.

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

@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. In der Regel befindet sich auf dem Bildschirm also eine Art Cursor, der mit einer Maus oder einem Touchpad gesteuert wird.

Im Gegensatz zum Medienfeature pointer, das zwischen feinen und groben Zeigern unterscheidet, ist das Medienfeature hover binär. Wenn das primäre Eingabegerät den Mauszeiger über Elemente bewegen kann, meldet es den Wert hover. Andernfalls ist der Wert none.

In diesem Beispiel wird ein ergänzendes Symbol angezeigt, wenn der Mauszeiger darauf bewegt wird, aber nur, wenn das primäre Eingabegerät über ein Element fahren kann.

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

Wenn Sie mit der Maus auf diese Schaltfläche zeigen, erscheint das Symbol. Wenn Sie die Tabulatortaste verwenden, um zur Schaltfläche zu gelangen, bleibt das Symbol jedoch unsichtbar. Wenn Sie die Tastatur verwenden, konzentrieren Sie sich, anstatt den Mauszeiger zu bewegen. Ein Desktop-Gerät mit einer Maus meldet, dass der primäre Eingabemechanismus den Mauszeiger bewegen kann, was richtig ist. Nutzer, die eine Tastatur verwenden, während eine Maus angeschlossen ist, können die Vorteile der :hover-Stile jedoch nicht nutzen. Es empfiehlt sich daher, :hover- und :focus-Stile zu kombinieren, um beide Interaktionen abzudecken.

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

Achten Sie darauf, dass Informationen hinter einer Mouseover-Interaktion auch dann verborgen werden, wenn das primäre Eingabegerät den Mauszeiger über Elemente bewegen kann. Die Informationen sind weniger gut sichtbar. Verwenden Sie den Mauszeiger nicht, um wichtige Informationen oder ein wichtiges Oberflächenelement auszublenden.

Beliebiger Hover-Modus

Bei der Medienabfrage hover wird nur der primäre Eingabemechanismus erfasst. Einige Geräte verfügen über mehrere Eingabemechanismen: Touchscreen, Maus, Tastatur, Touchpad.

Genau wie any-pointer über einen der Eingabemechanismen berichtet, ist any-hover „true“, wenn eine der verfügbaren Eingabemechanismen den Mauszeiger auf Elemente bewegen kann.

Wenn Sie die Logik im vorherigen Beispiel umkehren möchten, können Sie die Mouseover-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 Geräten ohne Eingabemechanismus, mit denen der Mauszeiger bewegt werden kann, ist das zusätzliche Symbol immer sichtbar.

Virtuelle Tastaturen

Nutzer verwenden Cursor und Finger, um Benutzeroberflächen zu erkunden, aber wenn es darum geht, Informationen einzugeben, brauchen sie eine Tastatur. Das ist in Ordnung, wenn eine physische Tastatur mit dem Gerät verbunden ist, aber wenn sie ein Touchscreen-Gerät verwenden, ist es etwas komplizierter. Diese Geräte bieten Bildschirmtastaturen.

Eingabetypen

Anders als eine physische Tastatur können Bildschirmtastaturen an die erwartete Eingabe angepasst werden. Wenn Sie Informationen zur erwarteten Eingabe angeben, können Geräte die am besten geeignete Bildschirmtastatur bedienen.

Mit den HTML5-Eingabetypen lassen sich input-Elemente hervorragend beschreiben. Für das Attribut type sind Werte wie email, number, tel, url und mehr zulässig.

  <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 Attribut inputmode können Sie Bildschirmtastaturen genau steuern. Beispiel: Es gibt einen input-type mit dem Wert number. In diesem Fall können Sie das Attribut inputmode verwenden, um zwischen ganzen Zahlen und Dezimalzahlen zu unterscheiden.

Wenn Sie eine ganze Zahl abfragen möchten, z. B. das 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 gern Formulare aus. Als Designschaffende können Sie die User Experience für Ihre Nutzenden verbessern, indem Sie ihnen ermöglichen, Formularfelder automatisch auszufüllen. Das Attribut autocomplete bietet Ihnen eine Vielzahl von Optionen zur Verbesserung von Kontaktformularen, Anmeldeformularen und Zahlungsformularen.

<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 HTML-Attribute type, inputmode und autocomplete sind kleine Ergänzungen der Formularfelder, können aber die Nutzerfreundlichkeit erheblich verbessern. Wenn Sie die Gerätefunktionen Ihrer Nutzer antizipieren und darauf reagieren, stärken Sie ihre Arbeit. Ausführlichere Informationen erhalten Sie im Kurs zu Formularen.

Als Nächstes in diesem Kurs ist es an der Zeit, einige gängige Schnittstellenmuster zu untersuchen.

Wissen testen

Ihr Wissen über Interaktionen testen