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