Best Practice for Mobile UX Design
Upcoming SlideShare
Loading in...5
×
 

Best Practice for Mobile UX Design

on

  • 4,030 views

 

Statistics

Views

Total Views
4,030
Views on SlideShare
4,016
Embed Views
14

Actions

Likes
10
Downloads
287
Comments
1

5 Embeds 14

http://kms.saerom.co.kr 5
http://twitter.com 4
http://blog.naver.com 3
http://us-w1.rockmelt.com 1
http://paper.li 1

Accessibility

Categories

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

Best Practice for Mobile UX Design Best Practice for Mobile UX Design Presentation Transcript

  • 모바일 UX/UI개발 Best Practice for UX Deliverables Mobile UX Design Essential한국생산성본부 / KT Econovation Smart School 동준상 강사 | @jonathanis
  • UX디자인 문서 작성 | Content List 1. 사용자 요구 분석 | User Needs Analysis Mobile UX Design Essential | 001
  • UX디자인 문서 작성 | Content List 1. 사용자 요구 분석 | User Needs Analysis 2. 컨텐츠 개발전략 | Contents Strategy Mobile UX Design Essential | 001
  • UX디자인 문서 작성 | Content List 1. 사용자 요구 분석 | User Needs Analysis 2. 컨텐츠 개발전략 | Contents Strategy 3. 모바일 컨텐츠 디자인 | Mobile Contents Design Mobile UX Design Essential | 001
  • 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
  • UX 디자인 문서작성 | Practice - UX Deliverables1. 사용자 요구 분석 | User Needs Analysis1. 페르소나 | Persona Mobile UX Design Essential | 001
  • UX 디자인 문서작성 | Practice - UX Deliverables1. 사용자 요구 분석 | User Needs Analysis1. 페르소나 | Persona2. 사용성 테스트 계획서 | Usability Test Plan Mobile UX Design Essential | 001
  • UX 디자인 문서작성 | Practice - UX Deliverables1. 사용자 요구 분석 | User Needs Analysis1. 페르소나 | Persona2. 사용성 테스트 계획서 | Usability Test Plan3. 사용성 테스트 보고서 | Usability Report Mobile UX Design Essential | 001
  • 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona 페르소나는, "A persona is Mobile UX Design Essential | 001
  • 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona 페르소나는, 제품의 핵심기 능, 정보 네비게이션, 사용 자와의 인터랙션, 그리고 비 주얼 디자인에 이르는 사용 자 중심의 의사결정을 지원 하는 정보체계이다. "A persona is Mobile UX Design Essential | 001
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona Source: WebCredible Mobile UX Design Essential | 001
  • 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona Source: WebCredible Mobile UX Design Essential | 001
  • 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona Source: WebCredible Mobile UX Design Essential | 001
  • 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona Source: WebCredible Mobile UX Design Essential | 001
  • 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona Source: fluid Mobile UX Design Essential | 001
  • 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona Source: fluid Mobile UX Design Essential | 001
  • 1. 사용자 요구 분석 | User Needs Analysis페르소나 | Persona 이름 김성수 공모전을 준비하는 경영학과학생 사진 배경 | background 학과 공부와 어학원, 학과 사무실 조 photo 나이 : 22세 교 업무로 바쁜 상황 / 학습과 리포트 소속 : 단국대 경영학과 3학년, 학과조교 작성을 위해 11인치 넷북을 사용중 / 모바일 앱 사용경험 : 갤럭시(안드로이드) 친구와 협업과제가 있으나 시간부족목표 : 졸업후 내용설명 : 올해 대학교 3학년인 김성수씨는 그 어느 때보다도 바쁜 시간을 보내대학원 진학 / 고 있다.광고공모전 입상 6개월내에 제일기획 등이 주관하는 광고공모전이 5회나 예정되어 있어서 그간 친불편함 : 시간 구들과 준비해 온 주제를 가지고 출품작을 만들어야 하지만, 일산에서 붂당까지부족으로 협업 의 등교, 리포트와 어학원 그리고 개인적인 공부까지 동시에 진행하면서 피로가과제 일정지연 쌓이고 있다. 동종 업종 벤치마킹을 통해 최적의 카피안을 팀원들에게 제시해야 하는 김성수시나리오 : 등 씨의 일정이 지연되면서 친구들과의 협업 일정 전체가 지연되고 있다.하교시간에 정보 업데이트 이동시간은 물론 잠깐의 여유시간에 관심 카피안을 검색해 스마트폰으로 알려… photo: The Christian Science Monitor Mobile UX Design Essential | 001
  • 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
  • UX 디자인 문서작성 | Practice - UX Deliverables2. 컨텐츠 개발전략 | Contents Strategy1. 벤치마킹 | Bench Marking Mobile UX Design Essential | 001
  • UX 디자인 문서작성 | Practice - UX Deliverables2. 컨텐츠 개발전략 | Contents Strategy1. 벤치마킹 | Bench Marking2. 컨셉모델 | Concept Model Mobile UX Design Essential | 001
  • UX 디자인 문서작성 | Practice - UX Deliverables2. 컨텐츠 개발전략 | Contents Strategy1. 벤치마킹 | Bench Marking2. 컨셉모델 | Concept Model3. 컨텐츠 인벤토리 | Contents Inventory Mobile UX Design Essential | 001
  • 2. 컨텐츠 개발전략 | Contents Strategy컨셉모델 | Concept Model Mobile UX Design Essential | 001
  • 2. 컨텐츠 개발전략 | Contents Strategy컨셉모델 | Concept Model Mobile UX Design Essential | 001
  • 2. 컨텐츠 개발전략 | Contents Strategy컨셉모델 | Concept Model Mobile UX Design Essential | 001
  • 2. 컨텐츠 개발전략 | Contents Strategy컨셉모델 | Concept Model Mobile UX Design Essential | 001
  • 2. 컨텐츠 개발전략 | Contents Strategy컨셉모델 | Concept Model Mobile UX Design Essential | 001
  • 2. 컨텐츠 개발전략 | Contents Strategy컨셉모델 | Concept Model 별지로 배포된 모눈 종이에 연필로 컨셉모델을 그립니다. Draw a concept model onto the grid paper Mobile UX Design Essential | 001
  • 2. 컨텐츠 개발전략 | Contents Strategy컨셉모델 | Concept Model 파워포인트 도형 요소를 사용하여 컨셉모델을 구성합니다. Build a concept model with PPTX shape elements. Mobile UX Design Essential | 001
  • 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
  • 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
  • 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
  • 2. 컨텐츠 개발전략 | Contents Strategy컨텐츠 인벤토리 | Contents InventoryID View Name File Name UI Element Owner SDK, Dev Lang Meta Desc Issue Mobile UX Design Essential | 001
  • UX 디자인 문서작성 | Practice - UX Deliverables3. 모바일 컨텐츠 디자인 | Mobile Contents Design1. 플로우차트 | Flowchart Mobile UX Design Essential | 001
  • UX 디자인 문서작성 | Practice - UX Deliverables3. 모바일 컨텐츠 디자인 | Mobile Contents Design1. 플로우차트 | Flowchart2. 와이어프레임 | Wireframe Mobile UX Design Essential | 001
  • UX 디자인 문서작성 | Practice - UX Deliverables3. 모바일 컨텐츠 디자인 | Mobile Contents Design1. 플로우차트 | Flowchart2. 와이어프레임 | Wireframe3. 스크린 디자인 | Screen Design Mobile UX Design Essential | 001
  • UX 디자인 문서작성 | Practice - UX Deliverables3. 모바일 컨텐츠 디자인 | Mobile Contents Design1. 플로우차트 | Flowchart2. 와이어프레임 | Wireframe3. 스크린 디자인 | Screen Design4. 스토리보드 | Story Board, Clickstream Mobile UX Design Essential | 001
  • UX 디자인 문서작성 | Practice - UX Deliverables3. 모바일 컨텐츠 디자인 | Mobile Contents Design1. 플로우차트 | Flowchart2. 와이어프레임 | Wireframe3. 스크린 디자인 | Screen Design4. 스토리보드 | Story Board, Clickstream5. 프로토타입 | Prototype with mobile-web Mobile UX Design Essential | 001
  • 3. 모바일 컨텐츠 디자인 | Mobile Contents Design와이어프레임 | Wireframe source : justin delabar Mobile UX Design Essential | 001
  • 3. 모바일 컨텐츠 디자인 | Mobile Contents Design와이어프레임 | Wireframe source : Ian James Cox Mobile UX Design Essential | 001
  • 3. 모바일 컨텐츠 디자인 | Mobile Contents Design와이어프레임 | Wireframe Navigation bar Mobile UX Design Essential | 001
  • 3. 모바일 컨텐츠 디자인 | Mobile Contents Design스크린 디자인 | Screen Design source : erinthompsonstudio Mobile UX Design Essential | 001
  • 3. 모바일 컨텐츠 디자인 | Mobile Contents Design스크린 디자인 | Screen Design source : seedandsprout Mobile UX Design Essential | 001
  • 3. 모바일 컨텐츠 디자인 | Mobile Contents Design스크린 디자인 | Screen Design Navigation bar Mobile UX Design Essential | 001
  • 3. 모바일 컨텐츠 디자인 | Mobile Contents Design스토리보드 | Story Board source : Paul Stanton Mobile UX Design Essential | 001
  • 3. 모바일 컨텐츠 디자인 | Mobile Contents Design프로토타입 | Prototype HTML5 + CSS3 +  FTP로 별도 배포된 HTML, CSS문서를 수정, 변환하여 모바일앱 프로토타입을 만 듭니다. 완성된 모바일웹은 지정된 FTP를 통해 각자의 스마트폰으로 확인할 수 있습 니다.  페이지에 삽입된 facebook Like버튺을 통해 팀원갂의 평가를 하고, 강사의 평가 점수를 더해 우수팀을 선정합니다. Mobile UX Design Essential | 001
  • 모바일 UX/UI개발 Best Practice for UX Deliverables동준상 Jonathan Dong / @jonathanis / naebon1@gmail.comLecture ProjectKT ESS 중소기업청 채용/통계 앱KT연수원 교직원공제회 모바일 웹삼성멀티캠퍼스 서울여대 모바일웹한국생산성본부 + 보디가드, 블랙박스 +
  • 모바일 UX/UI개발 Best Practice for UX Deliverables 수고하셨습니다. Thank you.동준상 Jonathan Dong / @jonathanis / naebon1@gmail.comLecture ProjectKT ESS 중소기업청 채용/통계 앱KT연수원 교직원공제회 모바일 웹삼성멀티캠퍼스 서울여대 모바일웹한국생산성본부 + 보디가드, 블랙박스 +