Droidcon 2013 ui smartphones tam hanna
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Droidcon 2013 ui smartphones tam hanna






Total Views
Views on SlideShare
Embed Views



1 Embed 38

http://de.droidcon.com 38


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Droidcon 2013 ui smartphones tam hanna Presentation Transcript

  • 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]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. ?!? / !?!tamhan@tamoggemon.com