[UX 스터디] What is User Flow?

작성일 : 2019. 10. 2. 15:20

 

# 유저 플로우가 뭘까?

- 유저 플로우는 유저가 의미있는 목표를 이루기 위해 짚는 단계(과정)들을 말합니다.

- 프로덕트 개발팀에서의 와이어프레임과 비슷한 특성을 갖습니다.

 

# 그렇다면 와이어 프레임의 역할은 뭘까요?

- 와이어프레임은 디자인 단계를 짚어볼 수 있는 좋은 도구인데요, 와이어프레임이 커버할 수 있는 것들로는 다음과 같은 다양한 것들이 있습니다.

; low-fi mockups, blcokframes, interfacemonos, wires 까지 가능합니다.

​

- 와이어프레임의 장점은 다음과 같습니다!

1. Fast iterations : 아이디어 구현에 있어 디자이너와 디자이너가 아닌 팀원 모두가 빠르게 이해할 수 있도록 하고 필요시 바로 수정할 수 있습니다.

2. Better Communication : 완벽한 결과물이 아니라 전체적 look을 제시하여 개발자와 좀 더 편하고 쉽게 소통할 수 있습니다.

​

​

# 와이어 프레임이 User Flow와 무슨 관련이 있을까요?

이쯤되면 궁금해집니다. 와이어프레임과 유저플로우는 같은건가..? 아니면 그냥 유사하지만 다른 무언가인가..? 무슨 차이가 있을까?

일단, 굉장히 공통점이 많은데요, 둘 다 여러 단계의 resolution과 완성물의 fidelity 를 갖추고 있습니다. 둘다 iteration speed를 높일 수 있도록 하고, 프로젝트 팀과의 사이에 커뮤니케이션을 원활하게 해준다는 장점도 있습니다.

​

# User Flow에서 여러 레벨의 resolution 무슨 말일까?

1. 사용자가 궁극적으로 이루고자하는 목적'goal'을 정의합니다.

2. 다음으로는 Task Flow를 rough하게 그려봅니다. 각 단계에서 '사용자'가 어떤 행동을 취할지 생각해보는게 도움이 됩니다. 그리고 모든 단계에서 굳이, 억지로 emotion을 지정하려고 할 필요는 없습니다. 예를 들어, 설정사항 업데이트에 대한 feeling을 굳이 묘사할 필요는 없겠죠.

​

3. wireflow (=visual user flow) 을 작성해봅니다.

여기서는 유저가 마주치게 되는 디지털 환경을 구체적으로 적어줍니다. 스크린, 메시지, 광고 화면까지 모두 정리해봅니다. 여기서 스크린 구성자체보다는 유저의 사용 흐름에 집중합니다. 아래 예시 화면처럼 간단한 라벨을 붙여서 흐름에 대한 이해를 돕기만 해도 됩니다.

​

4. User Flow 작성하기

- 이제 유저플로우를 다듬어 볼 차례인데요, goal을 성취하기 위한 pages, logic, actions을 모두 정의해줍니다. 여기서 중요한 것은 와이어플로우를 보는 모든 사람들이 이해할 수 있도록 만들어야 한다는 겁니다.

​

** 플로우에 필요한 모든 정보가 와이어프레임에 포함되었는지 확인합니다.

- 바람직한(긍정적) 플로를 따라가지 않을 경우 어떤 일이 발생하는지

- 인터페이스에 변동이 생긴다면, 그것을 만드는 원인이 무엇인지

​

# User Flow 작성에 유용한 tool은 어떤 것이 있을까요?

- Flowmapp : 사이트맵과 유저플로우를 결합

- Overflow : 와이어 플로우를 쉽고 빠르게 만들 수 있게 해줌

- Invision

- Marvel : 프로토타입으로부터 유저 플로를 만들어 줌

- Primary

- Pen & Paper and whiteboards!

​

​

​

내용 출처

https://uxdesign.cc/when-to-use-user-flows-guide-8b26ca9aa36a