Wat is Android? Wat betekent fragmentatie voor ontwerpers en ontwikkelaars? Welke ontwerprichtlijnen kunnen we volgen voor een betere UX van Android applicaties?
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
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
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
Notas do Editor
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
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.