SlideShare ist ein Scribd-Unternehmen logo
1 von 57
Downloaden Sie, um offline zu lesen
모바일 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 Deliverables


1. 사용자 요구 분석 | User Needs Analysis


1. 페르소나 | Persona




                                           Mobile UX Design Essential | 001
UX 디자인 문서작성 | Practice - UX Deliverables


1. 사용자 요구 분석 | User Needs Analysis


1. 페르소나 | Persona

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




                                           Mobile UX Design Essential | 001
UX 디자인 문서작성 | Practice - UX Deliverables


1. 사용자 요구 분석 | User Needs Analysis


1. 페르소나 | Persona

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

3. 사용성 테스트 보고서 | 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 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
1. 사용자 요구 분석 | User Needs Analysis


페르소나 | Persona
 사용자분석의 당면과제 | 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


                                                                 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 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
1. 사용자 요구 분석 | User Needs Analysis


페르소나 | Persona
 사용자분석의 당면과제 | 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


                                                                 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 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
1. 사용자 요구 분석 | User Needs Analysis


페르소나 | Persona
 페르소나의 효용, 전략 | 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)
                                                          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 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
1. 사용자 요구 분석 | User Needs Analysis


페르소나 | Persona
 페르소나의 효용, 전략 | 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)
                                                          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 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
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 Deliverables


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


1. 벤치마킹 | Bench Marking




                                           Mobile UX Design Essential | 001
UX 디자인 문서작성 | Practice - UX Deliverables


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


1. 벤치마킹 | Bench Marking

2. 컨셉모델 | Concept Model




                                           Mobile UX Design Essential | 001
UX 디자인 문서작성 | Practice - UX Deliverables


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


1. 벤치마킹 | Bench Marking

2. 컨셉모델 | Concept Model

3. 컨텐츠 인벤토리 | 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 site
ID / 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 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
2. 컨텐츠 개발전략 | Contents Strategy


컨텐츠 인벤토리 | Contents Inventory

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

                                          Image + Table                                 Intro and main
1.0.0.0    welcome     nikeplus_intro.m                     UI team         Xcode                           Log-in
                                              View                                        navigation
                                           Text +Table                                    User main      Request det
1.1.0.0      start      user_profile.m                    UI+Dev team    Xcode, Obj-C
                                              View                                          page         ailed profile
                                                                                          Run-type
1.1.1.0    run_menu      record_list.m     Table View       UI team         Xcode                        SNS cheer
                                                                                          list page

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

                                                                                          Guide for
1.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 Inventory

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




                                                  Mobile UX Design Essential | 001
UX 디자인 문서작성 | Practice - UX Deliverables


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


1. 플로우차트 | Flowchart




                                           Mobile UX Design Essential | 001
UX 디자인 문서작성 | Practice - UX Deliverables


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


1. 플로우차트 | Flowchart

2. 와이어프레임 | Wireframe




                                           Mobile UX Design Essential | 001
UX 디자인 문서작성 | Practice - UX Deliverables


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


1. 플로우차트 | Flowchart

2. 와이어프레임 | Wireframe

3. 스크린 디자인 | Screen Design




                                           Mobile UX Design Essential | 001
UX 디자인 문서작성 | Practice - UX Deliverables


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


1. 플로우차트 | Flowchart

2. 와이어프레임 | Wireframe

3. 스크린 디자인 | Screen Design

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




                                           Mobile UX Design Essential | 001
UX 디자인 문서작성 | Practice - UX Deliverables


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


1. 플로우차트 | Flowchart

2. 와이어프레임 | Wireframe

3. 스크린 디자인 | Screen Design

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

5. 프로토타입 | 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.com

Lecture           Project
KT ESS            중소기업청 채용/통계 앱
KT연수원             교직원공제회 모바일 웹
삼성멀티캠퍼스           서울여대 모바일웹
한국생산성본부 +         보디가드, 블랙박스 +
모바일 UX/UI개발
          Best Practice for UX Deliverables
          수고하셨습니다.
          Thank you.

동준상 Jonathan Dong / @jonathanis / naebon1@gmail.com

Lecture           Project
KT ESS            중소기업청 채용/통계 앱
KT연수원             교직원공제회 모바일 웹
삼성멀티캠퍼스           서울여대 모바일웹
한국생산성본부 +         보디가드, 블랙박스 +

Weitere ähnliche Inhalte

Was ist angesagt?

Scenario-Based Interactive UI Design
Scenario-Based Interactive UI DesignScenario-Based Interactive UI Design
Scenario-Based Interactive UI DesignHyunjin Ahn
 
UX 디자인에 대하여
UX 디자인에 대하여UX 디자인에 대하여
UX 디자인에 대하여totodeung
 
UX, UX Design, UX Process (@Daum/2014)
UX, UX Design, UX Process (@Daum/2014)UX, UX Design, UX Process (@Daum/2014)
UX, UX Design, UX Process (@Daum/2014)keesung kim
 
UIX UNIT_Several UI Teminologies Easy To Miss_SYS4U I&C
UIX UNIT_Several UI Teminologies Easy To Miss_SYS4U I&CUIX UNIT_Several UI Teminologies Easy To Miss_SYS4U I&C
UIX UNIT_Several UI Teminologies Easy To Miss_SYS4U I&Csys4u
 
130522 book study-사례로보는ux디자인
130522 book study-사례로보는ux디자인130522 book study-사례로보는ux디자인
130522 book study-사례로보는ux디자인정인 주
 
모바일 UX디자인의 개요
모바일 UX디자인의 개요모바일 UX디자인의 개요
모바일 UX디자인의 개요Junsang Dong
 
HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안
HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안
HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안(주)SNC Lab.
 
Mobile UX Design Essential
Mobile UX Design EssentialMobile UX Design Essential
Mobile UX Design EssentialJunsang Dong
 
UX Trend Research
UX Trend ResearchUX Trend Research
UX Trend ResearchBilly Choi
 
UX_trigger v2.(Limepaper) 2015
UX_trigger v2.(Limepaper) 2015UX_trigger v2.(Limepaper) 2015
UX_trigger v2.(Limepaper) 2015Limepaper, Inc.
 
UX/UI 개념과 방향성
UX/UI 개념과 방향성UX/UI 개념과 방향성
UX/UI 개념과 방향성Billy Choi
 
UX디자인에 대한 이해와 그 활용 예
UX디자인에 대한 이해와 그 활용 예UX디자인에 대한 이해와 그 활용 예
UX디자인에 대한 이해와 그 활용 예Funkybro
 
2015 ux관점으로 바라본 보험 서비스 디자인
2015 ux관점으로 바라본 보험 서비스 디자인2015 ux관점으로 바라본 보험 서비스 디자인
2015 ux관점으로 바라본 보험 서비스 디자인Donghoo Kim
 
사용자경험 이야기 요약본
사용자경험 이야기 요약본사용자경험 이야기 요약본
사용자경험 이야기 요약본sangyong lee
 
UX 디자인 기본 개념과 프로세스
UX 디자인 기본 개념과 프로세스UX 디자인 기본 개념과 프로세스
UX 디자인 기본 개념과 프로세스Hyun-june Kwon
 
[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321
[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321
[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321Kyungeun Kim
 
최신 UX/UI 디자인 트렌드
최신 UX/UI 디자인 트렌드최신 UX/UI 디자인 트렌드
최신 UX/UI 디자인 트렌드Billy Choi
 

Was ist angesagt? (20)

Ux design approach
Ux design approachUx design approach
Ux design approach
 
Scenario-Based Interactive UI Design
Scenario-Based Interactive UI DesignScenario-Based Interactive UI Design
Scenario-Based Interactive UI Design
 
UX 디자인에 대하여
UX 디자인에 대하여UX 디자인에 대하여
UX 디자인에 대하여
 
UX, UX Design, UX Process (@Daum/2014)
UX, UX Design, UX Process (@Daum/2014)UX, UX Design, UX Process (@Daum/2014)
UX, UX Design, UX Process (@Daum/2014)
 
UIX UNIT_Several UI Teminologies Easy To Miss_SYS4U I&C
UIX UNIT_Several UI Teminologies Easy To Miss_SYS4U I&CUIX UNIT_Several UI Teminologies Easy To Miss_SYS4U I&C
UIX UNIT_Several UI Teminologies Easy To Miss_SYS4U I&C
 
Ui vs ux
Ui vs uxUi vs ux
Ui vs ux
 
130522 book study-사례로보는ux디자인
130522 book study-사례로보는ux디자인130522 book study-사례로보는ux디자인
130522 book study-사례로보는ux디자인
 
모바일 UX디자인의 개요
모바일 UX디자인의 개요모바일 UX디자인의 개요
모바일 UX디자인의 개요
 
HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안
HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안
HCI KOREA 2017 데이터 기반 UX 평가를 통한 반응형웹 디자인 개선 방안
 
Mobile UX Design Essential
Mobile UX Design EssentialMobile UX Design Essential
Mobile UX Design Essential
 
UX Trend Research
UX Trend ResearchUX Trend Research
UX Trend Research
 
UX_trigger v2.(Limepaper) 2015
UX_trigger v2.(Limepaper) 2015UX_trigger v2.(Limepaper) 2015
UX_trigger v2.(Limepaper) 2015
 
UX/UI 개념과 방향성
UX/UI 개념과 방향성UX/UI 개념과 방향성
UX/UI 개념과 방향성
 
UX디자인에 대한 이해와 그 활용 예
UX디자인에 대한 이해와 그 활용 예UX디자인에 대한 이해와 그 활용 예
UX디자인에 대한 이해와 그 활용 예
 
2015 ux관점으로 바라본 보험 서비스 디자인
2015 ux관점으로 바라본 보험 서비스 디자인2015 ux관점으로 바라본 보험 서비스 디자인
2015 ux관점으로 바라본 보험 서비스 디자인
 
사용자경험 이야기 요약본
사용자경험 이야기 요약본사용자경험 이야기 요약본
사용자경험 이야기 요약본
 
UX 디자인 기본 개념과 프로세스
UX 디자인 기본 개념과 프로세스UX 디자인 기본 개념과 프로세스
UX 디자인 기본 개념과 프로세스
 
[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321
[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321
[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321
 
UX디자인
UX디자인UX디자인
UX디자인
 
최신 UX/UI 디자인 트렌드
최신 UX/UI 디자인 트렌드최신 UX/UI 디자인 트렌드
최신 UX/UI 디자인 트렌드
 

Andere mochten auch

당신이 UX Design Project에 참여할 때 알아야 할 것들
당신이 UX Design Project에 참여할 때 알아야 할 것들당신이 UX Design Project에 참여할 때 알아야 할 것들
당신이 UX Design Project에 참여할 때 알아야 할 것들Dongsik Yang
 
UX 디자인에서 사용자를 정의하는 3가지방법
UX 디자인에서 사용자를 정의하는 3가지방법 UX 디자인에서 사용자를 정의하는 3가지방법
UX 디자인에서 사용자를 정의하는 3가지방법 Dongsik Yang
 
UX 디자인사례와 커뮤니케이션
UX 디자인사례와 커뮤니케이션UX 디자인사례와 커뮤니케이션
UX 디자인사례와 커뮤니케이션Bryan Woo
 
모바일UX디자인 Essential
모바일UX디자인 Essential모바일UX디자인 Essential
모바일UX디자인 EssentialJunsang Dong
 
심리를 꿰뚫는 UX디자인
심리를 꿰뚫는 UX디자인심리를 꿰뚫는 UX디자인
심리를 꿰뚫는 UX디자인정인 주
 
UX 디자인 리서치 과정과 팁
UX 디자인 리서치 과정과 팁UX 디자인 리서치 과정과 팁
UX 디자인 리서치 과정과 팁Hyun-june Kwon
 
사업계획서 빈스홀릭
사업계획서 빈스홀릭사업계획서 빈스홀릭
사업계획서 빈스홀릭Seong-su Park
 
Mobile-First SEO - The Marketers Edition #3XEDigital
Mobile-First SEO - The Marketers Edition #3XEDigitalMobile-First SEO - The Marketers Edition #3XEDigital
Mobile-First SEO - The Marketers Edition #3XEDigitalAleyda Solís
 
Smart Market Strategy for Mobile Web Developer
Smart Market Strategy for Mobile Web DeveloperSmart Market Strategy for Mobile Web Developer
Smart Market Strategy for Mobile Web DeveloperJonathan Jeon
 
[정지훈] 매경 창업코리아 강의
[정지훈] 매경 창업코리아 강의[정지훈] 매경 창업코리아 강의
[정지훈] 매경 창업코리아 강의Mobileteam Mk
 
비즈니스 혁신을 위한 마인드와 리더십
비즈니스 혁신을 위한 마인드와 리더십비즈니스 혁신을 위한 마인드와 리더십
비즈니스 혁신을 위한 마인드와 리더십Kim jeehyun
 
Universal design & web
Universal design & webUniversal design & web
Universal design & web선영 박
 
Digital media city(국문)
Digital media city(국문)Digital media city(국문)
Digital media city(국문)simrc
 

Andere mochten auch (20)

사용자 중심의 소프트웨어 개발을 위한 UI/UX 참조모델 가이드
사용자 중심의 소프트웨어 개발을 위한 UI/UX 참조모델 가이드사용자 중심의 소프트웨어 개발을 위한 UI/UX 참조모델 가이드
사용자 중심의 소프트웨어 개발을 위한 UI/UX 참조모델 가이드
 
당신이 UX Design Project에 참여할 때 알아야 할 것들
당신이 UX Design Project에 참여할 때 알아야 할 것들당신이 UX Design Project에 참여할 때 알아야 할 것들
당신이 UX Design Project에 참여할 때 알아야 할 것들
 
UX 디자인에서 사용자를 정의하는 3가지방법
UX 디자인에서 사용자를 정의하는 3가지방법 UX 디자인에서 사용자를 정의하는 3가지방법
UX 디자인에서 사용자를 정의하는 3가지방법
 
UX 디자인사례와 커뮤니케이션
UX 디자인사례와 커뮤니케이션UX 디자인사례와 커뮤니케이션
UX 디자인사례와 커뮤니케이션
 
회식팅 프로토타입 송은영
회식팅 프로토타입 송은영회식팅 프로토타입 송은영
회식팅 프로토타입 송은영
 
회식팅 프로토타입 임혜진
회식팅 프로토타입 임혜진회식팅 프로토타입 임혜진
회식팅 프로토타입 임혜진
 
회식팅 서비스디자인 배은지
회식팅 서비스디자인 배은지회식팅 서비스디자인 배은지
회식팅 서비스디자인 배은지
 
회식팅 서비스디자인 송은영1
회식팅 서비스디자인  송은영1회식팅 서비스디자인  송은영1
회식팅 서비스디자인 송은영1
 
회식팅 서비스디자인 임혜진
회식팅 서비스디자인 임혜진회식팅 서비스디자인 임혜진
회식팅 서비스디자인 임혜진
 
회식팅 프로토타입 배은지
회식팅 프로토타입 배은지회식팅 프로토타입 배은지
회식팅 프로토타입 배은지
 
모바일UX디자인 Essential
모바일UX디자인 Essential모바일UX디자인 Essential
모바일UX디자인 Essential
 
심리를 꿰뚫는 UX디자인
심리를 꿰뚫는 UX디자인심리를 꿰뚫는 UX디자인
심리를 꿰뚫는 UX디자인
 
UX 디자인 리서치 과정과 팁
UX 디자인 리서치 과정과 팁UX 디자인 리서치 과정과 팁
UX 디자인 리서치 과정과 팁
 
사업계획서 빈스홀릭
사업계획서 빈스홀릭사업계획서 빈스홀릭
사업계획서 빈스홀릭
 
Mobile-First SEO - The Marketers Edition #3XEDigital
Mobile-First SEO - The Marketers Edition #3XEDigitalMobile-First SEO - The Marketers Edition #3XEDigital
Mobile-First SEO - The Marketers Edition #3XEDigital
 
Smart Market Strategy for Mobile Web Developer
Smart Market Strategy for Mobile Web DeveloperSmart Market Strategy for Mobile Web Developer
Smart Market Strategy for Mobile Web Developer
 
[정지훈] 매경 창업코리아 강의
[정지훈] 매경 창업코리아 강의[정지훈] 매경 창업코리아 강의
[정지훈] 매경 창업코리아 강의
 
비즈니스 혁신을 위한 마인드와 리더십
비즈니스 혁신을 위한 마인드와 리더십비즈니스 혁신을 위한 마인드와 리더십
비즈니스 혁신을 위한 마인드와 리더십
 
Universal design & web
Universal design & webUniversal design & web
Universal design & web
 
Digital media city(국문)
Digital media city(국문)Digital media city(국문)
Digital media city(국문)
 

Ähnlich wie Best Practice for Mobile UX Design

This is ux design summary
This is ux design summaryThis is ux design summary
This is ux design summaryRightBrain
 
Appendix uxtrigger toolkit_v1_iot_2019
Appendix uxtrigger toolkit_v1_iot_2019Appendix uxtrigger toolkit_v1_iot_2019
Appendix uxtrigger toolkit_v1_iot_2019Potentialeyes, Inc.
 
사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1
사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1
사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1Limepaper, Inc.
 
Ux research guide
Ux research guideUx research guide
Ux research guideKim Taesook
 
Uxtrigger template v5.compressed_2019
Uxtrigger template v5.compressed_2019Uxtrigger template v5.compressed_2019
Uxtrigger template v5.compressed_2019Potentialeyes, Inc.
 
모바일 웹/앱 UI & UX 설계 이론(1)
모바일 웹/앱 UI & UX 설계 이론(1)모바일 웹/앱 UI & UX 설계 이론(1)
모바일 웹/앱 UI & UX 설계 이론(1)mosaicnet
 
어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)
어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)
어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)ideaguide
 
UX 프로젝트 가이드 (UX Project Guide)
UX 프로젝트 가이드 (UX Project Guide) UX 프로젝트 가이드 (UX Project Guide)
UX 프로젝트 가이드 (UX Project Guide) RightBrain inc.
 
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부RightBrain inc.
 
UX/UI Trends Seminar 2019
UX/UI Trends Seminar 2019UX/UI Trends Seminar 2019
UX/UI Trends Seminar 2019JungYong Kim
 
H3 2011 UX에 대한 7가지 오해와 진실
H3 2011 UX에 대한 7가지 오해와 진실H3 2011 UX에 대한 7가지 오해와 진실
H3 2011 UX에 대한 7가지 오해와 진실KTH
 
CEO & UX Designers' R&R
CEO & UX Designers' R&RCEO & UX Designers' R&R
CEO & UX Designers' R&RBilly Choi
 
[Msd06]mapping
[Msd06]mapping[Msd06]mapping
[Msd06]mappingJY LEE
 
Project Jansori - location based scheduler
Project Jansori - location based schedulerProject Jansori - location based scheduler
Project Jansori - location based scheduler원준 이
 
Uxt설명회(0901)
Uxt설명회(0901)Uxt설명회(0901)
Uxt설명회(0901)JongHo Lee
 

Ähnlich wie Best Practice for Mobile UX Design (20)

Ux research guide ux1
Ux research guide ux1Ux research guide ux1
Ux research guide ux1
 
13.ux design
13.ux design13.ux design
13.ux design
 
This is ux design summary
This is ux design summaryThis is ux design summary
This is ux design summary
 
Appendix uxtrigger toolkit_v1_iot_2019
Appendix uxtrigger toolkit_v1_iot_2019Appendix uxtrigger toolkit_v1_iot_2019
Appendix uxtrigger toolkit_v1_iot_2019
 
사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1
사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1
사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1
 
Ux research guide
Ux research guideUx research guide
Ux research guide
 
Uxtrigger template v5.compressed_2019
Uxtrigger template v5.compressed_2019Uxtrigger template v5.compressed_2019
Uxtrigger template v5.compressed_2019
 
모바일 웹/앱 UI & UX 설계 이론(1)
모바일 웹/앱 UI & UX 설계 이론(1)모바일 웹/앱 UI & UX 설계 이론(1)
모바일 웹/앱 UI & UX 설계 이론(1)
 
어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)
어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)
어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)
 
U&I Insgiht
U&I InsgihtU&I Insgiht
U&I Insgiht
 
UX 프로젝트 가이드 (UX Project Guide)
UX 프로젝트 가이드 (UX Project Guide) UX 프로젝트 가이드 (UX Project Guide)
UX 프로젝트 가이드 (UX Project Guide)
 
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부
 
UX/UI Trends Seminar 2019
UX/UI Trends Seminar 2019UX/UI Trends Seminar 2019
UX/UI Trends Seminar 2019
 
[Nux]13 nux
[Nux]13 nux[Nux]13 nux
[Nux]13 nux
 
H3 2011 UX에 대한 7가지 오해와 진실
H3 2011 UX에 대한 7가지 오해와 진실H3 2011 UX에 대한 7가지 오해와 진실
H3 2011 UX에 대한 7가지 오해와 진실
 
CEO & UX Designers' R&R
CEO & UX Designers' R&RCEO & UX Designers' R&R
CEO & UX Designers' R&R
 
[Msd06]mapping
[Msd06]mapping[Msd06]mapping
[Msd06]mapping
 
Project Jansori - location based scheduler
Project Jansori - location based schedulerProject Jansori - location based scheduler
Project Jansori - location based scheduler
 
[Nux]09 nux
[Nux]09 nux[Nux]09 nux
[Nux]09 nux
 
Uxt설명회(0901)
Uxt설명회(0901)Uxt설명회(0901)
Uxt설명회(0901)
 

Mehr von Junsang Dong

2016 심천 (Shenzen) ICT 트랜드 리포트
2016 심천 (Shenzen) ICT 트랜드 리포트2016 심천 (Shenzen) ICT 트랜드 리포트
2016 심천 (Shenzen) ICT 트랜드 리포트Junsang Dong
 
ICT 상용화 06 스마트 기기 부품, 외장 제조 개론
ICT 상용화 06 스마트 기기 부품, 외장 제조 개론ICT 상용화 06 스마트 기기 부품, 외장 제조 개론
ICT 상용화 06 스마트 기기 부품, 외장 제조 개론Junsang Dong
 
ICT 상용화 시리즈 09 플라스틱 실무 개론
ICT 상용화 시리즈 09 플라스틱 실무 개론ICT 상용화 시리즈 09 플라스틱 실무 개론
ICT 상용화 시리즈 09 플라스틱 실무 개론Junsang Dong
 
2015 Internet of Logistic Things / 2015 물류 사물인터넷
2015 Internet of Logistic Things / 2015 물류 사물인터넷2015 Internet of Logistic Things / 2015 물류 사물인터넷
2015 Internet of Logistic Things / 2015 물류 사물인터넷Junsang Dong
 
비즈니스모델링_2012_콘텐츠진흥원_SCC
비즈니스모델링_2012_콘텐츠진흥원_SCC비즈니스모델링_2012_콘텐츠진흥원_SCC
비즈니스모델링_2012_콘텐츠진흥원_SCCJunsang Dong
 
Mobile ux design_for_ck_univ
Mobile ux design_for_ck_univMobile ux design_for_ck_univ
Mobile ux design_for_ck_univJunsang Dong
 
Android ui benchmarking
Android ui benchmarkingAndroid ui benchmarking
Android ui benchmarkingJunsang Dong
 
HTML5 APIs - Part1. Multimedia
HTML5 APIs - Part1. MultimediaHTML5 APIs - Part1. Multimedia
HTML5 APIs - Part1. MultimediaJunsang Dong
 
Mobile Prototype Essential
Mobile Prototype EssentialMobile Prototype Essential
Mobile Prototype EssentialJunsang Dong
 

Mehr von Junsang Dong (9)

2016 심천 (Shenzen) ICT 트랜드 리포트
2016 심천 (Shenzen) ICT 트랜드 리포트2016 심천 (Shenzen) ICT 트랜드 리포트
2016 심천 (Shenzen) ICT 트랜드 리포트
 
ICT 상용화 06 스마트 기기 부품, 외장 제조 개론
ICT 상용화 06 스마트 기기 부품, 외장 제조 개론ICT 상용화 06 스마트 기기 부품, 외장 제조 개론
ICT 상용화 06 스마트 기기 부품, 외장 제조 개론
 
ICT 상용화 시리즈 09 플라스틱 실무 개론
ICT 상용화 시리즈 09 플라스틱 실무 개론ICT 상용화 시리즈 09 플라스틱 실무 개론
ICT 상용화 시리즈 09 플라스틱 실무 개론
 
2015 Internet of Logistic Things / 2015 물류 사물인터넷
2015 Internet of Logistic Things / 2015 물류 사물인터넷2015 Internet of Logistic Things / 2015 물류 사물인터넷
2015 Internet of Logistic Things / 2015 물류 사물인터넷
 
비즈니스모델링_2012_콘텐츠진흥원_SCC
비즈니스모델링_2012_콘텐츠진흥원_SCC비즈니스모델링_2012_콘텐츠진흥원_SCC
비즈니스모델링_2012_콘텐츠진흥원_SCC
 
Mobile ux design_for_ck_univ
Mobile ux design_for_ck_univMobile ux design_for_ck_univ
Mobile ux design_for_ck_univ
 
Android ui benchmarking
Android ui benchmarkingAndroid ui benchmarking
Android ui benchmarking
 
HTML5 APIs - Part1. Multimedia
HTML5 APIs - Part1. MultimediaHTML5 APIs - Part1. Multimedia
HTML5 APIs - Part1. Multimedia
 
Mobile Prototype Essential
Mobile Prototype EssentialMobile Prototype Essential
Mobile Prototype Essential
 

Best Practice for Mobile UX Design

  • 1. 모바일 UX/UI개발 Best Practice for UX Deliverables Mobile UX Design Essential 한국생산성본부 / KT Econovation Smart School 동준상 강사 | @jonathanis
  • 2. UX디자인 문서 작성 | Content List 1. 사용자 요구 분석 | User Needs Analysis Mobile UX Design Essential | 001
  • 3. UX디자인 문서 작성 | Content List 1. 사용자 요구 분석 | User Needs Analysis 2. 컨텐츠 개발전략 | Contents Strategy Mobile UX Design Essential | 001
  • 4. UX디자인 문서 작성 | Content List 1. 사용자 요구 분석 | User Needs Analysis 2. 컨텐츠 개발전략 | Contents Strategy 3. 모바일 컨텐츠 디자인 | Mobile Contents Design Mobile UX Design Essential | 001
  • 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. UX 디자인 문서작성 | Practice - UX Deliverables 1. 사용자 요구 분석 | User Needs Analysis 1. 페르소나 | Persona Mobile UX Design Essential | 001
  • 7. UX 디자인 문서작성 | Practice - UX Deliverables 1. 사용자 요구 분석 | User Needs Analysis 1. 페르소나 | Persona 2. 사용성 테스트 계획서 | Usability Test Plan Mobile UX Design Essential | 001
  • 8. UX 디자인 문서작성 | Practice - UX Deliverables 1. 사용자 요구 분석 | User Needs Analysis 1. 페르소나 | Persona 2. 사용성 테스트 계획서 | Usability Test Plan 3. 사용성 테스트 보고서 | Usability Report Mobile UX Design Essential | 001
  • 9. 1. 사용자 요구 분석 | User Needs Analysis 페르소나 | Persona 페르소나는,  "A persona is Mobile UX Design Essential | 001
  • 10. 1. 사용자 요구 분석 | User Needs Analysis 페르소나 | Persona 페르소나는, 제품의 핵심기 능, 정보 네비게이션, 사용 자와의 인터랙션, 그리고 비 주얼 디자인에 이르는 사용 자 중심의 의사결정을 지원 하는 정보체계이다.  "A persona is Mobile UX Design Essential | 001
  • 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. 1. 사용자 요구 분석 | User Needs Analysis 페르소나 | Persona  사용자분석의 당면과제 | 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 Mobile UX Design Essential | 001
  • 13. 1. 사용자 요구 분석 | User Needs Analysis 페르소나 | Persona  사용자분석의 당면과제 | 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 Mobile UX Design Essential | 001
  • 14. 1. 사용자 요구 분석 | User Needs Analysis 페르소나 | Persona  사용자분석의 당면과제 | 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 Mobile UX Design Essential | 001
  • 15. 1. 사용자 요구 분석 | User Needs Analysis 페르소나 | Persona  사용자분석의 당면과제 | 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 Mobile UX Design Essential | 001
  • 16. 1. 사용자 요구 분석 | User Needs Analysis 페르소나 | Persona  사용자분석의 당면과제 | 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 Mobile UX Design Essential | 001
  • 17. 1. 사용자 요구 분석 | User Needs Analysis 페르소나 | Persona  페르소나의 효용, 전략 | 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) Gary Thompson / Daphne Ogle Mobile UX Design Essential | 001
  • 18. 1. 사용자 요구 분석 | User Needs Analysis 페르소나 | Persona  페르소나의 효용, 전략 | 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) Gary Thompson / Daphne Ogle Mobile UX Design Essential | 001
  • 19. 1. 사용자 요구 분석 | User Needs Analysis 페르소나 | Persona  페르소나의 효용, 전략 | 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) Gary Thompson / Daphne Ogle Mobile UX Design Essential | 001
  • 20. 1. 사용자 요구 분석 | User Needs Analysis 페르소나 | Persona  페르소나의 효용, 전략 | 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) Gary Thompson / Daphne Ogle Mobile UX Design Essential | 001
  • 21. 1. 사용자 요구 분석 | User Needs Analysis 페르소나 | Persona Source: WebCredible Mobile UX Design Essential | 001
  • 22. 1. 사용자 요구 분석 | User Needs Analysis 페르소나 | Persona Source: WebCredible Mobile UX Design Essential | 001
  • 23. 1. 사용자 요구 분석 | User Needs Analysis 페르소나 | Persona Source: WebCredible Mobile UX Design Essential | 001
  • 24. 1. 사용자 요구 분석 | User Needs Analysis 페르소나 | Persona Source: WebCredible Mobile UX Design Essential | 001
  • 25. 1. 사용자 요구 분석 | User Needs Analysis 페르소나 | Persona Source: fluid Mobile UX Design Essential | 001
  • 26. 1. 사용자 요구 분석 | User Needs Analysis 페르소나 | Persona Source: fluid Mobile UX Design Essential | 001
  • 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. 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. UX 디자인 문서작성 | Practice - UX Deliverables 2. 컨텐츠 개발전략 | Contents Strategy 1. 벤치마킹 | Bench Marking Mobile UX Design Essential | 001
  • 30. UX 디자인 문서작성 | Practice - UX Deliverables 2. 컨텐츠 개발전략 | Contents Strategy 1. 벤치마킹 | Bench Marking 2. 컨셉모델 | Concept Model Mobile UX Design Essential | 001
  • 31. UX 디자인 문서작성 | Practice - UX Deliverables 2. 컨텐츠 개발전략 | Contents Strategy 1. 벤치마킹 | Bench Marking 2. 컨셉모델 | Concept Model 3. 컨텐츠 인벤토리 | Contents Inventory Mobile UX Design Essential | 001
  • 32. 2. 컨텐츠 개발전략 | Contents Strategy 컨셉모델 | Concept Model Mobile UX Design Essential | 001
  • 33. 2. 컨텐츠 개발전략 | Contents Strategy 컨셉모델 | Concept Model Mobile UX Design Essential | 001
  • 34. 2. 컨텐츠 개발전략 | Contents Strategy 컨셉모델 | Concept Model Mobile UX Design Essential | 001
  • 35. 2. 컨텐츠 개발전략 | Contents Strategy 컨셉모델 | Concept Model Mobile UX Design Essential | 001
  • 36. 2. 컨텐츠 개발전략 | Contents Strategy 컨셉모델 | Concept Model Mobile UX Design Essential | 001
  • 37. 2. 컨텐츠 개발전략 | Contents Strategy 컨셉모델 | Concept Model 별지로 배포된 모눈 종이에 연필로 컨셉모델을 그립니다. Draw a concept model onto the grid paper Mobile UX Design Essential | 001
  • 38. 2. 컨텐츠 개발전략 | Contents Strategy 컨셉모델 | Concept Model 파워포인트 도형 요소를 사용하여 컨셉모델을 구성합니다. Build a concept model with PPTX shape elements. Mobile UX Design Essential | 001
  • 39. 2. 컨텐츠 개발전략 | Contents Strategy 컨텐츠 인벤토리 | Contents Inventory 웹사이트의 컨텐츠 인벤토리 | Typical contents inventory for a web site ID / Page Name / Link / Document Type / Owner / Keywords / Meta / Notes Mobile UX Design Essential | 001
  • 40. 2. 컨텐츠 개발전략 | Contents Strategy 컨텐츠 인벤토리 | Contents Inventory 웹사이트의 컨텐츠 인벤토리 | 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
  • 41. 2. 컨텐츠 개발전략 | Contents Strategy 컨텐츠 인벤토리 | Contents Inventory ID View Name File Name UI Element Owner SDK, Dev Lang Meta Desc Issue Image + Table Intro and main 1.0.0.0 welcome nikeplus_intro.m UI team Xcode Log-in View navigation Text +Table User main Request det 1.1.0.0 start user_profile.m UI+Dev team Xcode, Obj-C View page ailed profile Run-type 1.1.1.0 run_menu record_list.m Table View UI team Xcode SNS cheer list page 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 Guide for 1.2.0.0 tour Info_app.m Image View UI team Xcode Sensor new one Nike+앱의 컨텐츠를 일부 수정하여 구성했습니다. Mobile UX Design Essential | 001
  • 42. 2. 컨텐츠 개발전략 | Contents Strategy 컨텐츠 인벤토리 | Contents Inventory ID View Name File Name UI Element Owner SDK, Dev Lang Meta Desc Issue Mobile UX Design Essential | 001
  • 43. UX 디자인 문서작성 | Practice - UX Deliverables 3. 모바일 컨텐츠 디자인 | Mobile Contents Design 1. 플로우차트 | Flowchart Mobile UX Design Essential | 001
  • 44. UX 디자인 문서작성 | Practice - UX Deliverables 3. 모바일 컨텐츠 디자인 | Mobile Contents Design 1. 플로우차트 | Flowchart 2. 와이어프레임 | Wireframe Mobile UX Design Essential | 001
  • 45. UX 디자인 문서작성 | Practice - UX Deliverables 3. 모바일 컨텐츠 디자인 | Mobile Contents Design 1. 플로우차트 | Flowchart 2. 와이어프레임 | Wireframe 3. 스크린 디자인 | Screen Design Mobile UX Design Essential | 001
  • 46. UX 디자인 문서작성 | Practice - UX Deliverables 3. 모바일 컨텐츠 디자인 | Mobile Contents Design 1. 플로우차트 | Flowchart 2. 와이어프레임 | Wireframe 3. 스크린 디자인 | Screen Design 4. 스토리보드 | Story Board, Clickstream Mobile UX Design Essential | 001
  • 47. UX 디자인 문서작성 | Practice - UX Deliverables 3. 모바일 컨텐츠 디자인 | Mobile Contents Design 1. 플로우차트 | Flowchart 2. 와이어프레임 | Wireframe 3. 스크린 디자인 | Screen Design 4. 스토리보드 | Story Board, Clickstream 5. 프로토타입 | Prototype with mobile-web Mobile UX Design Essential | 001
  • 48. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design 와이어프레임 | Wireframe source : justin delabar Mobile UX Design Essential | 001
  • 49. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design 와이어프레임 | Wireframe source : Ian James Cox Mobile UX Design Essential | 001
  • 50. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design 와이어프레임 | Wireframe Navigation bar Mobile UX Design Essential | 001
  • 51. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design 스크린 디자인 | Screen Design source : erinthompsonstudio Mobile UX Design Essential | 001
  • 52. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design 스크린 디자인 | Screen Design source : seedandsprout Mobile UX Design Essential | 001
  • 53. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design 스크린 디자인 | Screen Design Navigation bar Mobile UX Design Essential | 001
  • 54. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design 스토리보드 | Story Board source : Paul Stanton Mobile UX Design Essential | 001
  • 55. 3. 모바일 컨텐츠 디자인 | Mobile Contents Design 프로토타입 | Prototype HTML5 + CSS3 +  FTP로 별도 배포된 HTML, CSS문서를 수정, 변환하여 모바일앱 프로토타입을 만 듭니다. 완성된 모바일웹은 지정된 FTP를 통해 각자의 스마트폰으로 확인할 수 있습 니다.  페이지에 삽입된 facebook Like버튺을 통해 팀원갂의 평가를 하고, 강사의 평가 점수를 더해 우수팀을 선정합니다. Mobile UX Design Essential | 001
  • 56. 모바일 UX/UI개발 Best Practice for UX Deliverables 동준상 Jonathan Dong / @jonathanis / naebon1@gmail.com Lecture Project KT ESS 중소기업청 채용/통계 앱 KT연수원 교직원공제회 모바일 웹 삼성멀티캠퍼스 서울여대 모바일웹 한국생산성본부 + 보디가드, 블랙박스 +
  • 57. 모바일 UX/UI개발 Best Practice for UX Deliverables 수고하셨습니다. Thank you. 동준상 Jonathan Dong / @jonathanis / naebon1@gmail.com Lecture Project KT ESS 중소기업청 채용/통계 앱 KT연수원 교직원공제회 모바일 웹 삼성멀티캠퍼스 서울여대 모바일웹 한국생산성본부 + 보디가드, 블랙박스 +