Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Ontwerpen voor Android

6.410 visualizaciones

Publicado el

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

  • Sé el primero en comentar

Ontwerpen voor Android

  1. 1. ONTWERPEN VOOR ANDROID
  2. 2. INGE KUIJPER Nieuwe Garde Amsterdam www.nieuwegardeamsterdam.nl @nieuwegardeAms
  3. 3. Intro INTERNET GEBRUIK OP MOBIEL - WERELD Bron: AdMob/Google, November 2009
  4. 4. WAT IS ANDROID?
  5. 5. Intro Google’s open source Operating System voor het mobiele platform
  6. 6. Intro Gelanceerd oktober 2008 iPhone: juni 2007
  7. 7. Intro TOESTELLEN Wereldwijd Nederland 16 meer dan 7
  8. 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. 9. Intro VOORSPELD Android is in 2012 het op 1 na grootste smartphone platform (na Symbian)
  10. 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. 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. 12. Intro TOESTELLEN IN NEDERLAND ! Sony Ericsson Motorola Milestone / Xperia x10 Droid Google (480x854) (480x854) Nexus one (480x800px) ! ! ! !
  13. 13. Intro TOESTELLEN IN NEDERLAND ! Sony Ericsson Motorola Milestone / Xperia x10 Droid Google (480x854) (480x854) V Nexus one erwach (480x800px) t ! ! ! !
  14. 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
  15. 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. 16. Fragmentatie HARDWARE Hardware verschillen: schermformaten en resoluties, processor snelheid, geheugen capaciteit, camera kwaliteit, etc. Klein Normaal Groot
  17. 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. 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. 19. UX ontwerp OPTIONS MENU
  20. 20. UX ontwerp OPTIONS MENU
  21. 21. UX ontwerp OPTIONS MENU
  22. 22. UX ontwerp CONTEXT MENU
  23. 23. UX ontwerp CONTEXT MENU
  24. 24. UX ontwerp TERUG NAVIGATIE
  25. 25. UX ontwerp TERUG NAVIGATIE
  26. 26. UX ontwerp ZOEKEN Android Quick Search Box Zoeken binnen een app
  27. 27. UX ontwerp ZOEKEN Android Quick Search Box Zoeken binnen een app
  28. 28. UX ontwerp ZOEKEN Android Quick Search Box Zoeken binnen een app
  29. 29. UX ontwerp WIDGETS / LIVE FOLDERS
  30. 30. UX ontwerp WIDGETS / LIVE FOLDERS
  31. 31. UX ontwerp WIDGETS / LIVE FOLDERS
  32. 32. UX ontwerp WIDGETS / LIVE FOLDERS
  33. 33. UX ontwerp IN DE PRAKTIJK
  34. 34. UX ontwerp IN DE PRAKTIJK
  35. 35. UX ontwerp IN DE PRAKTIJK
  36. 36. UX ontwerp IN DE PRAKTIJK
  37. 37. UX ontwerp IN DE PRAKTIJK
  38. 38. UX ontwerp IN DE PRAKTIJK
  39. 39. UX ontwerp IN DE PRAKTIJK
  40. 40. UX ontwerp IN DE PRAKTIJK
  41. 41. UX ontwerp TIPS
  42. 42. UX ontwerp TIPS
  43. 43. UX ontwerp TIPS Plaats geen navigatie of contextuele acties in de header.
  44. 44. UX ontwerp TIPS Plaats geen navigatie of contextuele acties in de header.
  45. 45. UX ontwerp TIPS Plaats geen navigatie of Gebruik het Options menu contextuele acties in de consistent, indien passend header. voor hoofdnavigatie.
  46. 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. 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. 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
  49. 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. 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. 51. Tools SCHETS TEMPLATES
  52. 52. Tools WIREFRAME TEMPLATES
  53. 53. Tools PROTOTYPING
  54. 54. UNITID ZOEKT INTERACTION DESIGNERS www.unitid.nl matthijs@unitid.nl of rick@unitid.nl
  55. 55. DISCUSSIE Biedt de openheid van het Android platform mogelijkheden voor het ontstaan van betere UX oplossingen?
  56. 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

×