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 zasoby oraz kod przed pomiarem wydajności, ale pamiętaj, aby zachować zapis problemów i ich rozwiązań przed i po naprawie. Te ulepszenia mogą nadal być częścią Twojego audytu.
Architektura witryny i jej komponenty
Czy można łatwo usunąć z repozytorium kodu i z witryny nieużywane starsze strony, treści lub inne komponenty? Sprawdź, czy nie ma na stronie żadnych porzuconych elementów, zbędących szablonów, nieużywanych obrazów i nieużywanych bibliotek i kodu.
Błędy w czasie działania
Sprawdź, czy w konsoli przeglądarki nie ma błędów. 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 zachowaniu jakości kodu i uniknięciu 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ą wykryć problemy, które wpływają na postrzeganą wydajność. Niedziałające linki na przykład marnują czas i wywołują wrażenie, że strona nie reaguje. 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 ona powolna?
Czy jakieś funkcje nie odpowiadają? 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 tym 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 kolegó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ą.
Testy subiektywnego 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.