10 +1Interaction Principles on Mobile UI      移动界面的10+1个互动原则                     Presenter: AIMOdesign Lab         http://...
Problem: What’s our target?                 Actual size (inches)                10                                Xlarge  ...
Agenda The mobile user(移动用户) Define User Group (UX methods) 10+1interaction principles on mobile UI
The mobile user(移動用戶)
The mobile user(移動用戶)       Anxiety
The mobile user(移動用戶)      Fragment
The mobile user(移動用戶)   Personalization
1st:   Find your target user
Define User Group (UX methods) Find an average profile (qualitative or quantitative methods)                             ...
Define User Group (UX methods)                      用户在实                      验室进行语             用户访谈后进行                   ...
Define User Group (UX methods) Find an average profile ( web analysis, UX methods)                                       ...
MoreQuick?         Efficient?
10 +1interactive principles                              Learnability      Satisfaction      (Pleasure)                   ...
Principle 1:Learnability Easy to use from the first time
Principle 2:Efficiency (cont’d) Key tasks should be mad as efficient as possible                                         ...
Principle 2:Efficiency (cont’d) Key tasks should be mad as efficient as possible
Principle 2:Efficiency Key tasks should be mad as efficient as possible    Auto-suggest search process optimized with Tap...
Principle 3:Memorability Frequency of use is the key factor in memorability                                 Header       ...
Principle 4: Error Recovery  Users should never be allowed to make a mistake                                             ...
Principle 5:Simplicity Avoid necessary functionality and keep the visual design cleanness   Large size                   ...
Principle 6:Mapping What the users expect to happen is exactly what should happenDrag and drop (gestures)
Principle 7:Visibility Understnading the user’s goals                                     Touch targets      Button size ...
Principle 8:feedback User should always be in control
Principle 9:Consistency
Principle 10:Flexibility(cont’d)Show/Hide
Principle 10:Flexibility(cont’d)Show/Hide                 Firefox
Principle 10:Flexibility(cont’d)Show/Hide
Principle 10:Flexibility                        StretchUtilize 9-patches
Principle 10+1:Satisfaction How much the user enjoys or dislikes your product   User Satisfaction?   Pleasure to design
THANK YOU
10+1 interaction principles on moible ui
Upcoming SlideShare
Loading in …5
×

10+1 interaction principles on moible ui

260 views
225 views

Published on

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
260
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
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

×