UXUI Study Blog

제로베이스 UXUI 디자인 28기/UX 강의

[2주차 - Day3] 3. 모델링

0dam 2024. 7. 10. 14:53

Chapter3. 모델링

3-1. 사용자 여정 지도

3-1-1) 사용자 여정 지도

 

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

 

 

사용자 여정 지도를 통해 알 수 있는것

- 사용 동기

- 시작 점

- 행동

- 감정

- 도구

- 시간

 

 

사용자 여정 지도의 활용

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

- 팀원 및 이해관계자들의 공통된 이해를 돕는다

- 디자인 의사결정의 주요 기준이 된다

- 기회 요인과 문제점을 도찰할 수 있고 특히 선후관계를 파악할 수 있다

- 사용자가 우리 제품을 어떻게 수용하고 있는지 쉽게 파악할 수 있다

- 타 부서와의 혐업에 매우 유용한 자료가 된다

 

 

사용자 여정 지도의 중요성

무엇보다 사용자를 공감하기 위한 중요한 도구가 된다, 깊은 공감을 통해 디자인 의사경정 과정에서 보다 사용자 중심의 방향으로 나아갈 수 있다

사용자를 잘 이해한다고 착각하는 경우, 나의 기준에서 사용자를 해석하는 경우, 사용자 조사 결과를 객관적으로 해석하지 못하는 경우의 실수를 줄여주고 사용자와 나의 갭을 줄여주는 역할을 한다.

 

 

사용자 여정 지도의 기본 구조

 

 

 

 

3-1-2) 사용자 여정 지도 만들기

 

step1. 범위 정하기

- 여정 지도를 작성하는 목적과 범위 정하기

- 여정의 범위: 제품 전체 또는 특정 기능, 세부 task가 될 수 있음

- 여정 지도의 디테일 수준을 정하기

 

step2. 퍼소나 정하기

- 여정지도는 공통 여정지도와 퍼소나 별 여정지도로 구분됨

- 여정 지도 제작 시점에 퍼소나가 아직 정의되지 않았다면 생략 가능

- 퍼소나가 정의되어 있더라도 제작 목적에 따라 공통 여정지도만 제작할 수 있음

- 반대로 특정 기능에 대해 사용자 별로 다른 사용 형태가 예상되는 경우 각각의 여정 지도를 제작하여 비교 분석할 수 있음

  ex) 홈쇼핑 구매 과정에 대한 20대 사용자와 60대 사용자의 형태 비교

 

step3. 기준 항목의 정의

- 여정 지도에서 단계별로 표시할 정보를 정의한다

- 기본적으로 아래 항목이 사용된다. 

   단계, 감정, 문제점, 과업, 기능, 기회요인

- 필요에 따라 다양한 항목을 추가할 수 있다.

   touch point, 장소, 공동 작업자

 

step4. 프레임에 정보 채워넣기

-만들어진 틀 안에 해당 정보를 채워 넣는 단계

-이때 시스템 중심이 아니라 사용자 중심으로 해야함

- 이 때 예상되는 사용자의 다른 선택이나 오해, 실수로 인해 발생되는 브랜치 플로우를 정의한다.

 

step5. 리뷰하기

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

 

 

 


 

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

 

사용자 여정 지도가 있으면 팀원 모두가 일치된 마음으로 사용자 모델을 이해할 수 있고 문제점을 다각도로 분석해 문제의 원인과 해결방안 모색에 도움을 준다.

 

 

문제점의 구체화

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

 

 

물리적 시간의 표현

사용자 여정 지도상에서는 연결되는 스텝으로 표현되어 있지만 실제로는 각 스템이 다른 시간을 가질 수 있음

소요시간이 긴 스텝은 정보량이 많거나, 테스트가 많기 때문일 수 있어서 개선을 위한 기회 요인이 될 수 있다.

 

 

전략적 사고

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

 

 

사용자별 특이점

동일한 테스크에 대해 여러 맵을 겹쳐서 특정 경우에 나타나는 형태와 공통적으로 발생되는 요인을 찾기

이때 문제의 중요도도 함께 정의될 수 있음

 

 

 

리서치 주안점 도출

추가 리서치가 필요한 부분을 발견하고 추후 리서치 실행에 필요한 POV (Point of view)도 함께 정의함

 

 

What if

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

 

 

프로젝트 팀내에서 일관된 생각을 공유하는 것은 생각보다 어렵다. 오랜 시간 회의를 진행해 내린 결론이 있어도 각자 머릿속에 떠오르는 컨셉은 제각각이다. 때문에 사용자 여정지도와 같은 시각적 자료가 매우 중요하다.

 

 


 

3-3. 테스크 플로우

3-3-1) 테스크 플로우란

 

테스크 플로우: 과업수행의 흐름

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

 

태스크 플로우와 user journey map과의 차이점:사용자가 어떤 순서로 어떤 행동을 하면서 목표를 달성하는지는 비슷하지만, Journey map이 더 큰 개념

 

 

 

테스크 플로우는 사용자가 과업을 완료하기 위한 행동의 연속임

- 사용자가 해야하는 과업을 정의함

- 퍼소나에 따라 동일한 테스크가 여러개로 정의될 수 있음

- 시나리오를 기반으로 가능한 모든 파생 루트를 표시함

- 대략적인 콘텐츠/기능 설명을 포함할 수 있음

- UJM에서 하위 분류된 플로우

 

 

task flow를 정의하면 좋은 점

- UI를 가장 현실적으로 바라보는 방법

- 시스템 개발 관점과 사용자 관점을 모두 포괄할 수 있다

- 발생할 수있는 문제점을 미리 발견하고 대응할 수 있음

- 각 단계별로 어떤 정보/기능이 필요한지 확인할 수 있음

- 발생가능한 모든 경우의 수를 확인할 수 있음

 

 

 

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

 

 

 


 

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

3-4-1) 테스크 플로우 준비

 

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

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

디테일 수준: 작성 목적에 따라 디테일 수준을 정함

작성 방법: 작성과 수정, 공유가 용이한 방법을 고려함

 

 

 

3-4-2) 테스크 플로우 정의

 

step1. 테스크의 목표 정하기

- 시작과 끝: 테스크의 시작의 기준과 끝은 경우에 따라 늘 달라질 수 있기 때문에 이번 플로우에서 정의할 범위의 시작과 끝의 기준을 정한다.

 

step2. 사용자의 모든 행동 기술하기

- 사용자가 과업을 수행하기 위해 하는 모든 행동: 정보를 탐색하고, 버튼을 누르는 등 사용자가 과업을 완료하기 위해 하는 모든 행동을 작성한다.

- 작성할 행동 범위: 디자인 목적에 따라 테스크 플로우에 사용자의 행동 범위를 정한다.

아래와 같이 시스템 외부적으로 이루어지는 인터랙션은 경우에 따라 필수가 될수도 있고 옵션이 될 수도 있음

 

step3. 의사결정 요인 추가하기

- 분기: 사용자의 의도 또는  시스템의 목적에 따라 테스크 플로우가 나누어지는 시점을 추가한다. 이과정을 통해 플로우를 더욱 현실적으로 만들 수 있음

 

step4. 리마커블 포인트 추가하기

- pain point Opportunity : 장점이나 단점을 추가한다. 여러 사람이 함께 보는 문서이기 때문에 각자 추가하다 보면 풍성해진다.

 

step5. 확장하기: 브랜치 플로우 정의

- 만약 .. What if: 발생할 가능성이 있거나 단순히 다양한 가능성을 검토해 보기 위한 목적으로 만약이라는 가정하에 다양한 브랜치 플로우를 작성한다.

 

 

 

 

- 유저 플로우: 유저플로우는 테스크 플로우와 유사한 형태를 갖지만 테스크의 시작점이 반드시 시스템이 아닐 수도 있다는 것이 가장 큰 차이점이다. -> 사용자 중심, 작은 사용자 여정

 

ex) 쇼핑앱에서 신발을 구입

테스크 플로우: 앱의 랜딩페이지에서 시작

유저 플로우: 포털서비스에서 검색 기능 또는 인스타그램에서 태그를 검색하기 등 시스템 외부가 될 수 있음 (유저의 동기로부터 시작될 수 있음)