User flow(이용흐름)
: 사용자가 특정한 작업(Task)을 완료하기 위해서 서비스 내에서 움직이는 경로를 정리하는 것. UI, 행동, 판단으로 표현된다.
구성요소
- 목표(User goal) : 사용자가 서비스를 통해서 얻고자 하는 결과
- 작업(Task) : 목표를 위해서 실제 사용자가 취한 방법
- UI(User Interface) : 서비스가 자용자에게 정보를 제시하기 위한 접점
- 행동(Action) : 사용자가 작업을 완료하기 위해 UI 상에서 보이는 주 활동 및 보조 활동
- 판단(Decision) : 사용자 행동 후 그 결과가 분기될 경우 그 분기점을 표시한 것
설계 과정
- User goal : 사용자 시나리오로부터 목표와 작업을 축출한다.
- Task flow : 작업흐름을 설계한다.
- Wire flow : 화면흐름을 설계한다.
- 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번의 과정을 반복하면서 작업흐름을 완성한다.
나는 최근 가습기를 샀던 경험을 작업흐름으로 설계했다.
멈추지 않고 조금씩 계속