Interaktion

Geräte mit kleinen Bildschirmen wie Smartphones haben oft Touchscreens. Geräte mit großen Bildschirmen wie Laptops und Desktop-Computer werden oft mit Hardware wie einer Maus oder einem Trackpad geliefert. Es ist verlockend, kleine Bildschirme mit Touch und große Bildschirme mit Zeigern gleichzusetzen.

Die Realität ist jedoch komplexer. Einige Laptops haben Touchscreens. Nutzer können entweder mit einem Touchscreen oder einem Trackpad oder mit beiden interagieren. Ebenso ist es möglich, eine externe Tastatur oder Maus mit einem Touchscreen-Gerät wie einem Tablet zu verwenden.

Anstatt den Eingabemechanismus aus 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 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, ist der primäre Eingabemechanismus in der Lage, eine präzise Steuerung zu ermöglichen. Eine Maus oder ein Eingabestift ist ein präziser Zeiger.

Sie können die Größe Ihrer Benutzeroberflächenelemente an den pointer-Wert anpassen. Rufen Sie diese Demowebsite 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;
  }
}

Es ist auch möglich, Elemente für präzise Zeiger zu verkleinern. Dabei sollten Sie jedoch vorsichtig sein:

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

Auch wenn jemand einen primären Eingabemechanismus hat, der eine präzise Steuerung ermöglicht, sollten Sie zweimal überlegen, bevor Sie die Größe interaktiver Elemente verringern. Das Fitts-Gesetz gilt weiterhin. Ein kleineres Ziel erfordert auch mit einem präzisen Zeiger mehr Konzentration. Ein größerer Zielbereich ist für alle Nutzer von Vorteil, unabhängig vom Zeigegerät.

Beliebiger Zeiger

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

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

Ein any-pointer-Wert 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. Das muss jedoch nicht der primäre Eingabemechanismus sein.

Ein any-pointer-Wert von fine bedeutet, dass mindestens ein Zeigegerät eine präzise Steuerung ermöglicht. Auch hier muss es sich nicht um den primären Eingabemechanismus handeln.

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 für any-pointer: coarse melden. In diesem Fall ist die Reihenfolge Ihrer Medienabfragen wichtig. Die letzte hat Vorrang.

Wenn das Gerät sowohl einen präzisen als auch einen groben Eingabemechanismus hat, werden in diesem Beispiel 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 meldet, ob der primäre Eingabemechanismus den Mauszeiger über Elemente bewegen kann. Das bedeutet in der Regel, dass sich ein Cursor auf dem Bildschirm befindet, der mit einer Maus oder einem Trackpad gesteuert wird.

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

In diesem Beispiel ist ein zusätzliches Symbol verfügbar, wenn der Mauszeiger über ein Element bewegt wird, aber nur, wenn das primäre Eingabegerät den Mauszeiger über ein Element bewegen kann.

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

Wenn Sie den Mauszeiger über 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, fokussieren Sie das Element, anstatt den Mauszeiger darüber zu bewegen. Ein Desktop-Gerät mit angeschlossener Maus meldet, dass der primäre Eingabemechanismus den Mauszeiger bewegen kann. Das ist richtig. Nutzer, die eine Tastatur verwenden, während eine Maus angeschlossen ist, profitieren jedoch nicht von den :hover-Stilen. Daher ist es eine gute Idee, :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;
  }
}

Auch wenn das primäre Eingabegerät den Mauszeiger über Elemente bewegen kann, sollten Sie Informationen nicht hinter einer Hover-Interaktion verbergen. Die Informationen sind dann schwerer zu finden. Verwenden Sie Hover nicht, um wichtige Informationen oder ein wichtiges Benutzeroberflächenelement zu verbergen.

Beliebiger Hover

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

So wie any-pointer alle Eingabemechanismen meldet, ist any-hover wahr, wenn einer der verfügbaren Eingabemechanismen den Mauszeiger über Elemente bewegen kann.

Wenn Sie die Logik im vorherigen Beispiel umkehren möchten, können 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, das keinen Eingabemechanismus hat, der den Mauszeiger bewegen kann, ist das zusätzliche Symbol immer sichtbar.

Virtuelle Tastaturen

Nutzer verwenden Cursor und Finger, um Benutzeroberflächen zu erkunden. Wenn sie jedoch Informationen eingeben müssen, benötigen sie eine Tastatur. Das ist kein Problem, wenn eine physische Tastatur an das Gerät angeschlossen ist. Wenn sie jedoch ein Touchscreen-Gerät verwenden, ist es etwas komplizierter. Diese Geräte bieten virtuelle Tastaturen auf dem Bildschirm.

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 Bildschirmtastatur bereitstellen.

HTML5-Eingabetypen sind eine gute Möglichkeit, Ihre input Elemente zu beschreiben. Das Attribut type 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 Attribut inputmode haben Sie eine präzise Kontrolle über virtuelle Tastaturen. Während es beispielsweise einen input type mit dem Wert number gibt, können Sie mit dem Attribut inputmode zwischen ganzen Zahlen 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 füllt gerne Formulare aus. Als Designer können Sie die Nutzererfahrung verbessern, indem Sie Nutzern ermöglichen, Formularfelder automatisch auszufüllen. Das Attribut autocomplete bietet Ihnen eine Vielzahl von Optionen zur Verbesserung von Kontakt-, Anmelde- und Checkout-Formularen.

<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 Nutzererfahrung machen. Indem Sie die Gerätefunktionen Ihrer Nutzer berücksichtigen und darauf reagieren, geben Sie ihnen mehr Möglichkeiten. Weitere Informationen finden Sie in diesem Kurs zu Formularen, der Ihnen hilft, Formulare zu lernen.

Im nächsten Teil dieses Kurses sehen wir uns einige gängige Benutzeroberflächenmuster an.

Dein Wissen wird getestet

Ihr Wissen zu Interaktionen testen