łapmy robaki! Przewodnik dla początkujących do testowania stron internetowych

James Tsividis
James Tsividis

Obserwuj

może 2, 2019 * 5 min czytać

testowanie stron internetowych jest o wiele prostsze, niż się wydaje. Nie musisz być testerem, żeby to zrobić. Uzyskasz wgląd w swój produkt, który pomoże Ci zrozumieć go w zupełnie nowy sposób.

jestem testerem projektu Single Digital Presence (SDP). Moim zadaniem jest testowanie platformowych stron internetowych SDP na wielu przeglądarkach, rozmiarach ekranu i urządzeniach w celu znalezienia błędów i zapewnienia optymalnego doświadczenia użytkownika.

testowanie pomaga lepiej zrozumieć użytkowników

kiedy testuję stronę internetową, nie tylko Szukam błędów lub błędów, ale staram się patrzeć na nią przez jak najwięcej różnych obiektywów, jak to możliwe. Oznacza to korzystanie ze strony internetowej na różnych urządzeniach, w różnych przeglądarkach i w różnych rozmiarach ekranu. Niektóre błędy pojawiają się tylko w 1 przeglądarce, więc testowanie w wielu różnych środowiskach jest konieczne. Jest to również świetna okazja, aby zobaczyć, jak różni użytkownicy mogą wchodzić w interakcje z witryną.

co testujemy na

dla vic.gov.au strona internetowa, testujemy na wielu środowiskach, w tym Windows, Mac, Android i iOS. Testujemy na komputerach stacjonarnych, tabletach i telefonach, a także na wielu przeglądarkach internetowych dla niektórych urządzeń.

korzystamy z Victorian Government Digital Standards Test przewodnik po produkcie lub usłudze, który zawiera powszechnie używane przeglądarki i szablony testów akceptacji użytkowników.

nigdy nie wiemy, w jaki sposób ludzie uzyskają dostęp do naszej strony, dlatego chcemy mieć pewność, że ich doświadczenie jest spójne i spełnia nasze standardy jakości. Oczywiście istnieje nieskończona liczba urządzeń, na których możemy testować nasze witryny, ale korzystanie z urządzeń, które już mamy i które możemy pożyczyć od innych, często wystarcza, aby zapewnić nam nieoceniony wgląd w to, jak opinia publiczna może to postrzegać.

po vic.gov.au strona została wydana, zdarzyło mi się być w centrum handlowym Doncaster. Poszedłem więc do Apple store, aby przetestować stronę na jednym z ich iphone ’ ów, ponieważ sam go nie miałem. Wypełniłem jeden z formularzy opinii na stronie i podpisałem go jako „James z Apple store”, a nasz zespół ds. treści docenił wysiłek, jaki włożyłem w testowanie strony.

jeśli chcesz uzyskać dokładne dane na temat urządzeń, przeglądarek i rozmiarów ekranu, których ludzie używają do uzyskiwania dostępu do twojej witryny, zawsze możesz sprawdzić Google Analytics, czy została ona skonfigurowana w Twojej witrynie.

Test przeciągania

pierwszym testem, który lubię robić podczas testowania strony internetowej, jest test przeciągania. To pozwala mi szybko zrozumieć, jak strona może wyglądać na różnych rozmiarach ekranu i na różnych urządzeniach, a wszystko to podczas pobytu w tej samej przeglądarce.

test przeciągania polega na przeciągnięciu okna przeglądarki z największego rozmiaru do najmniejszego rozmiaru, aby zobaczyć, jak wygląda witryna w różnych punktach przerwania, co jest punktem, w którym witryna zmienia się w zależności od tego, jak duży jest widok.

punkty przerwania są konieczne, ponieważ chcemy, aby rzeczy były większe lub mniejsze, aby pomieścić różne rozmiary ekranu, na którym możemy oglądać witrynę, a przeciąganie okna, aby było mniejsze lub większe, jest łatwym sposobem na obserwację wszystkich tych zmian. Zobaczmy więc przykład z vic.gov.au Strona główna.

to jest mój vic.gov.au Strona główna otworzyła się do maksymalnego rozmiaru na moim 27-calowym ekranie iMac. Przyjrzyjmy się stronie głównej i zobaczmy, co się stanie, gdy zmniejszymy okno.

to jest vic.gov.au Strona główna, ale zajmuje teraz prawie połowę ekranu. Na zdjęciu zauważyłem kilka głównych różnic między tymi dwoma obrazami.

Ten obraz jest najmniejszą wersją strony i jest widoczny na telefonach komórkowych. Będzie najbardziej różny od innych.

to nie są jedyne trzy punkty przerwania rozmiaru ekranu na vic.gov.au i będzie inaczej dla każdej strony, ale jest to coś, na co możesz zacząć.

często patrzę na nagłówek, aby zobaczyć, na którym punkcie przerwania Jestem, ponieważ prawie wszystkie z nich mają coś zmienionego w nagłówku za każdym razem. I nauczyłem się, jak każdy inny nagłówek wygląda, patrząc na projekty strony. Bardzo pomaga dostęp do projektów, dzięki czemu możesz wiedzieć, czy funkcja ma wyglądać tak, jak robi to w określonym punkcie przerwania rozmiaru ekranu. Biorąc pod uwagę liczbę różnic między punktami przerwania, często występuje kilka błędów w implementacji. Jest to więc bardzo cenny test, który należy wykonać podczas tworzenia strony.

nie zapomnij wykonać testu przeciągania nagłówka, zawartości i stopki witryny, ponieważ wszystkie mają unikalną zawartość, która może zmieniać się między punktami przerwania. Zwróć również uwagę na to, gdzie idzie zawartość paska bocznego, gdy strona staje się wystarczająco mała. Zwykle idzie gdzieś na dole.

testowanie typów treści

każda witryna ma różne typy zawartości stron. Pamiętaj, aby zapoznać się z każdym rodzajem zawartości, ponieważ będziesz testować różne atrybuty na każdej stronie. Niektóre strony różnią się bardziej niż inne. On vic.gov.au, nasze typy treści to:

  • Alert
  • wydarzenie
  • dotacja
  • strona docelowa
  • Aktualności
  • strona
  • profil

aby dowiedzieć się więcej o typach treści, odwiedź: https://www.vic.gov.au/what-single-digital-presence-offers#page-templates-available-on-sdp

testowanie urządzenia i przeglądarki

i wreszcie, po dokładnym przetestowaniu witryny na ulubionej przeglądarce, zawsze dobrze jest zobaczyć, jak wygląda ona również na innych urządzeniach i przeglądarkach — zwłaszcza tych popularnych — ponieważ doświadczenie dotykowe nie jest czymś, czego zawsze można przewidzieć, i zawsze można znaleźć błędy specyficzne dla określonej przeglądarki na konkretnym urządzeniu. Które pojawiają się znikąd i są całkowicie nieoczekiwane.

Przydatne linki testujące

  • najpopularniejsze przeglądarki (Australia) — http://gs.statcounter.com/browser-market-share/all/australia
  • najpopularniejsze przeglądarki (świat) — http://gs.statcounter.com/browser-market-share
  • symulator iPhone ’ a (tylko Mac) — https://developer.apple.com/xcode/
  • jeśli chcesz przeprowadzić testy specyficzne dla urządzenia, a nie tylko testowanie rozdzielczości ekranu, Google Chrome Developer Tools ma pasek narzędzi urządzenia, który może symulować zachowanie prawdziwego urządzenia, ale nie jest idealny.

istnieje wiele technik testowania stron internetowych, które nie zostały omówione w tym artykule, ale jest to świetne miejsce na początek. Następną rzeczą, którą chciałbym przetestować, jest to, że dane wprowadzone w formularzach pojawiają się poprawnie w backendzie i że nie można wprowadzić nieprawidłowych danych.

miłej zabawy i czekam na to, czego ludzie uczą się z tego artykułu. Zróbmy razem web lepiej!

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.