Vliegtickets.

Details van dit project
Soort case Showcase
Projecttype Web based platform
Duur 18 weken
Mijn rol UX/UI & Interaction Designer
Skills Gebruikerstesten, website analyseren en wireframes maken

Introductie

Naast het project over funda (Visitour), begon ik met een individuele projectcasus over Vliegtickets.nl. De kern van beide platformen is namelijk bijna hetzelfde, namelijk: het zoeken en vinden van een bepaald product. In dit geval een vliegticket.

Ik kreeg dit platform als individuele projectcasus om hier onderzoek naar te doen. Er zijn namelijk interessante ontwerpvraagstukken die bij deze kern en die van funda samenhangen. Hoe lost Vliegtickets.nl bijvoorbeeld het zoeken op? Op welke manier kan de gebruiker dit doen en welke opties heeft hij of zij?

Alle kennis die ik heb vergaard uit mijn eigen onderzoek kan ik weer gebruiken om in het groepsproject mee te nemen. Ik zal je wat meer vertellen over wat voor onderzoek ik heb gedaan, wat ik daarvan heb geleerd en wat ik heb meegenomen naar Visitour.

In de afbeelding bovenaan deze pagina zie je de poster die ik heb gemaakt over mijn onderzoek. Dit is een samenvatting van de dingen waar ik van heb geleerd.

Wireframe van key components

Hoe gaat Vliegtickets.nl om met het filteren van zoekresultaten? Waarop kan je filteren en hoe hebben ze dit vormgegeven? Hier ben ik ingedoken toen ik wireframes ging maken van templates en key components van Vliegtickets.nl. Bij deze wireframes focus ik op hoe er gebruik word gemaakt van bijvoorbeeld grid, visuele hiërarchie en interne en externe consistentie.

Wat ik bijvoorbeeld het meegenomen uit mijn onderzoek van Vliegtickets.nl naar Visitour, is het zoekformulier op de homepagina. Het is namelijk belangrijk dat deze zo compleet mogelijk is en ongewenste resultaten wegfilterd.

In de onderstaande afbeeldingen zie je de wireframes die ik heb gemaakt van de key components van Vliegtickets.nl.

Het zoekformulier

Hierboven zie je het zoekformulier van Vliegtickets.nl. Op de donkerdere kleuren word meer nadruk gelegd, hier word gebruik gemaakt van visuele hiërarchie, omdat de donkere kleuren eerder opvallen dan de wat lichtere.

Focus op een onderdeel

Hierboven zie je nog steeds dezelfde wireframe alleen is er gefocust op het invoerveld van de bestemming. De achtergrond word donkerder zodat de focus op het invoerveld komt te liggen, ook vergroot deze een beetje.

Het verschijnsel van de donkere achtergrond heet 'figure ground relationship', deze donkere achtergrond zorgt er voor dat de gebruiker niet word afgeleid van de hoofdtaak, deze komt als het ware in de spotlights te staan.

Figure ground relationship
'Figure ground relationship' is iets wat we in het prototype van Visitour hebben toegepast (zie onderstaande afbeelding). Dit hebben we gedaan op de pagina waar een gebruiker de route kan afsluiten, hier verschijnt een melding over of de gebruiker zeker weet of hij de route wilt afsluiten. Bij deze melding hebben we gebruik gemaakt van de donkere achtergrond, zodat alleen de melding goed zichtbaar is en de rest in de achtergrond.

Wat heb ik geleerd en neem ik mee naar Visitour?

Het belangrijkste wat ik heb geleerd tijdens mijn individuele onderzoek, is dat het belangrijk is om de gebruiker nuttige en effectieve filters te geven. Hiermee zorg je er namelijk voor dat resultaten zo relevant mogelijk worden, misschien zelfs wel persoonlijk. En dat is wat we met Visitour ook graag willen, een wat persoonlijkere ervaring bieden.

Adobe XD
Wat ik steeds beter onder de knie heb gekregen is Adobe XD. Met deze tool heb ik wireframes gemaakt en voor de groepscasus ook enkele elementen zoals de 'menu bar' in de Hub. Deze is te zien in mijn showcase over Visitour.




Bekijk mijn andere werk  🚀