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