Meesterproef WEEK 04
🕛 06-05-2024 t/m 10-05-2024
| Dag | Taken |
|---|---|
| MAANDAG 06/05 | |
| DINSDAG 07/05 | |
| WOENSDAG 08/05 | |
| DONDERDAG 09/05 | |
| VRIJDAG 10/05 |
📅 10-05-2024
Tijdens de feedbacksessie op onze designs hebben Michelle, Sanne & Trisjan de designs gepresenteerd. Wij hebben uit deze sessie de volgende feedback gekregen:
Tijdens het project heb ik meerdere presentaties gegeven aan opdrachtgevers en 1 design review gedaan met de opdrachtgever. In deze sessies heb ik mijn ontwerpkeuzes toegelicht en onderbouwd. Ik gebruikte Hifi-schetsen om mijn ideeën duidelijk over te brengen.
Tijdens de presentatie onderbouwde ik de keuze voor die hebben geleid tot de verbetering van de linkse naar de rechtse schets:
In de linker schets gebruikt ik een donkerbruine achtergrond met lichtbruine elementen en er is een duidelijke call-to-action knop "Book a walk".Het ontwerp is eenvoudig en leidt de gebruiker niet af. Ik miste visuele elementen die het aantrekkelijk maken voor de kopers en dit is minder uitnodigend. De prijs is opvallend weergegeven, wat de aandacht kan afleiden van de voordelen van de tour.
Zie bron: https://www.thecreativemomentum.com/blog/why-product-images-are-so-important-in-ecommerce
De rechter schets maakt gebruik van een afbeelding als achtergrond, wat een visueel aantrekkelijke en informatieve context biedt. De informatie is uitgebreid met extra details zoals het aantal cocktails inbegrepen in de tour. De call-to-action knop blijft prominent en duidelijk.
De afbeelding helpt bij het creëren van een sfeer en context voor de tour, waardoor gebruikers een beter beeld krijgen van wat ze kunnen verwachten(dit vond de opdrachtgever heel fijn)Verbeterde informatie: Door extra details toe te voegen, zoals het aantal inbegrepen cocktails, wordt de waarde van de tour beter gecommuniceerd(dit wel behouden op advies van opdrachtgever en dit ook fijn is)
De rechter schets maakt gebruik van visuele hiërarchie door de afbeelding te combineren met tekstuele informatie. Dit helpt gebruikers om snel de belangrijkste informatie te vinden.
Beide ontwerpen hebben een duidelijke call-to-action knop, maar de rechter schets maakt gebruik van een contrastkleur en een duidelijke pijl, wat de knop aantrekkelijker en gebruiksvriendelijker maakt.
De verschuiving van de linker naar de rechter schets is een verbetering omdat het gebruik van afbeeldingen en extra informatie bijdraagt aan een visueel aantrekkelijker.
Hier is een onderbouwing van de ontwerpkeuzes die zijn gemaakt van de linker naar de rechter schets hierboven
De linker schets is minimalistisch met een eenvoudige lijst van opties (WALKS, BRANDS, BARS) die de gebruiker naar specifieke secties leiden. Snelle Navigatie: Het ontwerp is gericht op snelle navigatie zonder veel visuele afleiding, wat het gemakkelijk maakt voor gebruikers om snel de gewenste optie te vinden. Focus op Structuur: Het is duidelijk en gestructureerd, wat helpt bij het direct communiceren van de beschikbare opties aan de gebruiker. Rechter Schets
De rechter schets biedt meer gedetailleerde informatie voor elke optie (BRANDS, Bars, Cocktail Walks), inclusief een korte beschrijving en een "Read More" knop.: Er zijn iconen toegevoegd voor elke sectie, wat visuele interesse creëert en helpt bij het sneller herkennen Call-to-Action Knoppen: De "Read More" knoppen zijn duidelijk zichtbaar en bieden een directe call-to-action, wat gebruikers uitnodigt om meer te ontdekken.
Toegankelijkheid en Betrokkenheid: Door meer context en uitleg te bieden, worden gebruikers beter geïnformeerd en meer betrokken bij de inhoud. Dit kan leiden tot een hogere interactie en conversie.
De uitgebreide beschrijvingen kunnen helpen bij het uitleggen van de voordelen en functies van elke sectie, wat vooral nuttig is voor nieuwe gebruikers die mogelijk niet bekend zijn met de diensten.
- Waarom "non-alcoholic cocktails"en geen mocktails?
- Space tussen de tekst (explore the cocktail walks)
- Lineheight aanpassen van de explore the cocktail walks.
- Teksten zijn niet consistent (capitalised, non-capitalised)
- "See all walks" moet logischer er uit zien als button.
- "Book a walk" even groot als de tekst erboven.
- 2de kaart design heeft een grote hero section voor een nietszeggende iamge
- Locatie gebruik maken van iets anders dan een komma zodat duidelijk wordt dat je loopt van de pijp naar de jordaan.
- "How it works" kan je naar kijken PE met feature detection. Dus als iemand zo iets uit heeft staan dan zijn ze al uitgeklapt en niet over elkaar heen gehovered.
- Icons moeten een identieke design hebben (open of gevuld).
- Horizontale scroll voor de how it works kaartjes.
Tijdens mijn presentatie heb ik onderbouwend verteld hoe ik op mijn ontwerp keuze ben gekomen en waarom ik de pagina en kaarten heb gemaakt zoals ze er uit zien.
De pagina zelf
Ik begon met het vertellen over de pagina zelf. Ik trok eerst de vergelijking met de oude ticket overview page. Zoals te zien in de screenshot hieronder heeft de ticketoverview page een video die afspeelt op de achtergrond. Dit zorgt voor veel onrust op het scherm en kan de eindgebruiker afleiden van het doel wat hij/zij wilt bereiken. Daarnaast is er nogmaals een hero met tekst. Deze is onnodig omdat het de slogan is van wogo en dus voegt het niks toe aan de overzichtspagina. Ook was de giftcard button om een giftcard aan te schaffen of te verzilveren onderaan de pagina wat het moeilijk maakt om deze te vinden. Ik heb in mijn nieuw design de hero weg gehaald en de achtergrondvideo ook verwijderd. Daarnaast heb ik de giftcard button hoger op de pagina gezet zodat je direct ziet bij binnenkomst dat je een giftcard kan verzilveren of aanschaffen op de overview page.
De cards
Op de oude pagina merkte ik vooral dat de hierarchie niet klopte en dat de kaart te veel informatie bevatte in een kleine ruimte, daarnaast was het ook niet super leesbaar door de font-weight en het contrast. In het nieuwe design heb ik de kaarten een image gegeven als achtergrond, je zult je vast afvragen: "Hoe is dit leesbaar met lichte images als je witte tekst gebruikt?". Ik heb een donkere overlay gezet op de image zodat de lichte tekst altijd leesbaar is vanwege de donkere overlay. Ook heb ik de randen wat ronder gemaakt ipv een hoekig zoals het oude kaartje. Een rondere rand is moderner en dat geeft de website het gevoel dat het modern is. Ik heb de button "Book now" gevuld met kleur en de "info" button leeg gemaakt. Dit heb ik gedaan omdat je de focus wilt zetten op het boeken van een ticket. Dit noemt men ook wel de "primary action", dit is een theorie die ik geleerd heb bij CMD. Daarnaast heb ik de description weg gelaten in het kaartje, dit heb ik gedaan omdat dit informatie is die je wilt lezen op de detailpage van de ticket. Dit kan je dus zien door op de info button te drukken. Dit maakt de kaart ook wat rustiger.
Ik heb bij het meelopen van CMD mijn design skills verder ontwikkeld. Dit kwam goed van pas bij de ontwerp fase van dit project. Ik heb de volgende principes toegepast bij het desigen:
- Primary action: Dit houdt in dat je de actie die je wilt dat de gebruiker maakt, makkelijker en duidelijk maakt. Bij het card design is de "book now" button de primary action want je wilt als bedrijf zijnde de ticket verkopen. Ik heb dus gebruik gemaakt van een button die opgevuld is ten opzichte van de "info" button die leeg is van binnen. Dit heb ik gedaan zodat de book now button meer opvalt.
- Appearance follows behaviour: Dit houdt in dat je de actie van een knop duidelijk maakt doormiddel van een tekst of image. De tekst van de button van het boeken van de de ticket is kort en krachtig. Het spreekt verteld duidelijk wat er gaat gebeuren als je erop drukt.
- Contrast: Dit houdt in dat de kleur van de voorgrond en achtergrond genoeg verschillen in lichte en donkere kleur. Op de achtergrond van de tickets heb ik een afbeelding gebruikt om dit visueel aantrekkelijk te maken. Maar de tekst moet wel leesbaar blijven. Ik heb dus gebruik gemaakt van een donkere overlay op de afbeelding zodat de tekst altijd leesbaar blijft omdat de kleur van de tekst licht is.
- Consistency matters: Dit houdt in dat er consistentie zit in elementen die het zelfde doen. Alle tickets hebben dezelfde design met dezelfde buttons en fonts (sizes). Dit zorgt voor consistentie aangezien de tickets allemaal hetzelfde doel hebben.
Daarna heb ik nog feedback gekregen van Berat en dat zijn de volgende punten hieronder:
- Border radius consitent houden
- Design button en link onderscheiden (design nalopen hiervan en overal consistent toepassen)
- Aangeven aan kaartje als er 1 is geboekt.
- Consitent houden in strepen
DETAILPAGE (sanne)
- Book now in de hero section
- Nederlands en engelse tekst (?)
- Cruciale info in de hero section (tijdsduur bijvoorbeeld)
Je kunt beginnen met een eenvoudige query om content op te halen. Bijvoorbeeld, om alle blogposts op te halen, zou je de volgende query kunnen gebruiken:
{
blogPostCollection {
items {
title
content
}
}
}
Je kunt een limit parameter toevoegen om het aantal resultaten te beperken en zo de query lichter te maken:
{
blogPostCollection(limit: 10) {
items {
title
content
}
}
}
{
blogPostCollection(where: { sys: { id: "jouw-post-id" } }) {
items {
title
content
}
}
}
Gebruik fragmenten om je queries op te delen en overzichtelijk te maken:
{
blogPostCollection {
items {
...BlogPostFields
}
}
}
fragment BlogPostFields on BlogPost {
title
content
author {
name
}
}
Om te experimenteren met en verfijnen van je queries, gebruik de Contentful GraphQL Playground. Deze tool helpt je bij het testen en valideren van je queries.
Zorg dat er geen concept (draft) is anders krijg je volgende error:
{
"message": "Query execution error. Link from entry '2eY5Xnd7J6V4CCkosCghHo' to entry '5gwv7Zc9RK2mvWdkot5vXw' on field 'components' within type 'ItemCollection' cannot be resolved",
"extensions": {
"contentful": {
"code": "UNRESOLVABLE_LINK",
"documentationUrl": "https://ctfl.io/graphql-api-error-unresolvable-link",
"requestId": "6fccfe11-13a1-43e0-9067-873b61f04828",
"details": {
"type": "ItemCollection",
"field": "components",
"linkType": "Entry",
"linkId": "5gwv7Zc9RK2mvWdkot5vXw",
"linkingEntryId": "2eY5Xnd7J6V4CCkosCghHo"
}
Valideer de Link:
Zorg ervoor dat de entry of asset die je linkt gepubliceerd is en geen concept (draft) is. Controleer of de gelinkte entry of asset de juiste gegevens bevat en niet binnenkort verwijderd of gewijzigd zal worden.
Gebruik van Validatie in Contentful:
Maak gebruik van de validatieopties in Contentful om ervoor te zorgen dat links alleen naar geldige en gepubliceerde entries verwijzen. Voeg validatieregels toe aan je contenttypes om te voorkomen dat er ongeldige links worden opgeslagen.
📅 06-05-2024
Voor het WOGO-project heb ik een carousel gebouwd die goed werkt op alle apparaten. Het was voor mij niet heel duidelijk hoe ik deze nu progressive enhanced en zonder JavaScript moest bouwen. Daarom heb ik een schets gemaakt om mijn gedachten en aanpak inzichtelijk te maken.
Bug indicators: Bij het klikken op een indicator in de carrousel verplaatsen de indicatoren zich niet naar de geselecteerde slide.
Inspo @Zenit @Krijn
disable JavaScript:
- buttons vallen weg
- hint gebruiken voor naar rechts scrollen
Enable JavaScript:
- buttons en indicators zichtbaar
