유저플로우(User flow)란 무엇이고 왜 필요할까요?

User Flow란 무엇인가

서비스 기획이나 UX 디자인 업무를 하시는 분이라면 무조건 한번은 들어봤을 “User Flow”,

정확히 무엇을 의미하는지 알고 계시나요?
사용자의 흐름? 순서도? 시나리오?

이 아리송한 개념을 오늘 제대로 되짚어 보도록 하겠습니다.

 

  Nielson Norman Group  

(꿀팁!) UX와 관련된 개념이 궁금할 때는 닐슨 노먼 그룹 홈페이지를 참고하면 좋습니다.

UX 분야의 창시자이자 구루라고 할 수 있는 도널드 노먼, 제이콥 닐슨이 만든
UX 컨설팅 회사의 공식 웹사이트이기 때문입니다.

User Journeys vs. User Flows

 
이곳에서 설명하는 User Flow란 다음과 같습니다.
 

A user flow is a set of interactions
that describe the typical or ideal set of steps needed
to accomplish a common task performed with a product.

번역하자면, “하나의 작업(task)를 완수하기 위해 필요한 모든 단계를 설명하는 일련의 인터랙션 묶음”입니다.
 
조금 아리송한가요?
 
조금 더 구체적으로 이해하기 위해
이번에는 디자이너들의 짝궁,  어도비에서 User flow를 다룬 글을 찾아봤습니다.
 
 

  Adobe  

User flow diagram — what it is, why it’s important, and how to create one

 

이 글에 따르면 User flow란
“사용자가 우리 서비스 속에서 겪는 일련의 과정을 시각화한 것”입니다.
 

  정리  

두 출처를 참고하여 정리해보겠습니다.


 

User flow란,
사용자의 목표를 달성하기까지 발생하는
주요 인터랙션(상호 작용)을 순서대로 시각화한 도표

여기서 상호작용이란, 입력, 터치, 이동 등 
사용자가 우리 제품을 사용하면서 접하는 구체적인 행동을 의미합니다.
 

실습 : User flow 만들기

더 정확히 이해하기 위해 실제로 User flow를 만들어보도록 하겠습니다.


가을을 맞아 어떤 고객이 후드티를 구매하려고 합니다.


우리 쇼핑몰에서 ‘후드티 구매’라는 목적을 달성하기 위해 필요한 단계는 무엇일까요?


일단 큰 범위부터 생각해봅시다.

대표 단계의 User flow

후드티를 구매하기 위해 필요한 5가지 주요 단계를 순서도로 시각화해보았는데요,
이것이 바로 User flow입니다!


여기서 끝이 아니죠.
더 자세하게 그릴 수도 있습니다.


5가지 단계별로 어떤 상호작용이 있는지 세밀하게 들여다봅시다.

로그인	상품 검색	상품 선택	장바구니 담기	결제하기
- 로그인 페이지 접근 - 이메일 입력 - 비밀번호 입력 - 로그인 버튼 클릭	- 검색 바 클릭 - 검색어 입력 - 검색 버튼 클릭 - 검색 결과 페이지 표시	- 상품 목록에서 상품 클릭 - 상품 상세 페이지 표시	- 장바구니 버튼 클릭 - 장바구니 페이지로 이동	- 결제 버튼 클릭 - 배송 정보 입력 - 결제 정보 입력 - 결제 완료 버튼 클릭 - 결제 완료 페이지 표시

이렇게 세세한 인터랙션까지 시각화하면 다음과 같습니다.

더 자세한 User flow 예시

자, 전체적인 흐름이 한눈에 잘 들어오시죠?


필요에 따라서 전체적인 맥락을 파악할 땐 간단하게,
세밀한 요구사항 정의 등이 필요할 땐 자세하게 그려볼 수 있겠습니다.

왜 User flow를 그려야 하나요?

 

이렇게 User flow를 그려보면서
누락된 단계가 없는지, 막다른 길이 생기지는 않는지,
시간이 오래 걸리진 않는지, 인터랙션이 중복되지는 않는지,
쓸데 없는 단계가 끼어있진 않은지 등등을 확인할 수 있습니다.
 
조금 더 자세히 정리해볼게요.

 

  1. 기획할 때  
사용자의 목표를 달성하는 데 가장 효율적인 경로를 기획할 수 있습니다.
ex. 중복된 단계 삭제, 유사한 단계끼리 묶기, 빠진 단계 추가 등
 
  2. 개선할 때  
사용자가 어려움을 겪는 지점을 발견하고 개선할 수 있습니다.
ex. 어떤 단계에서 이탈률, 체류 시간이 많은지 파악하고 그 단계의 사용성 점검 및 개선

 

  3. 협업할 때  

개발 팀과의 소통 도구
개발자들이 사용자 경험을 보다 잘 이해하고 구현하는 데 도움을 줍니다.
테스트 설계
User Flow를 통해 테스트 시나리오를 꼼꼼하게 설계할 수 있습니다.

프로젝트 관리
전체 프로젝트를 User Flow에서 구분한 작은 단위로 분할하여 관리할 수 있습니다.

 

---

마치며

 
자, 이렇게 해서 User flow의 의미와 그리는 방법, 유용성까지 살펴보았는데요,
사용자가 우리 제품을 사용할 때 어떤 인터랙션을 하는지 꼼꼼이 살펴보시면서
최적의, 최고의 제품을 만드실 수 있길 기대해 봅니다.
 
그럼 오늘도,
나를 위한 일하기였습니다!