Ontwerpen voor Android

5,950
-1

Published on

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

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,950
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
47
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • UNITiD ontwerpt websites en applicaties, voor desktop, mobiel en andere devices
    user experiences voor web, desktop en mobiel.
    Ontwerpen die goed werken en begrijpelijk zijn, en als het even kan ook eenvoudig.

    Netwerk voor jonge creatieven
    stimuleren van interactie tussen verschillende disciplines
    activiteiten: brainstorms, 8UO, pressure cooker, etc
  • ontwikkeld door de Open Handset Alliance
  • Andere devices?
    Acer netbook, Archos Internet tablet
  • Gartner
  • Abonnement, bijhouden welke toestellen er zijn
    resolutie
  • cupcake, donut, eclair
    htc sense, motorola motoblur, sony ux
    htc is bezig met een update Hero van 1.5 naar 2.0
  • Niet per definitie backwards compatible
    The Android platform strives to ensure backwards compatibility. However, sometimes you want to use new features which aren't supported on older platforms.
    API’s en technologieen
  • multitouch en single touch?
    resolutie en fysiek
    oplossingen voor graphics
  • Android developers blog
    UI guidelinesThe activity that starts a task is called the root activity
    ‘design’> gericht op developers
  • primaire navigatie?
    contextuele acties
    consistentie?
  • primaire navigatie?
    contextuele acties
    consistentie?
  • Rechtermuisklik
  • Terug en undo
  • Widgets: 4 verschillende formaten
    Update per x uur

    Live folders
    1 formaat, lijst view
    Update elke x sec
    Geschikt voor bv RSS feed met nieuwsberichten
  • Widgets: 4 verschillende formaten
    Update per x uur

    Live folders
    1 formaat, lijst view
    Update elke x sec
    Geschikt voor bv RSS feed met nieuwsberichten
  • Widgets: 4 verschillende formaten
    Update per x uur

    Live folders
    1 formaat, lijst view
    Update elke x sec
    Geschikt voor bv RSS feed met nieuwsberichten
  • afhankelijk van applicatie stijl: productivity, utility, immersive
    GoogleMaps =

    HTC contacts ed?
  • afhankelijk van applicatie stijl: productivity, utility, immersive
    GoogleMaps =

    HTC contacts ed?
  • afhankelijk van applicatie stijl: productivity, utility, immersive
    GoogleMaps =

    HTC contacts ed?
  • afhankelijk van applicatie stijl: productivity, utility, immersive
    GoogleMaps =

    HTC contacts ed?
  • afhankelijk van applicatie stijl: productivity, utility, immersive
    GoogleMaps =

    HTC contacts ed?
  • afhankelijk van applicatie stijl: productivity, utility, immersive
    GoogleMaps =

    HTC contacts ed?
  • afhankelijk van applicatie stijl: productivity, utility, immersive
    GoogleMaps =

    HTC contacts ed?
  • afhankelijk van applicatie stijl: productivity, utility, immersive
    GoogleMaps =

    HTC contacts ed?
  • afhankelijk van applicatie stijl: productivity, utility, immersive
    GoogleMaps =

    HTC contacts ed?
  • afhankelijk van applicatie stijl: productivity, utility, immersive
    GoogleMaps =

    HTC contacts ed?
  • afhankelijk van applicatie stijl: productivity, utility, immersive
    GoogleMaps =

    HTC contacts ed?
  • afhankelijk van applicatie stijl: productivity, utility, immersive
    GoogleMaps =

    HTC contacts ed?
  • afhankelijk van applicatie stijl: productivity, utility, immersive
    GoogleMaps =

    HTC contacts ed?
  • Uitgebreide iPhone ontwerprichtlijnenbest practices ontstaanA productivity application enables tasks that are based on the organization and manipulation of detailed information.
  • iPhone Human Interface Guidelines
    Tap is the new click
    Designing gestural interfaces
    targets: let op resolutie!(icebertg tips, adaptive targets), plaats essentiele features / informatie niet onder een interface element
  • www.unitid.nl
    iPhone: http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/

    Ook omnigraffle, photoshop, etc.
  • 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×