Ontwerpen voor Android

1. ONTWERPEN VOOR ANDROID

2. INGE KUIJPER Nieuwe Garde Amsterdam www.nieuwegardeamsterdam.nl @nieuwegardeAms

3. Intro INTERNET GEBRUIK OP MOBIEL - WERELD Bron: AdMob/Google, November 2009

4. WAT IS ANDROID?

5. Intro Google’s open source Operating System voor het mobiele platform

6. Intro Gelanceerd oktober 2008 iPhone: juni 2007

7. Intro TOESTELLEN Wereldwijd Nederland 16 meer dan 7

8. Intro MARKET APP STORE •Geen goedkeuringsproces, een applicatie is direct beschikbaar. •Gebruikers kunnen applicaties alleen downloaden vanaf de telefoon •Huidige status Android Market > 10.000 apps •In het komende jaar wordt een vijfvoudige groei verwacht van Android apps op Market.

9. Intro VOORSPELD Android is in 2012 het op 1 na grootste smartphone platform (na Symbian)

10. Intro GENERIEKE INTERFACE Home Menu Het menu wordt geactiveerd door de Toon homescreen. Menu button. In dit menu (het Options menu) passen tot 6 items. Search Back button Met de back button kan de gebruiker naar een vorig scherm navigeren of een actie ongedaan maken. Send End Bellen en mute. Gesprek eindigen. Trackball

11. Intro TOESTELLEN IN NEDERLAND T Mobile G1 HTC Magic HTC Hero HTC Tattoo (HTC Dream) 240x320 Huawei U8220 / Samsung Acer A1 / Pulse Galaxy 17500 Liquid

12. Intro TOESTELLEN IN NEDERLAND ! Sony Ericsson Motorola Milestone / Xperia x10 Droid Google (480x854) (480x854) Nexus one (480x800px) ! ! ! !

13. Intro TOESTELLEN IN NEDERLAND ! Sony Ericsson Motorola Milestone / Xperia x10 Droid Google (480x854) (480x854) V Nexus one erwach (480x800px) t ! ! ! !

14. Fragmentatie SOFTWARE Verschillende versies van het Custom ﬁrmware: Telefoon Android OS. aanbieders maken een eigen user interface laag. 1.6 + + 1.5 Etc. + + Etc. 2.0

15. Fragmentatie WAT BETEKENT DIT? • Verzamel up-to-date informatie over de Android versies in de markt. • Testen voor alle versies is altijd noodzakelijk. • Androidis grotendeels backwards compatible, tenzij je een nieuwe feature wilt gebruiken. Voorbeeld: Android 2.0 biedt de Bluetooth API, die P2P interacties mogelijk maakt. Wil je hier een game voor ontwerpen, dan zal deze voorlopig alleen beschikbaar zijn voor gebruikers met Android 2.0.

16. Fragmentatie HARDWARE Hardware verschillen: schermformaten en resoluties, processor snelheid, geheugen capaciteit, camera kwaliteit, etc. Klein Normaal Groot

17. Fragmentatie WAT BETEKENT DIT? • Kies een referentietoestel voor ontwerpers en ontwikkelaars. • Ontwikkel minimaal met Android 1.6 (ondersteunt schalen) en test op 1.5. • Test je applicatie op alle schermformaten. • Leto.a. op: minimale grootte van touch targets bij kleinere schermen / hoge resolutie.

18. UX ontwerp INTERACTIE ONTWERP • UX ontwerprichtlijnen voor Android zijn summier. • UIguidelines op Developers Blog erg technisch of gaan in op details voor visueel ontwerp. • Best practices moeten zich nog ontwikkelen.

19. UX ontwerp OPTIONS MENU

22. UX ontwerp CONTEXT MENU

23. UX ontwerp CONTEXT MENU

24. UX ontwerp TERUG NAVIGATIE

25. UX ontwerp TERUG NAVIGATIE

26. UX ontwerp ZOEKEN Android Quick Search Box Zoeken binnen een app

29. UX ontwerp WIDGETS / LIVE FOLDERS

33. UX ontwerp IN DE PRAKTIJK

41. UX ontwerp TIPS

42. UX ontwerp TIPS

43. UX ontwerp TIPS Plaats geen navigatie of contextuele acties in de header.

44. UX ontwerp TIPS Plaats geen navigatie of contextuele acties in de header.

45. UX ontwerp TIPS Plaats geen navigatie of Gebruik het Options menu contextuele acties in de consistent, indien passend header. voor hoofdnavigatie.

46. UX ontwerp TIPS Gebruik het contextmenu, Plaats geen navigatie of Gebruik het Options menu maar altijd voor acties die contextuele acties in de consistent, indien passend ook benaderbaar zijn vanuit header. voor hoofdnavigatie. het scherm zelf.

47. UX ontwerp TIPS Gebruik het contextmenu, Plaats geen navigatie of Gebruik het Options menu ‘Toast messages’ kunnen maar altijd voor acties die contextuele acties in de consistent, indien passend gebruikt worden voor ook benaderbaar zijn vanuit header. voor hoofdnavigatie. feedback, ook tijdens het het scherm zelf. laden van een scherm.

48. Richtlijnen RICHTLIJNEN ZIJN NODIG “ The choice lies between getting caught up in the excitement of the fad du jour or asking ourselves the difﬁcult question of what foundational principles am I following, or establishing, with the work that I am currently doing.” Dakota Reese Brown Boxes and Arrows, Four Key Principles of Mobile User Experience Design

49. Richtlijnen GEBRUIKERS • Intieme relatie gebruiker en mobiele toestel. • Gebruikerscontext is wisselend gedurend gebruik. • Gebruik is kort en sporadisch: verdeelde aandacht. • Dezelfde applicatie kan door de gebruiker op verschillende devices gebruikt worden. • ....

50. Richtlijnen TOESTELLEN • Kleine schermen vragen om een compacte UI (iPhone 320x480) • Vingers zijn groter dan een muis: geef touch targets min 1cm doorsnee. • De hand bedenkt een deel van de interface • Data invoeren is omslachtig: minimaliseer toetsenbord invoer, bied keuzes. • ....

51. Tools SCHETS TEMPLATES

52. Tools WIREFRAME TEMPLATES

53. Tools PROTOTYPING

54. UNITID ZOEKT INTERACTION DESIGNERS www.unitid.nl matthijs@unitid.nl of rick@unitid.nl

55. DISCUSSIE Biedt de openheid van het Android platform mogelijkheden voor het ontstaan van betere UX oplossingen?

56. ANDROID BRONNEN Desigining for iPhone, Android en Blackberry http://danielmckenzie.com/blog/2009/07/31-ﬂavors-designing-for-iphone-android-and-blackberry-platforms/ Android Developers blog en user interface guidelines http://developer.android.com/guide/practices/ui_guidelines/index.html Perfect Code: How to marry visual and interaction design the Android way http://www.youtube.com/watch?v=wdGHySpipyA iPhone Human Interface Guidelines http://developer.apple.com/iphone/index.action AdMob metrics http://metrics.admob.com Tap is the New Click http://www.kickerstudio.com/blog/2008/09/tap-is-the-new-click-presentation/ Designing gestural interfaces, Dan Saffer http://www.designinggesturalinterfaces.com

Ontwerpen voor Android

Inge Kuijper

Ontwerpen voor Android