Przygotowanie

Przed zebraniem danych o skuteczności na potrzeby audytu witryny możesz wykonać kilka czynności, aby określić łatwe poprawki i obszary, na których warto się skupić.

Weryfikacja poprawności: architektura i kod

Spłać dług technologiczny

Gdy tylko jest to możliwe, naprawiaj proste błędy i usuwaj niepotrzebne zasoby i kod przed dokonaniem pomiaru skuteczności. Pamiętaj jednak, aby zachowywać listę problemów i poprawek na bieżąco. Wprowadzone ulepszenia mogą być częścią zakresu kontroli.

Architektura witryny i zasoby
Czy z repozytorium kodu i z witryny można łatwo usunąć cokolwiek, np. nieużywane starsze strony, treści lub inne zasoby? Poszukaj osieroconych stron, zbędnych szablonów, nieużywanych obrazów oraz nieużywanego kodu i bibliotek.

Błędy środowiska wykonawczego
Sprawdź, czy w konsoli przeglądarki nie ma błędów. Nie powinno być żadnych :).

Linting
Czy w kodzie HTML, CSS lub JavaScript występują błędy? Wbudowanie lintowania w przepływ pracy może pomóc w utrzymaniu jakości kodu i uniknięciu regresji. Zalecamy używanie HTMLHint, StyleLint i ESLint – tych wtyczek można używać jako wtyczek edytora kodu. Możesz też uruchamiać je z wiersza poleceń w ramach procesów przepływu pracy i narzędzi do ciągłej integracji, takich jak Travis.

Niedziałające linki i obrazy
Istnieje wiele narzędzi do testowania uszkodzonych linków podczas kompilacji i w czasie działania, w tym m.in. rozszerzenia do Chrome (to jest dobre) i narzędzia węzłów takie jak Uszkodzone linki.

Wtyczki
Wtyczki takie jak Flash i Silverlight mogą stanowić zagrożenie dla bezpieczeństwa. Ich obsługa została wycofana i nie działają one na urządzeniach mobilnych. Użyj Lighthouse, aby sprawdzić, czy są dostępne wtyczki.

Testowanie na różnych urządzeniach i w różnych kontekstach

Nie ma nic lepszego niż zachęcanie prawdziwych użytkowników do przetestowania witryny na prawdziwych urządzeniach, w różnych przeglądarkach i w różnych kontekstach łączności.

Niektóre z tych testów są stosunkowo subiektywne, ale mogą pomóc w identyfikacji problemów wpływających na postrzeganą skuteczność. Niedziałające linki – na przykład straty czasu i brak reakcji. Tekst nieczytelny czyta się powoli.

Testowanie na różnych urządzeniach
Wypróbuj różne rozmiary widocznego obszaru i okien. Używaj co najmniej jednego urządzenia mobilnego i jednego komputera. W miarę możliwości sprawdź witrynę na urządzeniu mobilnym o niskiej wydajności z małym ekranem. Czy tekst jest czytelny? Czy jakieś zdjęcia są uszkodzone? Czy możesz powiększyć? Czy docelowe elementy dotykowe są wystarczająco duże? Czy działa wolno? Czy któreś funkcje nie odpowiadają? Zrób zrzut ekranu lub sfilmuj wyniki.

Testy na wielu platformach
Na jakie platformy kierujesz reklamy? Musisz przetestować ją w przeglądarkach i systemach operacyjnych, z których korzystają Twoi użytkownicy teraz i w przyszłości.

Połączenia
Przetestuj na wielu typach sieci docelowych: połączone, Wi-Fi i komórkowe. Za pomocą narzędzi w przeglądarce możesz emulować różne warunki sieciowe.

Urządzenia
Wypróbuj witrynę na tych samych urządzeniach co użytkownicy. Poniższe zdjęcie przedstawia tę samą stronę na dwóch różnych telefonach.

Strona posta na blogu z telefonami
o wysokiej specyfikacji

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. Ekran jest niewyraźny i ma „przebarwienia” – biały nie wygląda na biały – przez to mniej czytelny jest obraz treści.

Takie proste wnioski są o wiele ważniejsze niż niejasne dane o skuteczności.

Wypróbuj UI i UX

Ułatwienia dostępu, łatwość obsługi i czytelność
Aby treści i funkcje Twojej witryny były dostępne dla wszystkich, musisz poznać zróżnicowanie jej użytkowników. Lighthouse i inne narzędzia służą do testowania określonych problemów z ułatwieniami dostępu. Jednak nic nie przebije testów w świecie rzeczywistym. Czytaj, poruszaj się i wprowadzaj dane w różnych sytuacjach, np. na zewnątrz, w pełnym słońcu lub w pociągu. Zaproś znajomych, rodzinę i współpracowników do wypróbowania Twojej witryny. Spróbuj korzystać z treści za pomocą czytnika ekranu, takiego jak VoiceOver na Macu lub NVDA w systemie Windows.

Więcej o wdrażaniu i sprawdzaniu ułatwień dostępu znajdziesz w kursie Udacity na temat ułatwień dostępu oraz w artykule o podstawach pracy w internecie (How To Do an Accessibility Review).

Prowadź dokumentację kontroli ułatwień dostępu. Bardzo możliwe, że da się wprowadzić proste ulepszenia, które przyniosą korzyści wszystkim użytkownikom.

Podstawowe problemy z interfejsem użytkownika i interfejsem użytkownika
Interakcje, które nie działają poprawnie, zbyt małe okna i widoczne obszary, zbyt małe elementy dotykowe, nieczytelne treści, nieczytelne przewijanie... Otwórz wiele stron w witrynie, wypróbuj nawigację i wszystkie główne funkcje. Prowadź rejestr.

Obrazy, dźwięk i obraz
Sprawdź, czy nie ma przepełniających się treści, nieprawidłowego formatu obrazu, niewłaściwie przyciętych zdjęć i problemów z jakością.

Subiektywne testy interfejsu
Nie wszystkie mogą być trafne, ale proste zmiany mogą ułatwić refaktoryzację:

  • Czy pytanie „Co mogę tutaj zrobić?” jest usuwane natychmiast po otwarciu witryny?
  • Czy lubisz przeglądać treści i korzystać z linków?
  • Czy istnieją wizualne hierarchie lub ścieżki? A może wszystkie elementy mają taki sam wygląd?
  • Czy układ jest nieprzejrzysty?
  • Czy jest za dużo czcionek?
  • Czy są jakieś obrazy lub inne treści, które można usunąć?
  • Projekt treści jest równie ważny jak projekt interfejsu. Czy teksty i obrazy w Twojej witrynie pasują do kontekstu na komputerze i urządzeniu mobilnym? Czy można coś wyeliminować? Twórz na urządzenia mobilne.