114
http://msd2013.jylee6977.com/tc KGIT 2013 SPRING CLASS @ JYLEE Mobile Service Design

[Msd03]mobile context

Embed Size (px)

Citation preview

Page 1: [Msd03]mobile context

http://msd2013.jylee6977.com/tc

KGIT 2013 SPRING CLASS @ JYLEE

Mobile

Service

Design

Page 2: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

1 Class Orientation - 수업 및 프로젝트 소개

- 아이스 브레이킹

2 What is Mobile App?

What is Service Design?

- 모바일과 모바일 앱에 대한 이해

- 모바일 서비스 개발을 위한 서비스 디자인

3 Mobile Context

& User Experience

- 모바일 컨텍스트에 대한 이해

- 모바일 사용자 경험에 대한 이해

- 모바일 UI에 대한 이해

4 Mobile Service Design(1)

- Discovery Phase

- 무엇을 서비스화/디자인 할 것인가?

- Desk Research를 통한 발견

5 Mobile Service Design(2)

- Define Phase : 문제정의

- 서비스 대상에 대한 문제정의

- User Research. Service Safari

6 Mobile Service Design(3)

- Define Phase : 서비스전략

- 문제정의에 따른 컨셉 및 전략 구축

- Service Principle, Design Criteria,

7 Mobile Service Design(4)

- Define Phase : 디자인원칙수립

- 전략 및 컨셉에 따른 사용자 시나리오

- Persona, Service Scenario

Page 3: [Msd03]mobile context

Mobile

Service

Design

Page 4: [Msd03]mobile context

Mobile

Service

Design

Page 5: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Mobile = 7th Media by Tomi Ahonen

Printing Hand Media

Recording Voice Media

Filming Visual Experience Media

Page 6: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Mobile = 7th Media by Tomi Ahonen

Radio Live Experience Media

Television Live Visual Experience

Media

Internet Total Experience Media

(Entertaiment.Information.Live)

Page 7: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Mobile = 7th Media by Tomi Ahonen

Page 8: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Mobile = 7th Media by Tomi Ahonen

Printing : Read & Presentation

Recording : Play & Recording

Filming : Watching & Filming

Radio

Television

Internet

Page 9: [Msd03]mobile context

Ubiquity?

Page 10: [Msd03]mobile context

Ubiquity?

Page 11: [Msd03]mobile context

Ubiquity?

Page 12: [Msd03]mobile context

Ubiquity?

Page 13: [Msd03]mobile context

Ubiquity?

Page 14: [Msd03]mobile context

Ubiquity?

Page 15: [Msd03]mobile context

Ubiquity?

Page 16: [Msd03]mobile context

Ubiquity?

Page 17: [Msd03]mobile context

Ubiquity?

Page 18: [Msd03]mobile context

Ubiquity?

Page 19: [Msd03]mobile context

Ubiquity?

Page 20: [Msd03]mobile context

Ubiquity?

Page 21: [Msd03]mobile context

Ubiquity?

Page 22: [Msd03]mobile context

Ubiquity?

Page 23: [Msd03]mobile context

Ubiquity?

Page 24: [Msd03]mobile context

Ubiquity?

Page 25: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Why

Mobile? 1. 진정으로 개읶화된 최초의 대중매체

2. 언제나 켜져있는 최초의 대중매체

3. 언제나 가지고 다닐수 있는 최초의 대중매체

4. 지불수단이 내장된 유읷한 대중 매체

5. 창의적 충동의 정점

Page 26: [Msd03]mobile context

Ubiquity?

“모바읷폰이 미치는 범위와 영향은 자동차, TV, 읶터넷보다 더 크다. 모바읷 폰은 다른 어떤 것보다 향후 10년갂 가치가 더 커질것이다. 모바읷폰은 다기능 측면으로 읶해 우리가 상상할수 있는 것보다 훨씬 읶생에 영향을 줄것이다”

Page 27: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Ubiquity?

Page 28: [Msd03]mobile context

Ubiquity?

Page 29: [Msd03]mobile context

Ubiquity?

Page 30: [Msd03]mobile context

Ubiquity?

Page 31: [Msd03]mobile context

Ubiquity?

Page 32: [Msd03]mobile context

Ubiquity?

Page 33: [Msd03]mobile context

Mobile

Service

Design

BIG C와 small c 모바일 맥락에 대한 다양한 이해

Page 34: [Msd03]mobile context

http://msd2013.jylee6977.com/tc

Page 35: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Page 36: [Msd03]mobile context

http://msd2013.jylee6977.com/tc

Page 37: [Msd03]mobile context

http://msd2013.jylee6977.com/tc

상황인식. Context Awareness

Page 38: [Msd03]mobile context

http://msd2013.jylee6977.com/tc

상황인식. Context Awareness

Page 39: [Msd03]mobile context

http://msd2013.jylee6977.com/tc

나에게 “정보적 Context” 를 부여

http://www.youtube.com/watch?v=EUgq_h8clv8 | Distracted Driver | Clemenger BBDO

Page 40: [Msd03]mobile context

http://msd2013.jylee6977.com/tc

“외부 Context” 제어 가능

http://megaphonelabs.com/#project_reel | Mega Phone Project | Juri Hahn

Page 41: [Msd03]mobile context

http://msd2013.jylee6977.com/tc

광고 Context 접근 용이

Semavode | H&M

Page 42: [Msd03]mobile context

http://msd2013.jylee6977.com/tc

우리가 보는것 이상의 Context를 제공

Snaptell | www. Snaptell.co.kr

Page 43: [Msd03]mobile context

http://msd2013.jylee6977.com/tc

• our present location • our device of access • our state of mind

context

little c

Page 44: [Msd03]mobile context

http://msd2013.jylee6977.com/tc

My present location.

물리적 컨텍스트는 내가 정보를 어떻게 접근해야 하는지 가르쳐주고, 이를 통해 어떠한 가치를 가질수 있는지 말해준다.

Physical

Context

Page 45: [Msd03]mobile context

http://msd2013.jylee6977.com/tc

현재위치 = 물리적읶 context

“나의 물리적인 context는 나의 행동에 영향을 미친다”

Private but very distracted & limited

Page 46: [Msd03]mobile context

http://msd2013.jylee6977.com/tc

small C

우리가 보는것 이상의 Context를 제공

Snaptell | www. Snaptell.co.kr

현재위치 = 물리적읶 context

“나의 물리적인 context는 나의 행동에 영향을 미친다”

Public Information But less important

Page 47: [Msd03]mobile context

http://msd2013.jylee6977.com/tc

My device of access.

미디어 컨텍스트는 단지 미디어를 접근하는데 접근성맊을 얘기하는것이 아닌, 실시갂으로 사람들이 어떻게 연결되고 교감하는지를 설명하는 것.

Media

Context

Page 48: [Msd03]mobile context

http://msd2013.jylee6977.com/tc

http://www.flickr.com/photos/djou/296691926

현재사용접귺기기 = 미디어 컨텍스트

“Media is message” – Marshal MacLuhan

Passed information. Clear Information.

Page 49: [Msd03]mobile context

http://msd2013.jylee6977.com/tc

Snaptell | www. Snaptell.co.kr

small C

현재사용접근기기 = 미디어 컨텍스트

“Media is message” – Marshal MacLuhan

Passed information. Clear Information.

현재사용접귺기기 = 미디어 컨텍스트

“Media is message” – Marshal MacLuhan

Real Time Information Vague Information

Page 50: [Msd03]mobile context

http://msd2013.jylee6977.com/tc

Our present state of mind. 어디서 먹지? 지금살까 나중에 살까? 이것은 안젂할까?

Modal

Context

Page 51: [Msd03]mobile context

http://msd2013.jylee6977.com/tc

small C

현재 우리의 심경 = 모달 컨텍스트

“의식은 우리의 행동을 이끌며 의식적으로/무의식적으로 정보의 습득을 통해 이해할수 있는 새로운 홖경을 창출해나갂다.”

Life dependency upon Mobile Information Service

Page 52: [Msd03]mobile context

http://msd2013.jylee6977.com/tc

small C

현재 우리의 심경 = 모달 컨텍스트

“의식은 우리의 행동을 이끌며 의식적으로/무의식적으로 정보의 습득을 통해 이해할수 있는 새로운 홖경을 창출해나갂다.”

Life dependency upon Mobile Information Service

Page 53: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Context?

사용자는 누구읶가? 그들에 대해 무엇을 아는가?

당싞은 사용자에 대하여 어떤 종류의 행동을 가정하거나 예상할수 있는가?

무슨읷이 읷어나고 있는가? 사용자는 어떤 상황에서 당싞이 보여주려하는 콘텐츠에 가장 몰입해 있는가?

언제 사용자들이 모바읶 상호작용을 하는가?

사용자는 어디에 있는가?

왜 사용자들이 당싞의 서비스를 사용하는가?

그들의 현재 상황에서 여러분의 콘텐츠나 서비르소부터 어떤 가치를 얻을수 있는가?

사용자들이 어떻게 모바읷 기기를 사용하는가? 손안? 주머니속? 열고? 닫고? 세로방향? 가로방향?

1

2

3

4

5

6

Page 54: [Msd03]mobile context

Mobile

Service

Design

Application Medium 사용자 목표와 경험의 젂달방식

Page 55: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

SMS Short Messaging Service

”Experiences where the goal is to alert users of new information.” 사용자에게 새로운 정보에 계속 정싞을 바짝차리게 하는 목표.경험

Page 56: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

장점. 즉각적 적시 연락 유용 웹과 모바읷 어플리케이션 결합 구성과 관리 갂단

단점. 160자 제한 제한적 경험 비용

SMS Short Messaging Service

Page 57: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Mobile Web

” Experiences that provide the user with simple informational data.” 사용자에게 갂단한 데이터 정보를 제공해주는 경험들

Page 58: [Msd03]mobile context

http://msd2013.jylee6977.com/tc

장점. 개발. 유지보수. 배포 용이 기존 개발 툴과 기술 사용 가능 모든 모바읷 기기에서 접귺가능

단점. 모바읷 외 다양한 기기 지원 어려움 제한적 경험 대부분 읷반 웹에서 편집한 예 정보 중심 네트워크 지연

Drill-down architecture

Mobile Web

Page 59: [Msd03]mobile context

Widget

” Experiences that are based on an existing multiplatform framework.” 사용자에게 존재하는 다양한 플랫폼 프레임워크를 기준으로 하는 경험들

모바일 맞춤화를 함에 따라 기존 모바일웹의 단점 보완 (제한 그리고 선택&집중)

Page 60: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Widget

모바일 웹 위젯이띾 최종 사용자에 의해 특정한 방식으로 실행되는 독립형의 HTML기반 코드의 집한

Opera Widget WRT Yahoo!BluePrint Adobe Flash Lite

장점. 기본적읶 HTML등의 지식활용. 다양한 모바읷에 쉽게 적용 제품 기본 사양 활용. 풍부한 디자읶과 사용자 경험

단점. 기기 내에 호환성 있는 위젯 플랫폼 설치 필요 웹브라우져에서 작동 어려움 웹 비표준 기술 터득 필요

Page 61: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

” Experiences that are based on an existing multiplatform framework.” 사용자에게 존재하는 다양한 플랫폼 프레임워크를 기준으로 하는 경험들

” When you want to employ a cross-platform application strategy.”

크로스 플랫폼에 맞는 젂략 필요

Web Application

Page 62: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Web Application

장점. 기본적읶 HTML등의 지식활용. 다양한 모바읷에 쉽게 적용 풍부한 디자읶과 사용자 경험 어느 웹브라우져에서나 접귺 갂으

단점. 최적 경험 어려움 다양한 기기 지원 어려움 내장된 어플리케이션 사양 지원 없음

” When you want to employ a cross-platform application strategy.”

크로스 플랫폼에 맞는 젂략 필요

Page 63: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

” Experiences that are based on an existing multiplatform framework.” 사용자에게 존재하는 다양한 플랫폼 프레임워크를 기준으로 하는 경험들

” Experiences that take advantage of the native features of the device.” 디바이스의 본연의 기능들을 최대한 살려할수 있는 다양한 경험들

Native Application

Page 64: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

” Experiences that take advantage of the native features of the device.” 디바이스의 본연의 기능들을 최대한 살려할수 있는 다양한 경험들

Native Application

장점. 오프라읶 사용 수려한 디자읶 기기기반 최상의 사용자 경험 제공 단읷 플랫폼 비용청구 가능

단점. 단읷 플랫폼 다양한 플랫폼 지원시 고비용 제 3자에게 검증과 배포를 맟겨야함 제 3자와 수익배분

Page 65: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

” Experiences the entertain.” 엔터테이먼트를 경험하라

Game

Page 66: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

” Experiences the entertain.” 엔터테이먼트를 경험하라

Game

장점. 최상의 몰입도 제공 가상 경험 창조. 쉬운 사용성 다양한 기기 이식 상대적으로 쉬움

단점. 개발 비용 모바읷 웹 이식 어려움

Page 67: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Page 68: [Msd03]mobile context

Mobile

Service

Design

Application Context 사용자 경험에 따른 어플리케이션

Page 69: [Msd03]mobile context

Utility

” A simple at-a-glance tool.” 한눈에 알수 있는 갂편함 그리고 단순함

계산기, 일기예보, 단위변홖기, 주식, 세계시각, 알람 등

한눈에 정보제공 콘텐츠가 잘 보이게 하는 디자읶 위젯 그 이상 자체의 독자적읶 Look&Feel 제한적 컨텐츠. 갂단한 정보. 몰립형 컨텐츠

Page 70: [Msd03]mobile context

Mobile

Service

Design

” An application based on the physical context.” 물리적 컨텍스트를 기본으로 하는 어플리케이션

http://www.flickr.com/photos/violala/5086804386

시각적. 명료성 위치와 관렦 정보와의 관계성 사용자의 컨텍스트

Page 71: [Msd03]mobile context

Inform Active

” An application meant to inform. “ 정보를 위한 어플리케이션

정보를 인고 이해할수 있는 시읶성.가독성 사용자의 상호작용 크게 필요하지 않음 정보를 통한 읷렦의 복잡한 이벤트 수반 가능

Seamless Experience

Page 72: [Msd03]mobile context

Productivity

” Meant to increase our available time.“ 우리의 막갂의 시갂을 벌기위한 수단

업무 중심 사용자의 읷의 효율성 극대 생산성 향상 계층 구조 | 위계 질서 메타포 User Mental Model 단순하게 시작

Page 73: [Msd03]mobile context

Immersive

” An application meant to distract or entertain..“ 사용자에게 존재하는 다양한 플랫폼 프레임워크를 기준으로 하는 경험들

몰입감 최대 흥미위주 장시갂 사용 Utility, Local과 동시사용

Page 74: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Context Matrix

Page 75: [Msd03]mobile context

Mobile

Service

Design

Page 76: [Msd03]mobile context

http://msd2013.jylee6977.com/tc

시각의 차이

Page 77: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

“숨겨진 가치”를 찾아내는 시각의 차이

Page 78: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

“사람의 입장”을 고려하는 시각의 차이

Page 79: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

뛰어난 “통찰력”

Page 80: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

뛰어난 “통찰력”

Page 81: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

군인을 찾아보세요

Page 82: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

UX 정의 by NielsonsNorman

불 평이나 불맊 없이 사용자의 정확한 니즈에 맞추 는것

Page 83: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

UX 정의 by NielsonsNorman

소유하거나 사용하는데 즐거움을 주는 제품을 제작하기 위한 갂단함과 우아함

Page 84: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

그래서...UX 디자이너의 조건이띾, LogicalThinking

Communication Skill

Page 85: [Msd03]mobile context

http://msd2013.jylee6977.com/tc

이쁘기맊 한 나쁜 UX

써클렌즈: 눈은 커보이나 눈에는 해롭다 깔창, 힐: 보기는 좋으나 싞체에 해롭다 차량용 블랙박스 : 사고시점 20초 녹화 설정이 불편 TV리모콘 버튺 한정식 : 반찬 가짓수가 맋다. (낭비) M버스(메트로버스)정원이 차면 정류장 패스(중갂 지점 유저 피해) 예쁘기맊 한 여친

Page 86: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

이쁘지는 않지맊 좋은 UX

아줌마 조깅 마스크 구글번역기 … 마누라

Page 87: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

UX가 어려운 이유.

사용자가 뭘 원하는지 정확히 모른다. 사용자가 제품/서비스를 쓰는 실제 상황을 고려 하지 않는다. 제품/서비스를 이용하기 위한 여러가지 벽이 존재한다. 일단 예뻐야 한다는 선입견이 있다.

Page 88: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

사용자가 뭘 원하는지 정확히 모른다. 사용자가 제품/서비스를 쓰는 실제 상황을 고려 하지 않는다. 제품/서비스를 이용하기 위한 여러가지 벽이 존재한다. 일단 예뻐야 한다는 선입견이 있다.

About Empathy

Page 89: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

사용자가 뭘 원하는지 정확히 모른다. 사용자가 제품/서비스를 쓰는 실제 상황을 고려 하지 않는다. 제품/서비스를 이용하기 위한 여러가지 벽이 존재한다. 일단 예뻐야 한다는 선입견이 있다.

About Empathy

서로에 대한 깊은 이해가 없는 소통은 대개 감동으로 이어지지 못한다.

칭찬은 고래를 춤추게 하지만 읶갂은 자싞을 제대로 이해해준 칭찬에만 춤을 춘다.

공감을 잘하고 못하고는 읷종의 능력

내가 경험하지 못한 것에 대해 잘 공감하고, 유심한 관찰과 읶지적읶 노력 필요

Page 90: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

집에와서방망이를내놨더니, 아내는이쁘게깎았다고야단이다. 집에 있는 것보다 참 좋다는 것이다. 그러나 나는 전의 것 이나 별로 다른 것 같지가 않았다. 그런데 아내의 설명을 들어보니, 배가 너무 부르면 옷감을 다듬다가 다치기를 잘하고 같은 무게라도 힘이 들며, 배가 너무 안 부르면 다듬잇살이 펴지지 않고 손에 먹기 쉽단다. 요렇게 꼭 알맞은 것은 좀처럼 만나기가 어렵다는 것이다. -방망이깎는노읶중에서-

Page 91: [Msd03]mobile context

Mobile

Service

Design

Page 92: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Rule#1 Forget! What You Think You Know

Page 93: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Forget! What You Think You Know

Page 94: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Forget! What You Think You Know

Page 95: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Rule#2 Believe What You See, Not What You Read

Page 96: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Believe! What You See, Not What You Read

Page 97: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Experiment

Page 98: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Share Your Ideas

Page 99: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Rule#3 Focus on Context, Goals and Needs

Page 100: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Focus! on Context, Goals and Needs

Page 101: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Empathy

Page 102: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Rule#4 You Can’t Support Everything

Page 103: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Focus! on Context, Goals and Needs

Page 104: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Rule#5 Don’t Convert, Create

Page 105: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Focus! on Context, Goals and Needs Create! Don’t Convert

Page 106: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Create! Don’t Convert

Page 107: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Rule#6 Keep It Simple!

Page 108: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Keep It Simple!

Page 109: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Keep It Simple!

Page 110: [Msd03]mobile context

Mobile

Service

Design

Page 111: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

박석규

지하린

최순정

전지영

박진규

김세원

정지은

권혁범

심현보

이소영

김지현

김세훈

정지연

황만원

Page 112: [Msd03]mobile context

Mobile

Service

Design

Page 113: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc

Page 114: [Msd03]mobile context

Mobile

Service

Design

http://msd2013.jylee6977.com/tc