Grafisch Ontwerp Autisme Applicatie

Grafisch Ontwerp Document Autisme ApplicatieGerrit Numan 96281 M-Engaged, Leeuwarden CMD NHL Hogeschool, Leeuwarden Mei 2012

Inhoudsopgave01 01 Voorwoord ............................................................................................ 02 02 Moodboard ........................................................................................... 03 03 Grafisch ontwerp ................................................................................... 03 3.1 Algemene stijlregels ................................................................. 3.2 Letter karakter ...................................................................... 04 3.3 Registratiepagina ................................................................. 05 06 3.4 Welkomstpagina ...................................................................... 07 3.5 Informatiepagina .................................................................... 08 3.6 SOS pagina ............................................................................. 09 3.7 Takenoverzicht ....................................................................... 11 3.8 Autisme klokpagina ................................................................ 3.9 Alertpagina ............................................................................ 12

01. Voorwoord

Dit document omvat alle gemaakte keuzes voor de verschillende grafische en visuele elementen van de applicatie en de verantwoording voor deze keuzes, dit alles aan de hand van het onderzoek, concept en functioneel ontwerp. Het grafisch ontwerp document bestaat uit een aantal verschillende onderdelen; beginnend met het moodboard, dit is een presentatie van de look and feel van de doelgroep, die, zoals het woord al zegt, de stemming en uitstraling weergeeft doormiddel van beelden, tekst en kleuren. Ook de letter karakters komen aan bod.

Daarnaast zijn alle keuzes, kleurcodes, lettertypes en de groottes hiervan vastgelegd zodat dit document als handleiding gebruikt kan worden. Dit om de uiteindelijke applicatie de uitstraling te geven zoals bedoeld is.

01

02. MoodboardOm een grafisch ontwerp aan de eisen van de doelgroep te laten voldoen is er een moodboard gemaak die voor de ontwerper duidelijkheid moet brengen in deze eisen. Dit moodmoard is tot stand gekomen na een aantal brainstorm sessies waarin de uitstraling, de look and feel van de doelgroep en applicatie is ontstaan.

02

03. Grafisch OntwerpAan de hand van het onderzoek document, het concept en functioneel ontwerp is een grafisch ontwerp het resultaat waarin alle paginas van de applicatie aan bod komen. Hier staan de grafische verantwoordingen en de grafische keuzes die hiervoor zijn gemaakt. is voor de doelgroep en is in zonlicht beter te zien dan bijvoorbeeld zwart (#000000).

3.1 Algemene stijlregels Deze regels zijn de standaard voor de opbouw van de gehele applicatie, in de volgende paragrafen wordt verder naar de invulling van deze paginas gekeken. Dit houdt ook in, dat er argumenten bij komen te staan waar de doelgroep behoefte aan heeft.

Pictogrammen De pictogrammen die de verschillende taken aangeven zijn een gratis standaard pictogrammen-set die door Sclera VZW wordt aangeboden. Tijdens het onderzoek

Formaat Het kader van de applicatie is 480 bij 320 pixels, alle grafische elementen (mits anders wordt aangegeven) worden als vector bestanden gemaakt omdat deze in de toekomst makkelijk zijn aan te passen voor grotere schermen met een hogere resolutie. Alle objecten die in het kader geplaatst worden dienen 20 pixels van de rand af te staan en individueel ook weer 20 pixels van elkaar, zowel boven-, onder- en zijkanten.

is geconcludeerd dat pictogrammen een eigen onderzoek verdienen. Aangezien daar de focus op dit moment niet ligt is er in eerste instantie voor deze oplossing gekozen. Lettertype Het lettertype dat gebruikt wordt over de gehele applicatie (ook voor buttons en andere toepassingen) is Dyslexie. Dit font kwam naar voren in het onderzoek als zeer nuttig voor kinderen met dyslexie en voor kinderen met autistisch spectrum stoornissen. Het lettertype is, voor dit product, door de maker gratis afgegeven aangezien dit een goed doel betreft. De grote van het lettertype in tekst is altijd 14 punts en de grote in de buttons zijn altijd 18 punts. Navigatiebalk Op (bijna) elke pagina is boven in het scherm een groene navigatiebalk te zien. De balk is 60 bij 320 pixels en staat vast. De kleur van deze navigatiebalk is licht groen (#95C11F) met een donkere kleur groen (#689F31) gradient naar het midden.

Kleuren Alle kleuren die in de applicatie voorkomen zijn zo simpel mogelijk gehouden voor de doelgroep. Groen, rood, zwart, wit en grijs zijn de kleuren die gebruikt zijn. De keuze om voor deze te gaan is simpel, de kleuren groen en rood onderscheiden zich van iets wat goed is en iets wat niet goed is. De zwarte, witte en grijze kleuren zijn neutrale kleuren die voor nog meer overzicht zorgen. Achtergrondkleur van de applicatie is altijd wit (#FFFFFF). Wit is een neutrale kleur wat erg belangrijk

03

Buttons Op een aantal paginas komt er onder aan de pagina een button voor. Deze buttons, als ze nodig zijn, staan altijd op de zelfde plek van de betreffende pagina, namelijk 20 pixels van de onderkant en van de linker en rechterkant. Ze zijn in 2 kleuren ontworpen, groen en rood. De groene kleur (die het meeste voorkomt) is een button die aangeeft dat iets goed/positief is. De rode knop (komt n keer voor) geeft aan dat er wat met mis is gegaan. In dit geval geen verbinding met het internet en dat de gebruiker een noodnummer kan bellen. De kleur van de groene button is licht groen (#95C11F) met een donkere kleur groen (#689F31) gradient naar het midden. De kleur van de rode button is donker rood (# B02717) met een lichtere kleur rood (# E94E37) gradient naar het midden. Afmeting van de buttons zijn 50 bij 280 pixels en hebben een ronding in de hoeken van 10 pixels, dit is gedaan om het verschil te maken met een statisch iets waar de gebruiker een handeling moet doen. Daarbij oogt het ook wat speelser. 3.2 Letter karakters Van alle letters van het alfabet is er n letter karakter gemaakt, dit is gedaan om aan de behoefte van de doelgroep voor dit moment te voldoen. In latere versies van de applicatie is er de mogelijkheid om uit meerdere karakters te kiezen en uiteindelijk moet het zo zijn dat de gebruikers hun eigen karakter zelf samen kunnen stellen. De grafische keuzes die nu zijn gemaakt zijn als volgt; het feit dat de karakters een patroon hebben komt omdat ze hierdoor een eigen persoonlijkheid krijgen. Door dit te doen zorg je ervoor dat deze karakters de doelgroep aanspreken op een vrolijke manier en daardoor interactie met ze aangaan. De desbetreffende patronen die zijn ontworpen lopen uiteen van lief, stoer, slim, knullig enz. Ook dit is weer gedaan om de gebruiker zo breed mogelijk iets aan te bieden wat ze echt leuk vinden. (Voorbeeld letter karakters, rest van de letter karakters zijn in de bijlage te vinden)

04

3.3 Registratiepagina Deze registratiepagina moet eerst worden doorgenomen en ingevuld voordat de gebruiker de applicatie kan gebruiken. Het ontwerp is erg simpel gehouden en er is een duidelijk onderscheid tussen de vragen en het invulveld. De groene navigatiebalk is voorzien van een wit i teken, deze dient als informatiebutton. Deze is wit om niet al te veel op te vallen. De afmeting van deze informatiebutton is 40 bij 40 pixels. En staat zowel rechts als onder en boven 10 pixels van de kant af. De tekst onder de groene navigatiebalk is uiteraard het lettertype Dyslexie en staat in een kader van 35 bij 280 pixels. Hier weer onder staan de invulvelden die ingevuld word door de ouder/verzorger van de uiteindelijke gebruiker. Door de neutrale kleur grijs te gebruiken is het duidelijk dat hier niets ingevuld hoeft te worden in tegenstelling van het groene deel. Het grijze is als het ware over het groene gedeelte heen geschoven en geeft een speels effect aan het geheel. Het groene deel heeft daarom een afmeting van 50 bij 280 pixels. De kleur is licht groen (#95C11F) met een donkere kleur groen (#689F31) gradient naar het midden. Het grijs is de helft van het groene invulveld en heeft een afmeting van 25 bij 280 pixels. De hoeken van de invulvelden zijn met een ronding van 10 pixels bewerkt om het verschil te maken met een statisch iets waar de gebruiker een handeling moet doen. Daarbij oogt het ook wat speelser. Op deze pagina is aan de onderkant geen ruimte van 20 pixels omdat op deze pagina gescrold kan worden, dit hang natuurlijk af van de hoeveelheid invulvelden die er nodig zijn. (Registratiepagina)Let op! Eerst invullen:Naam gebruiker: Karel Karelsma Naam gebruiker: Karel Karelsma Naam gebruiker: Karel Karelsma Naam gebruiker: Karel Karelsma Naam gebruiker: Karel Karelsma

05

3.4 Welkomstpagina Als de gebruiker de applicatie start nadat alle stappen zijn doorgenomen van het registreren, is deze welkomstpagina de pagina die de gebruiker eerst altijd ziet. De standaard groene navigatiebalk boven in de pagina bevat ook hier weer een informatiebutton die de zelfde functies en grafische eisen heeft als staat aangegeven bij 3.3 Registratiepagina. Het kader voor de welkomstekst is 80 bij 280 pixels hier is de tekst standaard, behalve de naam van de gebruiker, deze kan zo lang zijn tot 20 pixels voor de rechterzijkant. Het kader waar het letterkarakter te zien is heeft een afmeting van 205 bij 280 pixels. Aangezien niet alle karakters de zelfde afmetingen hebben zal het betreffende karakter zo geschaald worden totdat deze in de hoogte of in de breedte past, als de proporties van het karakter maar in tact blijven. Het karakter heeft verder nog een lichte slagschaduw, dit is om het karakter wat meer levendiger te maken. Hiermee wordt het doel behaald en dat is de gebruiker te assisteren.Hallo Karel, Tof dat je komt kijken, wat zullen we gaan doen?

Naar de taken

(Welkomstpagina)

06

3.5 Informatiepagina De informatiepagina is een simpele pagina

waarin het meteen duidelijk moet zijn dat hier de gebruikershandleiding staat. De informatiebutton in de groene navigatiebalk heeft dezelfde eisen als die van de vorige twee paginas. De kaders waar de gebruikershandleiding en de credits staan zijn in de breedte 280 pixels in de hoogte zijn ze afhankelijk van de hoeveelheid tekst die in die kaders moeten. Je kunt in deze kaders niets typen zoals bij de registratiepagina, dit wordt verduidelijkt doordat de kaders groter zijn dan bij de registratiepagina. De kaders zijn opgedeeld in verschillende vakken namelijk grijs en groen. De groene kleur van het kader is licht groen (#95C11F) met een donkere kleur groen (#689F31) gradient naar het midden. Het grijze deel is als het ware over het groene deel gelegd, dit zorgt voor een speels karakter maar toch dat het zijn doel wel behoud. De afmeting van het grijze deel is 25 bij 280 pixels. De kleur is licht grijs (#B3B2B2) met een donkere kleur grijs (#929292) gradient naar het midden. De hoeken van de kaders zijn met een ronding van 10 pixels bewerkt om het verschil te maken met een statisch iets waar de gebruikers een handeling moet doen. De button onder in de pagina blijft altijd in beeld staan, dus als de gebruiker aan het scrollen is dan gaan alleen het kader van de gebruikershandleiding en de credits heen en weer. (Informatiepagina)Credits Informatie over de ontwikkelaars van de appliactie Gebruikershandleiding Hier een korte uitleg van de applicatie met een doorverwijzing naar de website

Karel Karelsma

Terug

07

3.6 SOS pagina Mocht er bij het laden van de applicatie geen internetverbinding zijn of de verbinding valt weg dan komt de gebruiker automatisch bij deze pagina. De eerste indruk laat meteen zien dat er iets niet in orde is, dat komt door de sterke rode kleur. Maar omdat het vertrouwde karakter er staat zal de gebruiker niet meteen in paniek raken, dit karakter zal de gebruiker tot rust bedaren dit omdat het karakter ook met een oplossing komt. De groene navigatiebalk die eerder altijd zichtbaar was is hier weggelaten omdat deze hier geen functie heeft. Het eerste wat er te zien is, is een tekstballon. Deze is 160 bij 280 pixels en heeft een duidelijke donker rode kleur (#B02717) met een lichtere kleur rood (# E94E37) gradient naar het midden. Het kader van het karakter heeft net zoals bij de Welkomstpagina een afmeting van 205 bij 280 pixels. Ook hier geldt dat niet alle karakters de zelfde afmetingen hebben en zal het betreffende karakter zo geschaald worden totdat deze in de hoogte of in de breedte past, als de proporties van het karakter maar in tact blijven. Het karakter heeft verder nog een lichte slagschaduw, dit is om het karakter wat meer levendiger te maken. Hiermee wordt het doel behaald en dat is de gebruiker te assisteren. (SOS pagina)Ik begrijp iets niet! Wil je je moeder bellen? Ojee..

Bellen

08

3.7 Takenoverzicht De belangrijkste pagina van de hele applicatie is het overzicht van de taken. Hier komen verschillende items naar voren die tot de aandacht van de gebruiker moeten gebracht worden. De bovenste groene navigatiebalk is goed gevuld, links is het vertrouwde karakter weer te zien en heeft naast zijn functie ook een meerwaarde in het gebruik van de applicatie. Het karakter houdt als het ware een oogje in het zeil, zo zal de gebruiker het ook gaan ervaren. Het karakter staat zowel links, onder en boven 10 pixels van de kant, het is wat groter gelaten om de herkenbaarheid van het karakter te behouden. Het karakter wordt zo geplaatst dat de proporties behouden blijven, het kan zo zijn dat de 10 pixels, 15 pixels wordt, maar kleiner dan 10 pixels word het niet. In het midden van de groene navigatiebalk staat de huidige dag, uiteraard in het lettertype dyslexie. Rechts staat de huidige tijd. Onder de navigatiebalk is een coverflow van de taken te zien, de gebruiker kan hier door heen gaan en kijken welke taken hij gedaan heeft, welke hij nog moet doen en waar hij/zij nu mee bezig is. De huidige taak heeft als achtergrondkleur de bekende lichtgroene kleur (#95C11F). Hier zit geen gradient in, dit omdat de ruimtes hiervoor te klein zijn. De taken die geweest zijn hebben weer de negatieve kleur rood, duidelijk voor de gebruiker dat hier niets meer mee hoeft te gebeuren. De kleuren worden naarmate de taken vorderen donkerder van kleur van rood (#B02717) naar donker rood (#72110A). Dit geldt ook voor de taken die nog aan bod komen. De groene kleur (#6C7C0E) eerder dan de donker groene kleur (#404908). De huidige taak heeft een afmeting van 167 bij 167 pixels. Het pictogram dat getoond wordt zal 10 pixels van de kant blijven staan. De kleuren mogen niet bedekt worden. De taken die achter de huidige taak staan zijn in zowel boven als beneden 10 pixels kleiner. De breedte van deze taken zijn 28 pixels. (Takenoverzicht) Onder de coverflow zijn een drietal kaders te zien waar de gebruiker nog meer behoefte aan heeft. Zo een kader heeft afmetingen van 50 bij 280 pixels. En zijn opgedeeld in twee delen. Het grijze deel geeft aan wat er moet gebeuren en het groene deel geeft het antwoord daarop. Ze zijn elk de helft van het geheel, dus zowel het groene deel als het grijze deel zijn 50 bij 140 pixels. De kleur van het groene deel is licht groen (#95C11F) met een donkere kleur groen (#689F31) gradient naar het midden. De kleur van het grijze deel is licht grijs (#B3B2B2) met een donkere kleur grijs (#929292) gradient naar het midden. De hoeken van de kaders zijn met een rondingTijd: 20:00 minuten Met: Mama Taak: Middageten Maandag

12:00

09

van 10 pixels bewerkt om het verschil te maken met een statisch iets waar de gebruiker een handeling moet doen. Daarnaast zijn er in de grijze delen nog een aantal pictogrammen die ondersteunen in tekst. Deze zijn erg strak en simpel gehouden om de aandacht niet af te leiden, daarom zij ze ook wit. Om nog meer duidelijk te maken dat deze gebruikers een strak schema nodig hebben is er ook een zandloperfunctie is de takenoverzicht geplaatst. Deze loopt mee met de aflopende tijd waarvoor de gebruiker een taak in moet voldoen. Door de kleur rood zal de gebruiker ook beseffen dat het serieus is en zal er voor zorgen dat de taak binnen deze tijd word gedaan. De kleur van de zandloper is donker rood (#B02717) met een lichtere kleur rood (#E94E37) gradient naar het midden. Mocht het zo zijn dat deze kleur in de toekomst als niet prettig worden ervaren, kan de gebruiker in de toekomstige versies van de applicatie zelf bepalen welke kleur ze het liefst willen hebben. Het formaat is in de breedte 320 pixels en start vanonder de navigatiebalk. De maximum lengte is in dit geval dus 420 pixels.Tijd: Met: Mama Taak: Middageten Maandag

12:00

20:00 minuten

(Takenoverzicht zandloper)

10

3.8 Autisme klokpagina Om de gebruiker nog meer van de tijd bewust te maken is er naast de digitaal aftellende klok en de zandloper een speciale autisme klok aan de applicatie toegevoegd. Deze klok is speciaal ontwikkeld voor kinderen met autisme, en laat zien hoeveel tijd de gebruiker nog over heeft om de taak te volbrengen. Deze pagina wordt zichtbaar als de gebruiker op de digitaal aftellende klok tikt in het takenoverzicht (3.7). De groene navigatiebalk krijgt op deze pagina een andere functie, deze geeft aan dat de gebruiker niets negatiefs heeft gedaan, dit kan wel gedacht worden als de klok zelf veel rood laat zien. De afmetingen voor de klok, maar ook het kader waarin het komt te staan zijn 250 bij 280 pixels. Het rood in de klok dat aangeeft hoeveel tijd er al verstreken is een iets donkerder rode kleur (#B02717) met een lichtere kleur rood (# E94E37) gradient naar het midden. Als de tijd verstrijkt, is deze helemaal rood en blijft de lichtere rode kleur (gradient) in het midden van de klok staan.

5 10 15 20 25

0

55 50 45 40

30

35

Terug

(Autsime klokpagina)

11

3.9 Alertpagina Op deze pagina kan de gebruiker zien welke taak er gestart wordt en kan de gebruiker zien hoeveel tijd ze hiervoor hebben. Daarnaast wordt hier een waarschuwing getoond als 80% van de tijd verstreken is. Deze pagina heeft weer de bekende lay out die al eerder aan bod is gekomen. Dit is gedaan om de eenheid van de applicatie in acht te houden. Boven in de pagina is een tekstballon te zien die aangeeft wat er op dat moment aan de hand is. Deze is 160 bij 280 pixels en heeft een licht groene kleur (#95C11F) met een donker groene kleur (#689F31) gradient naar het midden. Ook staat er in de tekstballon naast de tekst de huidige pictogram, zodat de gebruiker de desbetreffende taak kan vergeten mocht deze pagina tevoorschijn komen. Het pictogram heeft zelf een afmeting van 100 bij 100 pixels en staat 20 pixels van de boven, onder en rechterzijkant af. Onder de tekstballon is het karakter weer terug te vinden die dezelfde afmeting heeft als eerder werd aangegeven. Het kader van het karakter heeft net zoals bij de Welkomstpagina en SOS pagina een afmeting van 205 bij 280 pixels. Ook hier geldt dat niet alle karakters dezelfde afmetingen hebben. Het betreffende karakter zal zo geschaald worden totdat deze in de hoogte of in de breedte past, als de proporties van het karakter maar in tact blijven. Het karakter heeft verder nog een lichte slagschaduw, dit is om het karakter wat meer levendiger te maken. Hiermee wordt het doel behaald en dat is de gebruiker te assisteren. (Alertpagina)Je hebt 10 minuten om deze taak te doen.

Sluit

12

Net zoals bij het takenoverzicht heeft ook deze pagina een zandloper op de achtergrond lopen. Deze loopt mee met de aflopende tijd waarvoor de gebruiker een taak in moet voldoen. Door de kleur rood zal de gebruiker ook beseffen dat het serieus is en zal er voor zorgen dat de taak binnen deze tijd wordt gedaan. De kleur van de zandloper is donker rood (#B02717) met een lichtere kleur rood (#E94E37) gradient naar het midden. Het formaat is in de breedte 320 pixels en start vanaf de bovenkant van de applicatie, dit in tegenstelling tot het takenoverzicht. De maximale lengte van de zandloper is in dit geval dan ook 480 pixels. In de button staat dit keer Sluit in plaats van Terug, dit is gedaan omdat deze pagina een pop up functie heeft. De gebruiker heeft niet kunnen kiezen dat ze deze pagina wouden inzien, deze komt tevoorschijn als het nodig is. In toekomstige versies zal echter te zien zijn dat het hier om een pop up gaat doordat de onderliggende pagina dan nog deels zichtbaar is, voor nu is de keus gemaakt om het zo op te lossen.Je hebt nog 5 minuten om deze taak te doen.

Sluit

(Alertpagina zandloper)

Bijlage: Schetsen Oude ontwerpen Letter karakters

13