사용자 워크플로 템플릿
UX 및 제품 팀이 창의적인 솔루션을 위한 조건을 조성하여 사용자 경험을 개선하도록 도와주세요.
사용자 워크플로 템플릿 소개
사용자 흐름 다이어그램(상호작용 또는 작업 흐름 다이어그램이라고도 함)은 사용자가 제품이나 경험을 통해 작업을 완료하거나 목표를 달성하는 방법을 단계별로 시각적으로 매핑하는 과정입니다.
사용자 흐름을 다이어그램으로 작성하면 사용자가 선택한 경로의 품질이나 경험을 해석하는 데 도움이 됩니다. 워크플로는 사용자가 작업을 완료하기 위해 선택한 단계 수와 제품이나 서비스를 사용할 때 문제를 해결하기 위해 결정한 경로를 보여줄 수 있습니다.
사용자 흐름 다이어그램이 특정 제품을 통해 사용자가 이동하는 방식을 중점적으로 설명하는 반면, 스크린 플로우 템플릿은 플로차트 형태로 와이어프레임 스타일의 페이지 레이아웃을 제공합니다.
사용자 흐름 다이어그램이란?
사용자 흐름 다이어그램은 UX 및 제품 팀이 사용자가 시스템과 상호작용할 때 따라야 할 논리적인 경로를 매핑하는 데 도움을 줍니다. 시각적 도구로서 사용자 흐름 다이어그램은 웹사이트나 앱의 기능, 사용자가 취할 수 있는 잠재적 행동, 그리고 사용자가 결정한 행동의 결과 간의 관계를 보여줍니다.
사용자 흐름의 주요 요소는 다음과 같습니다:
시작점 또는 종료점: 워크플로가 어디에서 시작하고 끝나는지를 명확하게 합니다.
프로세스 또는 작업: 사용자가 로그인 또는 구매와 같은 수행하는 단계를 보여줍니다.
결정 지점: 사용자가 선택을 해야 할 때를 보여줍니다.
화살표: 사용자가 내린 결정에 따라 어디로 향하는지를 보여줍니다.
현재 사용자 경험이 더 나은 고객 전환율로 이어질 수 있는지 평가하거나 개선하려는 경우, 사용자 워크플로를 시도해보세요.
이 프로세스는 사용자를 염두에 두고 비즈니스 목표(예: 구매, 뉴스레터 가입, 무료 체험판 선택)를 정확히 파악하는 데 도움이 될 수 있습니다.
사용자 플로 템플릿을 언제 사용해야 하는지
사용자 플로 다이어그램은 다음과 같은 점에서 도움이 될 수 있습니다.
직관적인 인터페이스 구축: 워크플로가 이동하기 쉽고, 사용하기 효율적이며, 사용자에게 직관적으로 느껴지나요?
기존 인터페이스가 목적에 맞는지 결정: 작동하는 부분, 작동하지 않는 부분 혹은 개선이 필요한 부분은 무엇인가요? 워크플로가 매끄럽고 논리적인가요?
내부 팀이나 고객에게 제품 워크플로를 제시: 디자인 팀이 구매, 가입, 로그인 과정에서 고객이 말하거나 하는 행동을 볼 수 있나요? 고객이 귀하의 비전에 맞출 수 있도록 단계별 개요를 제공받을 수 있나요?
사용자 워크플로를 생성하거나 재작성할 때, 자신과 팀에게 물어보세요:
사용자가 하려는 것은 무엇인가요?
사용자에게 중요한 것은 무엇이며, 계속할 자신감을 줄 수 있는 것은 무엇인가요?
사용자가 성공하기 위해 추가로 필요한 정보는 무엇인가요?
사용자가 작업을 완료하는 데 주저하거나 방해가 되는 점은 무엇인가요?
사용자 워크플로 맵은 복잡한 프로세스를 매핑할 때도 디자이너와 그들의 팀이나 고객이 사용자 중심을 유지하도록 도울 수 있습니다.
디자이너로서 사용자 워크플로 다이어그램을 사용하여 웹사이트나 앱의 페이지, 화면 또는 표면을 어떻게 설계할지 결정하고, 포함할 콘텐츠와 내비게이션 작업을 재배치할 수 있습니다.
사용자 플로 다이어그램 만들기
사용자 플로를 매핑하는 것은 쉽습니다. Miro의 비주얼 워크스페이스는 다이어그램을 만들고 공유하기에 완벽한 캔버스입니다. 사용자 플로 템플릿을 선택한 다음, 다음 단계를 따라 나만의 템플릿을 만드세요:
비즈니스 목표와 사용자 목표를 결정하세요.
사용자가 어디에 도착하길 원하는지 알아보세요. 하나가 아직 없거나(혹은 업데이트가 필요하다면), 고객 여정 맵을 사용하여 고객 경험에 대한 공유된 비전을 만드세요. 모든 팀원은 제품 또는 서비스와의 잠재적인 모든 접점에서 고객의 감정을 공유된 이해를 통해 이점을 얻을 수 있습니다. 사용자에 대한 공감을 구축하면 사용자 워크플로 프로세스의 모든 단계를 안내할 수 있습니다.
방문자가 웹사이트를 찾는 방법을 알아보세요.
직접 트래픽, 유기적 검색, 유료 광고, 소셜 미디어, 추천 링크, 이메일을 통해 귀하의 제품 또는 서비스를 찾고 있나요? 이 포인트들은 사용자가 알아낸 것에 따라 사용자 플로 다이어그램의 출발점이 될 것입니다.
사용자가 필요로 하는 정보가 무엇인지 그리고 언제 필요한지 알아보세요.
사용자는 적시에 올바른 정보를 제공받을 때 전환이 이루어지므로, 고객이 디지털 접점에서 원하는 것과 그들이 느끼고 있는 감정을 고려하세요. 참여도 - 예를 들어, 챗봇 상호작용 - 는 여전히 잠재적인 성공 지표입니다. 이는 반드시 최종 구매로 이어지는 것만을 의미하지는 않습니다.
사용자 흐름을 파악하세요.
기존 사용자 흐름 템플릿의 도형과 화살표를 편집하여 이전 단계에서 발견한 사용자 조사를 반영할 수 있습니다. 고객이 첫 접점을 발견한 후에는 무엇을 하나요? 그들은 작업을 완료하기까지 몇 단계가 남았나요? 템플릿의 기본 사용자 흐름을 사용해 직접 그림을 그리기 시작하세요. 접점과 이탈점, 연결선의 화살표 방향을 사용자 흐름 다이어그램에 맞게 조정하세요.
팀으로부터 피드백을 받으세요.
팀, 클라이언트 또는 여러 부서의 이해관계자를 초대하여 Miro 보드를 보도록 하세요. 스티커 메모나 @멘션으로 비동기식 피드백을 남겨 동료 검토를 받을 수 있습니다. Miro 보드에서 화상 통화를 진행하고 팀원 중 한 명에게 메모 작성 역할을 맡기세요. 팀의 의견을 충분히 받은 후, 그에 따라 조정하세요.
다른 이해관계자나 클라이언트와 공유하고 필요에 따라 반복하세요.
고객의 태도와 동기가 변화함에 따라 사용자의 워크플로도 시간이 지나면서 변화할 것입니다. 그에 맞게 조정하고, 사용자 중심으로 유지하세요.
사용자 흐름 예제는 무엇인가요?
행사 현장을 개발한다고 가정해봅시다. 사용자 경험을 향상하려면 이벤트 등록 및 티켓 구매에 필요한 모든 단계를 매핑해야 합니다. 고객 흐름과 행사 티켓 구매를 위한 활동이 시작되는 지점을 추적하여 시작할 수 있습니다. 사용자 흐름 다이어그램을 통해 등록에서 결제 페이지에 이르기까지 고객이 어떻게 구매를 완료하는지(웹사이트의 최종 목적)를 한눈에 시각화할 수 있습니다.
저충실도 와이어프레임 템플릿
다음에 경우 적합합니다:
데스크 리서치, 제품 관리, 와이어프레임
사이트를 디자인하거나 앱을 개발할 때, 초기 단계에서는 큰 그림을 보고 큰 아이디어를 전달하는 것이 중요합니다. 저충실도 와이어프레임은 직접 보고 실행할 수 있도록 도와줍니다. 이 러프 레이아웃은(냅킨에 스케치하는 것의 디지털 버전이라고 생각하시면 됩니다) 팀과 프로젝트 이해관계자가 디자인 회의가 사용자의 니즈를 충족하는지를 빠르게 판단하는 데 도움을 줍니다. 우리의 템플릿은 회의나 워크숍, 프레젠테이션, 비평 세션 중에 와이어프레임을 쉽게 사용할 수 있도록 해줍니다.
순서도 템플릿
다음에 경우 적합합니다:
Flowcharts, Mapping, User Experience
사이트 맵이라고도 하는 웹 사이트 흐름도는 현재 또는 미래의 웹 사이트의 구조와 복잡성을 나타냅니다. 또한 흐름도는 팀이 향후 컨텐츠에 대한 지식 격차를 파악하는 데 도움이 될 수 있습니다. 웹 사이트를 만들 때 각 컨텐츠가 웹 컨텐츠와 연결된 키워드를 기반으로 사용자에게 정확한 연구 결과를 제공하도록 보장하려고 합니다. 제품, UX, 콘텐츠 팀은 플로우 차트나 사이트 맵을 사용하여 웹 사이트에 포함된 모든 내용을 이해할 수 있으며 웹 사이트의 사용자 경험을 개선하기 위해 콘텐츠를 추가하거나 재구성할 것을 계획할 수 있습니다.
프로토타입 템플릿
다음에 경우 적합합니다:
UX 디자인, 디자인 싱킹
프로토타입은 제품의 구조, 사용자 흐름, 버튼 및 메뉴와 같은 내비게이션 세부 사항을 정의하는 라이브 목업입니다. 이는 시각적 디자인과 같은 최종 세부 사항에 구애받지 않고 사용자나 서비스가 제품을 어떻게 경험할지 시뮬레이션하고, 사용자 컨텍스트와 작업 흐름을 매핑하며, 페르소나를 이해하기 위한 시나리오를 만들고, 제품에 대한 피드백을 수집할 수 있도록 합니다. 프로토타입을 사용하면 초기에 장애물을 찾아내어 비용을 절감할 수 있습니다. 프로토타입은 다양하지만 일반적으로 화살표나 링크로 연결된 일련의 화면이나 아트보드로 구성됩니다.
앱 와이어프레임 템플릿
다음에 경우 적합합니다:
UX 디자인, 와이어프레임
앱을 만들 준비가 되셨나요? 기능과 사용자 상호 작용을 상상만 하지 말고 와이어프레임이 보여주게 하세요. 와이어프레임은 각 화면의 기본 레이아웃을 만드는 기술입니다. 와이어프레임을 통해 이상적으로는 초기에 각 화면이 달성할 목표를 파악하고 중요한 이해관계자의 동의를 얻을 수 있습니다. 이는 디자인과 콘텐츠를 추가하기 전에 이뤄지며, 시간과 비용을 절약할 수 있습니다. 사용자의 여정 관점에서 사고함으로써 더 매력적이고 성공적인 경험을 제공할 수 있습니다.