Interakcja

Urządzenia z małymi ekranami, na przykład komórki, często są wyposażone w ekrany dotykowe. Urządzenia z dużym ekranem, takie jak laptopy i komputery stacjonarne, często są wyposażone w mysz lub trackpad. Kuszące jest porównanie małych ekranów z ekranami dotykowymi i dużymi, w których znajdują się wskaźniki.

Rzeczywistość jest jednak bardziej zróżnicowana. Niektóre laptopy mają ekran dotykowy. Użytkownicy mogą korzystać z ekranu dotykowego, trackpada lub obu tych funkcji. Podobnie można używać zewnętrznej klawiatury lub myszy z urządzeniem z ekranem dotykowym, takim jak tablet.

Zamiast próbować wywnioskować mechanizm wprowadzania na podstawie rozmiaru ekranu, użyj funkcji multimedialnych w CSS.

Wskaźnik

Za pomocą funkcji multimediów pointer możesz przetestować 3 możliwe wartości: none, coarse i fine.

Jeśli przeglądarka zgłasza wartość pointer o wartości none, możliwe, że użytkownik do interakcji ze stroną korzysta z klawiatury.

Jeśli przeglądarka zgłasza wartość pointer o wartości coarse, oznacza to, że główny mechanizm wprowadzania nie jest zbyt dokładny. Palec na ekranie dotykowym to przybliżony wskaźnik.

Jeśli przeglądarka zgłasza wartość pointer o wartości fine, oznacza to, że główny mechanizm wprowadzania ma możliwość szczegółowej kontroli. Mysz lub rysik to precyzyjny wskaźnik.

Możesz dostosować rozmiar elementów interfejsu, tak by pasował do wartości pointer. Odwiedź tę stronę na różnych urządzeniach, by sprawdzić, jak dostosowuje się interfejs.

W tym przykładzie przyciski są większe przy dużych wskaźnikach:

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

Możesz też zmniejszyć elementy, aby były bardziej precyzyjne, ale zachowaj ostrożność:

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

Nawet jeśli ktoś ma główny mechanizm wprowadzania danych zdolnych do szczegółowej kontroli, dobrze się zastanów, zanim zmniejszysz rozmiar elementów interaktywnych. Nadal obowiązują prawo Fitts. Mniejszy cel wymaga większej koncentracji nawet przy precyzyjnym wskaźniku. Większy obszar docelowy jest korzystny dla wszystkich, niezależnie od urządzenia wskazującego.

Dowolny wskaźnik

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

any-pointer różni się od funkcji multimediów pointer tym, że informuje o tym, czy którekolwiek urządzenie wskazuje pomyślne przejście testu.

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

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

Wartość any-pointer o wartości fine oznacza, że co najmniej 1 urządzenie wskazujące umożliwia szczegółową kontrolę. Nie jest to jednak główny mechanizm wprowadzania danych.

Zapytanie o media any-pointer zgłosi pozytywny wynik, jeśli którykolwiek z mechanizmów wprowadzania danych zaliczy test, więc przeglądarka może zgłosić wynik dla any-pointer: fine, a także wynik dla parametru any-pointer: coarse. W takiej sytuacji kolejność zapytań o media ma znaczenie. Najważniejszy będzie ten ostatni.

W tym przykładzie, jeśli urządzenie jest wyposażone zarówno w mechanizm precyzyjnego, jak i przybliżonego, stosowane są style przybliżone.

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

Najechanie

Funkcja multimediów hover informuje, czy główny mechanizm wprowadzania danych może najeżdżać na elementy. Zwykle oznacza to, że na ekranie steruje myszką lub trackpadem.

W odróżnieniu od funkcji multimediów pointer, która rozróżnia wskaźniki precyzyjne i przybliżone, funkcja multimediów hover ma charakter binarny. Jeśli główne urządzenie wejściowe jest w stanie najechać na element, wyświetli wartość hover. W przeciwnym razie wartość wynosi none.

W tym przykładzie po najechaniu kursorem na element pojawia się dodatkowa 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 przesuniesz kursor 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 korzystasz z klawiatury, skupiasz się, zamiast najeżdżać kursorem. Komputer z podłączoną myszą zgłasza, że główny mechanizm wprowadzania danych może najechać kursorem na reklamę (to prawda). Jednak osoby korzystające z klawiatury po podłączeniu myszy nie będą mogły korzystać ze stylów :hover. Warto więc połączyć style :hover i :focus, aby uwzględnić oba 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 jest w stanie najeżdżać kursorem na elementy, pamiętaj, aby ukryć informacje po najechaniu kursorem myszy. Informacje te stają się trudniejsze do znalezienia. Nie najeżdżaj kursorem na ważne informacje ani ważne elementy interfejsu.

Dowolny najechanie

Zapytanie o media hover przekazuje tylko informacje o mechanizmie wprowadzania głównych. Niektóre urządzenia mają kilka mechanizmów wprowadzania danych: ekran dotykowy, mysz, klawiaturę, trackpada.

Tak jak funkcja any-pointer raportuje dowolny z mechanizmów wprowadzania danych, zasada any-hover ma wartość prawda, jeśli dowolny z dostępnych mechanizmów wprowadzania danych może najechać na element.

Jeśli chcesz odwrócić logikę w poprzednim przykładzie, możesz ustawić style po najechaniu kursorem 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ądzeniach bez mechanizmu wprowadzania danych, które można najechać kursorem, dodatkowa ikona jest zawsze widoczna.

Klawiatury wirtualne

Użytkownicy poznają interfejsy za pomocą kursorów i palców, ale do wpisywania informacji potrzebują klawiatury. Nie ma problemu, jeśli do urządzenia jest podłączona klawiatura fizyczna, ale w przypadku korzystania z urządzenia z ekranem dotykowym jest to nieco bardziej skomplikowane. Te urządzenia mają ekranową klawiaturę wirtualną.

Typy danych wejściowych

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

Typy danych wejściowych HTML5 doskonale nadają się do opisywania elementów input. Atrybut type akceptuje takie wartości 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 zapewnia szczegółową kontrolę nad klawiaturami wirtualnymi. Na przykład gdy istnieje jeden element input type o wartości number, możesz użyć atrybutu inputmode, aby odróżnić liczby całkowite i ułamki dziesiętne.

Jeśli pytasz o liczbę całkowitą, na przykład czyjąś wiek, wpisz inputmode="numeric".

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

Jeśli chcesz dodać liczbę, która zawiera cyfry po przecinku (np. cenę), wpisz 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, włączając im automatyczne wypełnianie pól formularzy. Atrybut autocomplete udostępnia wiele opcji, które ulepszają formularze kontaktowe, formularze logowania i formularze 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ą mieć duży wpływ na wygodę użytkowników. Przewidując możliwości urządzeń użytkowników i reagując na nie, zwiększasz ich możliwości. Więcej szczegółowych informacji znajdziesz w naszym kursie nauki formularzy.

W następnej kolejności omówimy kilka częstych wzorców interfejsu.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o interakcjach