Interakcja

Urządzenia z małymi ekranami, takie jak telefony komórkowe, często mają ekrany dotykowe. Urządzenia z dużymi ekranami, takie jak laptopy i komputery stacjonarne, często są wyposażone w sprzęt taki jak mysz lub touchpad. Można by sądzić, że małe ekrany są przeznaczone do obsługi dotykowej, a duże – do obsługi za pomocą wskaźnika.

Rzeczywistość jest jednak bardziej złożona. Niektóre laptopy mają ekrany dotykowe. Użytkownicy mogą wchodzić w interakcje z ekranem dotykowym, touchpadem lub oboma tymi urządzeniami. 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 na podstawie rozmiaru ekranu, użyj funkcji multimedialnych w CSS.

Wskaźnik

Za pomocą funkcji multimedialnej pointer możesz sprawdzić 3 możliwe wartości: none, coarse i fine.

Jeśli przeglądarka zgłosi wartość pointer równą none, użytkownik może wchodzić w interakcje z Twoją witryną za pomocą klawiatury.

Jeśli przeglądarka zgłosi wartość pointer równą coarse, oznacza to, że główny mechanizm wprowadzania nie jest zbyt dokładny. Palec na ekranie dotykowym jest wskaźnikiem o niskiej dokładności.

Jeśli przeglądarka zgłosi wartość pointer równą fine, oznacza to, że główny mechanizm wprowadzania umożliwia precyzyjne sterowanie. Mysz lub rysik to wskaźniki o wysokiej dokładności.

Możesz dostosować rozmiar elementów interfejsu do wartości pointer. Aby zobaczyć, jak interfejs się dostosowuje, odwiedź tę witrynę demonstracyjną na różnych urządzeniach.

W tym przykładzie przyciski są powiększane w przypadku wskaźników o niskiej dokładności:

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

Możesz też zmniejszyć elementy w przypadku wskaźników o wysokiej dokładności, ale musisz to zrobić ostrożnie:

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

Nawet jeśli ktoś ma główny mechanizm wprowadzania umożliwiający precyzyjne sterowanie, zastanów się dwa razy, zanim zmniejszysz rozmiar elementów interaktywnych. Prawo Fittsa nadal obowiązuje. Mniejszy cel wymaga większego skupienia nawet w przypadku wskaźnika o wysokiej dokładności. Większy obszar docelowy jest korzystny dla wszystkich, niezależnie od urządzenia wskazującego.

Dowolny wskaźnik

Funkcja multimedialna pointer informuje o dokładności głównego mechanizmu wprowadzania. Wiele urządzeń ma jednak więcej niż 1 mechanizm wprowadzania. Możliwe, że ktoś wchodzi w interakcje z Twoją witryną jednocześnie za pomocą ekranu dotykowego i myszy.

Funkcja any-pointer różni się od funkcji multimedialnej pointer tym, że informuje, czy test przechodzi dowolne urządzenie wskazujące.

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

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

Wartość any-pointer równa fine oznacza, że co najmniej 1 urządzenie wskazujące umożliwia precyzyjne sterowanie. Ale znowu – nie musi to być główny mechanizm wprowadzania.

Ponieważ zapytanie o media any-pointer zwróci wynik pozytywny, jeśli dowolny mechanizm wprowadzania przejdzie test, przeglądarka może zgłosić wynik dla any-pointer: fine i any-pointer: coarse. W takim przypadku kolejność zapytań o media ma znaczenie. Pierwszeństwo będzie mieć ostatnie zapytanie.

W tym przykładzie, jeśli urządzenie ma mechanizm wprowadzania o wysokiej i niskiej dokładności, stosowane są style o niskiej dokładności.

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

Najechanie

Funkcja multimedialna hover informuje, czy główny mechanizm wprowadzania może najeżdżać na elementy. Zwykle oznacza to, że na ekranie znajduje się kursor sterowany myszą lub touchpadem.

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

W tym przykładzie po najechaniu kursorem myszy dostępna jest dodatkowa ikona, ale tylko wtedy, gdy główne urządzenie wejściowe może najeżdżać na element.

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

Jeśli najedziesz kursorem myszy na ten przycisk, pojawi się ikona. Jeśli jednak użyjesz klawiatury, aby przejść do przycisku za pomocą klawisza Tab, ikona pozostanie niewidoczna. Gdy używasz klawiatury, skupiasz się na elemencie, a nie najeżdżasz na niego. Urządzenie stacjonarne z podłączoną myszą zgłosi, że główny mechanizm wprowadzania może najeżdżać na elementy, 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 i :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 może najeżdżać na elementy, uważaj, aby nie ukrywać informacji za interakcją najechania. Informacje stają się mniej widoczne. Nie używaj najechania do ukrywania ważnych informacji ani ważnego elementu interfejsu.

Dowolne najechanie

Zapytanie o media hover informuje tylko o głównym mechanizmie wprowadzania. Niektóre urządzenia mają wiele mechanizmów wprowadzania: ekran dotykowy, mysz, klawiatura, touchpad.

Podobnie jak any-pointer informuje o dowolnym mechanizmie wprowadzania, any-hover będzie mieć wartość true, jeśli dowolny z dostępnych mechanizmów wprowadzania może najeżdżać na elementy.

Jeśli zdecydujesz się odwrócić logikę w poprzednim przykładzie, możesz ustawić style najechania jako domyślne, a następnie 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 wprowadzania umożliwiającego najechanie, 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. Jeśli do urządzenia jest podłączona klawiatura fizyczna, nie ma problemu, ale jeśli użytkownik korzysta z urządzenia z ekranem dotykowym, sytuacja jest nieco bardziej skomplikowana. Urządzenia te mają wirtualne klawiatury ekranowe.

Typy danych wejściowych

W przeciwieństwie do klawiatury fizycznej klawiatury wirtualne można dostosować do oczekiwanych danych wejściowych. Jeśli podasz informacje o oczekiwanych danych wejściowych, urządzenia mogą wyświetlać najbardziej odpowiednią klawiaturę wirtualną.

Typy danych wejściowych HTML5 to świetny sposób na opisanie 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

Atrybut inputmode umożliwia precyzyjne sterowanie klawiaturami wirtualnymi. Na przykład, chociaż istnieje 1 input type o wartości number, możesz użyć atrybutu inputmode, aby rozróżnić liczby całkowite i dziesiętne.

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

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

Jeśli prosisz o liczbę, która zawiera miejsca dziesiętne, 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 ułatwić użytkownikom pracę, umożliwiając im automatyczne wypełnianie pól formularza. Atrybut autocomplete zapewnia wiele opcji ulepszania formularzy kontaktowych, logowania i 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, inputmode i autocomplete – to niewielkie dodatki do pól formularza, ale mogą znacząco wpłynąć na wygodę użytkowników. Przewidując możliwości urządzenia użytkownika i reagując na nie, zwiększasz wygodę użytkowników. Więcej informacji znajdziesz w kursie poświęconym formularzom.

W następnej części tego kursu omówimy kilka typowych wzorców interfejsu.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o interakcjach