Your SlideShare is downloading. ×
Droidcon 2013 ui smartphones tam hanna
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Droidcon 2013 ui smartphones tam hanna


Published on

Published in: Technology, Health & Medicine

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Designing User Interfacesfor smartphones
  • 2. About /me• Tam HANNA– CEO, TamoggemonLtd.– Director,Tamoggemon Holdingk.s.– Runs web sites aboutmobile computing– Writes scientific books
  • 3. About /girly• Annette BOSBACH– Clerk to thecoordinating office,Tamoggemon Holdingk.s.
  • 4. On smartphones- or -think before you code
  • 5. Mobiles are not computers• CPU power on par with Intel P4• HD screens coming• But: itit‘‘ss NOT A PCNOT A PC
  • 6. Short sessionsPalmSource, The Zen of Palm
  • 7. Bursty usagePalmSource, The Zen of Palm
  • 8. Features / Satisfaction• Adding new features gets PR boost• On a PC, more features = better app• In mobile, things are different
  • 9. Satisfaction / Features
  • 10. Satisfaction / Features - II• Increased power widens sweet spot• Faster CPU– Complex features less of an issue• More memory– App can be larger
  • 11. What to do?
  • 12. Best practices• GUI design is not fixed science– Sometimes, bad is good• Like a design pattern– Feel free to adapt
  • 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. Clicks are evil• Mobile sessions are short– Whiney wife wants to know where she‘ll eat• Clicks require dexterity
  • 15. Clicks are evil - II• Solution: minimize clicks• Dumb users are more affected– „Simple flow“ – few clicks– „Complex flow“ – more clicks
  • 16. Clicks are evil - III• What do they doright?
  • 17. Clicks are evil - IV• Quick access tocommon functions!• Less quick access torarely needed ones!
  • 18. Clicks are evil - V• Good approach: paper prototypes•• EXERCISEEXERCISE– Cell phone– Paper– Pen– Scissor/Knife/Dagger/fingernail– Comrade
  • 19. Input is evil• Data input on a PC is no issue– QWERTY keyboard• On mobile, it‘s less funny
  • 20. Input is evil - II• Hardware keyboards– Somewhat fast– Still tedious• Swype/Graffiti/whatever– Slow– Take up screen real estate (!)
  • 21. Input is evil - III• Cache common input• „App thinks ahead“– Palm Pre style
  • 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. In Rome, like the Romans - II• OS vendors set strong standards• Users are accustomed to them•• BetterBetter blend inblend in
  • 24. In Rome, like the Romans - III
  • 25. Swift like the devil• Mobile phones are used in high pressure• Delays are unacceptable and annoying• Make the GUI respond swiftly
  • 26. Swift like the devil - II• Not always possible– Show progress indicator– Show „spin ball“
  • 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. 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. 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. 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. Boom-shake-a-lake V• Avoid Misclicks– LARGE controls– Group controls sensibly• Mitigate Misclicks– Ask before wreaking havoc
  • 32. Boom-shake-a-lake VI• What is bad?
  • 33. Boom-shake-a-lake VI• Up and Delete• Ouch
  • 34. Save power• Power usage is critical– Apps which drain power are unpopular• Problems:– Reconnection loops– Network keepalive– Screen colors (OLED)
  • 35. Colors count• In direct sunlight, screen contrast suffers
  • 36. Colors count - II• Black causes more reflections than white– But: OLED power issue
  • 37. Don‘t be annoying• Push messages are useful– Inform users– Can increase retention (see studies)• IF the notification area does not overflow
  • 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. Test on humans - II
  • 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. Further reading• [SPOL]• [GUI]• [ZEN]
  • 42. ?!? / !?!