best practice for mobile ux design
Post on 13-Jan-2015
3.780 Views
Preview:
DESCRIPTION
TRANSCRIPT
동준상강사 | @jonathanis
Mobile UX Design Essential
모바일 UX/UI개발Best Practice for UX Deliverables
한국생산성본부 / KT Econovation Smart School
UX디자인문서작성 | Content List
Mobile UX Design Essential | 001
1. 사용자요구분석 | User Needs Analysis
UX디자인문서작성 | Content List
Mobile UX Design Essential | 001
1. 사용자요구분석 | User Needs Analysis
2. 컨텐츠개발전략 | Contents Strategy
UX디자인문서작성 | Content List
Mobile UX Design Essential | 001
1. 사용자요구분석 | User Needs Analysis
2. 컨텐츠개발전략 | Contents Strategy
3. 모바일컨텐츠디자인 | Mobile Contents Design
UX디자인문서작성 | Content List
Mobile UX Design Essential | 001
1. 사용자요구분석 | User Needs Analysis
2. 컨텐츠개발전략 | Contents Strategy
3. 모바일컨텐츠디자인 | Mobile Contents Design
Slideshare를 통해 퍼블리싱된 본 ‘UX디자인 문서작성 연습’은 2011년 5월2일부터 시행된 KT ESS 단국대 특강의 수업에 사용된 내용입니다.
본 자료는 수업내용에 맞춰 다시 작성되었으므로 목차에 소개된 UX문서 작성사례 중 생략된 내용이 있습니다. 슬라이드 독자 여러분의 양해 부탁 드립니다.
동준상 naebon1@gmail.com
1. 사용자요구분석 | User Needs Analysis
Mobile UX Design Essential | 001
1. 페르소나 | Persona
UX 디자인문서작성 | Practice - UX Deliverables
1. 사용자요구분석 | User Needs Analysis
Mobile UX Design Essential | 001
1. 페르소나 | Persona
2. 사용성 테스트 계획서 | Usability Test Plan
UX 디자인문서작성 | Practice - UX Deliverables
1. 사용자요구분석 | User Needs Analysis
Mobile UX Design Essential | 001
1. 페르소나 | Persona
2. 사용성 테스트 계획서 | Usability Test Plan
3. 사용성 테스트 보고서 | Usability Report
UX 디자인문서작성 | Practice - UX Deliverables
Mobile UX Design Essential | 001
"A persona is
페르소나 | Persona
1. 사용자요구분석 | User Needs Analysis
페르소나는,
Mobile UX Design Essential | 001
"A persona is
페르소나 | Persona
1. 사용자요구분석 | User Needs Analysis
페르소나는, 제품의 핵심기
능, 정보 네비게이션, 사용
자와의 인터랙션, 그리고 비
주얼 디자인에 이르는 사용
자 중심의 의사결정을 지원
하는 정보체계이다.
Mobile UX Design Essential | 001
"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
페르소나 | Persona
1. 사용자요구분석 | User Needs Analysis
페르소나는, 제품의 핵심기
능, 정보 네비게이션, 사용
자와의 인터랙션, 그리고 비
주얼 디자인에 이르는 사용
자 중심의 의사결정을 지원
하는 정보체계이다.
Mobile UX Design Essential | 001
사용자분석의 당면과제 | Problem of Usability
사용자중심 디자인은 자연스럽지 않다
페르소나 | Persona
1. 사용자요구분석 | User Needs Analysis
Being user-centered is not natural / Users are complicated and varied / Those who may be doing user and market research are not typically the people who actually design and build the product/ The word "user" isn't very helpful (like "injury" is to the ER) / Raw data isn't inherently useful, and neither are most reports
Gary Thompson / Daphne Ogle
Mobile UX Design Essential | 001
사용자분석의 당면과제 | Problem of Usability
사용자중심 디자인은 자연스럽지 않다
사용자는 복잡하고 서로 다르다.
페르소나 | Persona
1. 사용자요구분석 | User Needs Analysis
Being user-centered is not natural / Users are complicated and varied / Those who may be doing user and market research are not typically the people who actually design and build the product/ The word "user" isn't very helpful (like "injury" is to the ER) / Raw data isn't inherently useful, and neither are most reports
Gary Thompson / Daphne Ogle
Mobile UX Design Essential | 001
사용자분석의 당면과제 | Problem of Usability
사용자중심 디자인은 자연스럽지 않다
사용자는 복잡하고 서로 다르다.
사용자 분석 담당자가 실질적인 디자인이나 제작에 참여하지 않을 수 있다.
페르소나 | Persona
1. 사용자요구분석 | User Needs Analysis
Being user-centered is not natural / Users are complicated and varied / Those who may be doing user and market research are not typically the people who actually design and build the product/ The word "user" isn't very helpful (like "injury" is to the ER) / Raw data isn't inherently useful, and neither are most reports
Gary Thompson / Daphne Ogle
Mobile UX Design Essential | 001
사용자분석의 당면과제 | Problem of Usability
사용자중심 디자인은 자연스럽지 않다
사용자는 복잡하고 서로 다르다.
사용자 분석 담당자가 실질적인 디자인이나 제작에 참여하지 않을 수 있다.
사용자라는 말 자체가 너무 광범위한 의미이다.
페르소나 | Persona
1. 사용자요구분석 | User Needs Analysis
Being user-centered is not natural / Users are complicated and varied / Those who may be doing user and market research are not typically the people who actually design and build the product/ The word "user" isn't very helpful (like "injury" is to the ER) / Raw data isn't inherently useful, and neither are most reports
Gary Thompson / Daphne Ogle
Mobile UX Design Essential | 001
사용자분석의 당면과제 | Problem of Usability
사용자중심 디자인은 자연스럽지 않다
사용자는 복잡하고 서로 다르다.
사용자 분석 담당자가 실질적인 디자인이나 제작에 참여하지 않을 수 있다.
사용자라는 말 자체가 너무 광범위한 의미이다.
사용자 분석결과 데이터 자체는 그리 큰 도움이 되지 않는다.
페르소나 | Persona
1. 사용자요구분석 | User Needs Analysis
Being user-centered is not natural / Users are complicated and varied / Those who may be doing user and market research are not typically the people who actually design and build the product/ The word "user" isn't very helpful (like "injury" is to the ER) / Raw data isn't inherently useful, and neither are most reports
Gary Thompson / Daphne Ogle
Mobile UX Design Essential | 001
페르소나의 효용, 전략 | Effectiveness of Persona
사용자를 명확한 실체로 표현(가정)할 수 있도록 도와준다.
페르소나 | Persona
1. 사용자요구분석 | User Needs Analysis
Make assumptions about users explicit (articulate a common language to talk meaningfully about users) / 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 development team (personas are fun)
Gary Thompson / Daphne Ogle
Mobile UX Design Essential | 001
페르소나의 효용, 전략 | Effectiveness of Persona
사용자를 명확한 실체로 표현(가정)할 수 있도록 도와준다.
모두에게 초점을 맞추는 대신, 특정 굮의 사용자에게 집중한다.
페르소나 | Persona
1. 사용자요구분석 | User Needs Analysis
Make assumptions about users explicit (articulate a common language to talk meaningfully about users) / 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 development team (personas are fun)
Gary Thompson / Daphne Ogle
Mobile UX Design Essential | 001
페르소나의 효용, 전략 | Effectiveness of Persona
사용자를 명확한 실체로 표현(가정)할 수 있도록 도와준다.
모두에게 초점을 맞추는 대신, 특정 굮의 사용자에게 집중한다.
우리의 선택권을 제한함으로써, 우리가 보다 나은 결정을 할 수 있도록 돕는다.
페르소나 | Persona
1. 사용자요구분석 | User Needs Analysis
Make assumptions about users explicit (articulate a common language to talk meaningfully about users) / 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 development team (personas are fun)
Gary Thompson / Daphne Ogle
Mobile UX Design Essential | 001
페르소나의 효용, 전략 | Effectiveness of Persona
사용자를 명확한 실체로 표현(가정)할 수 있도록 도와준다.
모두에게 초점을 맞추는 대신, 특정 굮의 사용자에게 집중한다.
우리의 선택권을 제한함으로써, 우리가 보다 나은 결정을 할 수 있도록 돕는다.
페르소나를 통해 디자인팀과 개발팀이 교류하며 (즐겁게) 작업할 수 있다.
페르소나 | Persona
1. 사용자요구분석 | User Needs Analysis
Make assumptions about users explicit (articulate a common language to talk meaningfully about users) / 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 development team (personas are fun)
Gary Thompson / Daphne Ogle
Mobile UX Design Essential | 001
페르소나 | Persona
1. 사용자요구분석 | User Needs Analysis
Source: WebCredible
Mobile UX Design Essential | 001
페르소나 | Persona
1. 사용자요구분석 | User Needs Analysis
Source: WebCredible
Mobile UX Design Essential | 001
페르소나 | Persona
1. 사용자요구분석 | User Needs Analysis
Source: WebCredible
Mobile UX Design Essential | 001
페르소나 | Persona
1. 사용자요구분석 | User Needs Analysis
Source: WebCredible
Mobile UX Design Essential | 001
페르소나 | Persona
1. 사용자요구분석 | User Needs Analysis
Source: fluid
Mobile UX Design Essential | 001
페르소나 | Persona
1. 사용자요구분석 | User Needs Analysis
Source: fluid
Mobile UX Design Essential | 001
페르소나 | Persona
1. 사용자요구분석 | User Needs Analysis
사진photo
이름 김성수 공모전을 준비하는 경영학과학생
배경 | background 나이 : 22세소속 : 단국대 경영학과 3학년, 학과조교모바일 앱 사용경험 : 갤럭시(안드로이드)
학과 공부와 어학원, 학과 사무실 조교 업무로 바쁜 상황 / 학습과 리포트작성을 위해 11인치 넷북을 사용중 / 친구와 협업과제가 있으나 시간부족
목표 : 졸업후대학원 진학 / 광고공모전 입상
불편함 : 시간부족으로 협업과제 일정지연
시나리오 : 등하교시간에 정보 업데이트
내용설명 : 올해 대학교 3학년인 김성수씨는 그 어느 때보다도 바쁜 시간을 보내고 있다.
6개월내에 제일기획 등이 주관하는 광고공모전이 5회나 예정되어 있어서 그간 친구들과 준비해 온 주제를 가지고 출품작을 만들어야 하지만, 일산에서 붂당까지의 등교, 리포트와 어학원 그리고 개인적인 공부까지 동시에 진행하면서 피로가쌓이고 있다.
동종 업종 벤치마킹을 통해 최적의 카피안을 팀원들에게 제시해야 하는 김성수씨의 일정이 지연되면서 친구들과의 협업 일정 전체가 지연되고 있다.
이동시간은 물론 잠깐의 여유시간에 관심 카피안을 검색해 스마트폰으로 알려…
photo: The Christian Science Monitor
Mobile UX Design Essential | 001
페르소나 | Persona
1. 사용자요구분석 | User Needs Analysis
사진photo
이름 name 핵심 인적사항 primary persona
배경 background | 나이, 역할, 전공붂야, 사용자 경험기간 수준 등 age, role, field, level of skill, experience
주요내용 main points | 사용자로서경험하고 있는 서비스와 제품, 주로사용하는 제품굮
목표goals
불편함frustration
시나리오scenario
구술내용narrative
2. 컨텐츠개발전략 | Contents Strategy
Mobile UX Design Essential | 001
1. 벤치마킹 | Bench Marking
UX 디자인문서작성 | Practice - UX Deliverables
2. 컨텐츠개발전략 | Contents Strategy
Mobile UX Design Essential | 001
1. 벤치마킹 | Bench Marking
2. 컨셉모델 | Concept Model
UX 디자인문서작성 | Practice - UX Deliverables
2. 컨텐츠개발전략 | Contents Strategy
Mobile UX Design Essential | 001
1. 벤치마킹 | Bench Marking
2. 컨셉모델 | Concept Model
3. 컨텐츠 인벤토리 | Contents Inventory
UX 디자인문서작성 | Practice - UX Deliverables
Mobile UX Design Essential | 001
컨셉모델 | Concept Model
2. 컨텐츠개발전략 | Contents Strategy
Mobile UX Design Essential | 001
컨셉모델 | Concept Model
2. 컨텐츠개발전략 | Contents Strategy
Mobile UX Design Essential | 001
컨셉모델 | Concept Model
2. 컨텐츠개발전략 | Contents Strategy
Mobile UX Design Essential | 001
컨셉모델 | Concept Model
2. 컨텐츠개발전략 | Contents Strategy
Mobile UX Design Essential | 001
컨셉모델 | Concept Model
2. 컨텐츠개발전략 | Contents Strategy
Mobile UX Design Essential | 001
컨셉모델 | Concept Model
2. 컨텐츠개발전략 | Contents Strategy
별지로 배포된 모눈 종이에 연필로 컨셉모델을 그립니다.
Draw a concept model onto the grid paper
Mobile UX Design Essential | 001
컨셉모델 | Concept Model
2. 컨텐츠개발전략 | Contents Strategy
파워포인트 도형 요소를 사용하여 컨셉모델을 구성합니다.
Build a concept model with PPTX shape elements.
Mobile UX Design Essential | 001
컨텐츠인벤토리 | Contents Inventory
2. 컨텐츠개발전략 | Contents Strategy
웹사이트의 컨텐츠 인벤토리 | Typical contents inventory for a web site
ID / Page Name / Link / Document Type / Owner / Keywords / Meta / Notes
Mobile UX Design Essential | 001
컨텐츠인벤토리 | Contents Inventory
2. 컨텐츠개발전략 | Contents Strategy
웹사이트의 컨텐츠 인벤토리 | Typical contents inventory for a web site
ID / 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
컨텐츠인벤토리 | Contents Inventory
2. 컨텐츠개발전략 | Contents Strategy
ID View Name File Name UI Element Owner SDK, Dev Lang Meta Desc Issue
1.0.0.0 welcome nikeplus_intro.mImage + Table
ViewUI team Xcode
Intro and main navigation
Log-in
1.1.0.0 start user_profile.mText +Table
ViewUI+Dev team Xcode, Obj-C
User main page
Request detailed profile
1.1.1.0 run_menu record_list.m Table View UI team XcodeRun-type list page
SNS cheer
1.1.1.1 run_basic record_default.m Table View UI+Dev team Xcode, Obj-C Run-type 1 Music
1.1.1.2 run _time record_compete.m Table View UI+Dev team Xcode, Obj-C Run-type 2 Time unit
1.2.0.0 tour Info_app.m Image View UI team XcodeGuide for new one
Sensor
Nike+앱의 컨텐츠를 일부 수정하여 구성했습니다.
Mobile UX Design Essential | 001
컨텐츠인벤토리 | Contents Inventory
2. 컨텐츠개발전략 | Contents Strategy
ID View Name File Name UI Element Owner SDK, Dev Lang Meta Desc Issue
3. 모바일컨텐츠디자인 | Mobile Contents Design
Mobile UX Design Essential | 001
1. 플로우차트 | Flowchart
UX 디자인문서작성 | Practice - UX Deliverables
3. 모바일컨텐츠디자인 | Mobile Contents Design
Mobile UX Design Essential | 001
1. 플로우차트 | Flowchart
2. 와이어프레임 | Wireframe
UX 디자인문서작성 | Practice - UX Deliverables
3. 모바일컨텐츠디자인 | Mobile Contents Design
Mobile UX Design Essential | 001
1. 플로우차트 | Flowchart
2. 와이어프레임 | Wireframe
3. 스크린 디자인 | Screen Design
UX 디자인문서작성 | Practice - UX Deliverables
3. 모바일컨텐츠디자인 | Mobile Contents Design
Mobile UX Design Essential | 001
1. 플로우차트 | Flowchart
2. 와이어프레임 | Wireframe
3. 스크린 디자인 | Screen Design
4. 스토리보드 | Story Board, Clickstream
UX 디자인문서작성 | Practice - UX Deliverables
3. 모바일컨텐츠디자인 | Mobile Contents Design
Mobile UX Design Essential | 001
1. 플로우차트 | Flowchart
2. 와이어프레임 | Wireframe
3. 스크린 디자인 | Screen Design
4. 스토리보드 | Story Board, Clickstream
5. 프로토타입 | Prototype with mobile-web
UX 디자인문서작성 | Practice - UX Deliverables
Mobile UX Design Essential | 001
와이어프레임 | Wireframe
3. 모바일컨텐츠디자인 | Mobile Contents Design
source : justin delabar
Mobile UX Design Essential | 001
와이어프레임 | Wireframe
source : Ian James Cox
3. 모바일컨텐츠디자인 | Mobile Contents Design
와이어프레임 | Wireframe
3. 모바일컨텐츠디자인 | Mobile Contents Design
Mobile UX Design Essential | 001
Navigation bar
Mobile UX Design Essential | 001
스크린디자인 | Screen Design
source : erinthompsonstudio
3. 모바일컨텐츠디자인 | Mobile Contents Design
Mobile UX Design Essential | 001
스크린디자인 | Screen Design
source : seedandsprout
3. 모바일컨텐츠디자인 | Mobile Contents Design
스크린디자인 | Screen Design
3. 모바일컨텐츠디자인 | Mobile Contents Design
Mobile UX Design Essential | 001
Navigation bar
Mobile UX Design Essential | 001
스토리보드 | Story Board
source : Paul Stanton
3. 모바일컨텐츠디자인 | Mobile Contents Design
프로토타입 | Prototype
3. 모바일컨텐츠디자인 | Mobile Contents Design
Mobile UX Design Essential | 001
FTP로 별도 배포된 HTML, CSS문서를 수정, 변환하여 모바일앱 프로토타입을 만듭니다. 완성된 모바일웹은 지정된 FTP를 통해 각자의 스마트폰으로 확인할 수 있습니다.
페이지에 삽입된 facebook Like버튺을 통해 팀원갂의 평가를 하고, 강사의 평가점수를 더해 우수팀을 선정합니다.
HTML5 + CSS3 +
Project
중소기업청 채용/통계 앱교직원공제회 모바일 웹서울여대 모바일웹보디가드, 블랙박스 +
Lecture
KT ESSKT연수원삼성멀티캠퍼스한국생산성본부 +
동준상 Jonathan Dong / @jonathanis / naebon1@gmail.com
모바일 UX/UI개발Best Practice for UX Deliverables
Project
중소기업청 채용/통계 앱교직원공제회 모바일 웹서울여대 모바일웹보디가드, 블랙박스 +
Lecture
KT ESSKT연수원삼성멀티캠퍼스한국생산성본부 +
동준상 Jonathan Dong / @jonathanis / naebon1@gmail.com
모바일 UX/UI개발Best Practice for UX Deliverables
수고하셨습니다.Thank you.
top related