• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
10+1 interaction principles on moible ui
 

10+1 interaction principles on moible ui

on

  • 285 views

 

Statistics

Views

Total Views
285
Views on SlideShare
285
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    10+1 interaction principles on moible ui 10+1 interaction principles on moible ui Presentation Transcript

    • 10 +1Interaction Principles on Mobile UI 移动界面的10+1个互动原则 Presenter: AIMOdesign Lab http://bullfrogdesign.blogspot.com/view/flipcard
    • Problem: What’s our target? Actual size (inches) 10 Xlarge 7 Large 4 Normal Small 2
    • 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
    • Define User Group (UX methods) 用户在实 验室进行语 用户访谈后进行 音便签评估 功能介面拼贴用户进行14天的日志记录,将每次記事軟件的心得记录下来(总共53笔日志,手机记事约占25笔)。 UED团队针对功 能介面和用户需 将概念版本让用 求,输出概念版 户进行回访验证, 本 与研发团队进行 叠代设计 提出界 面的概 进行叠代设计 念版本 (Iterative Design Process)
    • Define User Group (UX methods) Find an average profile ( web analysis, UX methods) Source: 麥庫,2011 Source: 麥庫,2011
    • MoreQuick? Efficient?
    • 10 +1interactive principles Learnability Satisfaction (Pleasure) Efficiency Flexibility Memorabiltiy 10+1interactive principles on mobileConsistency Error Recovery Feedback Simplicity Visibility Mapping
    • Principle 1:Learnability Easy to use from the first time
    • 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
    • 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 Dialogs are for: 1.Inform message 2.Force to confirm an action 3.Rigister formToast messages can be trigger by an action user takes
    • 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
    • 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 36x36 px (apples (30 px~44px by fingers touch) 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 StretchUtilize 9-patches
    • Principle 10+1:Satisfaction How much the user enjoys or dislikes your product User Satisfaction? Pleasure to design
    • THANK YOU