Page 0: Page 1: 모바일 UX디자인 Reagan Hwang, Microsoft Korea Page 2: http://mobilewebbook.com/bucket/MobileWebDesign_Preview.pdf http://communities-dominate.blogs.com/brands/2007/01/putting_27_bill.html Page 3: Mobile Internet • http://library.ixda.org/node/20 Page 4: Page 5: http://www.w3.org/2006/07/Mobile_Web_Design.pdf Page 6: http://www.w3.org/2006/07/Mobile_Web_Design.pdf Page 7: Page 8: 디자인 안하기 Page 9: Mobile Terminal to Smartphone Page 10: Smartphones Will Double Their Share of the Handset Market by 2013, According to In-Stat By 2013, Smartphones will double their share of all cellphones to about 20 percent, reports In-Stat (http://www.in-stat.com). Global smartphone growth this year will be strong globally, but even stronger in the US market. Page 11: Mobile Usability Average success rates • http://www.useit.com/alertbox/mobileusability.html Page 12: Common Challenges in Designing for Mobiles • • • • • Variety of screen sizes Lack of understanding Rapid change Testing challenges Deciding on what is essential Page 13: Multiple Screen Sizes Page 14: Page 15: Mobile Web Trends 2009 Simple options White space Lack of images Sub-domains instead of .mobi or separate domains • Prioritized content • • • • http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/ Page 16: Page 17: http://www.mobileawesomeness.com/mobile-web-resources/ Page 18: 이미지가 없는 페이지 간단한 옵션 Page 19: Page 20: Page 21: Page 22: Page 23: Page 24: Page 25: 사용자 중심의 우선순위(광고 없음) Page 26: Page 27: Page 28: Page 29: Page 30: 7 usability guidelines for websites on mobile devices 1. 2. 3. 4. 5. 6. 7. Meet users' needs quickly Don't repeat the navigation on every page Clearly distinguish selected items Make user input as simple as possible Only show essential information Place basic browsing controls on the page Design mobile-friendly page layouts http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml Page 31: Page 32: breadcrumb Page 33: Page 34: Page 35: Page 36: Page 37: Page 38: Page 39: Page 40: Page 41: Page 42: Page 43: Page 44: Page 45: • http://uxfactory.com/487 Page 46: • http://uxfactory.com/490 Page 47: AR http://uxfactory.com/775 Page 48: • http://uxfactory.com/385 Page 49: • http://uxfactory.com/340 Page 50: Page 51: Strategy 1: Define device groups • • • • • tiny: 84, 96, 101, 128, 130, 132 small: 160, 176 medium: 208, 220, 240 large: 320, 360, 480+ desktop: 800+ http://mobiforge.com/designing/story/eff ective-design-multiple-screen-sizes Page 52: Strategy 2: Create a default reference design Page 53: Strategy 3: Define rules for content and design adaptation Page 54: Strategy 4: Opt for web standards and a flexible layout Page 55: Page 56: Mobile Web Design: Tips and Best Practices • • • • • • • • • • • • Familiarize Yourself with the Hardware and Software Available Simplify! Use Valid Markup Give Users the Option of Visiting the Standard Site Use a Separate Mobile Theme Limit Scrolling to One Direction Don’t Use Pop-Ups or Open New Windows Minimize the Use of Images Optimize Your Navigation Don’t Rely on Flash or JavaScript Include as Much Content from Your Standard Site as is Practical Make Sure Redirects Work Properly http://www.noupe.com/how-tos/mobile-web-design-tips-and-best-practices.html Page 57: simplicity Page 58: standard site link Ex) 네이버, 트위터 Page 59: Separate Mobile Theme Page 60: Limit Scrolling Ex) 네이버 Page 61: Minimize the Use of Images Page 62: Optimize Your Navigation Page 63: Include as Much Content from Your Standard Site as is Practical Ex) 네이버 웹툰 Page 64: Page 65: Page 66: Page 67: Page 68: Page 69: Page 70: Page 71: http://touch.wacom.com/m Page 72: Page 73: http://futureofwebdesign.com/ Page 74: 감사합니다. reagan@uxfactory.com twitter.com/HRG Page 75: Page 76: • http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html Page 77: Page 78: Odd-sized screens Page 79: Common Challenges in Designing for Mobiles • • • • • Variety of screen sizes Lack of understanding Rapid change Testing challenges Deciding on what is essential Page 80: Mobile Web Trends 2009 Simple options White space Lack of images Sub-domains instead of .mobi or separate domains • Prioritized content • • • • http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/ Page 81: 7 usability guidelines for websites on mobile devices 1. 2. 3. 4. 5. 6. 7. Meet users' needs quickly Don't repeat the navigation on every page Clearly distinguish selected items Make user input as simple as possible Only show essential information Place basic browsing controls on the page Design mobile-friendly page layouts http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml Page 82: Mobile Web Design: Tips and Best Practices • • • • • • • • • • • • Familiarize Yourself with the Hardware and Software Available Simplify! Use Valid Markup Give Users the Option of Visiting the Standard Site Use a Separate Mobile Theme Limit Scrolling to One Direction Don’t Use Pop-Ups or Open New Windows Minimize the Use of Images Optimize Your Navigation Don’t Rely on Flash or JavaScript Include as Much Content from Your Standard Site as is Practical Make Sure Redirects Work Properly http://www.noupe.com/how-tos/mobile-web-design-tips-and-best-practices.html Page 83: http://www.w3c.or.kr/Translation/mwbp_flip_cards/ Page 84: