10+1 interaction principles on moible ui
Upcoming SlideShare
Loading in...5

Like this? Share it with your network

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    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. 10 +1Interaction Principles on Mobile UI 移动界面的10+1个互动原则 Presenter: AIMOdesign Lab http://bullfrogdesign.blogspot.com/view/flipcard
  • 2. Problem: What’s our target? Actual size (inches) 10 Xlarge 7 Large 4 Normal Small 2
  • 3. Agenda The mobile user(移动用户) Define User Group (UX methods) 10+1interaction principles on mobile UI
  • 4. The mobile user(移動用戶)
  • 5. The mobile user(移動用戶) Anxiety
  • 6. The mobile user(移動用戶) Fragment
  • 7. The mobile user(移動用戶) Personalization
  • 8. 1st: Find your target user
  • 9. Define User Group (UX methods) Find an average profile (qualitative or quantitative methods) AVERAGE PROFILE
  • 10. Define User Group (UX methods) 用户在实 验室进行语 用户访谈后进行 音便签评估 功能介面拼贴用户进行14天的日志记录,将每次記事軟件的心得记录下来(总共53笔日志,手机记事约占25笔)。 UED团队针对功 能介面和用户需 将概念版本让用 求,输出概念版 户进行回访验证, 本 与研发团队进行 叠代设计 提出界 面的概 进行叠代设计 念版本 (Iterative Design Process)
  • 11. Define User Group (UX methods) Find an average profile ( web analysis, UX methods) Source: 麥庫,2011 Source: 麥庫,2011
  • 12. MoreQuick? Efficient?
  • 13. 10 +1interactive principles Learnability Satisfaction (Pleasure) Efficiency Flexibility Memorabiltiy 10+1interactive principles on mobileConsistency Error Recovery Feedback Simplicity Visibility Mapping
  • 14. Principle 1:Learnability Easy to use from the first time
  • 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. Principle 2:Efficiency (cont’d) Key tasks should be mad as efficient as possible
  • 17. Principle 2:Efficiency Key tasks should be mad as efficient as possible Auto-suggest search process optimized with Tap-Ahead
  • 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. 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. 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. Principle 6:Mapping What the users expect to happen is exactly what should happenDrag and drop (gestures)
  • 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. Principle 8:feedback User should always be in control
  • 24. Principle 9:Consistency
  • 25. Principle 10:Flexibility(cont’d)Show/Hide
  • 26. Principle 10:Flexibility(cont’d)Show/Hide Firefox
  • 27. Principle 10:Flexibility(cont’d)Show/Hide
  • 28. Principle 10:Flexibility StretchUtilize 9-patches
  • 29. Principle 10+1:Satisfaction How much the user enjoys or dislikes your product User Satisfaction? Pleasure to design
  • 30. THANK YOU