Interakcja

Urządzenia z małym ekranem, takie jak telefony komórkowe, często mają ekrany dotykowe. Urządzenia z dużym ekranem, takie jak laptopy i komputery stacjonarne, często mają sprzęt, np. mysz lub trackpad. Łatwo jest utożsamić małe ekrany z dotykiem, a duże ekrany z wskaźnikami.

W rzeczywistości jest to jednak bardziej złożone. Niektóre laptopy mają ekran dotykowy. Użytkownicy mogą korzystać z ekranu dotykowego, gładzika lub obu tych elementów. Podobnie można używać zewnętrznej klawiatury lub myszy z urządzeniem z ekranem dotykowym, takim jak tablet.

Zamiast próbować określić mechanizm wprowadzania danych na podstawie rozmiaru ekranu, użyj funkcji multimediów w CSS.

Wskaźnik

W przypadku funkcji mediów pointer możesz przetestować 3 możliwe wartości: none, coarse i fine.

Jeśli przeglądarka podaje wartość pointer none, użytkownik może używać klawiatury do interakcji z Twoją witryną.

Jeśli przeglądarka zgłasza wartość pointer coarse, oznacza to, że podstawowy mechanizm danych wejściowych nie jest zbyt dokładny. Palec na ekranie dotykowym to wskaźnik ogólny.

Jeśli przeglądarka zgłasza wartość pointer fine, oznacza to, że podstawowy mechanizm wejścia umożliwia szczegółową kontrolę. Mysz lub rysik to dobry wskaźnik.

Możesz dostosować rozmiar elementów interfejsu do wartości pointer. Otwórz tę stronę na różnych urządzeniach, aby sprawdzić, jak interfejs się dostosowuje.

W tym przykładzie przyciski są większe dla grubych wskaźników:

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

Możesz też zmniejszyć elementy, aby uzyskać subtelne wskazówki, ale zachowaj ostrożność:

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

Nawet jeśli użytkownik ma podstawowy mechanizm wprowadzania danych, który umożliwia szczegółową kontrolę, powinien się dwa razy zastanowić, zanim zmniejszy rozmiar elementów interaktywnych. Nadal obowiązuje zasada Fittsa. Mniejsze cele wymagają większej koncentracji, nawet przy użyciu precyzyjnego wskaźnika. Większy obszar docelowy jest korzystny dla wszystkich, niezależnie od urządzenia wskazującego.

Wskazówka

Funkcja pointer dotycząca multimediów informuje o dokładności głównego mechanizmu wprowadzania danych. Wiele urządzeń ma jednak więcej niż 1 mechanizm wprowadzania danych. Możliwe, że ktoś wchodzi w interakcję z Twoją witryną, używając jednocześnie ekranu dotykowego i myszy.

Funkcja any-pointer różni się od funkcji pointer tym, że raportuje, czy test przeszedł dowolny wskaźnik.

Wartość any-pointer none oznacza, że nie jest dostępne żadne urządzenie wskazujące.

Wartość any-pointer coarse oznacza, że co najmniej 1 urządzenie wskazujące nie jest zbyt dokładne. Nie musi to być jednak główny mechanizm wprowadzania danych.

Wartość any-pointer fine oznacza, że co najmniej 1 urządzenie wskazujące umożliwia szczegółowe sterowanie. Ponownie jednak nie musi to być główny mechanizm wprowadzania danych.

Ponieważ zapytanie o multimedia any-pointer zwróci pozytywny wynik, jeśli cokolwiek z mechanizmów wejściowych przejdzie test, przeglądarka może zwrócić wynik dla any-pointer: fine i również dla any-pointer: coarse. W takim przypadku kolejność zapytań o multimedia ma znaczenie. Ostatni z nich będzie miał pierwszeństwo.

W tym przykładzie, jeśli urządzenie ma mechanizm dokładnego i niedokładnego wprowadzania, stosowane są style niedokładne.

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

Najechanie

Funkcja multitouch hover informuje, czy główny mechanizm wejściowy może najeżdżać kursorem na elementy. Zwykle oznacza to, że na ekranie jest kursor sterowany za pomocą myszy lub trackpada.

W przeciwieństwie do funkcji multimedialnej pointer, która rozróżnia precyzyjne i nieprecyzyjne wskaźniki, funkcja multimedialna hover jest binarna. Jeśli główne urządzenie wejściowe może najeżdżać kursorem na elementy, zwróci wartość hover. W przeciwnym razie wartość to none.

W tym przykładzie po najechaniu kursorem na element pojawia się ikona, ale tylko wtedy, gdy główne urządzenie wejściowe może najechać na element.

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

Jeśli najedziesz na niego kursorem myszy, pojawi się ikona. Jeśli jednak użyjesz klawiatury, aby przejść do przycisku, ikona pozostanie niewidoczna. Gdy używasz klawiatury, skupiasz się na czymś, a nie na czymś. Komputer z podłączoną myszą zgłosi, że podstawowy mechanizm wejścia umożliwia nawigację kursorem, co jest prawdą. Jednak osoby korzystające z klawiatury, gdy mysz jest podłączona, nie będą mogły korzystać ze stylów :hover. Dlatego warto połączyć style :hover:focus, aby uwzględnić obie interakcje.

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

Nawet jeśli główne urządzenie wejściowe umożliwia najeżdżanie kursorem na elementy, należy uważać, aby nie ukrywać informacji za pomocą tej funkcji. Informacje stają się trudniejsze do znalezienia. Nie używaj najechania kursorem, aby ukryć ważne informacje lub ważny element interfejsu.

Po najechaniu

Zapytanie o multimedia hover zawiera dane tylko o głównym mechanizmie wprowadzania danych. Niektóre urządzenia mają wiele mechanizmów wejściowych: ekran dotykowy, mysz, klawiaturę, trackpad.

Podobnie jak any-pointer raportuje dowolny mechanizm wejścia, any-hover będzie miał wartość Prawda, jeśli dowolny z dostępnych mechanizmów wejścia będzie mógł najeżdżać kursorem na elementy.

Jeśli zdecydujesz się odwrócić logikę w poprzednim przykładzie, możesz ustawić style najechania jako domyślne, a potem usunąć je, jeśli any-hover ma wartość none.

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

Na urządzeniu, które nie ma mechanizmu wejściowego umożliwiającego najeżdżanie kursorem, dodatkowa ikona jest zawsze widoczna.

Klawiatury wirtualne

Użytkownicy używają kursorów i palców do przeglądania interfejsów, ale gdy przychodzi czas na wprowadzanie informacji, potrzebują klawiatury. To nie stanowi problemu, jeśli do urządzenia jest podłączona klawiatura fizyczna, ale w przypadku urządzenia z ekranem dotykowym jest to nieco bardziej skomplikowane. Te urządzenia mają ekranowe klawiatury wirtualne.

Typy danych wejściowych

W odróżnieniu od klawiatur fizycznych klawiatury wirtualne można dostosować do oczekiwanego sposobu wprowadzania danych. Jeśli podasz informacje o oczekiwanych danych wejściowych, urządzenia będą mogły wyświetlić najbardziej odpowiednią klawiaturę wirtualną.

Typy danych wejściowych HTML5 to świetny sposób na opisywanie elementów input. Atrybut type akceptuje wartości takie jak email, number, tel, url i inne.

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

Tryby wprowadzania

Browser Support

  • Chrome: 66.
  • Edge: 79.
  • Firefox: 95.
  • Safari: 12.1.

Source

Atrybut inputmode zapewnia szczegółową kontrolę nad klawiaturami wirtualnymi. Na przykład, jeśli masz jeden element input type o wartości number, możesz użyć atrybutu inputmode, aby odróżnić liczby całkowite od ułamków dziesiętnych.

Jeśli chcesz podać liczbę całkowitą, np. wiek, użyj inputmode="numeric".

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

Jeśli pytasz o liczbę z miejscami po przecinku, np. cenę, użyj inputmode="decimal".

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

Autouzupełnianie

Nikt nie lubi wypełniać formularzy. Jako projektant możesz zwiększyć wygodę użytkowników, umożliwiając im automatyczne wypełnianie pól formularza. Atrybut autocomplete udostępnia wiele opcji ulepszenia formularzy kontaktowych, formularzy logowania i formularzy płatności.

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

Te atrybuty HTML (type, inputmodeautocomplete) to niewielkie dodatki do pól formularza, które mogą znacznie ułatwić użytkownikom korzystanie z Twojej witryny. Przewidując i reagując na możliwości urządzenia użytkownika, możesz mu pomóc. Aby dowiedzieć się więcej, możesz skorzystać z kursu poświęconego formularzom.

W kolejnych lekcjach przyjrzymy się popularnym wzorcom interfejsu.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o interakcjach

Której funkcji należy użyć zamiast próby określenia typu danych wejściowych użytkownika na podstawie rozmiaru ekranu?

Typ mediów CSS handheld
Zapytanie użytkownika za pomocą funkcji JavaScript prompt()
Funkcje mediów CSS

Czym różni się wersja @media (pointer) od @media (any-pointer)?

Wszelkie wskaźniki będą zwracać wartość true, gdy dodatkowe, niegłówne urządzenia wejściowe, takie jak rysik, przejdą test.
Wszelkie wskaźniki obejmują np. palec.
Wskaźniki nie obejmują takich rzeczy jak mysz.

Które typy danych wyświetlają bardziej odpowiednią klawiaturę wirtualną dla użytkowników?

type="url"
type="tel"
type="email"
type="number"