5. testen
heb op de lijst pagina (de pagina met de meeste content/code) een performance test gedaan uit mijn resultaten heb ik bijna een perfecte scoren van 97%
image formaat
Als eerst heb ik alle images in een picture element gedaan. Daarin zitten 2 source elements die de house images ophaald vanuit directus en ze overzet naar avif of webp formaat als dat support word door de browser van de gebruiker. Zo niet dan wordt het orginele formaat weergeven. (avif en webp zijn image formaten van browsers die meer geoptimaliseerd zijn voor het web dan png's en jpg's)
<picture>
<source srcset="https://fdnd-agency.directus.app/assets/<%= house.f_houses_id.poster_image.id %>?format=avif" type="image/avif">
<source srcset="https://fdnd-agency.directus.app/assets/<%= house.f_houses_id.poster_image.id %>?format=webp" type="image/webp">
<img class="image-size" src="https://fdnd-agency.directus.app/assets/<%= house.f_houses_id.poster_image.id %>" loading="lazy" width="<%= house.f_houses_id.poster_image.width %>" height="<%= house.f_houses_id.poster_image.height %>" alt="<%= house.f_houses_id.street %> <%= house.f_houses_id.house_nr %> afbeelding">
</picture>layout shift
in plaats van dat ik tussen de width en height attribuut zelf een waarde inmaak haal ik de vaste breedte en hoogte op vanuit directus.
Met een vaste width en height zorg ik er ook voor dat er geen layoutshift plaats vind. In makkelijke worden: het element waar de image in komt is aal op juiste grootte voordat de image in ge rendert is. Of te wel de plek van de image is alvast gereserveerd wanneer de pagina helemaal aan het renderen is.
width="<%= house.f_houses_id.poster_image.width %>" height="<%= house.f_houses_id.poster_image.height %>"
1 taken die ik wil testen
-
Als user wil ik vanuit de home pagina naar mijn favoriete lijst gaan Zodat ik vervolgens een overzicht heb van alle lijsten heb
-
Als user wil ik in zo'n lijst bij een huis een star rating achterlaten en in het text veld wat andere punten schrijven over wat ik van het huis vind
2 scenarios
-
Je bent naar een tijd weer terug gekomen bij de funda pagina. Je wilt vanuit de start pagina opzoek gaan naar de pagina waar je je lijsten hebt aangemaakt met daarin je favoriete huizen die je eraan hebt toegevoegd.
-
Je zit in 1 van die lijsten en je ziet een huis die je graag wil beoordelen en het versturen naar Funda.
3 test met andere student
student Tom:
Wat zie je?
Ik zie dat ik begin bij de welkom pagina van funda.
1e scenario: styling ziet er goed uit maar het is niet helemaal duidelijk waar ik naartoe wil.
Hoe kom je bij de huizen die in zo'n lijst staan?
antwoord: hover animation is goed maar maak de scaling iets kleiner wanneer je hovert.
Maar is het duidelijk waar je naartoe moet?
antwoord: jazeker.
Wat vind je van de lijst met huizen?
antwoord: Ziet er goed uit. Misschien de rate button iets groter maken waardoor hij wat opvallender word.
2e scenario: antwoord van Tom. Hou alles in het Nederlands.
Hoe vind je de beoordeling eruit zien?
antwoord: qua functie ziet het er goed uit (vergeet de cursor pointer niet). Misschien een beetje meer padding tussen de categorieën waar je op kan beoordelen. Voor de rest is alles goed.
4 bespreek de testresultaten
student Tom: Algemeen: styling ziet er netjes en verzorgd uit met hier en daar wat kleine changes(zoals de grote van de rate button). Als het gaat om functies heb je perfect gedaan. Dus goed gedaan. Volgende keer iets beter je 1e scenario uitleggen. Er staat lijsten. Als je favoriete lijsten erin had gezet was het veel duidelijker waar ik naartoe moest.
Hier zijn de dingen die ik uiteindelijk heb toegepast
- alles in het nederlands: volgens Tom vond hij het apart dat de ratings button in het engels stond dus ik heb dat veranderd naar het nederlands
<summary>Beoordeel huis</summary>- kleinere hover scaling: Tom vond het niet mooi dat bij de lijsten als je op 1 lijst hovert dat hij zo groot werd dat hij de andere lijsten aanraakte, dus heb ik de scaling bij de hover veranderd.
.wrapper-lists ul li a:hover {
transform: scale(1.1);
}Om ervoor tezorgen dat ik weet of alles werkt heb ik een kleine test gedaan waarbij ik js en css uitzet om te kijken hoe mijn website er dan uitziet
resultaat
zonder javascript:
Zonder javascript ziet alles er hetzelfde uit. Dingen wat nu weg is is bijvoorbeeld de thema knop, omdat hij toch niks meer doet. Voor mobile had ik ook iets gemaakt dat alles in de burger menu in de nav blijft maar dan in een grid. Het ziet er niet heel mooi uit maar het zorgt er wel voor dat mobile users nog steeds overal kan komen. (Ik weet niet zeker of je op alle mobiles ervoor kan kiezen om js uit te zetten).
en zonder css
Laatst had ik feebac gekregen om de rate button aantepassen naar details. Zonder css en js staat hij daarmaar zonder enkele functies. Details doet hetzelfde maar die werkt wel zonder js. Buiten dat werkt de post gewoon en de star buttons zijn nu gewoon radio buttons.
