Vanuit al het voorgaande werk binnen het ontwerprapport kunnen mock-ups worden opgesteld. Binnen deze mock-ups wordt het concept volledig uitgerust met visuele elementen en worden alle schermontwerpen tot stand gebracht.
Deze schermontwerpen vormen samen, na toevoeging van interactie, het eerste Hi-Fi prototype, die binnen het usability onderzoek onderworpen kan worden aan de eerste tests. De toevoeging van deze interactie wordt besproken in het volgende hoofdstuk, Hi-Fi prototype.
7.1 Landingspagina
De landingspagina is hierbij voorzien van een sprekende afbeelding, een introductie tot de minor (lorem ipsum), het logo van De Haagse Hogeschool en de drie buttons die door navigeren naar de rest van de website. Zoals is besproken binnen de styleguide worden deze drie buttons voorzien van hovers ter verduidelijking van de interactie die mogelijk is.
De achtergrond is later mogelijk te vervangen door een video of een ander sprekend beeld. De gebruikte afbeelding (Taz B. K., 2017) is rechten vrij verkregen en mag daarbij in de toekomst online gebruikt worden, zonder dat daar enige consequenties aan vast zitten.
62 | P a g e
7.2 Minor Info
De minor info pagina is voorzien van de 6 verschillende modules die middels de interne navigatie bereikbaar zijn, maar ook door naar beneden te scrollen. Daarnaast is er onderaan de pagina een extra button gekomen om direct terug boven aan de pagina te komen. Op deze manier hoeft de gebruiker niet terug te scrollen of via de navigatiebalk terug te gaan. Ook is onderaan de pagina een footer toegevoegd, waarmee het ook mogelijk is om naar de contactpagina te navigeren.
De top-navigatie is voorzien van een grijze kleur op het moment dat de gebruiker op de desbetreffende pagina aanwezig is, dit om feedback vanuit het systeem te geven waar de gebruiker zich precies bevindt. Voor deze pagina is dezelfde banner gebruikt als de achtergrond op de landingspagina. Op deze manier behoudt ik dezelfde toon, als bij de initiatie van de gebruiker. Het is daarbij belangrijk dat de thumbnails van de video’s die per module gegeven worden deze toon verder uitdragen en hier qua kwaliteit geen verschil in is te zien. Op deze manier breekt de website niet verder op en kan de consistentie in beeld
materiaal behouden worden.
Figuur 8: Minor Info
7.3 Campus Info
Voor de campus informatie pagina geldt ook dat de gebruikte afbeeldingen in kwaliteit gelijk aan elkaar moeten zijn. Dit geldt voor de zes items, de banner en de mogelijke thumbnails van de video’s. De banner die hierbij is gebruikt komt niet van een rechten vrije bron (Mecanoo, 2017) en moet daarom, op het moment van online gaan, worden vervangen.
63 | P a g e
7.4 Practical Information
Vanuit de wireframes is de pagina voor de praktische informatie aangepast. In eerste instantie was de opzet van deze pagina vergelijkbaar met die van de Campus Info. Deze reden van deze vormgeving was, omdat de onderwerpen van de Campus Info middels beeld sterk zijn uit te drukken en daarmee de gebruikers direct van informatie voorzien. Doordat de content binnen de praktische informatie voornamelijk formeel en zakelijke inhoud heeft is de vormgeving van deze pagina verandert naar een one-page, met een interne navigatie vergelijkbaar met de Minor Info pagina.
Op deze manier kan de gebruiker middels de navigatie direct de content zien en het gene bereiken waar hij/zij naar op zoek is. Omdat de pagina nu een one-page is geworden, vindt men onderaan de pagina een button om direct terug, bovenaan de pagina te komen.
Ook hier is de banner voorzien van een rechten vrije afbeelding die gebruikt kan worden in een latere online versie (G. Carstens-Pieters, 2017).
Figuur 10: Practical Information
7.5 Student experiences
De pagina’s gericht op de ervaringen van de studenten zijn 1-op-1 vertaald vanuit de wireframes op de toevoeging van de back-up button na. Mochten de pagina’s langer worden is het met deze button mogelijk voor de gebruiker om direct weer bovenaan de pagina te komen.
De ‘READ MORE’ button is voorzien van hetzelfde font als de navigatie om te benadrukken dat dit leidt naar een nieuwe pagina.
De banner, gebruikt binnen deze pagina’s, is rechten vrij verkregen en kan gebruikt worden in de online versie (Rawpixel, 2017).
De overige afbeeldingen die binnen deze mock-ups zijn gebruikt zijn placeholders voor toekomstige blogs. Overigens geven deze afbeeldingen wel de standaard aan betreft kwaliteit van de
afbeeldingen die gebruikt kunnen worden. Het is hierbij van belang dat deze op eenzelfde lijn staan als de banners en andere visuele elementen om de kwaliteit van de website te waarborgen.
64 | P a g e
7.6 Apply & Contact
Binnen de navigatie hebben de inschrijving en de contactgegevens van plaats gewisseld. Dit omdat de natuurlijke weg van de gebruiker zichzelf naar het laatste item binnen de navigatie leidt op het moment dat contactgegevens gezocht worden en verward kan raken als hier Apply staat in plaats van Contact (Anthony – UX Movement, 2011).
Daarnaast zijn beide mock-ups voorzien van een pop-up venster wat verschijnt op het moment dat de gebruiker het formulier heeft ingevuld en verzonden. Bij de inschrijving wordt aangegeven dat de inschrijving is doorgekomen en dat het altijd nog mogelijk is om contact op te nemen (met daarbij een link naar de contactpagina) en de pop-up van de contactpagina geeft aan dat er een bevestiging van het bericht via de mail is toegestuurd.
De contactpagina heeft naast het formulier en de contactgegevens extra content gekregen. Zowel de adresgegevens als een kaart zijn toegevoegd waarmee de gebruiker kan zien waar de campus
precies is gelegen (ten opzichte van de stad). Deze kaart is overigens in volledig scherm te bekijken waar vanuit Google Maps interactie mee mogelijk is (plannen van reizen en dergelijken). Vanuit De Haagse Hogeschool zijn onder de kaart twee extra links toegevoegd, die meer informatie bieden betreffende de bereikbaarheid van de campus.
65 | P a g e