user-flow-web

사용자 워크플로 템플릿

UX 및 제품 팀이 창의적인 솔루션을 위한 조건을 조성하여 사용자 경험을 개선하도록 도와주세요.

사용자 워크플로 템플릿 소개

사용자 흐름 다이어그램(상호작용 또는 작업 흐름 다이어그램이라고도 함)은 사용자가 제품이나 경험을 통해 작업을 완료하거나 목표를 달성하는 방법을 단계별로 시각적으로 매핑하는 과정입니다. 

사용자 흐름을 다이어그램으로 작성하면 사용자가 선택한 경로의 품질이나 경험을 해석하는 데 도움이 됩니다. 워크플로는 사용자가 작업을 완료하기 위해 선택한 단계 수와 제품이나 서비스를 사용할 때 문제를 해결하기 위해 결정한 경로를 보여줄 수 있습니다. 

사용자 흐름 다이어그램이 특정 제품을 통해 사용자가 이동하는 방식을 중점적으로 설명하는 반면, 스크린 플로우 템플릿은 플로차트 형태로 와이어프레임 스타일의 페이지 레이아웃을 제공합니다. 

사용자 흐름 다이어그램이란?

사용자 흐름 다이어그램은 UX 및 제품 팀이 사용자가 시스템과 상호작용할 때 따라야 할 논리적인 경로를 매핑하는 데 도움을 줍니다. 시각적 도구로서 사용자 흐름 다이어그램은 웹사이트나 앱의 기능, 사용자가 취할 수 있는 잠재적 행동, 그리고 사용자가 결정한 행동의 결과 간의 관계를 보여줍니다. 

사용자 흐름의 주요 요소는 다음과 같습니다:

  • 시작점 또는 종료점: 워크플로가 어디에서 시작하고 끝나는지를 명확하게 합니다.

  • 프로세스 또는 작업: 사용자가 로그인 또는 구매와 같은 수행하는 단계를 보여줍니다.

  • 결정 지점: 사용자가 선택을 해야 할 때를 보여줍니다.

  • 화살표: 사용자가 내린 결정에 따라 어디로 향하는지를 보여줍니다.

현재 사용자 경험이 더 나은 고객 전환율로 이어질 수 있는지 평가하거나 개선하려는 경우, 사용자 워크플로를 시도해보세요. 

이 프로세스는 사용자를 염두에 두고 비즈니스 목표(예: 구매, 뉴스레터 가입, 무료 체험판 선택)를 정확히 파악하는 데 도움이 될 수 있습니다.

사용자 플로 템플릿을 언제 사용해야 하는지

사용자 플로 다이어그램은 다음과 같은 점에서 도움이 될 수 있습니다.  

  • 직관적인 인터페이스 구축: 워크플로가 이동하기 쉽고, 사용하기 효율적이며, 사용자에게 직관적으로 느껴지나요?

  • 기존 인터페이스가 목적에 맞는지 결정: 작동하는 부분, 작동하지 않는 부분 혹은 개선이 필요한 부분은 무엇인가요? 워크플로가 매끄럽고 논리적인가요?

  • 내부 팀이나 고객에게 제품 워크플로를 제시: 디자인 팀이 구매, 가입, 로그인 과정에서 고객이 말하거나 하는 행동을 볼 수 있나요? 고객이 귀하의 비전에 맞출 수 있도록 단계별 개요를 제공받을 수 있나요?

사용자 워크플로를 생성하거나 재작성할 때, 자신과 팀에게 물어보세요:

  • 사용자가 하려는 것은 무엇인가요?

  • 사용자에게 중요한 것은 무엇이며, 계속할 자신감을 줄 수 있는 것은 무엇인가요?

  • 사용자가 성공하기 위해 추가로 필요한 정보는 무엇인가요?

  • 사용자가 작업을 완료하는 데 주저하거나 방해가 되는 점은 무엇인가요?

사용자 워크플로 맵은 복잡한 프로세스를 매핑할 때도 디자이너와 그들의 팀이나 고객이 사용자 중심을 유지하도록 도울 수 있습니다. 

디자이너로서 사용자 워크플로 다이어그램을 사용하여 웹사이트나 앱의 페이지, 화면 또는 표면을 어떻게 설계할지 결정하고, 포함할 콘텐츠와 내비게이션 작업을 재배치할 수 있습니다.

사용자 플로 다이어그램 만들기

사용자 플로를 매핑하는 것은 쉽습니다. Miro의 비주얼 워크스페이스는 다이어그램을 만들고 공유하기에 완벽한 캔버스입니다. 사용자 플로 템플릿을 선택한 다음, 다음 단계를 따라 나만의 템플릿을 만드세요:

비즈니스 목표와 사용자 목표를 결정하세요

사용자가 어디에 도착하길 원하는지 알아보세요. 하나가 아직 없거나(혹은 업데이트가 필요하다면), 고객 여정 맵을 사용하여 고객 경험에 대한 공유된 비전을 만드세요. 모든 팀원은 제품 또는 서비스와의 잠재적인 모든 접점에서 고객의 감정을 공유된 이해를 통해 이점을 얻을 수 있습니다. 사용자에 대한 공감을 구축하면 사용자 워크플로 프로세스의 모든 단계를 안내할 수 있습니다. 

방문자가 웹사이트를 찾는 방법을 알아보세요.

직접 트래픽, 유기적 검색, 유료 광고, 소셜 미디어, 추천 링크, 이메일을 통해 귀하의 제품 또는 서비스를 찾고 있나요? 이 포인트들은 사용자가 알아낸 것에 따라 사용자 플로 다이어그램의 출발점이 될 것입니다. 

사용자가 필요로 하는 정보가 무엇인지 그리고 언제 필요한지 알아보세요

사용자는 적시에 올바른 정보를 제공받을 때 전환이 이루어지므로, 고객이 디지털 접점에서 원하는 것과 그들이 느끼고 있는 감정을 고려하세요. 참여도 - 예를 들어, 챗봇 상호작용 - 는 여전히 잠재적인 성공 지표입니다. 이는 반드시 최종 구매로 이어지는 것만을 의미하지는 않습니다.

사용자 흐름을 파악하세요

기존 사용자 흐름 템플릿의 도형과 화살표를 편집하여 이전 단계에서 발견한 사용자 조사를 반영할 수 있습니다. 고객이 첫 접점을 발견한 후에는 무엇을 하나요? 그들은 작업을 완료하기까지 몇 단계가 남았나요? 템플릿의 기본 사용자 흐름을 사용해 직접 그림을 그리기 시작하세요. 접점과 이탈점, 연결선의 화살표 방향을 사용자 흐름 다이어그램에 맞게 조정하세요.

팀으로부터 피드백을 받으세요.

팀, 클라이언트 또는 여러 부서의 이해관계자를 초대하여 Miro 보드를 보도록 하세요. 스티커 메모나 @멘션으로 비동기식 피드백을 남겨 동료 검토를 받을 수 있습니다. Miro 보드에서 화상 통화를 진행하고 팀원 중 한 명에게 메모 작성 역할을 맡기세요. 팀의 의견을 충분히 받은 후, 그에 따라 조정하세요.

다른 이해관계자나 클라이언트와 공유하고 필요에 따라 반복하세요.

고객의 태도와 동기가 변화함에 따라 사용자의 워크플로도 시간이 지나면서 변화할 것입니다. 그에 맞게 조정하고, 사용자 중심으로 유지하세요.

사용자 흐름 템플릿에 대한 자주 묻는 질문

사용자 흐름 예제는 무엇인가요?

행사 현장을 개발한다고 가정해봅시다. 사용자 경험을 향상하려면 이벤트 등록 및 티켓 구매에 필요한 모든 단계를 매핑해야 합니다. 고객 흐름과 행사 티켓 구매를 위한 활동이 시작되는 지점을 추적하여 시작할 수 있습니다. 사용자 흐름 다이어그램을 통해 등록에서 결제 페이지에 이르기까지 고객이 어떻게 구매를 완료하는지(웹사이트의 최종 목적)를 한눈에 시각화할 수 있습니다.

사용자 워크플로 템플릿

지금 바로 이 템플릿으로 시작해 보세요.

관련 템플릿
low-fidelity-wireframes-thumb-web
미리보기
저충실도 와이어프레임 템플릿
website-flowchart-thumb-web
미리보기
순서도 템플릿
Prototype Thumbnail
미리보기
프로토타입 템플릿
App Wireframing Thumbnail
미리보기
앱 와이어프레임 템플릿