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