Zanim zaczniesz zbierać dane o skuteczności witryny na potrzeby audytu, możesz wykonać kilka czynności, aby zidentyfikować łatwe poprawki i obszary, na których należy się skupić.
Sprawdzanie poprawności: architektura i kod
W miarę możliwości naprawiaj proste błędy i usuwaj niepotrzebne komponenty oraz kod przed pomiarem skuteczności. Pamiętaj jednak, aby zachować informacje o problemach i ich rozwiązaniach przed i po ich usunięciu. Te ulepszenia mogą być nadal częścią Twojego audytu.
Architektura i zasoby witryny
Czy można łatwo usunąć z repozytorium kodu i z witryny nieużywane starsze strony, treści lub inne zasoby? Sprawdź, czy nie ma stron bez rodziców, zbędących szablonów, nieużywanych obrazów i nieużywanych bibliotek i kodu.
Błędy w czasie wykonywania
Sprawdź, czy w konsoli przeglądarki występują błędy. Nie powinno być żadnych :).
Sprawdzanie kodu
Czy w kodzie HTML, CSS lub JavaScriptu występują błędy? Włączenie lintingu do procesu może pomóc w utrzymaniu jakości kodu i unikaniu regresji. Zalecamy stosowanie narzędzi HTMLHint, StyleLint i ESLint, które można używać jako wtyczki do edytora kodu lub uruchamiać z poziomu wiersza poleceń w ramach procesów przepływu pracy i narzędzi ciągłej integracji, takich jak Travis.
Niedziałające linki i obrazy
Istnieje wiele narzędzi do testowania niedziałających linków w czasie kompilacji i w czasie działania, w tym rozszerzeń Chrome (to jest dobre) i narzędzi Node, takich jak Broken Link Checker.
Wtyczki
Wtyczki takie jak Flash i Silverlight mogą stanowić zagrożenie dla bezpieczeństwa. Ich obsługa została wycofana, a wtyczki nie działają na urządzeniach mobilnych. Sprawdź, czy w witrynie są wtyczki.
testowanie na różnych urządzeniach i w różnych kontekstach.
Nic nie zastąpi testowania witryny przez prawdziwych użytkowników na prawdziwych urządzeniach, w różnych przeglądarkach i w różnych kontekstach połączenia.
Niektóre z tych kontroli są dość subiektywne, ale mogą wykrywać problemy, które wpływają na postrzeganą skuteczność. Niedziałające linki na przykład marnują czas i wywołują wrażenie „nieodpowiedzialnie” działającej strony. Nieczytelny tekst jest trudny do odczytania.
Testowanie na różnych urządzeniach
Wypróbuj różne rozmiary widocznego obszaru i okna. Użyj co najmniej 1 urządzenia mobilnego i 1 komputera. Jeśli to możliwe, przetestuj witrynę na urządzeniu mobilnym o niskich specyfikacjach i małym ekranie. Czy tekst jest czytelny? Czy jakieś obrazy są uszkodzone? Czy możesz powiększyć? Czy docelowe elementy dotykowe są wystarczająco duże? Czy jest wolny?
Czy jakieś funkcje nie działają? Zrób zrzut ekranu lub nagraj film z wynikami.
Testowanie na wielu platformach
Na jakie platformy chcesz kierować reklamy? Musisz przetestować aplikację w przeglądarkach i systemach operacyjnych, z których korzystają użytkownicy.
Łączność
Testowanie na wielu docelowych typach sieci: połączone, Wi-Fi i komórkowa. Za pomocą narzędzi przeglądarki możesz emulować różne warunki sieci.
Urządzenia
Wypróbuj swoją witrynę na tych samych urządzeniach co użytkownicy. Na poniższym zdjęciu widać tę samą stronę na 2 różnych telefonach.
Na większym ekranie tekst jest mały, ale czytelny. Na mniejszym ekranie przeglądarka prawidłowo renderuje układ, ale tekst jest nieczytelny nawet po powiększeniu. Obraz jest rozmyty i ma „zabarwienie” (biały nie jest biały), co utrudnia odczytanie treści.
Proste spostrzeżenia takie jak to mogą być znacznie ważniejsze niż niejasne dane o skuteczności.
Testowanie interfejsu użytkownika
Dostępność, użyteczność i czytelność
Aby treści i funkcje witryny były dostępne dla wszystkich, musisz zrozumieć różnorodność swoich użytkowników.
Lighthouse i inne narzędzia sprawdzają konkretne problemy z dostępnością, ale nic nie zastąpi testów w rzeczywistych warunkach. Spróbuj odczytywać, przewijać i wprowadzać dane w różnych sytuacjach, np. na zewnątrz w świetle słonecznym lub w pociągu. Poproś znajomych, rodzinę i współpracowników o wypróbowanie Twojej witryny. Spróbuj wyświetlać treści za pomocą czytnika ekranu, takiego jak VoiceOver na Macu lub NVDA w systemie Windows.
Więcej informacji o wdrażaniu i sprawdzaniu ułatwień dostępu znajdziesz w Kursie Udacity na temat ułatwień dostępu oraz w artykule Jak przeprowadzić przegląd ułatwień dostępu w sekcji Web Fundamentals.
Przechowuj zapis kontroli ułatwień dostępu. Z dużą dozą prawdopodobieństwa możesz wprowadzić proste ulepszenia, które będą korzystne dla wszystkich użytkowników.
Podstawowe problemy z interfejsem i doświadczeniami użytkownika
Interakcje, które nie działają tak, jak powinny, elementy wylewające się poza obszar ekranu w mniejszych oknach i obszarach widoku, zbyt małe obszary dotykowe, treści, których nie da się odczytać, niepłynne przewijanie... Otwórz kilka stron w witrynie i wypróbuj nawigację oraz wszystkie podstawowe funkcje. Prowadź zapis.
Obrazy, dźwięk i filmy
Sprawdź, czy nie ma elementów wychodzących poza krawędzie, nieprawidłowego formatu obrazu, niewłaściwego przycięcia i problemów z jakością.
Subiektywne testy interfejsu użytkownika
Nie wszystkie z nich mogą być istotne, ale proste zmiany mogą ułatwić refaktoryzację:
- Czy po otwarciu strony od razu widać, co można zrobić?
- Czy lubisz przeglądać treści i klikać linki?
- Czy istnieją hierarchie wizualne lub ścieżki, czy wszystko ma taką samą wagę wizualną?
- Czy układ jest zagracony?
- Czy jest za dużo czcionek?
- Czy są jakieś obrazy lub inne treści, które można usunąć?
- Projektowanie treści jest tak samo ważne jak projektowanie interfejsu. Czy tekst i obrazy w Twojej witrynie są odpowiednie do wyświetlania na urządzeniach mobilnych i komputerach? Czy można coś wyeliminować? Pisz na urządzenia mobilne.