모바일 스크린 디자인하기 (@WebWorldConference, 2013.11)

  • Published on
    22-Jun-2015

  • View
    1.496

  • Download
    9

Embed Size (px)

DESCRIPTION

? 10 . * . .. :D (Context, Device, Interaction) 1. Diet Information (Pareto's Law) 2. Reduce Drill Down (Strolling Around) 3. Contents over Navigation (Occam's Razor) 4. Focus on Primary Task (Step by Step) 5. Economize Labor (Real Nature) 6. Keep Contents Seamlessly (Seamless) 7. Design for Input Method (Fitt's Law) 8. Select Optimal User Interface (Mental Model) 9. Choose Natural Transition (Mapping) 10. Show Emotional Animation (Mimicry)

Transcript

  • 1. 10 Principlesfor Mobile DesignUX2 | 1

2. 2 3. ericsson-mobility-report-november-20133 4. MOBILE:[] ,, 4 5. CONTEXTDEVICEINTER-ACTION5 6. CONTEXTImmersion6 7. CONTEXTBoth HandsConnectivity7 8. CONTEXTLean Back8 9. DEVICE9 10. DEVICE10 11. DEVICE 11 12. DEVICE12 13. DEVICE13 14. DEVICE14 15. INTERACTION15 16. INTERACTION16 17. INTERACTION17 18. INTERACTION18 19. 10 Principlesfor Mobile Design19 20. 1.DIETINFORMATION 21. PARETO'SLAW 80% 20% , 20% 80% . 2 8 .21DIET INFORMATION 22. PCPowerfulFeaturesMobileEssential FeaturesBasic & IntuitiveBasic FunctionIntuitive StructurePowerful & Detail Powerful Editing Detail Management ToolDIETINFORMATION22 23. DIET INFORMATION23 24. Desk-top, , , , , ,, , , , , , ,, , , , , DIET INFORMATION24 25. Desk-top, , , , , ,, , , , , , ,, , , , , DIET INFORMATION25 26. DIET INFORMATION26 27. Desk-topMobile, , , , , ,, , , , , , ,, , , , , , , , , , , , , , , , , , , , , , , DIET INFORMATION27 28. 2.REDUCEDRILL DOWN 29. STROLLINGAROUND (Distractions) PC .29REDUCEDRILL DOWN 30. PCBroad Menu StructureMobile Narrow Menu StructureNarrow & ShallowTab menuVertical Menu LayoutSidebar3~5 menuBroad & DeepBreadcrumbStatic Menu Layout5~9 menuREDUCEDRILL DOWN30 31. Top Level ViewCategory ViewDetail/Edit ViewREDUCE DRILL DOWN31 32. Top Level ViewREDUCE DRILL DOWN32 33. Category ViewREDUCE DRILL DOWN33 34. Detail/Edit ViewREDUCE DRILL DOWN34 35. Top Level ViewCategory ViewDetail/Edit ViewREDUCE DRILL DOWN35 36. Top Level ViewCategory ViewDetail/Edit ViewREDUCE DRILL DOWN36 37. 3.CONTENTSOVER NAVIGATION 38. OCCAM'SRAZOR .CONTENTSOVER NAVIGATION 39. Contents > NaviEmphasize contentsPivot and ExploreContextual Navigation menusContents < NaviLots of Navigation typeA number of MenuPCRich NavigationMobileEssentialNavigationCONTENTSOVER NAVIGATION39 40. & CONTENTS OVER NAVIGATION40 41. WITH CONTENTS OVER NAVIGATION41 42. * Dive DeeperPivot Contents Depth (Dive Deeper) (Povot Contents) .CONTENTS OVER NAVIGATION42 43. 4.FOCUS ONPRIMARY TASK 44. STEP BY STEP Task . .FOCUS ONPRIMARY TASK 45. PC Multi -TaskMobileSingle -TaskCompact ScreenSingle-WindowPrimary InformationBig ScreenMulti-WindowVarious InformationFOCUS ONPRIMARY TASK45 46. FOCUS ON PRIMARY TASK46 47. FOCUS ON PRIMARY TASK47 48. FOCUS ON PRIMARY TASK48 49. FOCUS ON PRIMARY TASK49 50. FOCUS ON PRIMARY TASK50 51. FOCUS ON PRIMARY TASK51 52. FOCUS ON PRIMARY TASK52 53. 5.ECONOMIZELABOR 54. REAL NATURE , . Context , .54ECONOMIZELABOR 55. * Southwest Airlines websiteDifficult InputMobile DeviceShort inputUsing Smart SensorsEasy to WriteStatic LocationFast InputExtra PeripheralsECONOMIZE LABORPCEasyInput- MethodMobileDifficultInput- Method55 56. ECONOMIZE LABOR56 57. http://www.uxbooth.com/articles/considerations-for-mobile-design-part-3-behavior/ECONOMIZE LABOR57 58. ECONOMIZE LABOR58 59. ECONOMIZE LABOR59 60. ECONOMIZE LABOR60 61. 6.KEEP CONTENTSSEAMLESSLY 62. SEAMLESS . (Benefit) .62KEEP CONTENTSSEAMLESSLY 63. PCMass ContentsMobile Light ContentsShort ContentsBroken ConsumtionLong ContentsIn-Depth ContentsKEEP CONTENTSSEAMLESSLY63Keep Contents Experience 64. KEEP CONTENTS SEAMLESSLY64 65. KEEP CONTENTS SEAMLESSLY65 66. KEEP CONTENTS SEAMLESSLY66 67. KEEP CONTENTS SEAMLESSLY67 68. KEEP CONTENTS SEAMLESSLY68 69. 7.DESIGN FOR INPUT METHOD 70. FITT'S LAW .70DESIGN FOR INPUT METHOD 71. Natural Input Finger based Bigger TargetDetail InputKeyboard / Mouse basedSmall TargetPCMouseKeyboardMobileFingerDESIGN FOR INPUT METHOD71 72. * Microsoft Windows8 Interface GuidelineDESIGN FOR INPUT METHOD72 73. * Microsoft Windows8 Interface GuidelineDESIGN FOR INPUT METHOD73 74. * Microsoft Windows8 Interface GuidelineDESIGN FOR INPUT METHOD74 75. DESIGN FOR INPUT METHOD75 76. DESIGN FOR INPUT METHOD76 77. * Mobile FrontierDESIGN FOR INPUT METHOD77 78. REACHOKDisruptive Action(Cancel/Delete)Left to Right Arrangement* Mobile FirstEASYPrimary Action/ NavigationDESIGN FOR INPUT METHOD78 79. OKEASYREACHDESIGN FOR INPUT METHOD79 80. http://mobile.smashingmagazine.com/2013/03/25/c-swipe-navigation-on-android/DESIGN FOR INPUT METHOD80 81. DESIGN FOR INPUT METHOD81http://www.viddler.com/v/a2f0f1be 82. DESIGN FOR INPUT METHOD82 83. DESIGN FOR INPUT METHOD83 84. 8.SELECT OPTIMALUSER INTERFACE 85. MENTALMODEL .SELECT OPTIMALUSER INTERFACE 86. PCGUIMobileNUITouch InteractionTouch- Tap / Double Tap- Pinch In/Out- Flick / SwipeClick InteractionPointer- Click / Hover- Selecting / Dragging- etc.SELECT OPTIMAL USER INTERFACE86 87. PC Action (Mouse)Mobile Action (Touch)PointingXHoveringXClickingTapDouble ClickingDouble TapTriple ClickingTriple TapSelectingTapPressingPressWheelingFlickDragPress and DragXRotateXPinchXMulti-finger Gesture SELECT OPTIMAL USER INTERFACE87 88. Desk-topMobileSELECT OPTIMAL USER INTERFACE88 89. Desk-topMobileSELECT OPTIMAL USER INTERFACE89 90. SELECT OPTIMAL USER INTERFACE90 91. 9.CHOOSENATURAL TRANSITION (Transition) 92. 92Mapping . ., , .CHOOSENATURAL TRANSITION 93. PCPointerMobileGestureReal Gesture-mappingTap / Pinch In / OutRotate, Throw, Blow, etc.Pointer-mappingMove, Click, Double Click, Hover, Drag, etc.CHOOSE NATURAL TRANSITION93 94. 94 95. GestureTransitionDescriptionGesture UsagePressQuick Change View2 Expand Flip View , CHOOSE NATURAL TRANSITION95 96. GestureTransitionDescriptionGesture UsagePressOpen to full screen , Transition SwipeHorizontal slide along , Horizontal slide over / CHOOSE NATURAL TRANSITION96 97. * Daum App Page Transition Horizontal Slide alongCHOOSE NATURAL TRANSITION97 98. * Daum App Setting Modal ViewCHOOSE NATURAL TRANSITION98 99. * Daum App Today Widget FlipCHOOSE NATURAL TRANSITION99 100. 10.SHOW EMOTIONALANIMATION 101. MIMICRY , SHOW EMOTIONALANIMATION 102. PCStaticMobileRichPersonal ContextNatural ContextLife on DeviceBrowser / App TypePublic AreaStatic / Fixed ContextBrowser DependencySHOW EMOTIONALANIMATION102 103. SLOW IN AND OUTSHOW EMOTIONAL ANIMATION103 104. SHOW EMOTIONAL ANIMATION104 105. ANTICIPATESHOW EMOTIONAL ANIMATION105 106. SHOW EMOTIONAL ANIMATION106 107. SECONDARY ACTIONSHOW EMOTIONAL ANIMATION107 108. SHOW EMOTIONAL ANIMATION108 109. SUMMARY 110. 1. DIET INFORMATION | 2. REDUCE DRILL DOWN | 3. CONTENTS OVER NAVIGATION | 4. FOCUS ON PRIMARY TASK | 5. ECONOMIZE LABOR | 6. KEEP CONTENS SEAMLESSLY | 7. DESIGN FOR INPUT METHOD | 8. SELECT OPTIMAL USER INTERFACE | 9. CHOOSE NATURAL TRANSITION | (Transition) 10. SHOW EMOTIONAL ANIMATION | 111. Mobile PC ?111 112. Mobile 1. 2. 3. 112 113. New Rule isMobile FirstEric Schmidt, Google CEO113 114. .heisk@daumcorp.com@pentaxzs