Zanim zbierzesz wskaźniki skuteczności na potrzeby audytu witryny, możesz przeprowadzić kilka kontroli, aby zidentyfikować łatwe do wprowadzenia poprawki i obszary, na których warto się skupić.
Sprawdzanie poprawności: architektura i kod
Jeśli to możliwe, napraw proste błędy i usuń niepotrzebne zasoby oraz kod przed pomiarem wydajności. Pamiętaj jednak, aby zachować zapis problemów i poprawek przed i po. Te ulepszenia mogą nadal być częścią Twojej pracy nad audytem.
Architektura i zasoby witryny
Czy można łatwo usunąć coś z repozytorium kodu i witryny, np. nieużywane starsze strony, treści lub inne zasoby? Sprawdź, czy nie ma osieroconych stron, zbędnych szablonów, nieużywanych obrazów oraz nieużywanego kodu i nieużywanych bibliotek.
Błędy środowiska wykonawczego
Sprawdź, czy w konsoli przeglądarki nie ma zgłoszonych błędów. Nie powinno być żadnych :).
Linting
Czy w kodzie HTML, CSS lub JavaScript występują błędy? Włączenie analizy statycznej do przepływu pracy może pomóc w utrzymaniu jakości kodu i uniknięciu regresji. Zalecamy HTMLHint, StyleLint i ESLint, których można używać jako wtyczek do edytora kodu lub uruchamiać z wiersza poleceń w procesach przepływu pracy i narzędziach do trybu ciągłej integracji, takich jak Travis.
Uszkodzone linki i obrazy
Istnieje wiele narzędzi do testowania uszkodzonych linków podczas kompilacji i w czasie działania, w tym rozszerzenia do Chrome (to jest dobre) i narzędzia Node, takie jak Broken Link Checker.
Wtyczki
Wtyczki takie jak Flash i Silverlight mogą stanowić zagrożenie dla bezpieczeństwa, dlatego nie są już obsługiwane i nie działają na urządzeniach mobilnych. Użyj Lighthouse, aby sprawdzić, czy są wtyczki.
Testowanie na różnych urządzeniach i w różnych kontekstach
Nic nie zastąpi testowania witryny przez prawdziwe osoby na rzeczywistych urządzeniach, w różnych przeglądarkach i w różnych warunkach połączenia.
Niektóre z tych testów są stosunkowo subiektywne, ale mogą wykryć problemy, które wpływają na postrzeganą wydajność. Na przykład uszkodzone linki marnują czas i sprawiają wrażenie, że strona nie reaguje. Nieczytelny tekst czyta się wolno.
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 parametrach i z małym ekranem. Czy tekst jest czytelny? Czy jakieś obrazy są uszkodzone? Czy można powiększać? Czy docelowe elementy dotykowe są wystarczająco duże? Czy działa wolno?
Czy jakieś funkcje nie reagują? Zrób zrzut ekranu lub nagraj film z wynikami.
Testowanie na wielu platformach
Na jakie platformy kierujesz reklamy? Musisz przeprowadzić testy w przeglądarkach i systemach operacyjnych, których użytkownicy używają obecnie i będą używać w przyszłości.
Połączenia
Testuj na wielu docelowych typach sieci: połączone, Wi-Fi i komórkowe. Możesz użyć narzędzi przeglądarki, aby emulować różne warunki sieciowe.
Urządzenia
Przetestuj swoją witrynę na tych samych urządzeniach, których używają Twoi użytkownicy. Na zdjęciu poniżej 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. Wyświetlacz jest rozmyty i ma „przebarwienia” – biel nie wygląda jak biel – co utrudnia czytanie treści.
Takie proste wnioski mogą być znacznie ważniejsze niż niejasne dane o skuteczności.
Wypróbuj interfejs i UX
Ułatwienia dostępu, użyteczność i czytelność
Aby mieć pewność, że treści i funkcje Twojej witryny są dostępne dla wszystkich, musisz zrozumieć różnorodność użytkowników.
Lighthouse i inne narzędzia testują konkretne problemy z dostępnością, ale nic nie zastąpi testów w rzeczywistych warunkach. Spróbuj czytać, nawigować 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 zapoznać się z 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 How To Do an Accessibility Review (Jak sprawdzić ułatwienia dostępu) w Podstawach tworzenia witryn.
Zapisz wyniki kontroli ułatwień dostępu. Prawdopodobnie uda Ci się wprowadzić proste ulepszenia, które będą korzystne dla wszystkich użytkowników.
Podstawowe problemy z interfejsem i wrażeniami użytkownika
Interakcje, które nie działają tak, jak powinny, elementy przepełnione w mniejszych oknach i obszarach wyświetlania, zbyt małe cele dotknięcia, nieczytelne treści, niestabilne przewijanie… Otwórz kilka stron w witrynie, wypróbuj nawigację i wszystkie główne funkcjonalności. Zapisuj informacje.
Obrazy, dźwięk i wideo
Sprawdź, czy treści nie wychodzą poza ekran, czy format obrazu jest prawidłowy, czy kadrowanie jest odpowiednie i czy nie ma problemów z jakością.
Subiektywne testy interfejsu
Nie wszystkie z nich mogą być istotne, ale proste zmiany mogą ułatwić refaktoryzację:
- Czy po otwarciu witryny od razu wiadomo, co można na niej zrobić?
- Czy zachęcają do zapoznania się z treścią i kliknięcia linków?
- Czy istnieją hierarchie wizualne lub ścieżki, czy też wszystko ma taką samą równowagę wizualną?
- Czy układ jest nieczytelny?
- Czy jest za dużo czcionek?
- Czy są tam obrazy lub inne treści, które można usunąć?
- Projekt treści jest tak samo ważny jak projekt interfejsu. Czy tekst i obrazy w witrynie są odpowiednie dla urządzeń mobilnych i komputerów? Czy można coś wyeliminować? Pisz z myślą o urządzeniach mobilnych.