ReadMe ‐ Anouk - julia-stevens/pleasurable-ui GitHub Wiki
Beschrijving
Home
De home pagina geeft de gebruiker het allereerste beeld van de website, daarom is het belangrijk dat ze een vertrouwd gevoel krijgen op deze pagina en geïnteresseerd zijn of worden om verder te kijken op de website. Op de home pagina staat de belangerijkste informatie over Oncollaboration met linkjes naar de andere pagina's als de gebruiker hier meer over wilt lezen.
Met het ontwerpen en maken van deze pagina heb ik rekening gehouden met de Hierarchy of User Needs. Hieronder leg ik stap voor stap uit hoe ik dit heb toegepast.
1 - Functional (Functioneel)
Ik heb ervoor gezorgd dat alle data op deze pagina ook zichtbaar / bruikbaar is als er alleen HTML wordt ingeladen in de browser. Ook heb ik gewerkt volgens het mobile first principe, dit houd in dat de pagina gebouwd is voor een mobiel scherm. Door de juiste HTML structuur is de pagina ook volledig toegankelijk voor gebruikers die via het toetsenbord navigeren.
Vanaf hier ben ik verder gaan werken aan de styling van de website, om zo verder in de Hierarchy of User Needs driehoek te komen.
2 - Reliable (Betrouwbaar)
De pagina bied snel de content die word ingeladen uit de database, de links naar andere pagina's werken zoals de gebruiker dit zal verwachten. Kortom de pagina zal niet voor gekke verassingen zorgen.
3 - Usable (Gebruiksvriendelijk)
Door het uiterlijk van de pagina in de huisstijl van Oncollaboration krijgt de gebruiker een fijne indruk van de webpagina. In de huisstijl is rekening gehouden met het contrast van de kleuren, zo is de website voor iedere gebruiker goed toegankelijk. Om het voor de gebruikers die met een toestenbord over de pagina navigeren duidelijk te maken waar ze zich bevinden op de pagina is de focus state op de buttons/links opvallender gemaakt.
4 - Pleasurable (Aangenaam)
De hover states op de buttons/links geven de gebruiker het gevoel dat de interface "leeft" en met hen communiceert. Door de speelse styling hiervan maakt dit de pagina meer aantrekkelijk voor de gebruikers.
https://github.com/user-attachments/assets/8fbcc7a0-380f-4317-bedf-b517917bc338
Webinar detail
De webinar detail pagina is de pagina waar de gebruiker komt om een webinar terug te kijken, of om hier informatie over te verkrijgen. Dit kan door beschrijving te lezen, de speakers van de webinar te bekijken of door een vraag in de comments achter te laten.
1 - Functional (Functioneel)
Ik heb ervoor gezorgd dat alle data op deze pagina ook zichtbaar / bruikbaar is als er geen CSS wordt ingeladen in de browser. Ook heb ik gewerkt volgens het mobile first principe, dit houd in dat de pagina gebouwd is voor een mobiel scherm. Door de juiste HTML structuur is de pagina ook volledig toegankelijk voor gebruikers die via het toetsenbord navigeren.
Ook de chat/comment functie is volledig te bedienen via het toetsenbord en blijft werkend zonder dat er styling voor nodig is.
2 - Reliable (Betrouwbaar)
De pagina is ook toegankelijk op grotere schermen. De data wordt efficiënt ingeladen uit de database waardoor dit altijd snel te zien is op de pagina. De chat/comment functie blijft ook werken op verschillende scherm groottes.
3 - Usable (Gebruiksvriendelijk)
De chat/comment functie geeft aan wanneer er een comment wordt verzonden dat de browser aan het laden is en de gebruiker dus niet ongeduldig hoeft te worden. Ook refresht niet de gehele pagina maar alleen het stukje van de comments zodat de gebruiker niet zelf de gehele pagina hoeft te refreshen, maar ook geen last heeft van de pagina die automatisch refresht. FILMPJE LOADING STATE
4 - Pleasurable (Aangenaam)
De basis van de chatfunctie blijft het altijd doen, door de styling die in alle nieuwe browsers wordt ondersteund wordt de gebruikers ervaring voor de gebruiker een stuk fijner.