Formularze testowe na różnych urządzeniach i platformach

Formularz możesz wypełnić na wiele sposobów. Użytkownicy mogą korzystać z formularza na smartfonie, stojąc w zatłoczonym autobusie, korzystając z czytnika ekranu lub starego laptopa. Zobaczmy, jak zadbać o to, aby formularz działał na różnych urządzeniach i w różnych kontekstach.

Sprawdzanie, czy formularz działa dla użytkowników klawiatury

Aby mieć pewność, że formularz jest dostępny, dobrze jest najpierw wypełnić go przy użyciu klawiatury. Otwórz formularz i spróbuj poruszać się po nim za pomocą klawisza tab. Czy łatwo jest określić, które pole formularza jest obecnie aktywne? Aby pomóc użytkownikom zrozumieć, które pole formularza jest aktywne, możesz użyć wskaźników zaznaczenia.

Wypróbuj Aby przejść do danych wejściowych, użyj klawisza tab. Czy widzisz kontur, gdy dane wejściowe są aktywne? To wskaźnik ostrości. Wskaźniki zaznaczenia możesz dodawać za pomocą pseudoklasy CSS :focus.

input:focus {
  outline: 4px solid #222;
}

Dowiedz się więcej o projektowaniu łatwo dostępnych wskaźników ostrości.

Pomóż użytkownikom poruszać się po formularzu

Innym dobrym testem łatwości obsługi i ułatwień dostępu jest sprawdzenie, czy logiczna kolejność kart jest zgodna z wizualną kolejnością kart. Jak można przetestować kolejność kart? Przewijaj cały formularz klawiszem Tab. Czy widzisz jakieś nielogiczne skoki w nawigacji? Upewnij się, że kolejność DOM odpowiada porządkowi wizualnemu.

Dowiedz się więcej o tym, jak upewnić się, że porządek wizualny na stronie jest zgodny z kolejnością DOM.

Pomaganie użytkownikom w wypełnianiu formularzy na urządzeniach dotykowych

Świetnie! Masz pewność, że formularz działa z klawiaturą. Zobaczmy teraz, jak sprawić, by ta funkcja działała też na urządzeniach dotykowych, takich jak telefony komórkowe.

Otwórz formularz na urządzeniu dotykowym, wypełnij wszystkie pola i prześlij formularz. Czy trzeba było kliknąć wiele razy, aby wybrać element sterujący formularza? Problemem może być to, że obszary do kliknięcia są za małe. Upewnij się, że rozmiar elementu docelowego kliknięcia przycisku to co najmniej 48 pikseli, a każdy element <input> i <select> jest wystarczająco duży, by można go było kliknąć. Możesz też ułatwić użytkownikom poruszanie się po formularzu na urządzeniach dotykowych, dodając odpowiednie odstępy między elementami sterującymi formularza.

Zapewnienie użytkownikom zoptymalizowanej klawiatury

W poprzednich modułach omówiliśmy, jak aktywować inną klawiaturę ekranową za pomocą atrybutów type lub inputmode.

Otwórz prezentację na telefonie i kliknij pole numeru telefonu. Zwróć uwagę, że numery są domyślnie wyświetlane na klawiaturze ekranowej razem z innymi znakami, które mogą być wymagane w przypadku numeru telefonu. Użyj type="tel", aby uzyskać klawiaturę ekranową zoptymalizowaną pod kątem wpisywania numerów telefonów.

Wypróbuj tę funkcję na telefonie i sprawdź, czy potrafisz łatwo wpisać wszystkie znaki potrzebne do wpisania numeru telefonu. Jeśli chcesz się dowiedzieć, jak działa klawiatura ekranowa w innym urządzeniu type, wypróbuj w wersji demonstracyjnej type="email".

Upewnij się, że przyciski formularzy nie są ukryte

Wyobraź sobie, że wypełniłeś długi formularz, który chcesz go przesłać. Ale gdzie jest przycisk Prześlij? Może znajdować się za paskiem narzędzi przeglądarki u dołu ekranu. Jednym ze sposobów na zapewnienie widoczności przycisków jest użycie funkcji CSS env(). Dowiedz się, jak dopilnować, aby przyciski nie były zasłonięte interfejsami użytkownika.

Upewnij się, że formularz działa na różnych platformach

Przetestuj formularze na jak największej liczbie urządzeń. Masz starego laptopa? Otwórz w niej domyślną przeglądarkę i przetestuj formularz. Twój znajomy ma tablet? Możesz go wypożyczyć i sprawdzić swój formularz w nim.

Czy niektóre style wyglądają inaczej w jednej przeglądarce? Z dalszego modułu dowiesz się, jak zadbać o działanie stylów na różnych platformach.

BrowserStack oferuje bezpłatne konta testowe dla projektów open source, a Browserling – bezpłatny okres próbny do testowania w różnych przeglądarkach, na różnych urządzeniach i w różnych systemach operacyjnych.

Pomóż użytkownikom wypełniać formularze w różnych kontekstach

Użytkownicy nie tylko korzystają z różnych przeglądarek, urządzeń czy systemów operacyjnych. Użytkownicy korzystają też z formularzy w różnych kontekstach. Spróbuj! Czy słońce teraz świeci na zewnątrz? Weź telefon i wyjdź na zewnątrz. Użycie formularza w jasnym świetle to dobry sposób na sprawdzenie, czy używane są współczynniki kontrastu.

Dowiedz się więcej o ułatwieniach dostępu dotyczących kolorów i kontrastu.

Sprawdź, czy formularz działa przy słabym połączeniu

Załóżmy, że podróżujesz pociągiem. Otwierasz stronę internetową na telefonie. Zastanawiasz się, jak ładowanie strony może tak długo potrwać 🙂

Możesz symulować wolne połączenia i różne typy sieci za pomocą narzędzi WebPageTest lub DevTools.

Dowiedz się więcej o testowaniu przy niskiej przepustowości i dużym opóźnieniu.

Pomaganie użytkownikom w korzystaniu z formularza z dowolnego miejsca

Wyobraź sobie, że idziesz na spotkanie. Nagle telefon dzwoni, odbierasz połączenie i jednocześnie otrzymujesz alert od ubezpieczyciela umożliwiający wypełnienie formularza zgłoszeniowego. Otwierasz formularz i próbujesz go wypełnić, wciąż rozmawiając.

Pamiętaj, że użytkownicy będą używać formularzy w wielu różnych kontekstach. W stresujących sytuacjach podczas wykonywania innych czynności poza domem. Zadbaj o łatwą obsługę formularza, aby pomagać użytkownikom.

Spróbuj ustawić limit czasu na wypełnienie formularza. Spróbuj zasymulować niedoskonałe warunki, w których można przetestować formularz.

Pamiętaj o udostępnieniu wyników testu

Dokumentuj wszystkie testy i udostępniaj wyniki swojemu zespołowi. Dzięki temu będą wiedzieć, które działania są najważniejsze, dzięki czemu wszyscy w zespole będą wiedzieć, które z nich są najważniejsze.

Dowiedz się więcej o udostępnianiu wyników testu.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o testowaniu na wielu platformach

Zasoby

• WebPageTest: testy wydajności i optymalizacji witryny.
• Testowanie z małą przepustowością i dużym opóźnieniem
• Udostępnianie wyników testu