Your SlideShare is downloading. ×
0
Designing User Interfacesfor smartphones
About /me• Tam HANNA– CEO, TamoggemonLtd.– Director,Tamoggemon Holdingk.s.– Runs web sites aboutmobile computing– Writes s...
About /girly• Annette BOSBACH– Clerk to thecoordinating office,Tamoggemon Holdingk.s.
On smartphones- or -think before you code
Mobiles are not computers• CPU power on par with Intel P4• HD screens coming• But: itit‘‘ss NOT A PCNOT A PC
Short sessionsPalmSource, The Zen of Palm
Bursty usagePalmSource, The Zen of Palm
Features / Satisfaction• Adding new features gets PR boost• On a PC, more features = better app• In mobile, things are dif...
Satisfaction / Features
Satisfaction / Features - II• Increased power widens sweet spot• Faster CPU– Complex features less of an issue• More memor...
What to do?
Best practices• GUI design is not fixed science– Sometimes, bad is good• Like a design pattern– Feel free to adapt
Dont waste screen space• Screen real estate is severely limited– 800x480 is common baseline• HD resolution in mobile is NO...
Clicks are evil• Mobile sessions are short– Whiney wife wants to know where she‘ll eat• Clicks require dexterity
Clicks are evil - II• Solution: minimize clicks• Dumb users are more affected– „Simple flow“ – few clicks– „Complex flow“ ...
Clicks are evil - III• What do they doright?
Clicks are evil - IV• Quick access tocommon functions!• Less quick access torarely needed ones!
Clicks are evil - V• Good approach: paper prototypes•• EXERCISEEXERCISE– Cell phone– Paper– Pen– Scissor/Knife/Dagger/fing...
Input is evil• Data input on a PC is no issue– QWERTY keyboard• On mobile, it‘s less funny
Input is evil - II• Hardware keyboards– Somewhat fast– Still tedious• Swype/Graffiti/whatever– Slow– Take up screen real e...
Input is evil - III• Cache common input• „App thinks ahead“– Palm Pre style
In Rome, like the Romans• Consistency is everything– Inconsistent behavior => unhappyness• Humans are animals of habit– Ro...
In Rome, like the Romans - II• OS vendors set strong standards• Users are accustomed to them•• BetterBetter blend inblend in
In Rome, like the Romans - III
Swift like the devil• Mobile phones are used in high pressure• Delays are unacceptable and annoying• Make the GUI respond ...
Swift like the devil - II• Not always possible– Show progress indicator– Show „spin ball“
Boom-shake-a-lake!• Desktop users have high accuracy input– Mice are accurate as hell– Trackpads are decent, too– Position...
Boom-shake-a-lake! - II• Resistive screen– With stylus: 05cm x 0.5cm– Without stylus: see below• Capacitive screen– Very i...
Boom-shake-a-lake - III• The world is not an ideal place• Users use cell phones on the run– Trains– Cars– Walking== Vibrat...
Boom-shake-a-lake - IV• Misclicks are really evil on touchscreens– No Select/Confirm-Pattern• Misclicks cause unhappy user...
Boom-shake-a-lake V• Avoid Misclicks– LARGE controls– Group controls sensibly• Mitigate Misclicks– Ask before wreaking havoc
Boom-shake-a-lake VI• What is bad?
Boom-shake-a-lake VI• Up and Delete• Ouch
Save power• Power usage is critical– Apps which drain power are unpopular• Problems:– Reconnection loops– Network keepaliv...
Colors count• In direct sunlight, screen contrast suffers
Colors count - II• Black causes more reflections than white– But: OLED power issue
Don‘t be annoying• Push messages are useful– Inform users– Can increase retention (see studies)• IF the notification area ...
Test on humans• „Betriebsblindheit“– Blindness of operator• Developer of app understands his GUI– Developer is not user– U...
Test on humans - II
Test on humans - III• Testers „burn“– They get accustomed• The world is full of testers– Check forums or ask on the road– ...
Further reading• [SPOL]http://www.joelonsoftware.com/uibook/fog0000000249.html• [GUI]http://shop.oreilly.com/product/97805...
?!? / !?!tamhan@tamoggemon.com
Droidcon 2013 ui smartphones tam hanna
Upcoming SlideShare
Loading in...5
×

Droidcon 2013 ui smartphones tam hanna

336

Published on

Published in: Technology, Health & Medicine
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
336
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Droidcon 2013 ui smartphones tam hanna"

  1. 1. Designing User Interfacesfor smartphones
  2. 2. About /me• Tam HANNA– CEO, TamoggemonLtd.– Director,Tamoggemon Holdingk.s.– Runs web sites aboutmobile computing– Writes scientific books
  3. 3. About /girly• Annette BOSBACH– Clerk to thecoordinating office,Tamoggemon Holdingk.s.
  4. 4. On smartphones- or -think before you code
  5. 5. Mobiles are not computers• CPU power on par with Intel P4• HD screens coming• But: itit‘‘ss NOT A PCNOT A PC
  6. 6. Short sessionsPalmSource, The Zen of Palm
  7. 7. Bursty usagePalmSource, The Zen of Palm
  8. 8. Features / Satisfaction• Adding new features gets PR boost• On a PC, more features = better app• In mobile, things are different
  9. 9. Satisfaction / Features
  10. 10. Satisfaction / Features - II• Increased power widens sweet spot• Faster CPU– Complex features less of an issue• More memory– App can be larger
  11. 11. What to do?
  12. 12. Best practices• GUI design is not fixed science– Sometimes, bad is good• Like a design pattern– Feel free to adapt
  13. 13. Dont waste screen space• Screen real estate is severely limited– 800x480 is common baseline• HD resolution in mobile is NOT PC-like– Screen is MUCH SMALLER• Users dont have 10:10 eyes
  14. 14. Clicks are evil• Mobile sessions are short– Whiney wife wants to know where she‘ll eat• Clicks require dexterity
  15. 15. Clicks are evil - II• Solution: minimize clicks• Dumb users are more affected– „Simple flow“ – few clicks– „Complex flow“ – more clicks
  16. 16. Clicks are evil - III• What do they doright?
  17. 17. Clicks are evil - IV• Quick access tocommon functions!• Less quick access torarely needed ones!
  18. 18. Clicks are evil - V• Good approach: paper prototypes•• EXERCISEEXERCISE– Cell phone– Paper– Pen– Scissor/Knife/Dagger/fingernail– Comrade
  19. 19. Input is evil• Data input on a PC is no issue– QWERTY keyboard• On mobile, it‘s less funny
  20. 20. Input is evil - II• Hardware keyboards– Somewhat fast– Still tedious• Swype/Graffiti/whatever– Slow– Take up screen real estate (!)
  21. 21. Input is evil - III• Cache common input• „App thinks ahead“– Palm Pre style
  22. 22. In Rome, like the Romans• Consistency is everything– Inconsistent behavior => unhappyness• Humans are animals of habit– Rote learning is effective– E.g. arms disassembly drill
  23. 23. In Rome, like the Romans - II• OS vendors set strong standards• Users are accustomed to them•• BetterBetter blend inblend in
  24. 24. In Rome, like the Romans - III
  25. 25. Swift like the devil• Mobile phones are used in high pressure• Delays are unacceptable and annoying• Make the GUI respond swiftly
  26. 26. Swift like the devil - II• Not always possible– Show progress indicator– Show „spin ball“
  27. 27. Boom-shake-a-lake!• Desktop users have high accuracy input– Mice are accurate as hell– Trackpads are decent, too– Position and Activation are two steps• On mobile, things are different– Hello, touchscreen
  28. 28. Boom-shake-a-lake! - II• Resistive screen– With stylus: 05cm x 0.5cm– Without stylus: see below• Capacitive screen– Very inaccurate (even with stylus)– 1cm x 1cm is reasonable
  29. 29. Boom-shake-a-lake - III• The world is not an ideal place• Users use cell phones on the run– Trains– Cars– Walking== Vibration== Vibration
  30. 30. Boom-shake-a-lake - IV• Misclicks are really evil on touchscreens– No Select/Confirm-Pattern• Misclicks cause unhappy users– They fucked up– but your app gave them the opportunity
  31. 31. Boom-shake-a-lake V• Avoid Misclicks– LARGE controls– Group controls sensibly• Mitigate Misclicks– Ask before wreaking havoc
  32. 32. Boom-shake-a-lake VI• What is bad?
  33. 33. Boom-shake-a-lake VI• Up and Delete• Ouch
  34. 34. Save power• Power usage is critical– Apps which drain power are unpopular• Problems:– Reconnection loops– Network keepalive– Screen colors (OLED)
  35. 35. Colors count• In direct sunlight, screen contrast suffers
  36. 36. Colors count - II• Black causes more reflections than white– But: OLED power issue
  37. 37. Don‘t be annoying• Push messages are useful– Inform users– Can increase retention (see studies)• IF the notification area does not overflow
  38. 38. Test on humans• „Betriebsblindheit“– Blindness of operator• Developer of app understands his GUI– Developer is not user– User does not know your design specs
  39. 39. Test on humans - II
  40. 40. Test on humans - III• Testers „burn“– They get accustomed• The world is full of testers– Check forums or ask on the road– Not being able to find testers: ouch!!!
  41. 41. Further reading• [SPOL]http://www.joelonsoftware.com/uibook/fog0000000249.html• [GUI]http://shop.oreilly.com/product/9780596008031.do• [ZEN]http://www.cs.uml.edu/~fredm/courses/91.308-fall05/palm/zenofpalm.pdf
  42. 42. ?!? / !?!tamhan@tamoggemon.com
  1. A particular slide catching your eye?

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

×