UX 이론 기초 Part 1 : Chapter 3. 모델링

3-1 사용자 여정 지도(User Journey Map)

사용자 여정 지도란

User Journey Map!
사용자가 과업을 수행하는 동안 하는 행동, 느끼는 감정, 그리고 상호작용하는 접점을 시간순서로 정의한 것.

사용자 여정 지도를 통해 알 수 있는 것
- 사용 동기  Motivations
- 시작점 User Approach
- 행동 Action
- 감정 Emotions
- 도구  What they use for
- 시간 Time and Sequence

Journey Map은 하나의 정형화된 형태만 있는건 아님
프로젝트 성격이나 목적에 따라서 얼마든지 자유롭게 만들 수 있음

사업적인, 회사 관점의 map

사용자 여정 지도의 활용
사용자 여정 지도는 단순히 사용자 조사 결과를 시퀄셜하게 시각화하는 것 뿐만 아니라

- 팀원 및 이해관계자들(Stakeholders)의 공통된 이해를 돕는다
- 디자인 의사결정의 주요 기준이 된다
- 기회 요인(Opportunity)과 문제점(Problem)을 도찰할 수 있고 특히 선후관계를 파악할 수 있다
- 사용자가 우리 제품을 어떻게 수용하고 있는지 쉽게 파악 할 수 있다
- 타 부서와의 협업에 매우 유용한 자료가 된다

사용자 여정 지도의 중요성

무엇보다 사용자를 공감 Empathy 하기 위한 중요한 도구가 된다. 깊은 공감을 통해 디자인 의사결정 과정에서 보다 사용자 중심의 방향으로 나아갈 수 있다.
프로젝트 진행 과정에서 우리가 자주 접하는 실수는…

- 우리가 누구보다 우리 사용자를 잘 이해하고 있다 → 너무 높은 자신감
- 우리 사용자는 이렇게 생각 할 거야 → 나를 기준으로 해석 → 확중편향에 빠짐
- 사용자 조사 결과를 객관적으로 해석하지 못함

이때 유저 저니맵은 그 간극을 좁혀 우리를 다시 사용자 위치로  끌어 당기는 역할을 한다. 그래서 디자인 띵킹 프로세스 공감과 디파인과정에서 유저 저니맵을 사용하는 것이다.


사용자 여정 지도의 basic structure

사용자 여정 지도 만들기: Step 1
범위 Scope 정하기

- 여정 지도를 작성하는 목적과 범위를 정한다
- 여정의 범위: 제품 전체 또는 특정 기능 또는 세부 Task가 될 수 있다.
- 여정 지도의 디테일 수준 Level of detail을 정한다.

사용자 여정 지도 만들기: Step 2
퍼소나 Persona 정하기

- 여정 지도는 공통 여정지도와 퍼소나별 여정지도로 구분 된다
- 여정 지도 제작 시점에 퍼소나가 아직 정의되지 않았다면 생략 될 수 있다.
- 퍼소나가 정의되어 있더라도 제작 목적에 따라 공통 여정 지도만 제작 할 수 있다. 예) 여정 지도를 통해 일반적인 사용 행태를 표현하고자 할 경우 ( 사용자별 특성 X )
- 반대로 , 특정 기능에 대해 사용자 별로 다른 사용 행태가 예상되는 경우 각각의 여정 지도를 제작하여 비교 분석 할 수 있다. 예) 홈쇼핑 구매 과정에 대한 20대 사용자와 60대 사용자의 행태 비교

사용자 여정 지도 만들기: Step 3
기준 항목 정의

- 여정지도에서 단계별로 표시 할 정보를 정의한다
* 기본적으로 아래 항목이 사용 된다
* 단계 Phase
* 감정 Emotion
* 문제점 Problem
* 과업 Task
* 기능 Functions
* 기회요인 Opportunit
- 필요에 따라 다양한 항목을 추가할 수 있다
* Touch point
* 장소
* 공동 작업자

사용자 여정 지도 만들기: Step 4
프레임에 정보 채워넣기

만들어 진 틀 안에 해당하는 정보를 채워 넣는다.
이때 시스템 중심이 아닌 사용자 중심으로 해야하는데 즉, [A를 완료하기 위해 B,C한다]가 아니라 [사용자 라면 A를 완료하기 위해 무엇을 의도하고 행동할까] 의 관점을 유지해야한다.
이때 예상되는(또는 사용자 조사로 밝혀진)사용자의 ‘다른 선택’이나 ‘오해 misunderstanding’ Ehsms ‘실수 human error’로 인해 연이어 발생되는 브랜치 플로우 Branch flow를 정의한다.

사용자 여정 지도 만들기: Step 5
리뷰하기

프로젝트 참여자들과 함께 작성된 여정 지도를 리뷰한다. 사용자 조사 결과가 바르게 반영되었는지, 특정 사고방식이 개입하여 편향적으로 작성되지 않았는지, 그리고 발생 가능한 다양한 유즈케이스가 잘 고려되었는지 확인한다.

Examples | Lightweight version

가장적당한 수준의 저니맵

Examples | Full-covered version

사용자 중심의 디자인을 할 때 절대 간과해서는 안되는 step

/

3-2 사용자 여정 지도의 활용

사용자 여정지도가 있으면

문제점의 구체화

이러한 상황을 이해하면 개선된 UI를 만들 수 있음

문제점의 구체화

사용자 조사 결과와 여정지도를 비교하여 기존에 파악된 문제점의 상세한 원인과 그 해결방안을 모색하는 자료로 활용 될 수 있다.

물리적 시간의 표현

사용자 여정 지도상에서는 연결되는 스텝으로 표현되어 있으나 실제로는 각 스탭이 다른 시간을 가질 수 있다. 이때 소요시간이 긴 스텝은 정보량이 많거나, 테스크가 많아서일수 있으므로 개선을 위한 기회 요인이 될 수 있다.

전략적 사고
기존의 프로세스를 단축하거나 비지니스적으로 효과적인 방안을 모색한다.

예)
회원가입률이 낮음: 조사결과
회원 가입 과정에 불필요하게 많은 입력이 요구됨: 원인파악
추가정보는 이후 이벤트 발생 시 입력하도록 플로우 개선: 개선방안 도출
더 많은 회원가입을 유도한다: 기대효과

사용자별 특이점
동일한 테스크에 대해 여러 맵을 겹쳐서 특정 경우에 나타나는 행태(문제)와 공통적으로 발생되는 요인을 찾는다. 이때 문제의 중요도(priority)도 함께 정의될 수 있다.

리서치 주안점 도출
추가 리서치가 필요한 부분을 발견하고 추후 리서치 실행에 필요한 POV(point of view)도 함께 정의한다.

What if..
기존 사용자 여정을 바탕으로 ‘만약 이 기능이 있다면?’, ‘만약 여기서 바로 이동할 수 있다면?’과 같이 가상의 시나리오를 정의하고 그 효과를 예측한다.

한마음 + Keep adding on

Make a consensus!
프로젝트 팀내에서 일관된 생각을 공유하는 것은 생각보다 어렵다. 오랜 시간 회의 끝에 ‘그래! 우리 제품의 컨셉은 이거야!’라고 하더라도 각자의 자리로 돌아갔을 때 머릿속에 떠오르는 컨셉은 제각각일 수 있기 때문이다. 때문에 사용자 여정지도와 같은 시각적 자료가 매우 중요하다

아이디어 워크숍에서의 사용

여정지도를 사용하여 Context를 효과적으로 공유할 수 있다
아이디어 워크숍에는 다양한 사람들이 참여하게 되는데 이중에는 이전까지 프로젝트에 전혀 참여하지 않았던 사람도 포함된다. 효과적인 워크숍진행을 위해 이들을 빠른시간 내에 프로젝트의 목적과 범위를 이해시켜야 하는데 이때 여정지도는 매우 효과적인 재료 material 가 될 수 있다.

/

3-3 테스크 플로우 (Task Flow)

1) 테스크 플로우란

과업수행의 흐름
사용자가 제품 쪼는 서비스를 사용하여 과업을 달성할 때 까지의 일련의 과정

UI를 설계하기 위해서 가장 중요한 준비과정

모든 테스크플로우는 시작과 끝이 명확하게 구분 되어야 함

It looks like

Using Flow Chart Components

사용자가 만들수도 있고 시스템이 요구할 수 도 있음

Adding sys. Perspective

문서를 만드는 목적에 따라 커스터마이징 할 수 있음

디자인을 개선할 수 있는 포인트를 찾을 수 있음

Finding a follow up question

UI분석
즉, 테스크 플로우는 사용자가 과업을 완료하기 위한 행동의 연속이다.
- 사용자가 해야하는 과업(task)를 정의
- 퍼소나에 따라 동일한 테스크가 여러개로 정의 될 수 있음
- 시나리오를 기반으로 가능한 모든 파생 루트를 표시함
- 대략적인 콘텐츠/기능 설명을 포함할 수 있음(주유기능, 필수입력 항목 등)
- UJM에서 하위 분류 된 플로우

Task Flow를 정의하면 좋은 점
- UI를 가장 (빨리, 저렴하게) 현실적으로 바라보는 방법
런칭되면 사용자들은 이렇게 쓰게 될거야! (괜찮을까?)
- 시스템 개발 관점과 사용자 관점을 모두 포괄 할 수 있다.
특히 시스템(서비스 제공자)과 사용자의 요구사항이 다를 ㄱ경우에 각각 표시하고 타협점을 모색하는 시작 점이 될 수 있다.
- 발생할 수 있는 문제점을 미리 발견학고 대응 할 수 있다.
- 각 단계별로 어떤 정보/기능이 필요한지 확인 할 수 있다.
- 발생 가능 한 모든 경우의 수를 확인할 수 있다.
사용자는 옵션 A를 선택하거나 B를 선택할 수 있다.

2)플로우차트

Task Flow의 3요소

Task Flow를 그리기 위한 플로우 차트 콤포넌트

/

3-4 테스크 플로우 만들기

1)테스크 플로우 제작 준비
테스크 플로우를 작성하기 앞서서

목적 Goal
신규 개발을 위해
기존 UI 분석을 위해

시나리오 정의 Scope and Use-case
누가 사용하는가
어떤 목적으로 사용하는가
언제, 어디서, 무엇으로 사용하는가

디테일 수준 Level of Detail
작성 목적에 따라 디테일 수준을 정한다.

작성방법 Tool
작성과 수정/공유가 용이한 방법을 고려한다.

2)테스크 플로우 정의

Step 1. 테스크의 목표 정하기
시작과 끝
테스크의 시작의 기준과 끝은 경우에 따라 늘 달라 질 수 있기 때문에 이번 플로우에서 정의할 범위의 시작과 끝의 기준(조건)을 정합니다

Step 2. 사용자의 모든 행동 기술하기
사용자가 과업을 수행하기 위해 하는 모든 행동
정보를 탐색하고, 버튼을 누르는 등 사용자가 과업을 완료하기 위해 하는 모든 행동을 작성합니다

작성 할 ‘행동’ 범위
디자인 목적에 따라 테스크 플로우에 사용자의 ‘행동’의 범위를 정합니다.
아래와 같이 시스템 외부적으로 이루어지는 인터렉션은 경우에 따라 [필수]가 될 수 도 [옵션]이 될 수 도 있습니다.

Step 3. 의사결정 요인 추가하기
분기 decision point
사용자의 의도 또는 시스템의 목적에 따라 테스크 플로우가 나누어지는 시점을 추가합니다.
이 과정을 통해 플로우를 더욱 현실적으로 만들 수 있습니다.

Step 4. 리마커블 remarkable 포인트 추가하기
Pain point 또는 opportunity
좋거나/나쁜 발견점을 추가합니다. 여러사람이 함께 보는 문서이기 때문에 각자 추가하다보면 풍성해지겠죠

Step 5. 확장하기: 브랜치 branch 플로우 정의
만약… What if
필연적이 아닐지라도, 발생할 가능 성이 있거나 단순히 다양한 가능성을 검토해보기 위한 목적으로 ‘만약’이라는 가정하에 다양한 브랜치 플로우를 작성해봅니다.

Appendix: User Flow
유저플로우
유저플로우는 테스크 플로우와 유사한 형태를 갖지만, 테수크의 시작점이 반드시 시스템이 아닐 수도 있다는 것이 가장 큰 차이 점이다. 가렴 [쇼핑앱]에서[신발구입]에 대한 테스크 플로우 애플리케이션의 랜딩페이지에서 시작하겠으나, 유저플로우의 경우 ‘포털서비스에서 검색하기’ 또는 ‘인스타그램에서 태그 검색하기’등 시스템 외부가 될 수 있다.

유저플로우는 시스템이 사용자에서 시작

플로우가 무한대로 뻗어나갈 수 있기 때문에 우리가 확산적인 사고를 할 때 우리 사용자의 사용행태를 넓게 이해를 할 때는 도움이 될 수도 있겠지만 너무 방대해지면 자료의 사용성이 떨어짐

그래서 항상 주제를 벗어나지 않는 적절한 수준을 염두해 두어야함

/

3-5 스토리 맵 User Story map

1)스토리맵이란
사용자 스토리 맵

Like Agile development style..

2) 스토리맵 만들기

Backbone 만들기
사용자에 관한 모든 factors

이야기 만들기 Tell a story

관점 나누기 Share view point

더 풍성하게! Add more as understanding grows

액티비티 기준으로 그룹핑 Group tasks by activity

우선순위 슬라이스 Start slicing

더 자세히 Get in to the detail

Now we know…

Adding User tyoe

For project management