10+1 interaction principles on moible ui


Published on

  • 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

No notes for slide

10+1 interaction principles on moible ui

  1. 1. 10 +1Interaction Principles on Mobile UI 移动界面的10+1个互动原则 Presenter: AIMOdesign Lab http://bullfrogdesign.blogspot.com/view/flipcard
  2. 2. Problem: What’s our target? Actual size (inches) 10 Xlarge 7 Large 4 Normal Small 2
  3. 3. Agenda The mobile user(移动用户) Define User Group (UX methods) 10+1interaction principles on mobile UI
  4. 4. The mobile user(移動用戶)
  5. 5. The mobile user(移動用戶) Anxiety
  6. 6. The mobile user(移動用戶) Fragment
  7. 7. The mobile user(移動用戶) Personalization
  8. 8. 1st: Find your target user
  9. 9. Define User Group (UX methods) Find an average profile (qualitative or quantitative methods) AVERAGE PROFILE
  10. 10. Define User Group (UX methods) 用户在实 验室进行语 用户访谈后进行 音便签评估 功能介面拼贴用户进行14天的日志记录,将每次記事軟件的心得记录下来(总共53笔日志,手机记事约占25笔)。 UED团队针对功 能介面和用户需 将概念版本让用 求,输出概念版 户进行回访验证, 本 与研发团队进行 叠代设计 提出界 面的概 进行叠代设计 念版本 (Iterative Design Process)
  11. 11. Define User Group (UX methods) Find an average profile ( web analysis, UX methods) Source: 麥庫,2011 Source: 麥庫,2011
  12. 12. MoreQuick? Efficient?
  13. 13. 10 +1interactive principles Learnability Satisfaction (Pleasure) Efficiency Flexibility Memorabiltiy 10+1interactive principles on mobileConsistency Error Recovery Feedback Simplicity Visibility Mapping
  14. 14. Principle 1:Learnability Easy to use from the first time
  15. 15. Principle 2:Efficiency (cont’d) Key tasks should be mad as efficient as possible n stepsDepth(d): number of levelsBreadth(b):number of options per menu panel
  16. 16. Principle 2:Efficiency (cont’d) Key tasks should be mad as efficient as possible
  17. 17. Principle 2:Efficiency Key tasks should be mad as efficient as possible Auto-suggest search process optimized with Tap-Ahead
  18. 18. Principle 3:Memorability Frequency of use is the key factor in memorability Header Title Content Top (Action bar) Content Context Menu & Tool bar
  19. 19. Principle 4: Error Recovery  Users should never be allowed to make a mistake Dialogs are for: 1.Inform message 2.Force to confirm an action 3.Rigister formToast messages can be trigger by an action user takes
  20. 20. Principle 5:Simplicity Avoid necessary functionality and keep the visual design cleanness Large size Small size Icons is resized but same area Keep all 3 stories are display on smaller size Images are scaled Stylistic element is removed on smaller device Future area
  21. 21. Principle 6:Mapping What the users expect to happen is exactly what should happenDrag and drop (gestures)
  22. 22. Principle 7:Visibility Understnading the user’s goals Touch targets Button size 36x36 px (apples (30 px~44px by fingers touch) suggested 44px)
  23. 23. Principle 8:feedback User should always be in control
  24. 24. Principle 9:Consistency
  25. 25. Principle 10:Flexibility(cont’d)Show/Hide
  26. 26. Principle 10:Flexibility(cont’d)Show/Hide Firefox
  27. 27. Principle 10:Flexibility(cont’d)Show/Hide
  28. 28. Principle 10:Flexibility StretchUtilize 9-patches
  29. 29. Principle 10+1:Satisfaction How much the user enjoys or dislikes your product User Satisfaction? Pleasure to design
  30. 30. THANK YOU