Wat is Android? Wat betekent fragmentatie voor ontwerpers en ontwikkelaars? Welke ontwerprichtlijnen kunnen we volgen voor een betere UX van Android applicaties?

1. ONTWERPEN VOOR ANDROID
dinsdag 26 januari 2010

2. INGE KUIJPER
Nieuwe Garde Amsterdam
www.nieuwegardeamsterdam.nl
@nieuwegardeAms
dinsdag 26 januari 2010

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

4. WAT IS ANDROID?
dinsdag 26 januari 2010

5. Intro
Google’s open source Operating System
voor het mobiele platform
dinsdag 26 januari 2010

6. Intro
Gelanceerd
oktober 2008
iPhone: juni 2007
dinsdag 26 januari 2010

7. Intro
TOESTELLEN
Wereldwijd Nederland
meer dan 16 7
dinsdag 26 januari 2010

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.
dinsdag 26 januari 2010

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

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
dinsdag 26 januari 2010

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
dinsdag 26 januari 2010

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

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

14. Fragmentatie
SOFTWARE
Verschillende versies van het Custom firmware: Telefoon
Android OS. aanbieders maken een eigen user
interface laag.
1.6 + +
1.5 Etc.
+ + Etc.
2.0
dinsdag 26 januari 2010

15. Fragmentatie
WAT BETEKENT DIT?
• Verzamel up-to-date informatie over de Android versies in de markt.
• Testen voor alle versies is altijd noodzakelijk.
• Android is 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.
dinsdag 26 januari 2010

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

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.
• Let o.a. op: minimale grootte van touch targets bij kleinere schermen / hoge
resolutie.
dinsdag 26 januari 2010

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

19. UX ontwerp
OPTIONS MENU
dinsdag 26 januari 2010

20. UX ontwerp
OPTIONS MENU
dinsdag 26 januari 2010

21. UX ontwerp
OPTIONS MENU
dinsdag 26 januari 2010

22. UX ontwerp
CONTEXT MENU
dinsdag 26 januari 2010

23. UX ontwerp
CONTEXT MENU
dinsdag 26 januari 2010

24. UX ontwerp
TERUG NAVIGATIE
dinsdag 26 januari 2010

25. UX ontwerp
TERUG NAVIGATIE
dinsdag 26 januari 2010

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

27. UX ontwerp
ZOEKEN
Android Quick Search Box Zoeken binnen een app
dinsdag 26 januari 2010

28. UX ontwerp
ZOEKEN
Android Quick Search Box Zoeken binnen een app
dinsdag 26 januari 2010

29. UX ontwerp
WIDGETS / LIVE FOLDERS
dinsdag 26 januari 2010

30. UX ontwerp
WIDGETS / LIVE FOLDERS
dinsdag 26 januari 2010

31. UX ontwerp
WIDGETS / LIVE FOLDERS
dinsdag 26 januari 2010

32. UX ontwerp
WIDGETS / LIVE FOLDERS
dinsdag 26 januari 2010

33. UX ontwerp
IN DE PRAKTIJK
dinsdag 26 januari 2010

34. UX ontwerp
IN DE PRAKTIJK
dinsdag 26 januari 2010

35. UX ontwerp
IN DE PRAKTIJK
dinsdag 26 januari 2010

36. UX ontwerp
IN DE PRAKTIJK
dinsdag 26 januari 2010

37. UX ontwerp
IN DE PRAKTIJK
dinsdag 26 januari 2010

38. UX ontwerp
IN DE PRAKTIJK
dinsdag 26 januari 2010

39. UX ontwerp
IN DE PRAKTIJK
dinsdag 26 januari 2010

40. UX ontwerp
IN DE PRAKTIJK
dinsdag 26 januari 2010

41. UX ontwerp
TIPS
dinsdag 26 januari 2010

42. UX ontwerp
TIPS
dinsdag 26 januari 2010

43. UX ontwerp
TIPS
Plaats geen navigatie of
contextuele acties in de
header.
dinsdag 26 januari 2010

44. UX ontwerp
TIPS
Plaats geen navigatie of
contextuele acties in de
header.
dinsdag 26 januari 2010

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

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.
dinsdag 26 januari 2010

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.
dinsdag 26 januari 2010

48. Richtlijnen
RICHTLIJNEN ZIJN NODIG
“ The choice lies between getting caught up in the excitement of
the fad du jour or asking ourselves the difficult 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
dinsdag 26 januari 2010

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.
• ....
dinsdag 26 januari 2010

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.
• ....
dinsdag 26 januari 2010

51. Tools
SCHETS TEMPLATES
dinsdag 26 januari 2010

52. Tools
WIREFRAME TEMPLATES
dinsdag 26 januari 2010

53. Tools
PROTOTYPING
dinsdag 26 januari 2010

54. UNITID ZOEKT
INTERACTION DESIGNERS
www.unitid.nl
matthijs@unitid.nl of rick@unitid.nl
dinsdag 26 januari 2010

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

56. ANDROID BRONNEN
Desigining for iPhone, Android en Blackberry
http://danielmckenzie.com/blog/2009/07/31-flavors-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
dinsdag 26 januari 2010