Vanuit de conceptbeschrijving en sitemap krijgt de website binnen dit hoofdstuk vorm vanuit de schetsen en daarbij de vervolgstap in de wireframes. De schetsen geven voor mij een globale representatie van hoe ik de website wil vormgeven. Deze worden daarbij direct vertaald in de wireframes die de plaatsing van elementen en daarmee het skelet van de website weergeven. De wireframes zijn daarbij ook gebruikt om de opdrachtgever op de hoogte te stellen van de conceptvorming en de interactie van de website, door de wireframes direct om te zetten in een interactief (lo-fi) prototype.
4.1 Landingspagina
De landingspagina van de website moet een visueel sterke pagina worden die direct de aandacht van de gebruiker trekt. Dit wil ik bereiken door de achtergrond op de pagina te voorzien van een video of sprekende afbeelding. Op deze manier heeft de gebruiker direct een beeld van de minor, zonder eerst tekst te hoeven lezen. Daarnaast wordt de pagina voorzien van een korte wervende introductie tekst met een aantal bulletpoints met belangrijke zaken voor de minor om naast de afbeelding/video formeel (kort) een idee te geven waar de minor over gaat. Vanuit deze pagina is het mogelijk om, zoals besproken binnen de sitemap, door te navigeren naar meer informatie over de minor, de inschrijving en de contactpagina.
55 | P a g e
4.2 Minor Info
De pagina gericht op de minor informatie beschikt over een sterke visuele banner om evenals de landingspagina de gebruiker direct visueel aan te spreken. Binnen deze banner valt een kleine alinea tekst ter introductie van de pagina, gevolgd door een aansluitende alinea onder de module navigatie (dit geldt verder voor elke andere pagina binnen de website).
De pagina bevat twee navigatiebalken. De top-navigatie (verder ook aanwezig op de overige pagina’s) is de externe navigatie die de zes verschillende items binnen de website beslaat. Deze navigatiebalk is opgedeeld in twee segmenten: learning links en action links (Anthony - UX
Movement, 2011). De eerste vier items binnen de navigatie beslaan de learning links. Dit zijn items waarmee de gebruiker informatie kan ophalen. Op het moment dat de gebruiker genoeg kennis heeft van de website heeft kan hij overgaan op actie. Dit is wanneer de action links een rol gaan spelen. Contact & Apply zijn hierbij de action links binnen de navigatie, waarbij de gebruiker zich kan inschrijven of contact op kan nemen.
De module-navigatie is de interne navigatie voor de one-page die zicht richt op de verschillende modules binnen deze pagina. Beide navigatiebalken gaan mee met de website op het moment dat de gebruiker verder scrolt, dit ter efficiëntie, zodat het ten alle tijden mogelijk is om naar een ander gedeelte van de website te kunnen.
Elke module wordt toegelicht door middel van tekst en een video. De tekst beschrijft kort waar de minor over gaat, waarbij de video op wervende wijze deze tekst ondersteund.
56 | P a g e
4.3 Campus Info & Practical Information
Zowel de pagina over de campus, als de pagina met praktische informatie hebben een meer visuele vormgeving dan de overige pagina’s. De items die binnen de pagina aan de gebruiker worden getoond worden binnen deze pagina niet via een navigatiebalk weergegeven, maar door middel van verschillende afbeeldingen. Op deze manier hoeft de gebruiker niet een navigatiebalk te lezen om binnen de pagina te kunnen navigeren.
Als de gebruiker op een item klikt opent zich een venster waarin dit item met de bijbehorende content wordt besproken. Daarbij is er ook de mogelijkheid om een items toegelicht te krijgen met een video. Ook hierbij met het oog op de wervende toon van de website. Dit venster is te sluiten met de knop rechts bovenaan, waarna de gebruiker weer terug komt op de pagina daarvoor (Campus Info of Practical Information).
Figuur 3: Schetsen & Wireframes – Campus Info
57 | P a g e
4.4 Student experiences
De pagina Student Experiences is de uitbuiting op de persuasive elementen sociale bewijskracht & sympathie (Onderzoeksrapport, Hoofdstuk 4 – Deskresearch Persuasive Design). Middels deze pagina(‘s) zorg ik ervoor dat de gebruiker in ziet hoe andere studenten de minor en het
studentenleven hebben beleefd en daarmee de positieve verhalen naar voren komen. Met deze pagina kom ik ook mogelijke zorgen van de gebruiker tegemoet en komen praktijkvoorbeelden naar voren waar de gebruiker in de toekomst iets aan kan hebben.
De eerste pagina geeft een overzicht van de verschillende “blogs” die aanwezig zijn. Middels een korte slagzin(quote) en een foto van de schrijver wordt deze blog interessant gemaakt voor de gebruiker en is het mogelijk om via “Read more”, het volledige stuk te lezen.
Op de blog zelf wordt middels breadcrumbs boven de titel aangegeven dat de gebruiker één
navigatieniveau dieper in de website is gegaan en is het middels deze breadcrumbs ook mogelijk om terug te navigeren. Op de pagina zelf kan via tekst, foto’s en videomateriaal de ervaring van een student vertaald worden.
Figuur 4: Schetsen & Wireframes – Student experiences
58 | P a g e
4.5 Contact & Apply
Zowel de inschrijving als het opnemen van contact verloopt via een formulier. Naast dit formulier bevat de pagina omtrent inschrijving een overzicht met essentiele informatie die belangrijk zijn voor de inschrijving en de contactpagina een overzicht met telefoonnummers.
Nadat de gebruiker het formulier ingevuld heeft en “Send” heeft gedrukt verschijnt er een pop-up dat het is verzonden en er een bevestiging is gestuurd naar het opgegeven email.
59 | P a g e