Download - Best Practice for Mobile UX Design

동준상강사 | @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




2. 컨텐츠개발전략 | Contents Strategy





3. 모바일컨텐츠디자인 | Mobile Contents Design






Slideshare를 통해 퍼블리싱된 본 ‘UX디자인 문서작성 연습’은 2011년 5월2일부터 시행된 KT ESS 단국대 특강의 수업에 사용된 내용입니다.

본 자료는 수업내용에 맞춰 다시 작성되었으므로 목차에 소개된 UX문서 작성사례 중 생략된 내용이 있습니다. 슬라이드 독자 여러분의 양해 부탁 드립니다.

동준상 [email protected]



1. 페르소나 | Persona

UX 디자인문서작성 | Practice - UX Deliverables




2. 사용성 테스트 계획서 | Usability Test Plan





2. 사용성 테스트 계획서 | Usability Test Plan

3. 사용성 테스트 보고서 | Usability Report



"A persona is

페르소나 | Persona


페르소나는,


"A persona is



페르소나는, 제품의 핵심기

능, 정보 네비게이션, 사용

자와의 인터랙션, 그리고 비

주얼 디자인에 이르는 사용

자 중심의 의사결정을 지원

하는 정보체계이다.


"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



페르소나는, 제품의 핵심기

능, 정보 네비게이션, 사용

자와의 인터랙션, 그리고 비

주얼 디자인에 이르는 사용

자 중심의 의사결정을 지원

하는 정보체계이다.


사용자분석의 당면과제 | Problem of Usability

사용자중심 디자인은 자연스럽지 않다



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




사용자는 복잡하고 서로 다르다.









사용자 분석 담당자가 실질적인 디자인이나 제작에 참여하지 않을 수 있다.










사용자라는 말 자체가 너무 광범위한 의미이다.










사용자라는 말 자체가 너무 광범위한 의미이다.

사용자 분석결과 데이터 자체는 그리 큰 도움이 되지 않는다.






페르소나의 효용, 전략 | Effectiveness of Persona

사용자를 명확한 실체로 표현(가정)할 수 있도록 도와준다.



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)





모두에게 초점을 맞추는 대신, 특정 굮의 사용자에게 집중한다.









우리의 선택권을 제한함으로써, 우리가 보다 나은 결정을 할 수 있도록 돕는다.









우리의 선택권을 제한함으로써, 우리가 보다 나은 결정을 할 수 있도록 돕는다.

페르소나를 통해 디자인팀과 개발팀이 교류하며 (즐겁게) 작업할 수 있다.








Source: WebCredible




Source: fluid




사진photo

이름 김성수 공모전을 준비하는 경영학과학생

배경 | background 나이 : 22세소속 : 단국대 경영학과 3학년, 학과조교모바일 앱 사용경험 : 갤럭시(안드로이드)

학과 공부와 어학원, 학과 사무실 조교 업무로 바쁜 상황 / 학습과 리포트작성을 위해 11인치 넷북을 사용중 / 친구와 협업과제가 있으나 시간부족

목표 : 졸업후대학원 진학 / 광고공모전 입상

불편함 : 시간부족으로 협업과제 일정지연

시나리오 : 등하교시간에 정보 업데이트

내용설명 : 올해 대학교 3학년인 김성수씨는 그 어느 때보다도 바쁜 시간을 보내고 있다.

6개월내에 제일기획 등이 주관하는 광고공모전이 5회나 예정되어 있어서 그간 친구들과 준비해 온 주제를 가지고 출품작을 만들어야 하지만, 일산에서 붂당까지의 등교, 리포트와 어학원 그리고 개인적인 공부까지 동시에 진행하면서 피로가쌓이고 있다.

동종 업종 벤치마킹을 통해 최적의 카피안을 팀원들에게 제시해야 하는 김성수씨의 일정이 지연되면서 친구들과의 협업 일정 전체가 지연되고 있다.

이동시간은 물론 잠깐의 여유시간에 관심 카피안을 검색해 스마트폰으로 알려…

photo: The Christian Science Monitor




사진photo

이름 name 핵심 인적사항 primary persona

배경 background | 나이, 역할, 전공붂야, 사용자 경험기간 수준 등 age, role, field, level of skill, experience

주요내용 main points | 사용자로서경험하고 있는 서비스와 제품, 주로사용하는 제품굮

목표goals

불편함frustration

시나리오scenario

구술내용narrative



1. 벤치마킹 | Bench Marking





2. 컨셉모델 | Concept Model





2. 컨셉모델 | Concept Model

3. 컨텐츠 인벤토리 | Contents Inventory



컨셉모델 | Concept Model





별지로 배포된 모눈 종이에 연필로 컨셉모델을 그립니다.

Draw a concept model onto the grid paper




파워포인트 도형 요소를 사용하여 컨셉모델을 구성합니다.

Build a concept model with PPTX shape elements.


컨텐츠인벤토리 | Contents Inventory


웹사이트의 컨텐츠 인벤토리 | Typical contents inventory for a web site

ID / Page Name / Link / Document Type / Owner / Keywords / Meta / Notes




웹사이트의 컨텐츠 인벤토리 | 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




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+앱의 컨텐츠를 일부 수정하여 구성했습니다.




ID View Name File Name UI Element Owner SDK, Dev Lang Meta Desc Issue



1. 플로우차트 | Flowchart





2. 와이어프레임 | Wireframe






3. 스크린 디자인 | Screen Design







4. 스토리보드 | Story Board, Clickstream







4. 스토리보드 | Story Board, Clickstream

5. 프로토타입 | Prototype with mobile-web



와이어프레임 | Wireframe


source : justin delabar



source : Ian James Cox





Navigation bar


스크린디자인 | Screen Design

source : erinthompsonstudio




source : seedandsprout





Navigation bar


스토리보드 | Story Board

source : Paul Stanton


프로토타입 | Prototype



FTP로 별도 배포된 HTML, CSS문서를 수정, 변환하여 모바일앱 프로토타입을 만듭니다. 완성된 모바일웹은 지정된 FTP를 통해 각자의 스마트폰으로 확인할 수 있습니다.

페이지에 삽입된 facebook Like버튺을 통해 팀원갂의 평가를 하고, 강사의 평가점수를 더해 우수팀을 선정합니다.

HTML5 + CSS3 +

Project

중소기업청 채용/통계 앱교직원공제회 모바일 웹서울여대 모바일웹보디가드, 블랙박스 +

Lecture

KT ESSKT연수원삼성멀티캠퍼스한국생산성본부 +

동준상 Jonathan Dong / @jonathanis / [email protected]


Project

중소기업청 채용/통계 앱교직원공제회 모바일 웹서울여대 모바일웹보디가드, 블랙박스 +

Lecture

KT ESSKT연수원삼성멀티캠퍼스한국생산성본부 +

동준상 Jonathan Dong / @jonathanis / [email protected]


수고하셨습니다.Thank you.

Download - Best Practice for Mobile UX Design

Top Related