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
Welche Funktion sollten Sie verwenden, anstatt zu versuchen, den Eingabetyp der Nutzenden aus der Bildschirmgröße abzuleiten?
@media (pointer: coarse)
oder @media (-any-pointer: coarse)
prompt()
von JavaScript fragenhandheld
Was ist der Unterschied zwischen @media (pointer)
und @media (any-pointer)
?
any-pointer
fragt alle Geräteeingabetypen auf Übereinstimmungen ab.Welche Eingabetypen bieten eine besser geeignete Bildschirmtastatur für Nutzer?
type="url"
type="tel"
type="number"
type="email"