Mockups realiseren

De mockups worden gebruikt om de interface definitief te ontwerpen en vast te leggen. Het doel van de mockups is dus om de uiteindelijke interface te ontwerpen, zodat deze in de volgende ontwerpfase als blauwdruk gebruikt kunnen worden om het prototype te programmeren. Alle interface elementen worden definitief vastgelegd.

Om de functionaliteiten een duidelijke betekenis te geven, heb ik eerst iconen ontworpen. Ik moest voor de volgende functionaliteiten een icoon ontwerpen:

- Het menu

- De ‘volgende’ knop - De ‘terug’ knop

- De ‘terug-naar-boven’ knop

Voor het menu heb ik het ‘hamburger’ icoon gekozen. Deze keuze heb ik gemaakt omdat Facebook hier ook gebruik van maakt, en uit de doelgroep analyse blijkt (Analyserapport p.15, externe bijlage B) dat dit één van de meest gebruikte smartphone applicaties is. Daarnaast weet ik uit eigen ervaring dat erg veel websites en mobiele applicaties dit icoon hanteren voor het menu.

Voor de ‘volgende’ en ‘terug’ knop heb ik simpele pijltjes ontworpen die naar rechts en links wijzen, zoals bij erg veel apparaten wordt gehanteerd, bijvoorbeeld bij een afstandsbediening. Om de ‘terug- naar-boven’ knop te ontwerpen heb ik eerst gezocht via google op ‘back to top – icon’. Hieruit kwam vaak naar voren dat het een naar boven wijzend pijltje is met een streepje erboven. Om deze reden heb ik voor dit ontwerp gekozen.

Links: Afbeelding 8.1.2 – ‘Rule of thumb’ Links en rechts: Afbeelding 8.1.1 – ‘Mockups met afmetingen en uitleg’

Onder: Afbeelding 8.1.3 – ‘Interface Amazon Kindle’

Als eerste heb ik twee mockups gemaakt waarin de systeemeisen van de functionaliteiten zijn verwerkt en beschreven (zie afbeelding 8.1.1). Dit heb ik gedaan zodat ik bij het realiseren van het prototype direct overzichtelijk heb hoe groot de verschillende elementen moeten worden en welke

functionaliteiten zij bevatten.

Het rode gebied geeft het effectieve bereik van de functionaliteit aan. Dit is, zoals Apple omschrijft en in de systeemeisen is opgenomen, 44px. Daarnaast is te zien dat er inderdaad een marge van 5px wordt gehanteerd, het lettertype een grootte heeft van 16px en de regelafstand de eigenschap heeft van een lettertype met 20px. In de tweede mockup is te zien wat de functionaliteiten precies inhouden en aan welke voorwaarden deze voldoen. Wat ik nieuw heb toegevoegd aan de interface zijn de drie knoppen aan de onderkant van het scherm.

Hiermee kan de gebruiker naar het vorige artikel, terug naar de bovenkant

van het artikel of door naar het volgende artikel. Ik heb deze balk ontworpen omdat ik graag één simpele en duidelijke navigatiemogelijkheid wilde bieden voor verschillende apparaten. Omdat de functionaliteiten bij zowel iOS als Android toestellen veel van elkaar verschillen, is het zaak om consistente functionaliteiten in de website te hanteren. Deze balk is zichtbaar wanneer het artikel wordt

geopend, en verdwijnt na drie seconden wanneer de gebruiker stopt met scrollen. Indien de gebruiker opnieuw gaat scrollen, komt de balk weer tevoorschijn, om vervolgens na het stoppen van het scrollen weer na drie seconden te verdwijnen. Ik heb voor deze grote verdwijntruc gekozen omdat ik zo de beperkte ruimte van een smartphone volledig kan optimaliseren. Ik heb deze functionaliteit gebaseerd op de interface van e-readers. De Amazon Kindle (zie afbeelding 8.1.3) heeft voor hun eigen interface dezelfde

functionaliteit.

Wanneer de gebruiker de tekst rustig wil lezen, zal de balk verdwijnen en niet hinderen. De positie van de functionaliteiten heb ik wederom bepaald aan de ‘IOS Human Interface Guidelines’ van Apple. Ik heb als inspiratie hiervoor het zogenaamde ‘Tab-bar’ navigatiemodel gebruikt. De gebruiker heeft de verwachting dat hier ook knoppen geplaatst kunnen zijn. Tevens komt deze positie overeen met de ‘rule of thumb’ (zie afbeelding 8.1.2). De functionaliteiten zijn prima bereikbaar voor de gebruiker en kan deze gemakkelijk en simpel gebruiken.

RESPONSIVE DESIGN NXT: AFSTUDEERVERSLAG

Boven: Afbeelding 8.1.4 – ‘Tablet vs Smartphone ontwerp’

Onder: Afbeelding 8.1.5 – ‘Template met artikelen onder elkaar’’

Nu de functionaliteiten zijn vastgelegd is het ook zaak om de bestaande templates die beschikbaar zijn in NXT, te verbouwen naar een responsive design. Ik heb hier voor elke template gekeken naar een goede indeling om deze geschikt te maken voor mobiel. Een groot voordeel aan deze templates is dat deze zijn opgebouwd uit ‘blokken’. Het is dus geen tijdrovende taak om hier verschillende indelingen mee te maken. Afbeelding 8.1.4 is hier een voorbeeld van.

Sommige templates bestonden uit gezamenlijke afbeeldingen naast elkaar. Dit kan een klein probleem veroorzaken wanneer deze naar een responsive weergave moeten schalen, omdat er dan meerdere afbeeldingen onder elkaar komen te staan zonder tekst. Dit is zeker niet wenselijk wanneer de leesbaarheid groot moet blijven. Daarom heb ik besloten om in geen één template meerdere afbeeldingen onder elkaar te plaatsen of het artikel af te sluiten met een afbeelding (zie afbeelding 8.1.5). Dit vanwege het feit dat een aantal templates begint met een afbeelding. Wanneer de vorige dan ook eindigt met een afbeelding, zullen deze alsnog onder elkaar geplaatst worden. Dit zal de leesbaarheid van de teksten zeker niet vergroten.

Conclusie

In de mockups heb ik dus de high-fidelity wireframes uit de vorige activiteit verder uitgewerkt met de definitieve systeemeisen erin verwerkt. Hierin is naar voren gekomen dat ik, vanwege de verdeeldheid in apparaten welke de gebruikers

gebruiken, een consistente navigatiemogelijkheid heb toegevoegd aan het prototype. Deze is gebaseerd op de functionaliteiten van de Amazon Kindle. De positie is bepaald aan de hand van de IOS Human Interface Guidelines van Apple. Ik heb besloten om de bestaande templates allemaal onder elkaar te plaatsen, zoals ik reeds in de systeemeisen had besloten. Nu de gehele interface en interactie vastgelegd is, kan ik de ontwerpen daadwerkelijk omzetten naar een werkend prototype. Deze activiteit zal ik beschrijven in de volgende paragraaf.