1. 10 +1Interaction Principles on Mobile UI
移动界面的10+1个互动原则
Presenter: AIMOdesign Lab
http://bullfrogdesign.blogspot.com/view/flipcard

3. Problem: What’s our target?
Actual size (inches)
10
Xlarge
7
Large
4
Normal
Small
2

4. Agenda
 The mobile user(移动用户)
 Define User Group (UX methods)
 10+1interaction principles on mobile UI

5. The mobile user(移動用戶)

6. The mobile user(移動用戶)
Anxiety

7. The mobile user(移動用戶)
Fragment

8. The mobile user(移動用戶)
Personalization

9. 1st: Find your target user

10. Define User Group (UX methods)
 Find an average profile (qualitative or quantitative methods)
AVERAGE
PROFILE

11. Define User Group (UX methods)
用户在实
验室进行语 用户访谈后进行
音便签评估 功能介面拼贴
用户进行14天的日志记录，
将每次記事軟件的心得记录
下来（总共53笔日志，手机
记事约占25笔）。
UED团队针对功
能介面和用户需
将概念版本让用
求，输出概念版
户进行回访验证，
本
与研发团队进行
叠代设计 提出界
面的概
进行叠代设计 念版本
(Iterative Design
Process)

12. Define User Group (UX methods)
 Find an average profile ( web analysis, UX methods)
Source: 麥庫,2011
Source: 麥庫,2011

13. More
Quick?
Efficient?

14. 10 +1interactive principles
Learnability
Satisfaction
(Pleasure) Efficiency
Flexibility
Memorabiltiy
10+1interactive
principles on mobile
Consistency Error
Recovery
Feedback Simplicity
Visibility Mapping

15. Principle 1:Learnability
 Easy to use from the first time

16. Principle 2:Efficiency (cont’d)
 Key tasks should be mad as efficient as possible
n steps
Depth(d): number of levels
Breadth(b):number of options per menu panel

17. Principle 2:Efficiency (cont’d)
 Key tasks should be mad as efficient as possible

18. Principle 2:Efficiency
 Key tasks should be mad as efficient as possible
Auto-suggest search process optimized with Tap-Ahead

19. Principle 3:Memorability
 Frequency of use is the key factor in memorability
Header
Title
Content Top (Action bar)
Content
Context Menu & Tool bar

20. 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 form
Toast messages can be trigger by an action user takes

21. 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

22. Principle 6:Mapping
 What the users expect to happen is exactly what should happen
Drag and drop (gestures)

23. Principle 7:Visibility
 Understnading the user’s goals
Touch targets
Button size 36x36 px (apples
(30 px~44px by fingers touch)
suggested 44px)

24. Principle 8:feedback
 User should always be in control

25. Principle 9:Consistency

26. Principle 10:Flexibility(cont’d)
Show/Hide

27. Principle 10:Flexibility(cont’d)
Show/Hide
Firefox

28. Principle 10:Flexibility(cont’d)
Show/Hide

29. Principle 10:Flexibility
Stretch
Utilize 9-patches

30. Principle 10+1:Satisfaction
 How much the user enjoys or dislikes your product
User Satisfaction?
Pleasure to design

31. THANK YOU