WEEK 02
Datum: 19-02-2024 tot 29-02-2024
📅 19-02-2024
- Wat ging goed:
Uitleg gekregen over knelpunten huidige webapplicatie(WIXX). De door mij geschreven user stories besproken. De user stories zijn duidelijk. Afspraak gemaakt voor volgende week maandag 1e design voorstel homepage
📅 19-02-2024
- Feedback:
Opdrachtgever gaf de volgende feedback:
Feedback: Bedoel je met app op pagina 4, ook de website? We willen wel een app uiteindelijk maar eerst dat de website goed loopt.
Reactie: Een website presenteert voornamelijk informatie, terwijl een webapplicatie interactieve diensten en functionaliteiten biedt.
Feedback: Denk wel dat t belangrijk is bij opdracht omschrijving om goed onderscheid te maken tussen het reseveringsysteem wat conflicten oplost voor de cocktail walk kaartjes (dus het verkoop van de hele tour, pre-paid drinks bij meerdere bars) zodat alle drie bars een melding krijgen en het resevering systeem voor alleen het boeken van 1 drankje bij 1 bar ( het los verkoop van pre-paid drinks bij 1 bar) Dit was nog alleen beetje onduidelijk vanuit de tekst
Feedback verwerkt:
- WOGO wil een oplossing voor het reserveringssysteem voor losse tickets bij een specifieke bar, gericht op individuele aankopen van prepaid drankjes.
📅 20-02-2024
Voor het maken van de planning maak ik gebruik van het project board, waarbij ik eerst epics schrijf, vorvolgens naar user stories en taken. Nadat de taken zijn geprioriteerd met de MOSCOW-methode, pas ik planning poker toe om beter inzicht te krijgen in de complexiteit van elke taak, vervolgens de labels "sprints" toegevoegd aan taken, om duidelijk te zien welke taak bij de sprint hoort.
Elke sprint doe ik een sprint review en ga ik de taken van de volgende sprint doornemen met de opdrachtgever, zodat de opdrachtgever up-to-date blijft.
Als ontwerper binnen dit project, ga ik gebruik maken van de ontwerpmethodes: Design Thinking en Atomic Design om een website te creëren die niet alleen gebruiksvriendelijk is, maar ook functioneel en visueel aantrekkelijk.
📅 26-02-2024
Om meer inzicht te krijgen in alle elementen van de oude WOGO-website heb ik een interface-audit gedaan. Dit hielp mij bij een duidelijk beeld krijgen van wat er momenteel is en herbruikbare elementen te identificeren, zoals de knoppen het formulier en de navigatie balk. Er vallen mij een aantal dingen op zoals de knoppen die niet consistent zijn en de bepaalde pagina een overload aan informatie geven. Bijvoorbeeld dat er op 1 pagina 5x book knoppen staan met allemaal dezelfde functie.
📅 27-02-2024
De Content inventory geeft mij inzicht over alle digitale inhoud die momenteel wordt gebruikt. Het doel van een contentinventarisatie is niet om te beslissen welke content belangrijk of onbelangrijk is, maar om de content die al beschikbaar is te documenteren.
📅 27-02-2024
Om de website en structuur beter te begrijpen(inhoudshiërachie) en alle pagina's beter inzichtelijk te krijgen heb ik een sitemap gemaakt.In de sitemap zie je gelaagde blokken die zijn verbonden door de pijltjes.
📅 27-02-2024
Om dit project te laten slagen, heb ik mij verdiept in onderwerpen die ermee te maken hebben. We praten over drie belangrijke dingen: hoe het eruitziet (UI-ontwerp), hoe het voelt (UX-ontwerp) en hoe we het bouwen (Front-end ontwikkeling). Voordat we aan de slag gaan, is het handig om te snappen wat precies het verschil is tussen deze drie en hoe ze samenwerken.
📅 27-02-2024
Het project is opgedeeld in 3 verschillende fasen: UX, UI en Front-end. In de UX-fase gebruiken we de Design Thinking-methode. De methode wordt gebruikt om de problemen van de gebruiker te begrijpen en prototypes te ontwikkelen die deze problemen oplossen op basis van de resultaten van het gebruiksscenario en de testresultaten van de prototypes.
UX-ontwerp in 3 stappen:
- Eerst ontdekken we gebruikersproblemen met WOGO door een "User Flow" te maken.
- Daarna ontwikkelen we een prototype gebaseerd op wat we vinden.
- Tenslotte testen we het prototype op gebruiksvriendelijkheid met observaties, enquêtes en bruikbaarheidstests.
Onderstaan heb ik een user flow test gemaakt van de huidige WOGO-website.
📅 28-02-2024
Huidige website gebouwd met Wix. Cocktail drinkers ervaren vertraging, lange laadtijd bij het maken van reserveringen. Dit heeft invloed op het koopgedrag. Daarnaast het handmatig annuleren van een boekingen van klanten
Tijdens de analyse heb ik gebruik gemaakt van PageSpeed Insights om de performance WOGO te testen.
3.2 Hoeveel invloed heeft het gebruik van Wix-website op de presentatie en snelheid van een webpagina. Bied custom-code meer mogelijkheden?
De WOGO webpagina laadt langzaam. De grootste elementen (afbeeldingen of video's) zijn pas na 18.3 seconden op mobiel en 1.5 seconden op desktop zichtbaar, ver boven ideale 2.5s. Dit kan komen door de grote hoeveelheid JavaScript (1.4 MB) en de totale omvang van de pagina (7.487 KiB). Om de laadtijd te verkorten, kan WOGO tekstcompressie gebruiken en de hoeveelheid JavaScript en de totale omvang van de pagina verkleinen
Meet hoe snel de webpagina laadt. Het meet hoe lang het duurt voordat het grootste element op de pagina (zoals een afbeelding of video) zichtbaar wordt op het scherm. Een LCP score van onder de 2.5 wordt als goed beschouwd.
Problemen:
- Het duurt op mobile 18.3 en op dekstop 1.5s voordat de het grootste element op de pagina verschijnt.
- WOGO webpagina gebruikt momenteel geen tekstcompressie (gzip, deflate of brotli) voor tekstbronnen. Dit resulteert in een grotere downloadgrootte (164.6 KiB)voor deze bestanden, wat de laadtijd van de pagina kan vertragen.
- WOGO webpagina Gebruikt ongeveer 1.4 MB aan JavaScript. Dit is een aanzienlijke hoeveelheid code die de laadtijd van de pagina kan vertragen. De norm aan is totaal aan HTML, CSS en JavaScript minder dan 1.5MB en minder dan 500KB aan JavaScript.
- WOGO webpagina heeft een grote totale omvang van 7,487 KiB(network payload) Dit betekent dat er een groot aantal bestanden gedownload moet worden(zorgt voor lange laadijd)Streef naar een totale network payloadgrootte van minder dan 1 MiB (1.048 KiB).
Verbeteringen:
- Dit kan verbeterd worden door het optimaliseren van webfont-formaat, een betere html-structuur. Preloading de laadtijd van het lettertype versneller. Als de koptekst onder de vouw (niet direct zichtbaar) staat, kan lazy loading de laadtijd van de bovenliggende content prioriteren.
- Implementeer tekstcompressie op de server om de grootte van tekstbronnen te verkleinen.
- Verwijder ongebruikte JavaScript code, uitstellen van niet direct benodige scripts, maak de bundel grote kleiner, Verwijder onnodige code uit custom code, verminder externe bibliotheken
- De externe van de code "chat-sdk.chunk.min.js" moet geoptimaliseerd worden
Kansen:
Bij het herontwikkelen van een Wix-website naar een frameworks kan helpen bij het beperken van de hoeveelheid third-party(plugin) code die nodig is. Dit komt doordat frameworks vaak ingebouwde functies bevatten die de functionaliteit van third-party libraries. Ook bundelen ze vaak geoptimaliseerde versies van populaire externe bibliotheken. Dit kan de laadtijd van de pagina verkorten.
De WOGO laat de eerste content op de website laat verschijnen door ontbrekende tekstcompressie (146.9 KiB), overmatig JavaScript-gebruik (1.4 MB), FOUC door vertraagde webfonts, en 51 KiB aan ongebruikte CSS, wat de laadtijd negatief beïnvloedt.
Wanneer de CLS slecht is, zorgt dit voor een onverwachtse beweging op de website, dus als je bijvoorbeeld ergens op klikt maar de muis wordt verplaatst of reageert niet. is een meting die aangeeft hoeveel de pagina onverwacht beweegt tijdens het laden. Dus hoe hoger de CLS-score, hoe frustrerender de gebruikerservaring kan zijn.
Waarom CLS goed
De CLS moet ten minsten 0.1.s zijn of minder, de WOGO heeft een score van 0,015(mobile) en op desktop 0.045, dit laat een zeer kleine visuele verschuiving aan. Gebruikers zullen geen of minimale waarneembare verschuivingen ervaren, wat leidt tot een betere gebruikerservaring.
meet hoe snel de eerste inhoud van een webpagina verschijnt. Dit kan bijvoorbeeld tekst zijn, een afbeelding of een ander element. Een goede FCP score betekent dat gebruikers snel iets zien en dat de pagina begint te laden.Een goede FCP score is onder de 2-3 seconden.
Problemen:
- WOGO webpagina gebruikt momenteel geen tekstcompressie (gzip, deflate of brotli) voor tekstbronnen. Dit resulteert in een grotere downloadgrootte(van 146.9 KiB) voor deze bestanden, wat de laadtijd van de pagina kan vertragen.
- WOGO webpagina gebruikt ongeveer 1.4 MB aan JavaScript. Dit is een aanzienlijke hoeveelheid code die de laadtijd van de pagina kan vertragen. De norm aan is totaal aan HTML, CSS en JavaScript minder dan 1.5MB en minder dan 500KB aan JavaScript.
- WOGO webpagina webpagina gebruikt webfonts die pas zichtbaar worden nadat ze geladen zijn. Dit kan leiden tot een Fout In Content Layout (FOUC), waarbij de tekst op de pagina tijdelijk onleesbaar is.
- WOGO webpagina bevat 51 KiB aan ongebruikte CSS. Dit leidt tot onnodig grote bestandsdownloads en kan de laadtijd van de website vertragen.
Verbeteringen:
-
Gebruik van
font-display: De CSS-eigenschapfont-displaykan worden gebruikt om te specificeren hoe de tekst tijdens het laden van de webfont wordt weergegeven. -
Opties voor
font-display:-
swap: De browser toont een fallback font totdat de webfont is geladen. -
fallback: De browser toont direct een fallback font, zonder te wachten op de webfont. -
optional: De browser laadt de webfont in de achtergrond en vervangt de fallback font zodra deze beschikbaar is.
-
- Verwijder ongebruikte CSS-regels: Verwijder CSS-regels die niet worden toegepast op elementen op de pagina.
-
Uitstellen van niet-kritieke CSS: Gebruik
deferofmedia queriesom het laden van CSS uit te stellen dat niet nodig is voor het renderen van de "above-the-fold" content (het gedeelte van de pagina dat direct zichtbaar is zonder te scrollen).
meet de algehele laadsnelheid van een webpagina meet. In tegenstelling (FCP) en (LCP) die enkel de snelheid meten van het eerste of grootste inhoudselement, meet SI hoe snel de hele pagina zichtbaar wordt voor de gebruiker.
Probleem:
- WOGO heeft een Speed index score van 13.8s(mobile) en 2.0s (desktop). Een goede SI score is afhankelijk van de grootte van de pagina en de complexiteit ervan, maar over het algemeen wordt een score onder de 4-5 seconden beschouwd als goed.
meet hoe lang een webpagina onbruikbaar is voor de gebruiker vanwege het laden van de pagina. Dit kan gebeuren wanneer scripts en andere elementen op de pagina de browser blokkeren en de gebruiker niet in staat stellen om te interageren met de pagina totdat deze volledig is geladen.
Probleem:
- WOGO heeft een Total blocking Time score van 2,589ms (mobile) en 250ms(desktop). Een goede TBT score is afhankelijk van de grootte en complexiteit van de pagina, maar over het algemeen wordt een score onder de 300 milliseconden als goed beschouwd.
Link Figma voor presentatie WOGO Performance-audit
Het ontwikkelen van de WOGO-webpagina in een custom-code webpagina de performance aanzienlijke verbeteren, waaronder het verminderen van bestandgrroottes, onnodige gebruikte code te verminderen, onnodige functies verwijderen, beheren van webfonts. Bij het kiezen van een framework is het mogelijk op geoptimaliseerde versies van library's te integreren, waardoor algehele laadsnelheid verbeterd.
Kortom, het gebruik van custom-code-programmeertalen biedt meer flexibiliteit en controle over de optimalisaties die kunnen worden toegepast.
Bezoekers piekmomenten
Het hoogste piekmoment van de afgelopen 7 zijn er 28 bezoekers vastgesteld.Het hoogste piekmoment van de afgelopen 7 zijn er 28 bezoekers vastgesteld. In het algemeen kan Wix websites met tot 50.000 maandelijkse bezoekers zonder problemen aan. Vanuit de performance test blijkt dat het aantal plugin voor de slechte performance zorgt.