Projectplan CMD jaar 2

Design for Mobile

Remco DekkerDaan van KlinkenSybren WartnaCMD3A UXD

Instituut voorCommunicatie, Media &Informatietechnologie

2Design for Mobile

INHOUDSOPGAVE

IPHONE PLATFORM 3

DE IPHONE 4

APPS 5

AAN DE SLAG MET APPS 6

BRIEFING 7

KONGINNEDAG 8

LOWLANDS 9

BUSINESS CONTEXT 10

ALGEMEEN 11

3Design for Mobile

IPHONE PLATFORM

4Design for Mobile

DE IPHONEALGEMEENDe iPhone is een smartphone van Apple, uitgebracht in 2007. Al in 2002 sprak men erover dat Apple een telefoon aan het ontwikkelen was. Het gehypte toestel heeft voor een revolu-tie gezorgd in de markt van mobiele telefoons. Met het grote scherm, multi-touch mogelijkheden en het gemak van gebruik zette het een nieuwe standaard voor smartphones. Door andere mobiele platformen werd ook het concept van apps gekopieerd.

HARDWAREVersie 4 van de iPhone heeft een resolutie van 960x640 pixels. Overige versies hebben 480x320 pixels. Vanaf de 3GS heb je een kompas, GPS, en een versnellingsmeter. Ook heb je beschikking tot een camera. Er is ondersteuning voor het H.264/MP4-videoformaat ingebouwd, maar de telefoon kan geen Flash uitvoeren. Je kunt met Bluetooth communiceren, daarnaast ondersteunt de telefoon UMTS/HSDPA/WiFi om gebruik te maken van internet.

GEBRUIKUiteraard is de iPhone niet bedoeld om alleen maar mee te bellen. Naast sms-en kun je ook foto’s maken, e-mailen en an-dere applicaties gebruiken. Het is meer een PDA die toevallig ook kan bellen. Voor veel mensen heeft het een iPod vervan-gen. Applicaties zijn meestal gratis of heel goedkoop, waar-door gebruikers vaak nieuwe applicaties downloaden.

5Design for Mobile

APPSAPP STOREEr bestaan twee soorten iPhone applicaties: webgebaseerd en downloadbare native apps. Het laatste kan gedownload wor-den via de iTunes Store. Developers ontvangen 70% van de inkomsten, het andere deel gaat naar Apple toe. Veel apps zijn gratis verkrijgbaar.

NATIVE APPSOm een native app te maken heb je een iPhone software deve-lopment kit nodig (iPhone SDK). Om de SDK te gebruiken, heb je een lidmaatschap van het iPhone Developer Program nodig, wat $99 per jaar kost. Een native app wordt geschreven in de programmeertaal Objective-C en heeft daarmee toegang tot alle hardwarefuncties van de telefoon.

WEB APPSDaarentegen is het maken van een webgebaseerde app wel gratis. Hoewel je bij een native app meer mogelijkheden hebt, kun je bij een webapplicatie veel sneller resultaat bereiken en ook veel experimenteren. De iPhone ondersteunt namelijk de nieuwste HTML5- en CSS3-technieken. Op http://www.apple.com/html5/ kun je met Safari kennis maken met een aantal technieken, die (nog) niet in andere browsers beschikbaar zijn.

6Design for Mobile

AAN DE SLAG MET APPSAPPLE’S IPHONE GUIDESHet is belangrijk om je te houden aan richtlijnen van Apple bij het ontwerpen van je applicatie. Door het volgen van de richtlijnen ben je er zekerder van dat je applicatie makkelijk te gebruiken is. En waarom zou je het wiel opnieuw uitvinden?

APPS ONTWERPENVoordat je begint met het maken van een applicatie is het han-dig om eerst een interactie ontwerp te maken. Je kunt bijvoor-beeld beginnen met schetsen op speciaal papier (http://budurl.com/dfmsketch). Voor je ontwerp op de computer zijn er ook diverse stencils beschikbaar (http://budurl.com/dfmstencils). Ook zijn er diverse PSD’s beschikbaar (http://budurl.com/dfmpsd) om je ontwerpen mee te beginnen met basiselemen-ten van de iPhone interface. Inspiratie voor een webapp kun je onder andere opdoen bij http://budurl.com/dfminspiration. Kijk ook eens hoe niet moet (http://budurl.com/dfmbaddesign).

PROTOTYPES MAKENMaak een begin met je HTML-prototype door http://budurl.com/dfmprototype te volgen. Met JavaScript kun je ook de GPS-locatie ophalen om de werking van een native app na te bootsen. Testen van je HTML-prototype wordt aangeraden om op de iPhone te doen. Er bestaan diverse applicaties voor Win-dows en OS X om je prototype te testen in een iPhone simula-tor, maar het komt er vaak niet uit te zien zoals het hoort. Ui-teraard is de basis makkelijk te testen aan de hand van Safari, dat dezelfde basis bevat als de versie op de iPhone. Uiteraard kun je je prototype ook op een iPod Touch testen.

7Design for Mobile

BRIEFING

8Design for Mobile

KONGINNEDAGKoniginnedag in Nederland is altijd een hele happening, de straten zijn gevuld met rommel en kinderen die uit volle borst de blokfluit bespelen. Voor veel jongeren betekent Koniginne-dag maar één ding: AMSTERDAM!

AMSTERDAMOp Koniginnedag is Amsterdam een magneet voor veel jon-geren uit Nederland, er is dan ook genoeg te doen. Een groot aantal partijen (zoals Radio 538 en Slam!FM) is elk jaar weer aanwezig met een eigen podium waar vaak bekende artiesten optreden.

HET PROBLEEM: DRUK!Doordat er zo veel podia zijn en mensen zich vaak van het ene naar het andere podium verplaatsen is het altijd een drukte van jewelste in de straten van Amsterdam. Het is moeilijk om je snel van A naar B te verplaatsen als je mee loopt in de stroom. Het moeilijk om vrienden terug te vinden, bij een podium of in de stroom van mensen. En meestal kom je te laat aan bij een podium, heb je de artiest alweer gemist en kan je je weer opmaken om te vertrekken naar een volgend podium.

OPDRACHTGelukkig kan volgend jaar gezegd worden: “There is an app for that!” Want die gaan jullie namelijk maken: Bedenk een app die je aanraadt welk podium op dit moment (of over een uur) het meest bij jou past en hoe je hier zo snel en efficiënt mogelijk kunt komen.

9Design for Mobile

LOWLANDSLowlands is één van ‘s Neerlands grootste festivals. Het fes-tival heeft grote variatie in het aanbod van amusement: er is niet alleen muziek, maar ook literatuur, film, cabaret, ballet, theater en strip.

BELEVINGMet zo veel aanbod en variatie beleeft iedere bezoeker Low-lands weer anders.De één geniet van het prachtige geluid, de ander van het visueel geweld en weer een ander van de sociale contacten. Niemand beleeft Lowlands dus op de zelfde manier.

BELEVING DELEN[Fictief] Volgend jaar staat Lowlands in het teken van het delen van deze belevingen. Het is de bedoeling dat de bezoe-kers aan elkaar laten zien hoe zij Lowlands beleven. Lowlands gaat op verschillende plekken grote schermen en andere hard-ware neerzetten om dit te faciliteren.

OPDRACHTMaak een applicatie waarmee mensen hun beleving op Low-lands kunnen delen en naar een groot scherm kunnen sturen. Bedenk in welke vorm dit kan (foto’s, video, live-video, audio, tekst), hoe dit zou moeten werken en met welke technieken (bijvoorbeeld Bluetooth of Twitter...).

10Design for Mobile

BUSINESS CONTEXTEen opdracht heeft altijd een opdrachtgever. Het is belangrijk om rekening te houden met de wensen, stijl en merkwaarden van deze opdrachtgevers.

KONINGINNEDAG: IAMSTERDAMDe Amsterdamse Koniginnnedag kent veel organisatoren en betrokken partijen. Dit jaar is IAMsterdam (het kanaal van Amsterdam voor toeristen en bezoekers) de initiatiefnemer van een iPhone app voor koninginnedag (zie opdracht). IAM-sterdam heeft al ervaring met het onderwerp door de (gratis) Mobile City Guide die ze al uitgeven voor de iPhone.

LOWLANDS: GROLSCHSinds kort is Grolsch een nieuwe richting in geslagen in hun re-clameuitingen. In de nieuwe commercial is te zien hoe mensen proosten op alles waar ze voor staan en dat dat goed voelt. In de vorm van “OP ... !” laat deze commerial een aantal scena-rio’s zien waarop geproost kan worden. “OP een iPhone app maken!” Grolsch wil dat mensen ook op Lowlands proostmo-menten (of algemener, belevingen) delen met elkaar. Grolsch heeft daarbij gekozen om dit door middel van een iPhone app gecombineerd met grote schermen uit te voeren op Lowlands.

11Design for Mobile

Dit project heeft als doel kennismaking met ontwerpen voor mobiel. Het ontwerpen van een iPhone app staat hierin cen-traal, de focus ligt minder zwaar op het concept en develop gedeelte. Het eindproduct hoeft dus geen werkende app te zijn. Het eindproduct moet wel het uiteindelijke ontwerp weer-geven en moet laten zien hoe de app werkt.

RANDVOORWAARDEN » Je eindproduct is uitwerkt op het niveau van een “clickable prototype”, kies voor een techniek waarmee je de functiona-liteit en werking van het product op overtugiende wijze kunt demonstreren. Je kunt gebruik maken van bestaande proto-typing tools speciaal voor iPhone.

» De applicatie moet het beschreven doel van één van de twee opdrachten behalen.

» Ga verder dan een standaard app, denk na welke middelen en technieken het beste passen bij jouw oplossing.

» Zorg dat at het gebruik van de applicatie zelfverklarend is, zorg er ook voor dat de interactie van de gebruiker met de applicatie een bepaald resultaat oplevert.

» Op beide locaties (Koninginnedag Amsterdam en Lowlands) komen grote schermen te staan, je MOET deze grote schermen gebruiken in de app beleving.

MILTESTONES & DEADLINEDe belangrijkste deadlines zijn:

» Conceptpresentatie - Week 3 » Eindpresentatie - Week9

ALGEMEEN

12Design for Mobile

Voor alle deadlines, milestones en de inhoud van de lessen, zie het overzicht in “lessenplan”.

DELIVERABLES » Conceptomschrijving » Schetsen » Functioneel Ontwerp » Visueel ontwerp » Testplan (usability tests) » Testresultaten en verbeteradvies a.d.h.v. usability tests » App prototype die de werking laat zien