laten we bugs vangen! Een beginners gids voor de website testen

James Tsividis
James Tsividis

Volg

2 Mei 2019 · 5 min te lezen

Website testen is een stuk eenvoudiger dan het lijkt. Je hoeft geen tester te zijn om het te doen. En u krijgt een inzicht in uw product dat u zal helpen begrijpen op een geheel nieuwe manier.

ik ben een tester van het Single Digital Presence (SDP) project. Mijn taak is om SDP platformed websites te testen op vele browsers, schermformaten en apparaten om bugs te vinden en te zorgen voor een optimale gebruikerservaring.

testen helpt u uw gebruikers beter te begrijpen

wanneer ik een website Test, ben ik niet alleen op zoek naar fouten of bugs, maar probeer ik ernaar te kijken door zoveel mogelijk verschillende lenzen. Dit betekent het gebruik van een website op verschillende apparaten, in verschillende browsers en binnen verschillende schermformaten. Sommige bugs verschijnen alleen in 1 browser, dus testen in veel verschillende omgevingen is noodzakelijk. Het is ook een geweldige kans om te zien hoe verschillende gebruikers kunnen worden interactie met de site te.

wat we testen op

voor de vic.gov.au website, we testen op meerdere omgevingen, waaronder Windows, Mac, Android en iOS. We testen op desktop computers, tablets en telefoons, evenals meerdere internet browsers voor sommige apparaten.

we gebruiken de Victorian Government Digital Standards Test een product-of servicegids die veelgebruikte browsers en gebruikerstoetsingssjablonen bevat.

we weten nooit hoe mensen toegang zullen krijgen tot onze site, dus we willen ervoor zorgen dat hun ervaring consistent is en voldoet aan onze kwaliteitsnormen. Natuurlijk zijn er schijnbaar eindeloze aantallen apparaten waarop we onze sites kunnen testen, maar het gebruik van de apparaten die we al hebben en kunnen lenen van anderen is vaak genoeg om ons te voorzien van onschatbaar inzicht in hoe het publiek het zou kunnen waarnemen.

na de vic.gov.au website werd vrijgegeven, ik toevallig in het Doncaster winkelcentrum. Dus ging ik naar de Apple store om de site te testen op een van hun iPhones, omdat ik er zelf geen had. Ik heb een van de feedbackformulieren voor de pagina ingevuld en ondertekend als ‘James from an Apple store’, en ons content-team waardeerde de moeite die ik heb gedaan om de site te testen.

als u nauwkeurige gegevens wilt over welke apparaten, browsers en schermformaten mensen gebruiken om toegang te krijgen tot uw site, kunt u Google Analytics altijd controleren of deze is ingesteld met uw site.

Drag test

de eerste test die ik graag doe bij het testen van een website is de drag test. Dit stelt me in staat om een snel begrip te krijgen van hoe de website eruit zou kunnen zien op verschillende schermformaten en op verschillende apparaten, allemaal tijdens een verblijf in dezelfde browser.

de drag-test omvat het slepen van het browservenster van de grootste naar de kleinste grootte, om te zien hoe de site eruit ziet op verschillende breekpunten, dat is het punt waarop de site morphs gebaseerd op hoe groot de viewport is.

breekpunten zijn nodig omdat we willen dat dingen groter of kleiner worden om rekening te houden met de verschillende schermformaten waarop we de site kunnen bekijken, en het slepen van het venster om kleiner of groter te zijn is een gemakkelijke manier om al deze veranderingen waar te nemen. Dus laten we een voorbeeld zien met de vic.gov.au homepage.

Dit is mijn vic.gov.au homepage geopend tot zijn maximale grootte op mijn 27 ” iMac-scherm. Laten we de homepage bekijken en zien wat er gebeurt als we het venster kleiner maken.

Dit is de vic.gov.au homepage maar het neemt nu iets minder dan de helft van het scherm in beslag. In de afbeelding, Ik heb een aantal van de belangrijkste verschillen tussen de twee beelden tot nu toe opgemerkt.

deze afbeelding is de kleinste versie van de site en is zichtbaar op mobiele telefoons. Het zal het meest anders zijn dan de anderen.

dit zijn niet de enige drie schermgrootte breekpunten op vic.gov.au en het zal anders zijn voor elke site, maar het is iets om je op weg te helpen.

ik kijk vaak naar de header om te zien op welk breekpunt ik ben, omdat bijna alle van hen iets veranderd in de header elke keer. En ik heb geleerd hoe elke verschillende header eruit ziet door te kijken naar de ontwerpen voor de site. Het helpt veel om toegang te hebben tot de ontwerpen, zodat u kunt weten of een functie wordt verondersteld om te kijken zoals het doet op een bepaalde schermgrootte breekpunt. Gezien het aantal verschillen tussen breekpunten, zijn er vaak een paar fouten in de implementatie. Dus dit is een zeer waardevolle test te doen als de site wordt ontwikkeld.

vergeet niet de sleeptest uit te voeren voor de koptekst, de inhoud en de voettekst van de site, omdat ze allemaal unieke inhoud hebben die kan veranderen tussen breekpunten. Let ook op waar de inhoud van de zijbalk gaat wanneer de pagina klein genoeg wordt. Het gaat meestal ergens onderaan.

Content type testing

elke website heeft verschillende pagina-inhoudstypen. Zorg ervoor dat u vertrouwd raakt met elk afzonderlijk inhoudstype, omdat u op elke pagina op verschillende attributen test. Sommige pagina ‘ s verschillen meer dan andere. Aan vic.gov.au, onze inhoudstypen zijn:

  • Alert
  • Event
  • Grant
  • Landing Page
  • nieuws
  • pagina
  • profiel

voor meer informatie over inhoudstypen, bezoek: https://www.vic.gov.au/what-single-digital-presence-offers#page-templates-available-on-sdp

Device and browser testing

en tot slot, als u de site grondig hebt getest op uw favoriete browser, is het altijd goed om te zien hoe het eruit ziet op andere apparaten en browsers — vooral de populaire — omdat de touch-ervaring niet altijd iets is dat u kunt anticiperen en u altijd bugs kunt vinden die specifiek zijn voor een bepaalde browser op een bepaald apparaat. Die uit het niets lijken te komen en totaal onverwacht zijn.

handige testlinks

  • populairste browsers (Australië)) — http://gs.statcounter.com/browser-market-share/all/australia
  • meest populaire browsers (wereld) — http://gs.statcounter.com/browser-market-share
  • iPhone simulator (alleen Mac)) — https://developer.apple.com/xcode/
  • Als u apparaatspecifieke tests wilt uitvoeren in plaats van alleen schermresolutie-tests, dan heeft Google Chrome Developer Tools Een Apparaatwerkbalk die kan simuleren hoe een echt apparaat zich gedraagt, maar het is niet perfect.

er zijn veel testtechnieken voor websites die in dit artikel niet worden besproken, maar dit is een goede plek om te beginnen. Het volgende wat ik zou testen is dat gegevens ingevoerd in formulieren correct verschijnt in de backend en dat ongeldige gegevens niet kunnen worden ingevoerd.

veel plezier met het testen en ik kijk ernaar uit om te horen wat mensen leren van dit artikel. Laten we allemaal samen web beter doen!

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.