Best Practice for Mobile UX Design

5,299 views

Published on

Published in: Technology, Business
1 Comment
17 Likes
Statistics
Notes
No Downloads
Views
Total views
5,299
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
387
Comments
1
Likes
17
Embeds 0
No embeds

No notes for slide

Best Practice for Mobile UX Design

  1. 1. 모바일 UX/UI개발 Best Practice for UX Deliverables Mobile UX Design Essential한국생산성본부 / KT Econovation Smart School 동준상 강사 | @jonathanis
  2. 2. UX디자인 문서 작성 | Content List 1. 사용자 요구 분석 | User Needs Analysis Mobile UX Design Essential | 001
  3. 3. UX디자인 문서 작성 | Content List 1. 사용자 요구 분석 | User Needs Analysis 2. 컨텐츠 개발전략 | Contents Strategy Mobile UX Design Essential | 001
  4. 4. UX디자인 문서 작성 | Content List 1. 사용자 요구 분석 | User Needs Analysis 2. 컨텐츠 개발전략 | Contents Strategy 3. 모바일 컨텐츠 디자인 | Mobile Contents Design Mobile UX Design Essential | 001
  5. 5. UX디자인 문서 작성 | Content List 1. 사용자 요구 분석 | User Needs Analysis 2. 컨텐츠 개발전략 | Contents Strategy 3. 모바일 컨텐츠 디자인 | Mobile Contents Design  Slideshare를 통해 퍼블리싱된 본 ‘UX디자인 문서작성 연습’은 2011년 5월2일부터 시행 된 KT ESS 단국대 특강의 수업에 사용된 내용입니다.  본 자료는 수업내용에 맞춰 다시 작성되었으므로 목차에 소개된 UX문서 작성사례 중 생략 된 내용이 있습니다. 슬라이드 독자 여러분의 양해 부탁 드립니다. 동준상 naebon1@gmail.com Mobile UX Design Essential | 001
  6. 6. UX 디자인 문서작성 | Practice - UX Deliverables1. 사용자 요구 분석 | User Needs Analysis1. 페르소나 | Persona Mobile UX Design Essential | 001
  7. 7. UX 디자인 문서작성 | Practice - UX Deliverables1. 사용자 요구 분석 | User Needs Analysis1. 페르소나 | Persona2. 사용성 테스트 계획서 | Usability Test Plan Mobile UX Design Essential | 001
  8. 8. UX 디자인 문서작성 | Practice - UX Deliverables1. 사용자 요구 분석 | User Needs Analysis1. 페르소나 | Persona2. 사용성 테스트 계획서 | Usability Test Plan3. 사용성 테스트 보고서 | Usability Report Mobile UX Design Essential | 001
  9. 9. 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona 페르소나는, "A persona is Mobile UX Design Essential | 001
  10. 10. 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona 페르소나는, 제품의 핵심기 능, 정보 네비게이션, 사용 자와의 인터랙션, 그리고 비 주얼 디자인에 이르는 사용 자 중심의 의사결정을 지원 하는 정보체계이다. "A persona is Mobile UX Design Essential | 001
  11. 11. 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona 페르소나는, 제품의 핵심기 능, 정보 네비게이션, 사용 자와의 인터랙션, 그리고 비 주얼 디자인에 이르는 사용 자 중심의 의사결정을 지원 하는 정보체계이다. "A persona is a user archetype you can use to help guide decisions about product features, navigation, interactions, and even visual design.‚ Kim Goodwin, Cooper.com Mobile UX Design Essential | 001
  12. 12. 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona 사용자분석의 당면과제 | Problem of Usability 사용자중심 디자인은 자연스럽지 않다Being user-centered is not natural / Users are complicated and varied / Those who may be doinguser and market research are not typically the people who actually design and build the product / The word "user" isnt very helpful (like "injury" is to the ER) / Raw data isnt inherently useful,and neither are most reports Gary Thompson / Daphne Ogle Mobile UX Design Essential | 001
  13. 13. 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona 사용자분석의 당면과제 | Problem of Usability 사용자중심 디자인은 자연스럽지 않다 사용자는 복잡하고 서로 다르다.Being user-centered is not natural / Users are complicated and varied / Those who may be doinguser and market research are not typically the people who actually design and build the product / The word "user" isnt very helpful (like "injury" is to the ER) / Raw data isnt inherently useful,and neither are most reports Gary Thompson / Daphne Ogle Mobile UX Design Essential | 001
  14. 14. 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona 사용자분석의 당면과제 | Problem of Usability 사용자중심 디자인은 자연스럽지 않다 사용자는 복잡하고 서로 다르다. 사용자 분석 담당자가 실질적인 디자인이나 제작에 참여하지 않을 수 있다.Being user-centered is not natural / Users are complicated and varied / Those who may be doinguser and market research are not typically the people who actually design and build the product / The word "user" isnt very helpful (like "injury" is to the ER) / Raw data isnt inherently useful,and neither are most reports Gary Thompson / Daphne Ogle Mobile UX Design Essential | 001
  15. 15. 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona 사용자분석의 당면과제 | Problem of Usability 사용자중심 디자인은 자연스럽지 않다 사용자는 복잡하고 서로 다르다. 사용자 분석 담당자가 실질적인 디자인이나 제작에 참여하지 않을 수 있다. 사용자라는 말 자체가 너무 광범위한 의미이다.Being user-centered is not natural / Users are complicated and varied / Those who may be doinguser and market research are not typically the people who actually design and build the product / The word "user" isnt very helpful (like "injury" is to the ER) / Raw data isnt inherently useful,and neither are most reports Gary Thompson / Daphne Ogle Mobile UX Design Essential | 001
  16. 16. 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona 사용자분석의 당면과제 | Problem of Usability 사용자중심 디자인은 자연스럽지 않다 사용자는 복잡하고 서로 다르다. 사용자 분석 담당자가 실질적인 디자인이나 제작에 참여하지 않을 수 있다. 사용자라는 말 자체가 너무 광범위한 의미이다. 사용자 분석결과 데이터 자체는 그리 큰 도움이 되지 않는다.Being user-centered is not natural / Users are complicated and varied / Those who may be doinguser and market research are not typically the people who actually design and build the product / The word "user" isnt very helpful (like "injury" is to the ER) / Raw data isnt inherently useful,and neither are most reports Gary Thompson / Daphne Ogle Mobile UX Design Essential | 001
  17. 17. 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona 페르소나의 효용, 전략 | Effectiveness of Persona 사용자를 명확한 실체로 표현(가정)할 수 있도록 도와준다.Make assumptions about users explicit (articulate a common language to talk meaningfully aboutusers) / Place the focus on specific users rather than on "everyone“ / In limiting our choices,personas help us make better decisions / Personas engage the product design and developmentteam (personas are fun) Gary Thompson / Daphne Ogle Mobile UX Design Essential | 001
  18. 18. 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona 페르소나의 효용, 전략 | Effectiveness of Persona 사용자를 명확한 실체로 표현(가정)할 수 있도록 도와준다. 모두에게 초점을 맞추는 대신, 특정 굮의 사용자에게 집중한다.Make assumptions about users explicit (articulate a common language to talk meaningfully aboutusers) / Place the focus on specific users rather than on "everyone“ / In limiting our choices,personas help us make better decisions / Personas engage the product design and developmentteam (personas are fun) Gary Thompson / Daphne Ogle Mobile UX Design Essential | 001
  19. 19. 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona 페르소나의 효용, 전략 | Effectiveness of Persona 사용자를 명확한 실체로 표현(가정)할 수 있도록 도와준다. 모두에게 초점을 맞추는 대신, 특정 굮의 사용자에게 집중한다. 우리의 선택권을 제한함으로써, 우리가 보다 나은 결정을 할 수 있도록 돕는다.Make assumptions about users explicit (articulate a common language to talk meaningfully aboutusers) / Place the focus on specific users rather than on "everyone“ / In limiting our choices,personas help us make better decisions / Personas engage the product design and developmentteam (personas are fun) Gary Thompson / Daphne Ogle Mobile UX Design Essential | 001
  20. 20. 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona 페르소나의 효용, 전략 | Effectiveness of Persona 사용자를 명확한 실체로 표현(가정)할 수 있도록 도와준다. 모두에게 초점을 맞추는 대신, 특정 굮의 사용자에게 집중한다. 우리의 선택권을 제한함으로써, 우리가 보다 나은 결정을 할 수 있도록 돕는다. 페르소나를 통해 디자인팀과 개발팀이 교류하며 (즐겁게) 작업할 수 있다.Make assumptions about users explicit (articulate a common language to talk meaningfully aboutusers) / Place the focus on specific users rather than on "everyone“ / In limiting our choices,personas help us make better decisions / Personas engage the product design and developmentteam (personas are fun) Gary Thompson / Daphne Ogle Mobile UX Design Essential | 001
  21. 21. 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona Source: WebCredible Mobile UX Design Essential | 001
  22. 22. 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona Source: WebCredible Mobile UX Design Essential | 001
  23. 23. 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona Source: WebCredible Mobile UX Design Essential | 001
  24. 24. 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona Source: WebCredible Mobile UX Design Essential | 001
  25. 25. 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona Source: fluid Mobile UX Design Essential | 001
  26. 26. 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona Source: fluid Mobile UX Design Essential | 001
  27. 27. 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona 이름 김성수 공모전을 준비하는 경영학과학생 사진 배경 | background 학과 공부와 어학원, 학과 사무실 조 photo 나이 : 22세 교 업무로 바쁜 상황 / 학습과 리포트 소속 : 단국대 경영학과 3학년, 학과조교 작성을 위해 11인치 넷북을 사용중 / 모바일 앱 사용경험 : 갤럭시(안드로이드) 친구와 협업과제가 있으나 시간부족목표 : 졸업후 내용설명 : 올해 대학교 3학년인 김성수씨는 그 어느 때보다도 바쁜 시간을 보내대학원 진학 / 고 있다.광고공모전 입상 6개월내에 제일기획 등이 주관하는 광고공모전이 5회나 예정되어 있어서 그간 친불편함 : 시간 구들과 준비해 온 주제를 가지고 출품작을 만들어야 하지만, 일산에서 붂당까지부족으로 협업 의 등교, 리포트와 어학원 그리고 개인적인 공부까지 동시에 진행하면서 피로가과제 일정지연 쌓이고 있다. 동종 업종 벤치마킹을 통해 최적의 카피안을 팀원들에게 제시해야 하는 김성수시나리오 : 등 씨의 일정이 지연되면서 친구들과의 협업 일정 전체가 지연되고 있다.하교시간에 정보 업데이트 이동시간은 물론 잠깐의 여유시간에 관심 카피안을 검색해 스마트폰으로 알려… photo: The Christian Science Monitor Mobile UX Design Essential | 001
  28. 28. 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona 이름 name 핵심 인적사항 primary persona 사진 배경 background | 나이, 역할, 전공붂야, 주요내용 main points | 사용자로서 photo 사용자 경험기간 수준 등 age, role, field, 경험하고 있는 서비스와 제품, 주로 level of skill, experience 사용하는 제품굮 목표 goals 불편함 구술내용 frustration narrative 시나리오 scenario Mobile UX Design Essential | 001
  29. 29. UX 디자인 문서작성 | Practice - UX Deliverables2. 컨텐츠 개발전략 | Contents Strategy1. 벤치마킹 | Bench Marking Mobile UX Design Essential | 001
  30. 30. UX 디자인 문서작성 | Practice - UX Deliverables2. 컨텐츠 개발전략 | Contents Strategy1. 벤치마킹 | Bench Marking2. 컨셉모델 | Concept Model Mobile UX Design Essential | 001
  31. 31. UX 디자인 문서작성 | Practice - UX Deliverables2. 컨텐츠 개발전략 | Contents Strategy1. 벤치마킹 | Bench Marking2. 컨셉모델 | Concept Model3. 컨텐츠 인벤토리 | Contents Inventory Mobile UX Design Essential | 001
  32. 32. 2. 컨텐츠 개발전략 | Contents Strategy컨셉모델 | Concept Model Mobile UX Design Essential | 001
  33. 33. 2. 컨텐츠 개발전략 | Contents Strategy컨셉모델 | Concept Model Mobile UX Design Essential | 001
  34. 34. 2. 컨텐츠 개발전략 | Contents Strategy컨셉모델 | Concept Model Mobile UX Design Essential | 001
  35. 35. 2. 컨텐츠 개발전략 | Contents Strategy컨셉모델 | Concept Model Mobile UX Design Essential | 001
  36. 36. 2. 컨텐츠 개발전략 | Contents Strategy컨셉모델 | Concept Model Mobile UX Design Essential | 001
  37. 37. 2. 컨텐츠 개발전략 | Contents Strategy컨셉모델 | Concept Model 별지로 배포된 모눈 종이에 연필로 컨셉모델을 그립니다. Draw a concept model onto the grid paper Mobile UX Design Essential | 001
  38. 38. 2. 컨텐츠 개발전략 | Contents Strategy컨셉모델 | Concept Model 파워포인트 도형 요소를 사용하여 컨셉모델을 구성합니다. Build a concept model with PPTX shape elements. Mobile UX Design Essential | 001
  39. 39. 2. 컨텐츠 개발전략 | Contents Strategy컨텐츠 인벤토리 | Contents Inventory웹사이트의 컨텐츠 인벤토리 | Typical contents inventory for a web siteID / Page Name / Link / Document Type / Owner / Keywords / Meta / Notes Mobile UX Design Essential | 001
  40. 40. 2. 컨텐츠 개발전략 | Contents Strategy컨텐츠 인벤토리 | Contents Inventory웹사이트의 컨텐츠 인벤토리 | Typical contents inventory for a web siteID / Page Name / Link / Document Type / Owner / Keywords / Meta / Notes 모바일앱, 웹의 컨텐츠 인벤토리 | Contents inventory for a mobile application ID / View Name / Nav / UI Element / Owner / SDK & Dev Lang / Meta / Notes Mobile UX Design Essential | 001
  41. 41. 2. 컨텐츠 개발전략 | Contents Strategy컨텐츠 인벤토리 | Contents Inventory ID View Name File Name UI Element Owner SDK, Dev Lang Meta Desc Issue Image + Table Intro and main1.0.0.0 welcome nikeplus_intro.m UI team Xcode Log-in View navigation Text +Table User main Request det1.1.0.0 start user_profile.m UI+Dev team Xcode, Obj-C View page ailed profile Run-type1.1.1.0 run_menu record_list.m Table View UI team Xcode SNS cheer list page1.1.1.1 run_basic record_default.m Table View UI+Dev team Xcode, Obj-C Run-type 1 Music1.1.1.2 run _time record_compete.m Table View UI+Dev team Xcode, Obj-C Run-type 2 Time unit Guide for1.2.0.0 tour Info_app.m Image View UI team Xcode Sensor new one Nike+앱의 컨텐츠를 일부 수정하여 구성했습니다. Mobile UX Design Essential | 001
  42. 42. 2. 컨텐츠 개발전략 | Contents Strategy컨텐츠 인벤토리 | Contents InventoryID View Name File Name UI Element Owner SDK, Dev Lang Meta Desc Issue Mobile UX Design Essential | 001
  43. 43. UX 디자인 문서작성 | Practice - UX Deliverables3. 모바일 컨텐츠 디자인 | Mobile Contents Design1. 플로우차트 | Flowchart Mobile UX Design Essential | 001
  44. 44. UX 디자인 문서작성 | Practice - UX Deliverables3. 모바일 컨텐츠 디자인 | Mobile Contents Design1. 플로우차트 | Flowchart2. 와이어프레임 | Wireframe Mobile UX Design Essential | 001
  45. 45. UX 디자인 문서작성 | Practice - UX Deliverables3. 모바일 컨텐츠 디자인 | Mobile Contents Design1. 플로우차트 | Flowchart2. 와이어프레임 | Wireframe3. 스크린 디자인 | Screen Design Mobile UX Design Essential | 001
  46. 46. UX 디자인 문서작성 | Practice - UX Deliverables3. 모바일 컨텐츠 디자인 | Mobile Contents Design1. 플로우차트 | Flowchart2. 와이어프레임 | Wireframe3. 스크린 디자인 | Screen Design4. 스토리보드 | Story Board, Clickstream Mobile UX Design Essential | 001
  47. 47. UX 디자인 문서작성 | Practice - UX Deliverables3. 모바일 컨텐츠 디자인 | Mobile Contents Design1. 플로우차트 | Flowchart2. 와이어프레임 | Wireframe3. 스크린 디자인 | Screen Design4. 스토리보드 | Story Board, Clickstream5. 프로토타입 | Prototype with mobile-web Mobile UX Design Essential | 001
  48. 48. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design와이어프레임 | Wireframe source : justin delabar Mobile UX Design Essential | 001
  49. 49. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design와이어프레임 | Wireframe source : Ian James Cox Mobile UX Design Essential | 001
  50. 50. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design와이어프레임 | Wireframe Navigation bar Mobile UX Design Essential | 001
  51. 51. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design스크린 디자인 | Screen Design source : erinthompsonstudio Mobile UX Design Essential | 001
  52. 52. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design스크린 디자인 | Screen Design source : seedandsprout Mobile UX Design Essential | 001
  53. 53. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design스크린 디자인 | Screen Design Navigation bar Mobile UX Design Essential | 001
  54. 54. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design스토리보드 | Story Board source : Paul Stanton Mobile UX Design Essential | 001
  55. 55. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design프로토타입 | Prototype HTML5 + CSS3 +  FTP로 별도 배포된 HTML, CSS문서를 수정, 변환하여 모바일앱 프로토타입을 만 듭니다. 완성된 모바일웹은 지정된 FTP를 통해 각자의 스마트폰으로 확인할 수 있습 니다.  페이지에 삽입된 facebook Like버튺을 통해 팀원갂의 평가를 하고, 강사의 평가 점수를 더해 우수팀을 선정합니다. Mobile UX Design Essential | 001
  56. 56. 모바일 UX/UI개발 Best Practice for UX Deliverables동준상 Jonathan Dong / @jonathanis / naebon1@gmail.comLecture ProjectKT ESS 중소기업청 채용/통계 앱KT연수원 교직원공제회 모바일 웹삼성멀티캠퍼스 서울여대 모바일웹한국생산성본부 + 보디가드, 블랙박스 +
  57. 57. 모바일 UX/UI개발 Best Practice for UX Deliverables 수고하셨습니다. Thank you.동준상 Jonathan Dong / @jonathanis / naebon1@gmail.comLecture ProjectKT ESS 중소기업청 채용/통계 앱KT연수원 교직원공제회 모바일 웹삼성멀티캠퍼스 서울여대 모바일웹한국생산성본부 + 보디가드, 블랙박스 +

×