Download - 10+1 interaction principles on moible ui
10 +1Interaction Principles on Mobile UI
移动界面的10+1个互动原则
Presenter: AIMOdesign Lab
http://bullfrogdesign.blogspot.com/view/flipcard
Problem: What’s our target?
2
4
7
10
Small
Normal
Large
Xlarge
Actual size (inches)
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)
AVERAGE
PROFILE
用户在实
验室进行语音便签评估
用户访谈后进行功能介面拼贴
UED团队针对功能介面和用户需求,输出概念版本
提出界面的概念版本
将概念版本让用户进行回访验证,与研发团队进行叠代设计
用户进行14天的日志记录,将每次記事軟件的心得记录下来(总共53笔日志,手机记事约占25笔)。
进行叠代设计(Iterative Design Process)
Define User Group (UX methods)
Define User Group (UX methods) Find an average profile ( web analysis, UX methods)
Source: 麥庫,2011
Source: 麥庫,2011
More
Quick?
Efficient?
10 +1interactive principles
10+1interactive principles on mobile
Learnability
Efficiency
Memorabiltiy
Error Recovery
Simplicity
MappingVisibility
Feedback
Consistency
Flexibility
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
Depth(d): number of levels
Breadth(b):number of options per menu panel
n steps
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-Ahead
Principle 3:Memorability Frequency of use is the key factor in memorability
Header
Title
Content Top (Action bar)
Content
Context Menu & Tool bar
Principle 4: Error Recovery Users should never be allowed to make a mistake
Toast messages can be trigger by an action user takes
Dialogs are for:
1.Inform message
2.Force to confirm an action
3.Rigister form
Principle 5:Simplicity Avoid necessary functionality and keep the visual design cleanness
Large sizeIcons is resized but same area
Images are scaled
Future area
Small sizeKeep all 3 stories are display on smaller size
Stylistic element is removed on smaller device
Principle 6:MappingWhat the users expect to happen is exactly what should happen
Drag and drop (gestures)
Principle 7:Visibility Understnading the user’s goals
Touch targets
(30 px~44px by fingers touch)Button size 36x36 px (apples
suggested 44px)
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
Utilize 9-patches
Stretch
Principle 10+1:Satisfaction How much the user enjoys or dislikes your product
User Satisfaction?
Pleasure to design
THANK YOU