Interakcja

Urządzenia z małym ekranem, takie jak telefony komórkowe, często mają ekrany dotykowe. Urządzenia z dużymi ekranami, takie jak laptopy i komputery stacjonarne, są często wyposażone w takie elementy jak mysz lub trackpad. Łatwo utożsamiać małe ekrany z ekranami dotykowymi, a duże ze wskaźnikami.

Rzeczywistość jest jednak bardziej zróżnicowana. Niektóre laptopy mają funkcje ekranu dotykowego. Użytkownicy mogą używać ekranu dotykowego lub trackpada albo obu tych opcji naraz. Możesz też korzystać z zewnętrznej klawiatury lub myszy z urządzeniem z ekranem dotykowym, takim jak tablet.

Zamiast zgadywać mechanizm wprowadzania danych na podstawie rozmiaru ekranu, korzystaj z funkcji multimediów 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że to oznaczać, że użytkownik korzysta z Twojej witryny za pomocą 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 precyzyjny wskaźnik.

Jeśli przeglądarka zgłasza wartość pointer o wartości fine, oznacza to, że główny mechanizm wprowadzania umożliwia szczegółową kontrolę. Najlepiej użyć myszy lub rysika.

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

W tym przykładzie przyciski zostały powiększone w przypadku przybliżonych wskaźników:

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

Możesz też zmniejszyć elementy w przypadku szczegółowych wskaźników, ale zachowaj ostrożność:

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

Nawet jeśli ktoś ma główny mechanizm wprowadzania danych umożliwiający szczegółową kontrolę, dobrze się zastanów, zanim zmniejszysz rozmiar elementów interaktywnych. Prawo Fitts nadal obowiązuje. Mniejszy cel wymaga większej koncentracji nawet przy drobnym wskazówce. Większy obszar docelowy jest korzystny dla wszystkich, niezależnie od urządzenia wskazującego.

Dowolny wskaźnik

Funkcja multimediów pointer podaje dokładność głównego mechanizmu wprowadzania danych. Wiele urządzeń ma jednak więcej niż jeden mechanizm wprowadzania danych. Może się zdarzyć, że ktoś wejdzie w interakcję z Twoją witryną, używając jednocześnie ekranu dotykowego i myszy.

any-pointer różni się od funkcji multimediów pointer tym, że podaje w raportach, czy któreś urządzenie wskazujące przejdzie test.

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

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

Wartość any-pointer wynosząca fine oznacza, że co najmniej jedno urządzenie wskazujące może mieć szczegółową kontrolę. Nie musi to być jednak główny mechanizm wprowadzania danych.

Zapytanie o media any-pointer zwróci pozytywny wynik, jeśli dowolny mechanizm wprowadzania danych zaliczy test, dlatego przeglądarka może zgłosić wynik dla funkcji any-pointer: fine oraz any-pointer: coarse. W takim przypadku kolejność zapytań o multimedia ma znaczenie. Pierwszeństwo ma pierwszeństwo.

W tym przykładzie, jeśli urządzenie ma zarówno precyzyjny, jak i przybliżony mechanizm wprowadzania danych, stosowane są style przybliżone.

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

Najedź

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

W odróżnieniu od funkcji multimediów pointer, która rozróżnia wskaźniki przybliżone i precyzyjne, funkcja multimediów hover jest binarna. Jeśli główne urządzenie wejściowe umożliwia najeżdżanie na elementy, raportuje wartość hover. W przeciwnym razie wartość to none.

W tym przykładzie niektóre dodatkowe ikony są dostępne po najechaniu na nie kursorem myszy, ale tylko wtedy, gdy główne urządzenie wejściowe umożliwia najechanie kursorem na element.

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

Gdy najedziesz kursorem myszy na ten przycisk, pojawi się ikona. Jeśli jednak użyjesz klawiatury, aby nacisnąć klawisz Tab, aby przejść do przycisku, ikona pozostanie niewidoczna. Podczas korzystania z klawiatury ustawiasz fokus, a nie najeżdżając na nie kursorem. Komputer z podłączoną myszką zgłasza, że główny mechanizm wprowadzania danych umożliwia najechanie na nie kursorem myszy. Jednak osoby korzystające z klawiatury z podłączoną myszką nie będą miały dostępu do stylów :hover. Warto więc 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 umożliwia najeżdżanie na elementy, zachowaj ostrożność, aby ukryć informacje po najechaniu kursorem. Informacje stają się trudniejsze do znalezienia. Nie ukrywaj ważnych informacji ani ważnych elementów interfejsu za pomocą najeżdżania kursorem.

Dowolny najechanie kursorem

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

Podobnie jak funkcja any-pointer raportuje mechanizmy wprowadzania danych, zasada any-hover ma wartość prawdziwą, jeśli dowolny z dostępnych mechanizmów wprowadzania danych umożliwia najeżdżanie kursorem na elementy.

Jeśli chcesz odwrócić działanie logiczne z poprzedniego przykładu, możesz ustawić style po najechaniu kursorem jako domyślnymi, a potem je usunąć, 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 nieposiadających mechanizmu wprowadzania danych, które umożliwia najeżdżanie kursorem, dodatkowa ikona jest zawsze widoczna.

Klawiatury wirtualne

Użytkownicy do przeglądania interfejsów używają kursorów i palców, ale do wprowadzania informacji potrzebny jest klawiatura. Może to być w porządku, jeśli urządzenie ma podłączoną klawiaturę fizyczną, ale jeśli użytkownik ma pod ręką urządzenie z ekranem dotykowym, jest to nieco bardziej skomplikowane. Te urządzenia są wyposażone w ekranową klawiaturę wirtualną.

Typy danych wejściowych

W przeciwieństwie do klawiatury fizycznej, klawiatury wirtualne można dostosować do oczekiwanego sposobu wprowadzania tekstu. Jeśli podasz informacje o oczekiwanym wejściu, 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 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 zapewnia szczegółową kontrolę nad klawiaturami wirtualnymi. Na przykład gdy jest jeden input type z wartością number, do rozróżnienia liczb całkowitych i dziesiętnych możesz użyć atrybutu inputmode.

Jeśli chcesz podać liczbę całkowitą, np. wiek danej osoby, 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. o cenę, użyj funkcji inputmode="decimal".

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

Autouzupełnij

Nikt nie lubi wypełniać formularzy. Jako projektant, możesz zwiększyć komfort użytkowników, umożliwiając im automatyczne wypełnianie pól formularza. Atrybut autocomplete oferuje wiele opcji pozwalających ulepszyć 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 uzupełnienie pól formularza, ale mogą one 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, dajesz im większe możliwości. Więcej szczegółowych informacji znajdziesz w kursie, w ramach którego nauczysz się korzystać z formularzy.

W dalszej części tego kursu omówimy kilka typowych wzorców w interfejsie.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat interakcji