User flow

User flow(이용흐름)

: 사용자가 특정한 작업(Task)을 완료하기 위해서 서비스 내에서 움직이는 경로를 정리하는 것. UI, 행동, 판단으로 표현된다.

구성요소

• 목표(User goal) : 사용자가 서비스를 통해서 얻고자 하는 결과
• 작업(Task) : 목표를 위해서 실제 사용자가 취한 방법
• UI(User Interface) : 서비스가 자용자에게 정보를 제시하기 위한 접점
• 행동(Action) : 사용자가 작업을 완료하기 위해 UI 상에서 보이는 주 활동 및 보조 활동
• 판단(Decision) : 사용자 행동 후 그 결과가 분기될 경우 그 분기점을 표시한 것

설계 과정

1. User goal : 사용자 시나리오로부터 목표와 작업을 축출한다.
2. Task flow : 작업흐름을 설계한다.
3. Wire flow : 화면흐름을 설계한다.
4. User flow : UI 설계 과정에서 최종적인 이용흐름을 완성한다.

   화면흐름부터는 '흐름'보다는 UI나 인터렉션에 대한 설계가 더 중요해지기 때문에 이용흐름 설계는 사실상 작업흐름 설계라고 봐도 무방하다.

플로우 차트(Flow chart)

: 순서도,흐름도. 프로세스를 수행하기 위해 필요한 일련의 단계와 결정을 시각적으로 표현한 자료이다. 각각의 단계는 다이어그램으로 표현된다.

다이어그램(Diagram)

: 정보를 조율, 묘사, 상징화 하여 2차원 기하학 모델(two-dimensional geometric model)로 시각화하는 기술

UXUI의 플로우차트

: 서비스를 사용하기 위해 수행하는 일련의 단계와 결정을 한눈에 파악할 수 있도록 도와주기 위해 시각적으로 표현한 자료. Task flow 작업흐름을 설계할때 사용된다.

플로우차트가 필요한 이유

• 기획서를 보는 개발자나 팀원들이 전체 구조를 빠르게 파악할 수 있다는 것
• 위의 과정에서 프로세스 상에서 발생할 수 있는 문제를 미리 파악하고 누락된 프로세스는 없는지 사전에 체크가 가능하다는 것
• 프로세스상의 사용자 UX를 한 번 더 점검할 수 있다는 것

피그마에서 작업흐름 설계하기

: 피그마에 'Flow chart'라는 플러그인을 사용하면 쉽게 작업흐름을 설계할 수 있다.

방법

1)Flow Chart 플로그인을 실행
2)원하는 도형을 선택(도형마다 프로세스 과정을 나타내는 의미가 있다)
3) 파란색으로 보이는 화살표 4개 중 하나를 선택
4) 화살표를 선택하면 도형이 나타나 원하는 도형을 클릭 시 화살표 방향에 맞춰 나타나고 처음 선택한 도형과 화살표로 연결되어 있다.
5) 4번의 과정을 반복하면서 작업흐름을 완성한다.

나는 최근 가습기를 샀던 경험을 작업흐름으로 설계했다.