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:
HOMEPAGE (Michelle) 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.
FEEDBACK (Trisjan)
- 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.
