Ontwerp / Ontwerprapport

HANdig

door Job Poels en John Frederiks

1.0 Doelgroep

Onze doelgroep bestaat uit leerlingen van de middelbare school. Deze doelgroep is een doelgroep die veel kennis heeft van nieuwe media zoals. Facebook, Twitter en Smart-phones. De leeftijd ligt tussen de 15 en 20 afhankelijk van het leerjaar waar ze inzitten en of ze voor de meeloopdag komen of voor de profielkeuzedag. Natuurlijk gaan we er vanuit

dat niet alle leerlingen geïnteresseerd zijn in informatica en communicatie. Dit omdat een profielkeuze dag bedoelt is voor alle leerlin-gen van 3 havo. Daarom proberen we in de app alle kanten van de opleidingen op de ICA te laten zien zodat ook de leerlingen die niet geïnteresseerd zijn nog over gehaald worden.

http://www.rnw.nl/data/files/images/lead/200508%20examen%20middelbare%20school%20scholieren%20ANP-7546978.jpg

1.1 Persona

Naam: Rick VersteegLeeftijd: 16 jaar oudOpleiding: Havo 3de jaarSoort Dag: Profielkeuzedag

Welk profiel denk je te kiezen en waarom ?: Ik heb geen flauw idee welk profiel ik zou moeten kiezen. Ik ben niet al te technisch maar vind het wel altijd een leuk idee dat ik zelfs ik mag ontwerpen of bedenken. Het mooiste is dat het dat ook nog werkelijk word. Het profiel die ik al direct had afgeschreven was N en G. Dit omdat ik totaal geen interesse heb in Bioloog of Arts of iets in die richting. Ook vind ik het leuk om met een computer dingen te ontwerpen zo heb ik ook het programma photoshop al is uitgepro-beerd. En ben er de laatste paar weken aardig mee aan het stoeien geweest. Ik vind het een leuk programma. Daarom denk ik ook dat ik als keuzevak informatica ga kiezen. Jammer genoeg zit hier ook een zeer pittig theorie gedeelte in waar ik dan weer tegenop zie. Toch zoek ik iets waar ik me goed in thuis voel dit hoop ik op deze dag te vinden.

Naam: Chris JolinkLeeftijd: 19 jaar oudOpleiding: MBO niveau 4 laatste jaarSoort Dag: Meeloopdag

Waarom zou je voor de ICA willen kiezen en wat is je voorkeur ?: Ik heb hiervoor de opleiding Multimedia technologie gedaan deze opleiding heb ik met veel moeite doorlopen omdat het ontwerpgedeelte in de opleiding me niet echt goed ligt ik weet wel wat ik allemaal wil maken maar weet dit niet goed tot uiting te brengen in de verschillende ontwerp programma’s . Daarom denk ik dat de BIM variant het beste bij mij zou passen. Na deze meeloopdag hoop ik precies te weten wat nou het beste bij mij past en of ik dan de I of toch de C kant moet kiezen.

http://onderwijsorakels.nl/files/2013/04/foto-5.jpg

2.0 Sfeer

De app moet een positieve sfeer uitstralen een aantal verschillende kleuren en verschillende ontwerpen zodat de gebruikers kunnen zien dat er veel aandacht is gestoken in het ontwer-pen van de app. Natuurlijk moet het uiterlijk wel serieus zijn want de app gaat toch wel over de toekomst van de leerlingen dus het moet niet overkomen als een spelletje. We hebben

door middel van de inlogfuctie ook voor ge-zorgd dat de leerlingen zich persoonlijk bena-derd zullen voelen doordat er overal hun eigen naam en account zal staan. Verder willen we de app overzichtelijk houden en daarom hebben we alle overbodige elementen zoals footers ect. weg gelaten.

2.1 Kleurgebruik

De standaard kleuren van de han zijn rood en blauw deze kleuren zijn redelijk donkere kleuren daarom hebben we er voor gekozen omdat daar de kleur geel bij te nemen en deze als hoofd-kleur te doen. De kleur geel staat voor afwisseling aangezien de opleidingen van

de ICA aansluiten op bijna alle profielen en er zoveel mogelijkheden zijn op de ICA binnen de opleidingen leek ons dit een goede kleur. Ook is geel een luchtige maar ook zeer zakelijke kleur aangezien de app toch een zeer serieuze app is past de kleur geel er goed bij.

Zoals hierboven in het schema te zien is veel geel met rode en blauw accenten.

2.2 Typografie

De typografie is een moeilijk onderwerp als het op app’s aankomt. Dit omdat je toch een mooi een creatief lettertype wil hebben maar het moet wel goed leesbaar zijn op een klein scherm. Daarom heb ik even wat andere app’s bekeken waar veel tekst in staat.

Nu.nlDeze app heeft een zeer eenvoudig lettertype. Het is volgens mij iets in de trend van Calibri of Ariel zeer strak en geen schreef. Dit is natuurlijk ook wel handig omdat de app ook goed leesbaar moet zijn voor smartphones. Ook is er voor gekozen om de font bold te maken zodat hij nog iets beter leesbaar is. Qua kleur en achtergrond is er vooral voor donkere kleuren gekozen op een lichte achtergrond zoals donkerblauw op wit en zwart of wit. Ook zitten er enkele stukjes rood op wit tussen.

Voor de app’s 9292.nl en Voetbal.nl geld precies het zelfde als de app van Nu.nl ze hebben alle-maal een font die erg strak en statisch is waardoor het gemakkelijk te lezen is.

Aan de hand van de ideeen die heb ophebben gedaan uit het bekijken van deze app’s zijn we tot de conclusie gekomen dan Calibri de beste font is voor onze app deze kunnen we als hij bijvoor-beeld onduidelijk word altijd nog bold maken.

Hier een voorbeeldje

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

Over de kleur zijn we nog niet helemaal uit als de app er is zal het wel duidelijk worden welke het beste is.

2.3 Navigatie

We hebben er voor gekozen om een hoofdmenu te maken daarnaast willen we bovenin een van het informatievlak gescheiden navigatie maken. De navigatie gaat gebeuren doormiddel van grote knoppen met symbolen erop daar staat uiteraard wel bij wat er achter die knop zit. Zodat er so-wieso geen onduidelijkheid komt over de verschillende schermen. De Hoofdnavigatie komt er als volgt uit te zien.

We hebben lang gediscussieerd over een kader wat om de knoppen in het hoofdmenu zou moe-ten maar we hebben het uit eindelijk nog aangepast.

Dit was het eerste ontwerp de vlekken bleken te rommelig te worden daarom hebben we ze weg gehaald.

Daarna kwam dit ontwerp en zaten we nog met de discussie rond of vierkant om de buttons.

Dit is het uiteindelijk resultaat geworden voor het hoofdmenu.

Hier onder zie je de balk die in de gehele app bovenin zal blijven voor een makkelijke navi-gatie naar de andere pagina’s en terug naar het hoofdmenu. Door de rood gekleurde knop kun je ook goed zien op welke pagina je bent.

3.0 ontwerp app

Inlogscherm

Voor het inlogscherm hebben we voor een eenvoudig scherm gekozen waar niets meer op staat dan een inlog vak en het logo van onze app.

Hoofdmenu

De uitleg over de keuze staat onder het kopje 2.3 Navigatie.

Notitie pagina

Op de notitie pagina hebben we er voor gekozen om zo weinig mogelijk overbodige dingen neer te zetten. Het scherm van een tablet is al niet te groot dus waarom ook nog meer verspillen

Vragen

De vragen pagina’s hebben we opgesplitst in 2 delen. 1 deel waar de vragen staan en 1 deel waar de antwoorden staan. Ook hebben we 2 tabbladen gemaakt. 1 met de Meest gevraag-de vragen en 1 met de Meest recente vragen. Ook hebben we een plusjes en minnetjes systeem ingemaakt zodat de vragen ook en antwoorden ook beoordeeld kunnen worden door de leerlingen.

Beroepskeuze

De beroeps keuze pagina bestaat vooral uit tekst we hebben hem ook gemaakt met witte tekst. De witte tekst sloot beter aan bij het ontwerp maar was minder duidelijk. Er zijn 2 tabbladen 1 voor Voltijd en 1 voor Deeltijd.

Enquete

Voor de enquete geld het zelfde al voor de beroepskeuze pagina hier hebben we namelijk ook een versie in wit van gemaakt. Door de pijljes onderin kan er genavigeerd worden door de enquete.

Conclusie

Ons ontwerp is een perfect ontwerp omdat er goed gekeken is naar de usability en naar het er creatief uit laten zien van de app. Aan beide punten hebben wij in dit ontwerp voldaan. Door de grote knoppen gekleurde navigatie en vele mogelijkheden om verder en terug te gaan kan geen enkele leerling verdwalen in deze app. Ook hebben we natuurlijk gekeken naar het feit dat we wel voldoende informatie en vooral informatiemogelijkheden over moeten brengen daarom hebben we ook geen extra/overbodige informatie in de app gezet zo houden we de leerlingen gefocust op het centrale doel van de app.

HANdig