Web -test

We hebben samen de website opnieuw getest om eventuele bugs en problemen te vinden die gebruikers kunnen tegenkomen tijdens het gebruik ervan. We hebben gemerkt dat de website nogal wat problemen heeft, dus hebben we deze op het projectbord gezet om ze de komende weken aan te pakken.

Responsive Error's

Homepagina responsive bug die ook aangepast moet worden;

Minicursussen pagina heeft ook het zelfde error op groot scherm

Bugs

Er is een "reload error" wanneer je filtert, want de pagina herlaadt niet automatisch, alleen de URL wordt aangepast. Ik moet nog een code regel vinden zodat de pagina automatisch herlaadt wanneer je wilt filteren op een categorie.

Hieronder zie je een witte ruimte tussen de gele balk -overzicht en grijze balk van roadmap

Ik zie ook dat er geen underline is op de geselecteerde pagina (beschrijving, stappenplan, voorbeeld)

Hieronder zie ik ook een kleine bug, blijkbaar komt die door een extra icon in de code die we nog moeten weghalen/aanpassen

Artikelen balk moet in een andere kleur want deze kleur is voor een andere pagina bedoeld

In de minicursussen pagina zie ik de Gifjes/animatie niet van hygraph worden opgehaald, dit moet ook zsm aangepast worden

Prestatie

Samenvatting

Mijn LCP-element (grootste weergave met content) duurt 6.720 ms om te laden: Ik moet de laadtijd van dit element verbeteren door optimalisaties toe te passen, zoals het optimaliseren van afbeeldingen of het verminderen van complexe inhoud.

Ik moet bronnen verwijderen die de weergave blokkeren en daarmee een potentiële besparing van 1.400 ms realiseren: Sommige bronnen op mijn pagina vertragen de laadtijd. Ik moet overwegen niet-essentiële bronnen te verwijderen of te optimaliseren om de laadtijd te versnellen.

Mijn afbeeldingselementen hebben geen expliciete width en height: Ik moet de breedte en hoogte van afbeeldingselementen specificeren om de paginalayoutstabiliteit te verbeteren en onverwachte verschuivingen te voorkomen.

Ik moet statische items leveren met een efficiënt cachebeleid; ik heb 2 bronnen gevonden die dit niet doen: Ik moet caching gebruiken om statische bronnen efficiënter te leveren en laadtijden te verkorten.

Ik moet ervoor zorgen dat tekst zichtbaar blijft tijdens het laden van weblettertypen: Ik moet een fallback-font implementeren, zodat tekst zichtbaar blijft terwijl webfonts worden geladen.

Mijn eerste reactietijd van de server was kort, maar het duurde 480 ms voordat het hoofddocument werd geladen: Ik moet ervoor zorgen dat de server snel reageert en de laadtijd van het hoofddocument optimaliseren.

Ik moet grote layout shifts vermijden; ik heb 1 layout shift gevonden: Ik moet voorkomen dat grote verschuivingen in de paginalayout optreden, wat kan leiden tot een slechte gebruikerservaring. Ik moet afmetingen specificeren voor alle content en ervoor zorgen dat elementen stabiel blijven tijdens het laden.

Ik moet enorme netwerkpayloads vermijden; de totale grootte van mijn pagina was 913 KiB: Ik moet de totale grootte van de netwerkpayload verminderen door afbeeldingen te optimaliseren, ongebruikte bronnen te verwijderen en het gebruik van externe scripts te minimaliseren.

Ik moet een overmatig grote DOM vermijden; mijn pagina bevat 74 elementen: Ik moet het aantal elementen in mijn DOM-structuur beperken om de paginalaadprestaties te verbeteren.

Ik moet doorlinken van kritieke verzoeken voorkomen; ik heb 6 ketens gevonden: Ik moet het aantal doorverwijzingen naar kritieke bronnen minimaliseren om de laadtijd te versnellen en de prestaties te verbeteren

Usertest

Ik heb een usertest gedaan over de pdf-download button. Ik wilde erachter komen of het duidelijk was dat deze functie bestaat. David wilde mij helpen en is dus mijn user.

Ik heb een scenario bedacht voor mijn user om uit te zoeken:

• Ik ben op de Visual thinking homepage en ik wil graag de tekenmethode 'diversiteitscirkel' in pdf vorm hebben.

Stap 1

David vond al heel snel de navigatie bovenaan de pagina met de route: tekenmethodes. Hier klikte hij op.

Stap 2

• Nu is David op de tekenmethodes pagina. Hij ziet ons filtersysteem en vraagt zich af of hij nog met een zoekbalk de 'diversiteitscirkel' methode kan vinden.

• Hij scrolt door en ziet de diversiteitscirkel. Hier klikt hij op.

Stap 3

David ziet de download button wel, maar hij vraagt zich af wat hij hier dan zou gaan downloaden, want dat staat er niet. Toch klikt hij erop en hij download hiermee de PDF.

Tips

• Ik kon diversiteitscirkel moeilijk terug vinden in de 'filter op categorie' component.
• In het diversiteitscirkel overzicht was het voor mij niet duidelijk wat de button 'download' deed, wat download ik?

Tops

• De pagina waar tekenmethodes staan is makkelijk te vinden in de navigatie.

Conclusie

Ik ga de download button naam veranderen naar 'Download pdf'. Dit maakt het duidelijker voor de gebruiker.