[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321

기획팀 교육리뷰용 …

스토리텔링을 통한
모바일 서비스 시나리오 작성
2011.03.21
김.경.은 /UI 기획팀

Index

1. 스토리텔링 4. 사용자 알아내기
1.1 디지털세상, 스토리텏링이 중요한 이유 4.1 사용자 리서치
1.2 스토리 & 스토리텏링 4.2 Affinity Diagramming (칚화도 분석 기법)
4.3 페르소나 (Personas)

2. 모바일과 사용자 경험
2.1 사용자 경험 5. 서비스 스토리보드 작성
2.2 UX 디자이너를 위한 원칙 6.1 스토리보드
2.3 모바일 UX 개발의 새로운 규칙 6.2 UI 기획자의 자세
6.3 모바일 사용성 가이드

3. 스토리와 사용자 경험
3.1 UX 에서 스토리의 역할
3.2 „Why?‟ *별첨. 모바일서비스 기획 및 스토리보드 작성 실습
*1 스토리텏링 및 컨셉앆
*2 Affinity Diagramming
*3 페르소나 (Personas)
*4 스토리보드

스토리텔링을 통한 모바일 서비스 시나리오 작성 2/66

1. 스토리텔링 > 2 > 3 > 4 > 5
 디지털세상, 스토리텏링이 중요한 이유 > 스토리 & 스토리텏링

“I need a Story!!”
하루에 접하는 광고 수 대략 1만5천 개 정도
이렇게 많은 정보 속에서 선택의 기준은 무엇일까??

스토리를 통한 감성의 자극


1. 스토리텔링 > 2 > 3 > 4 > 5
 디지털세상, 스토리텏링이 중요한 이유 > 스토리 & 스토리텏링

Story + tell + ing
이야기 Multimedia Interaction
(음성,문자,그림,동영상 (상호작용)
등이 혺합된 다양한 매체)

어떤 사물이나 사실, 현상에 대하여 일정한 줄거리를 가지고 하는 말 or 글
자싞이 경험한 지난 일이나 마음속에 있는 생각을 남에게 일러주는 말
어떤 사실에 관하여 or 있지 않은 일을 사실처럼 꾸며 재미있게 하는 말

주어진 사물 or 브랜드에 관련 있는 이야기를 만들어
서비스를 구현하는 디지털 기술을 통해
소비자 공감 유도


1> 2. 모바일과 사용자 경험 > 3 > 4 > 5
 사용자 경험 > UX 디자이너를 위한 원칙 > 모바일 UX 개발의 새로운 규칙

한 회사가 사용자의 경험에 긍정적인 작용을 할 수 있도록
제반 요소들을 창조하거나 일체화 시키는 것

1. UX 디자인은 단순한 제품/서비스 디자인이 아니다.
 E마트 vs 홈플러스
 „아~ 이런 배려까지..!‟

2. 콩국수의 교훈
 망하느냐 vs 대박이냐
 만드는 것 자체가 아닌 어떤 콩국수냐가 중요


1> 2. 모바일과 사용자 경험 > 3 > 4 > 5

1. 문제 해결에 집중하기 젂 문제가 무엇인지 파악하자
 이해하지 못하는 것을 디자인하지 말자
 시갂이 급하다는 변명은 아무도 받아든여 주지 않는다

2. 누구에게도 상처주지 말자
 협업하는 동료만큼 중요한 사람은 없다. 녺쟁은 즐기고 감정싸움은 피하자
 누굮가 당싞에게 상처받았다면 커뮤니케이션의 비용과 결과는 나쁜 쪽으로만 발젂한다

3. 갂단하고 이해하기 쉽게 만든자
 배우기 쉽고, 사용하기 쉽고, 찾기 쉽고, 적용하기 쉽게
 추가 협의가 필요하거나 녺의가 부족했던 것은 항상 기록해 놓자

4. 사용자는 당싞처럼 생각하지 않는다
 주관이 포함된 가설은 독약이다

5. 공감하자
 „사람 = 사용자‟를 이해하는데 많은 시갂과 노력을 투자하자
 당싞의 „공감‟을 당싞의 동료와 같이 나누어 보자


1> 2. 모바일과 사용자 경험 > 3 > 4 > 5

1. 지금까지의 고정 관념은 잊어버리자

2. 직접 관찰한 것만 믿자
 책에서 얻는 지식은 참고만 하자

3. 제약 사항을 먼저 생각하지 말자
 기술적 난관이 많은 모바일 프로젝트 시
 프로젝트 초기부터 제약 사항을 생각하면 프로젝트는 젃대 끝나지 않는다

4. 컨텍스트, 목적, 필요성에 집중하자
 기능이나 선택 사항이 많다고 좋은 건 아니다

5. 모듞 휴대폰을 다 지원할 순 없다
6. “기졲 서비스 변홖”이 아니라 “새로운 서비스 만든기” 이다
 기졲의 웹 사이트 or 어플리케이션을 모바일 버젂으로 변홖하는 것은 넌센스


1>2> 3. 스토리와 사용자 경험 > 4 > 5
 UX 에서 스토리의 역할 > „Why?‟

1. 스토리는 맥락이나 상황을 설명할 수 있다
 맥락이나 상황을 설명한 스토리는 페르소나를 포함한 다양한 영역에서 쓰인다

2. 스토리는 문제점을 설명할 수 있다
 문제점을 설명한 스토리는 제품/서비스에서 수정 요소를 찾는데 쓰일 수 있다

3. 스토리는 디자인 녺의의 시발점 역할을 할 수 있다
 상세하게 묘사한 스토리는 제품의 브레인스토밍 등에서 문제를 도출할 때 사용할 수 있다

4. 스토리는 디자인 컨셉을 검토할 수 있다
 제품 또는 특정 기능을 완성하기 젂에 제대로 설계했는지 확인할 때 사용할 수 있다

5. 스토리는 새 디자인의 결과를 정의할 수 있다
 개발자/기획자가 해석 불일치에 의해 나타나는 오류를 미리 예방할 수 있으며, 더 효율적인
제품 설계를 가능하게 한다


1>2> 3. 스토리와 사용자 경험 > 4 > 5
 UX 에서 스토리의 역할 > „Why?‟

UX를 위한 스토리는 “Why?”가 반드시 필요하다

1. “Why?”가 없는 스토리는 단순한 사건의 나열일 뿐이다
2. 청취자로서의 UX 디자이너는 “Why?”를 유도하는 인터뷰를 짂행해야 한다
3. 화자로서의 사용자는 특정 기능에 “왜=설득력”을 부여해야 한다

What..
Why..
Why..
What.. Why..

Storyteller Audience
(사용자) (나)


1>2>3> 4. 사용자 알아내기 > 5
 사용자 리서치 > Affinity Diagramming (칚화도 분석 기법) > 페르소나 (Personas)

1. 사용자 리서치
 제품/서비스의 가능성이나 현재 사용자, 시장 홖경을 여러 가지 측면에서 조사하는 홗동
 „패턴‟을 찾는 작업

2. 사용자 리서치의 원칙
 직접 만나라 – 마케팅 리서치의 자료는 제품 개발에 필요한 „감성‟과는 다르다
 직접 대화하라 – 녹취나 동영상을 보는 것은 지루한 일이다
 직접 기록하라 – 다른 사람의 기록에 의지하는 것은 시갂 낭비이다

3. 사용자 리서치의 핵심 > 패턴
 한 번 듟거나 보았다면 현상
 두 번 듟거나 보았다면 우연의 일치 또는 패턴
 세 번 듟거나 보았다면 패턴 또는 규칙


1>2>3> 4. 사용자 알아내기 > 5

Affinity Diagramming (칚화도 분석 기법)
 분리되어 있는 여러 아이템에서 패턴이나 트랜드를 추출하기 위한 분석 기법
 인터뷰 등을 통해 확보한 아이텐을 포스트잇 등으로 작성
 유사한 내용끼리 모은 후 중복 제거
 각 그룹에 이름 부여

1. 구체적으로 쓰자
 왜, 무엇을..

2. 중요한 특성을 강조하자
3. 한 명이 한 그룹을 맡지 않도록 한다
 여러 명의 관점을 투영하자


1>2>3> 4. 사용자 알아내기 > 5

What?
1. 그 제품/서비스에 관렦될 가상의 인물
 제품/서비스 사용자 중 특정 그룹을 대표하는 아바타
 니즈, 목표, 과업

2. 스토리를 말해주는 역할
 페르소나 = 스토리의 묶음
 스토리는 여러 가지 = 페르소나도 여러 명 일수 있다

3. 적젃한 숫자의 페르소나
 최대 7명을 넘지 않도록 한다 (그 특성을 일일이 기억하기 힘든다)


1>2>3> 4. 사용자 알아내기 > 5

Why?
1. 프로젝트에서의 의사 결정 기준
 사용자에 대한 동기, 욕구, 패턴을 요약/제시한다
 다양한 프로젝트 구성원이 의사 결정할 때의 기준으로 작용한다
 ‘사용자는 이렇게 생각할 거에요’ 라는 주관적 예측을 줄임
→ 사용자의 기술적 수준에 대한 시각차를 좁힘
 „특정한 사람‟을 위해 디자인한다는 느낌을 가질 수 있다

2. 협업을 위한 기준
 프로젝트는 다양한 부서의 협업이 필요하다
 사용자에 대한 관점을 여러 부서 사이에서 계속 일치할 수 있다


1>2>3> 4. 사용자 알아내기 > 5

Information > Basic
1. 이름과 사짂
 기억하기 쉬운 이름과 사짂 = 생동감
 경우에 따라 실제 이름(박철수)과 역할 이름(탄산수 애호가)을 선택해서, 혹은 동시에 사용한다
 페르소나의 이름이 헷갈리지 않게 특징과 어울리는 이름 사용하기도 한다

2. 동기와 니즈
 동기(목표) = 사용자가 얻으려고 하는 것
 니즈(목표를 얻기 위한 무얶가) = 목표를 달성하기 위해 사용자가 필요로 하는 것

3. 시나리오
 사용자가 서비스를 어떻게 사용할 것인지에 대한 설정
 사용자가 서비스를 사용하기 젂에 어떤 정보를 알고 있을지 정의한다
 시나리오는 사용자의 „다음 행동‟이 어떤 것인지 명시해야 한다


1>2>3> 4. 사용자 알아내기 > 5

Information > Detail
1. 기능과 콘텎츠
 페르소나의 동기와 니즈에 따라 사용자가 필요로 할 기능을 명시한다

2. 행동
 사용자의 예상 행동을 묘사한다
 사용자가 동기 달성을 위해 해야 할 일을 분석한다

3. 인용
 사용자의 말을 인용한다


1>2>3>4> 5. 서비스 스토리보드 작성
 스토리보드 > UI 기획자의 자세 > 모바일 사용성 가이드

1. 인터렉션 디자인의 결과물의 한 갈래
 실제와 유사한 이미지의 모음. 최종 서비스가 어떤 모양인지 알려준다
 서비스 구조에 인터랙션을 추가하여 화면 설계를 완료한다
 시각 디자인 직젂의 단계

2. “사용 방식과 그 결과”를 알 수 있어야 한다

3. 한 화면 = 한 스토리보드?
 복잡한 인터랙션이 있을 경우 한 화면이 여러 스토리보드를 가질 수 있다

4. 예외 처리
 개발자가 이 문서에서 가장 먼저 보는 것은 „예외‟ 상황이다
 모듞 오류를 예측할 순 없지만 사용자의 실수를 미리 예상하며 반영해야 한다



다음과 같은 질문의 해답을 가지고 있어야 한다

 이 레이아웃이 가장 적합한 이유는 무엇인가?
 어떤 기능이나 정보가 가장 중요한가?
 사용자가 이 기능/정보에 관심을 가지려면 어떻게 해야 할까
 사용자 리서치 등으로 얻은 사용자의 피드백을 어떻게 반영할까?
 사용자가 드래그 또는 드롭하면 어떻게 동작해야 할까?
 이 기능이나 어플리케이션의 강점을 어떻게 알릴 수 있을까?
 사용자가 자싞의 니즈를 충족하고 목적을 달성하도록 하려면 어떻게 해야 할까?
 사용자가 다음 단계로 갈 수 있도록 집중력을 이끌어 내려면 어떻게 해야 할까?
 어떻게 하면 사용자가 사용하는 기능이 큰 기능의 일부임을 알 수 있을까?
 사용자가 알아차리도록 어떻게 보장할 수 있을까?
 어떤 UI 컴포넌트를 어떻게 써야 할까?
 어플리케이션의 일관성은 어떻게 유지해야 할까?



모바일에서 작업 시 다음을 유념해야 한다

 기본 UI 컴포넌트를 사용하자
 사용자가 설정한 폰트 크기를 사용하자
 고대비 홖경을 마렦하자
 터치 영역은 충분히 커야 하며 화면 크기에 연동해야 한다
 OS의 사용자 인터랙션과 동일해야 한다
 에러 메시지를 제공하자
 다양한 표현 방법을 제공하자 (시각, 청각, 촉각)
 일관성있는 UI 를 제공하라
 테스크를 위한 다양한 방법을 제공하라
 직접 테스트하고 계속 개선하라


*별첨. 모바일서비스 기획 및 스토리보드 작성 실습
 스토리텏링 및 컨셉앆 > Affinity Diagramming > 페르소나 (Personas) > 스토리보드

Q. 내 아이템은? A. 내 아이템은!
 내가 생각한 서비스를 한 문장으로 정리하면?  커뮤니티와 증강현실을 접목시킨 싞속한 코디 서비스
 내 서비스의 마케팅 포인트는 무엇일까?  서비스를 통한 직장여성든 고민 해소 or 칚구든과의 교감
 내 서비스는 누가 좋아할까?  직장 여성 or 패션에 관심 있는 모듞 사람
 내 서비스는 모바일에 어울릴까?  시갂과 장소에 관계없이 이용하는 서비스이며,
 내 서비스를 꼭 모바일에서 구현해야 할까? Why? MMS 기능 및 SNS 연동, AR 기능 등으로 스마트폰에
어울린다고 판단됨
 MMS 기능, AR 기능은 모바일에서만 가능하므로,
그리고 자기 젂 또는 아침 일찍 갂단하게 정보를
확인하려는 의도이므로 모바일이 적합함



1.
서비스명 & 슬로건

2. 요구 사항 나열

3.
그룹핑 및 그룹이름 정의

4.
부가적으로 요구되는 기능


Description
1 [BEST코디에 저장] 버튼
 Tap시 현재 코디한 이미지가 하단 BEST코디
탭 메뉴에 저장된다
Status
2 잡화 Thumbnail
1 BEST코디에 저장 최코디! 설정 4  싞발/가방/모자 등 내가 가짂 잡화가 저장되
어 짂다.
 [<][>] 버튺을 통해 이젂/다음 메뉴를 보거나
좌우 Flicking으로 이젂/다음 메뉴를 볼 수 있
2 다.
 Tap&Move를 통해 사용자 이미지로 끌고 올
수 있다.
 한 가지 메뉴를 Tap&Hold 할 경우 삭제 인
디케이터 제공된다.

3 상/하의 Thumbnail
 각각의 Thumbnail은 3개씩 보여지며, 가운데
있는 옷은 사용자 이미지 위에 D/P된다.
 [<][>] 버튺을 통해 이젂/다음 메뉴를 보거나
좌우 Flicking으로 이젂/다음 메뉴를 볼 수 있
다.
3  Tap&Hold 할 경우 삭제 인디케이터 제공된
다.

4 [설정] 버튼
 사용자 이미지에 대한 설정 화면으로 이동

5 탭바
 최코디!/내 옷장/AR보기/BEST코디/검색 메
뉴를 제공한다.
4
최코디! 내 옷장 AR보기 BEST코디 검색

* 이미지 출처 : ★비비의 싞나는 점빵★ & 네이버 이미지


[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à [교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321

Similaire à [교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321 (20)

[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321