Dlaczego warto testować powiększenie
Nie każdy odwiedzający ogląda stronę w jej domyślnym rozmiarze. Część osób powiększa widok, aby wygodniej czytać, rozpoznać elementy formularza lub trafić w przycisk. Dobry układ powinien dostosować się do mniejszej ilości miejsca na ekranie: kolumny mogą ustawić się jedna pod drugą, a menu zmienić formę. Ważne, by treść i funkcje pozostały dostępne.
Duży zoom działa jak praktyczny sprawdzian projektu. Nagłówek, który wygląda dobrze na szerokim ekranie, może po powiększeniu zasłonić połowę okna. Trzy karty usług mogą przestać mieścić się obok siebie. Samo przesunięcie elementów nie jest błędem. Problem pojawia się wtedy, gdy nie da się przeczytać tekstu, dotrzeć do przycisku albo zrozumieć kolejności treści.
Przygotuj prosty test w przeglądarce
Otwórz stronę na komputerze w zwykłym oknie przeglądarki. Zacznij od widoku 100%, a następnie zwiększ powiększenie do 200% i 400%, korzystając ze skrótu Ctrl i klawisza plus; na części komputerów zamiast Ctrl używa się Command. Skrót Ctrl i zero zwykle przywraca domyślny widok. Warto też zmienić szerokość okna, bo ten sam zoom może dawać inny efekt na dużym monitorze i na małym laptopie.
Nie ograniczaj się do strony głównej. Sprawdź podstronę z długim tekstem, menu, formularz kontaktowy i miejsce, w którym prezentujesz wiele elementów, na przykład wpisy blogowe albo pozycje katalogu. Przejdź każdą stronę od góry do dołu. Zwróć uwagę, czy możesz przeczytać całość bez ciągłego przewijania jednocześnie w pionie i w poziomie. Niektóre elementy, jak szerokie tabele czy mapy, mogą wymagać osobnego przewijania; powinno ono jednak dotyczyć samego elementu, a nie utrudniać korzystania z całej strony.
Sprawdź również powiększanie tekstu w ustawieniach przeglądarki, jeśli jest dostępne. To inny test niż powiększanie całej strony: rosną litery, lecz układ nie zawsze zmienia się w taki sam sposób. Na telefonie możesz dodatkowo sprawdzić, czy strona pozwala powiększyć widok gestem. Wynik testu na telefonie nie zastępuje jednak sprawdzenia zoomu na komputerze.
Szukaj treści, które znikają lub nachodzą na siebie
Przy każdym poziomie powiększenia spróbuj wykonać zwykłe zadanie odwiedzającego: znaleźć numer kontaktowy, przeczytać opis usługi, przejść do kolejnego wpisu albo wysłać formularz testowy. Obserwuj, czy nagłówki nie są ucinane, tekst nie wychodzi poza ramkę, a przyciski nie zasłaniają pól. Rozwiń menu i sprawdź, czy da się dotrzeć do wszystkich pozycji, również tych na końcu listy.
Szczególnej uwagi wymagają elementy przyklejone do krawędzi ekranu, takie jak pasek nawigacji lub komunikat o plikach cookie. Przy dużym zoomie mogą zajmować znaczną część widoku i przykrywać treść. Sprawdź, czy można je zamknąć lub ominąć oraz czy formularz nie traci etykiet, wskazówek i komunikatów o błędach. Sama widoczność pola nie wystarczy, jeśli nie wiadomo, co trzeba w nim wpisać.
Przejdź kilka kroków za pomocą klawisza Tab. Powinno być widać, który odnośnik lub przycisk jest aktualnie wybrany, a kolejność przechodzenia między elementami powinna mieć sens. Jeśli fokus trafia na coś schowanego poza ekranem, sprawdź, czy strona przesuwa widok do tego elementu.
Jak poprawiać układ bez ukrywania problemu
Jeżeli elementy nie mieszczą się obok siebie, często lepiej pozwolić im przejść do kolejnego wiersza niż zmniejszać tekst. Unikaj sztywnych wysokości bloków zawierających treść: po powiększeniu tekst potrzebuje więcej miejsca. Długie nazwy i adresy powinny móc się zawijać, a obrazy dopasowywać do dostępnej szerokości. Jeśli korzystasz z gotowego motywu, najpierw sprawdź jego ustawienia układu na wąskich ekranach.
Nie naprawiaj widoku przez wyłączanie powiększania albo ukrywanie treści, która się nie mieści. To odbiera odwiedzającym możliwość wygodnego korzystania ze strony. Zamiast tego zanotuj konkretny przypadek, na przykład „przy 400% przycisk wysłania formularza jest poza ekranem”, i popraw przyczynę. Po zmianie ponów test zarówno przy dużym zoomie, jak i w zwykłym widoku, aby upewnić się, że poprawka nie zepsuła innej wersji układu.
