유저플로우(User flow)란 무엇이고 왜 필요할까요?
User Flow란 무엇인가
서비스 기획이나 UX 디자인 업무를 하시는 분이라면 무조건 한번은 들어봤을 “User Flow”,
정확히 무엇을 의미하는지 알고 계시나요?
사용자의 흐름? 순서도? 시나리오?
이 아리송한 개념을 오늘 제대로 되짚어 보도록 하겠습니다.
Nielson Norman Group
(꿀팁!) UX와 관련된 개념이 궁금할 때는 닐슨 노먼 그룹 홈페이지를 참고하면 좋습니다.
UX 분야의 창시자이자 구루라고 할 수 있는 도널드 노먼, 제이콥 닐슨이 만든
UX 컨설팅 회사의 공식 웹사이트이기 때문입니다.
User Journeys vs. User Flows
User journeys and user flows both describe processes users go through in order to accomplish their goals. While both tools are useful for planning and evaluating experience, they differ in scope, purpose, and format.
www.nngroup.com
이곳에서 설명하는 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
A user flow — also known as a UX flow or user flow chart — is a diagram showing a user’s complete journey through a website or application.
business.adobe.com
이 글에 따르면 User flow란
“사용자가 우리 서비스 속에서 겪는 일련의 과정을 시각화한 것”입니다.
정리
두 출처를 참고하여 정리해보겠습니다.
User flow란,
사용자의 목표를 달성하기까지 발생하는
주요 인터랙션(상호 작용)을 순서대로 시각화한 도표
여기서 상호작용이란, 입력, 터치, 이동 등
사용자가 우리 제품을 사용하면서 접하는 구체적인 행동을 의미합니다.
실습 : User flow 만들기
더 정확히 이해하기 위해 실제로 User flow를 만들어보도록 하겠습니다.
가을을 맞아 어떤 고객이 후드티를 구매하려고 합니다.
우리 쇼핑몰에서 ‘후드티 구매’라는 목적을 달성하기 위해 필요한 단계는 무엇일까요?
일단 큰 범위부터 생각해봅시다.
후드티를 구매하기 위해 필요한 5가지 주요 단계를 순서도로 시각화해보았는데요,
이것이 바로 User flow입니다!
여기서 끝이 아니죠.
더 자세하게 그릴 수도 있습니다.
5가지 단계별로 어떤 상호작용이 있는지 세밀하게 들여다봅시다.
| 로그인 | 상품 검색 | 상품 선택 | 장바구니 담기 | 결제하기 |
| - 로그인 페이지 접근 - 이메일 입력 - 비밀번호 입력 - 로그인 버튼 클릭 |
- 검색 바 클릭 - 검색어 입력 - 검색 버튼 클릭 - 검색 결과 페이지 표시 |
- 상품 목록에서 상품 클릭 - 상품 상세 페이지 표시 |
- 장바구니 버튼 클릭 - 장바구니 페이지로 이동 |
- 결제 버튼 클릭 - 배송 정보 입력 - 결제 정보 입력 - 결제 완료 버튼 클릭 - 결제 완료 페이지 표시 |
이렇게 세세한 인터랙션까지 시각화하면 다음과 같습니다.
자, 전체적인 흐름이 한눈에 잘 들어오시죠?
필요에 따라서 전체적인 맥락을 파악할 땐 간단하게,
세밀한 요구사항 정의 등이 필요할 땐 자세하게 그려볼 수 있겠습니다.
왜 User flow를 그려야 하나요?
이렇게 User flow를 그려보면서
누락된 단계가 없는지, 막다른 길이 생기지는 않는지,
시간이 오래 걸리진 않는지, 인터랙션이 중복되지는 않는지,
쓸데 없는 단계가 끼어있진 않은지 등등을 확인할 수 있습니다.
조금 더 자세히 정리해볼게요.
1. 기획할 때
사용자의 목표를 달성하는 데 가장 효율적인 경로를 기획할 수 있습니다.
ex. 중복된 단계 삭제, 유사한 단계끼리 묶기, 빠진 단계 추가 등
2. 개선할 때
사용자가 어려움을 겪는 지점을 발견하고 개선할 수 있습니다.
ex. 어떤 단계에서 이탈률, 체류 시간이 많은지 파악하고 그 단계의 사용성 점검 및 개선
3. 협업할 때
개발 팀과의 소통 도구
개발자들이 사용자 경험을 보다 잘 이해하고 구현하는 데 도움을 줍니다.
테스트 설계
User Flow를 통해 테스트 시나리오를 꼼꼼하게 설계할 수 있습니다.
프로젝트 관리
전체 프로젝트를 User Flow에서 구분한 작은 단위로 분할하여 관리할 수 있습니다.
마치며
자, 이렇게 해서 User flow의 의미와 그리는 방법, 유용성까지 살펴보았는데요,
사용자가 우리 제품을 사용할 때 어떤 인터랙션을 하는지 꼼꼼이 살펴보시면서
최적의, 최고의 제품을 만드실 수 있길 기대해 봅니다.
그럼 오늘도,
나를 위한 일하기였습니다!
