CMDIAD2Q4 INTERACTION DESIGN. Corine Vuijk CMD4b

Transcriptie

1 CMDIAD2Q4 INTERACTION DESIGN Corine Vuijk CMD4b

2 DEELOPDRACHT 1: CONCEPTONTWIKKELING Beschrijf het concept van jouw WBJ app op basis van bovenstaande opdrachtomschrijving.maak duidelijk waarom reizigers, familieleden en WBJ jouw app zouden willen gebruiken. Voor het ontwikkelen van een concept heb ik eerst nagedacht wat een gebruiker zou willen communiceren naar het thuisfront. De website WBJ is vooral ingericht voor mensen die langer in het buitenland rondtrekken of tijdelijk verblijven, maar die het wel belangrijk vinden om contact te houden met het thuisfront om zo hun verhalen te vertellen en te delen. De drie belangrijkste dingen die een reiziger van thuis zou willen weten zijn: - Hoe laat is het daar ( Zouden we nog kunnen bellen? ) - Wat is het weer daar ( Dan zitten wij beter! ) - Wat zijn de actualiteiten ( Waar kan ik een Nederlandse krant kopen? ) Al deze items in tegenstelling van de informatie die je weet van het land waar je bent. Dus moet het een app worden die deze informatie tegenover elkaar zet, zodat je kan vergelijken. Hierbij moet het mogelijk zijn om op bepaalde items te reageren. Bijv. het doorsturen van de weersverwachting aan het thuisfront om ze jaloers te maken met de hoge temperaturen en de overdaad aan zon, of reageren op de actualiteiten, zodat je op de hoogte blijft van het laatste nieuws, en daar ook over mee kan praten. Dit kan natuurlijk op de Waarbenjij.nu site, als onderdeel van je eigen updates, maar dat kan ook via de social networks als facebook, twitter, hyves, ed. Waarbenjij.nu kan deze app aan haar reizigers aanbieden als extra service. Maak een aantal schetsen met de mogelijke functionaliteit van jouw app en maak bij elke schets een lijstje van objecten die zichtbaar en/of manipuleerbaar moeten zijn Als eerste heb ik verschillende schetsen gemaakt voor de indeling van het scherm. Ik kwam erachter dat als ik twee dingen tegenover elkaar wilde zetten, dat ik dan het beste de breedte van het scherm aan kan houden.

3 Daarna heb ik een schets gemaakt waarbij de eerste functionaliteiten al duidelijk zijn. Er is te zien welk deel gaat over het land waar je op dat moment begeeft, en wat het nieuws en weer is bij het thuisfront. Door de middelste knop kan je de social networks oproepen en door te draaien kan er gekozen worden welk item op welk kanaal gepost moet worden. DEELOPDRACHT 2: UITWERKING Werk de schetsen uit in een (statisch) ontwerpvoorstel, communiceer via wireframes hoe de(rijke) interactie van jou app verloopt. Werk het ontwerpvoorstel uit tot een dynamisch prototype. Je hoeft het prototype niet functioneel te maken, het gaat in deze opdracht niet om je actionscript skills. Het gaat erom dat je alle details van de interactie kunt laten zien. Je kunt dit op een eenvoudige manier doen door de dynamiek van de interactie te animeren. Beschrijf in een verslag hoe je tot je ontwerpkeuzes gekomen bent. Als eerste volgen hieronder de uitgewerkte schetsen van het ontwerpvoorstel in wireframes. Eronder zal ik meteen uitleg geven over de ontwerpkeuzes die gemaakt zijn tijdens het ontwerpen van het desbetreffende scherm.

4 SCREEN 1 Dit is het basisscherm. Als je opstart kom je op dit scherm. Ik heb de verschillende items zo clean mogelijk gehouden omdat als je dit wil opstarten waar de wifi heel langzaam is, moet het geen uren duren voordat alle informatie is binnengehaald. Zoals te zien is, is het linkergedeelte het deel waar de reiziger zich bevindt, en het rechtergedeelte is het thuisfront. Bovenaan is de tijd en de datum te zien, zodat het snel duidelijk is hoe laat het waar is op welke dag.

5 SCREEN 2 Zodra de reiziger het nieuws wil lezen in New York, klikt of swipet (vandaar de omgevouwen randjes) hij het item news. Dan komen daar de highlights van een gekozen krant (via de instellingen te veranderen) te voorschijn en kan doormiddel van scrollen de andere items zien. In de instellingen kan bijvoorbeeld ook aangegeven welk soort nieuws er getoond wordt, zodat alleen voor de reiziger relevante informatie verstrekt wordt.

6 SCREEN 3 Zodra de reiziger een interessant artikel ziet, kan hij ook hier op klikken en komt het complete artikel te voorschijn. Als deze teksten te lang worden voor het aangegeven veld, kan ook hier de scroll-actie worden toegepast. Overige links in de berichten worden geopend buiten de applicatie.

7 SCREEN 4 Zodra de reiziger iets interessants ziet wat hij wil delen met zijn familie en vrienden, kan hij op de middelste knop drukken. Hieronder bevinden zich 4 verschillende social media kanalen. Deze kanalen zijn aan te passen via de instellingen, zo kan iedereen het indelen naar de favoriete kanalen van de gebruiker. Door de knop te verbergen is er meer ruimte om de berichten te laten zien.

8 SCREEN 5 & 6 Zodra de knop uitgeschoven is, kan de knop gedraaid worden naar het betreffende bericht met het juiste kanaal. Doordat de schijf eerst niet precies uitlijnt met de items kan je niet per ongeluk al op de knop drukken. De schijf moet eerst in lijn komen met het bericht wat gepost moet worden.

9 SCREEN 7 Zodra je op de knop klikt schuift er een post mogelijkheid uit die hoort bij het gekozen kanaal. Hier kan de reactie worden achtergelaten en het artikel worden ingevoegd. Er kan nog gekozen worden dat het bericht na het klikken van OK nog te zien is, zodat je kan kijken of het juist is weergegeven. Deze functie heb ik niet gevisualiseerd.

10 SCREEN 8 Zodra het bericht wordt gepost kom je weer op het beginscherm. Het enige wat hieraan veranderd is, is het laatst bekeken bericht. Dit wordt laten zien, zodat bij een volgend bezoek het niet perse opnieuw opgezocht hoeft te worden, en mocht het belangrijke informatie bevatten, het meteen bij de hand hebt. De overige items (weer in beide landen en het nieuws van het thuisfront) werken op dezelfde manier. Het weer van de dag zelf is meteen te zien, zodat je daar niet veel voor hoeft te doen. Als je meer informatie wil hebben kan je hierop klikken of swipen, en komt er gedetailleerde informatie tevoorschijn en een forecast voor de komende dagen. Ook dit is weer te posten via de verschillende kanalen.