전자상거래를 위한 사용자 흐름을 만드는 방법

온라인 상점을 위한 새 웹사이트를 구축하고 있다고 상상해 보십시오. WordPress와 같은 페이지 빌더로 이동하여 페이지에 섹션을 추가하기 시작하여 탐색 모음이 중앙에 오거나 정보 클립이 먼저 와야 한다고 결정합니다.

또는 이미 웹사이트가 있고 더 좋아 보일 수 있다고 판단하여 이미지, 텍스트 및 CTA를 재배치하기 시작합니다.

그럼에도 불구하고 이미 실수가 있었습니다. 두 경우 모두 전략이나 사용자 흐름이 존재하지 않습니다. 디자인은 아무렇지도 않게 선택했고, 정통 잭슨 폴록 그림처럼 흩뿌려져 있습니다.

그리고 Pollock의 팬이든 아니든 그의 그림은 깔때기의 한 단계에서 다음 단계로 리드를 탐색할 필요가 없었습니다.

온라인 쇼핑의 새로운 시대에 전자상거래 웹사이트를 갖는 것은 매우 중요합니다. 앱은 잠재적으로 유용합니다.

그러나 많은 트래픽을 끌어들이는 것이 전환(즉, 제품을 구매)하지 않는 한 낭비인 것과 같은 방식으로 아름다운 웹사이트를 갖는 것만으로는 충분하지 않습니다. 리드를 전환 경로로 안내하도록 설계된 웹사이트가 필요합니다.

잘 디자인된 웹사이트는 좋아하는 글꼴과 애니메이션을 선택하는 것으로 시작되지 않습니다. 사용자 흐름 매핑으로 시작합니다.

사용자 흐름 다이어그램이란 무엇입니까?

사용자 흐름도(사용자 흐름도, 작업 흐름도 및 사용자 인터페이스 흐름도라고도 함)는 사용자가 목표 또는 작업을 달성하기 위해 웹사이트 또는 앱을 통해 이동하는 경로를 보여줍니다. 사용자가 작업(예: 제품 구매)을 완료할 때까지 한 페이지에서 다음 페이지로 넘어가기 위해 취하는 단계를 설명하면 작업 완료를 권장하는 방법을 이해할 수 있습니다.

UX Collective의 샘플 사용자 흐름 다이어그램.

UX 디자인에서 사용자 흐름의 역할

사용자 경험 디자인(UX 디자인)은 사용자 중심의 디자인을 만드는 것입니다. 사용자(잠재 고객)를 디자인 선택의 중심에 둠으로써 경험을 향상시키고 판매가 끝날 때까지 탐색할 가능성을 높입니다.

사용자 흐름은 전환을 생성하는 데 필요한 사용자 작업 및 제품 기능을 고려하여 사용자가 제품 디자인과 상호 작용하는 방식을 보여줍니다.

웹 사이트 요구 사항을 알리기 위해 디자인 프로세스를 시작하기 전에 사용자 흐름 다이어그램을 만드십시오. 전략가, 디자이너 및 웹 개발자는 UX 흐름을 사용하여 제품 결함을 발견하고 페이지 수, 각 구성 요소 및 정보 아키텍처를 포함한 프로젝트 범위를 이해합니다.

웹 사이트 개발 후 사용자 흐름을 생성하여 단순화 및 개선을 위한 영역을 찾을 수도 있습니다.

Creately의 샘플 사용자 흐름 다이어그램.

높은 수준과 상세한 사용자 흐름

높은 수준의 사용자 흐름은 빠르고 간단하며 아이디어 또는 프로세스에 대한 빠른 개요를 제공합니다.

자세한 사용자 흐름 또는 작업 흐름은 작업 완료와 관련된 모든 단계와 결정을 자세히 설명하여 더 유용합니다. 상세한 흐름도는 전자상거래 웹사이트의 디자인과 콘텐츠를 알리기 위해 만들고자 하는 것입니다.

일부 사용자 흐름은 사용자 흐름이 페르소나 및 진입점에 따라 사용자에 따라 다르게 완료될 수 있음을 강조한다는 점에서 작업 흐름과 구별됩니다.

사용자 흐름 대 사용자 여정

사용자 흐름은 제품에 대한 사용자의 종단 간 경험을 개략적으로 설명하는 사용자 여정 맵과 다릅니다. 흐름이 순전히 액션 기반인 경우 사용자 여정은 사용자 감정과 같은 요소를 고려합니다.

사용자 여정 지도와 고객 여정 지도는 때때로 같은 의미로 사용되지만 이는 사용자와 고객이 동일한 사람일 때만 작동하며 항상 그런 것은 아닙니다. 예를 들어 고용주(고객)는 직원(사용자)이 사용할 온라인 도구를 구입할 수 있습니다.

사용자 흐름 다이어그램을 작성하는 방법

1. 다이어그램의 목적 결정

사용자 흐름 다이어그램에 포함되는 내용은 목표와 추적 중인 작업에 따라 다릅니다. 다이어그램당 목표 또는 작업 수를 제한합니다. 한 번에 하나씩 차트를 작성하는 것이 가장 좋습니다. 둘 이상을 보면 다이어그램이 너무 복잡해지고 복잡해져 효율성이 떨어질 수 있습니다.

나중에 참조할 수 있도록 목적에 따라 사용자 흐름에 명확한 제목을 지정합니다.

2. 일반 사용자 이해하기

사용자를 이해하면 가장 잘 작동하는 작업 흐름 탐색과 각 페이지에 포함할 콘텐츠를 알리는 데 도움이 됩니다.

사용자 조사를 수행하여 사용자의 다음 항목을 수집합니다.

• 목표
• 동기
• 원하는 기능
• 경험/지식 수준
• 장벽

이러한 요소는 구매 여정의 다양한 잠재고객 세그먼트 및 단계에 따라 변경될 수 있지만 이를 사용하여 각 웹 페이지에 표시되는 내용, 각 페이지를 디자인하는 방법 및 링크할 위치를 결정할 수 있습니다.

사용자 및 비즈니스 목표는 일치해야 두 가지를 모두 충족하는 전자상거래 웹사이트 흐름을 디자인할 수 있습니다.

경쟁의 흐름을 연구하는 것도 통찰력을 제공할 수 있습니다.

3. 작업 흐름 키 생성

일관성을 유지하고 다른 사람들이 이해할 수 있도록 사용된 색상과 모양에 대한 키를 제공하는 한 작업 흐름 다이어그램의 모양에 대한 엄격한 규칙은 없습니다.

일반적인 사용자 흐름 기호는 다음과 같습니다.

때때로 사용되는 다른 모양에는 삼각형, 기울어진 평행사변형 및 점선 모양(실선 대신)이 포함됩니다. 시스템 작업, 입력 요소 또는 선택/클릭과 같은 추가 항목에 대한 모양을 전환하여 원하는 만큼 구체적으로 얻을 수 있습니다.

사용된 모든 색상은 사용자 순서도의 의미와 가독성에 기여해야 합니다. 색상이 항목을 그룹화하고 요소를 식별하며 패턴을 표시하는 데 어떻게 도움이 되는지 고려하십시오.

다른 유형의 사용자 순서도

사용자 순서도는 웹사이트에 고유하므로 모두가 모양과 색상을 사용하는 일반적인 방법을 따르는 것은 아닙니다.

다른 스타일의 사용자 흐름은 컴퓨터 과학에서 사용되는 상태 다이어그램을 모델로 합니다. 상태 다이어그램은 모양이 다양하지만 전자 상거래 프로세스 흐름을 안내하는 화살표가 있는 일련의 분수로 작성할 수 있습니다. 분수에는 다음과 같이 사용자가 분수 선 위에서 보는 것과 분수 선 아래에서 사용자가 수행하는 것이 포함됩니다.

사이트 맵을 모델로 한 사용자 흐름도 있습니다. 취한 작업 외에도 사용자 흐름과 관련된 각 웹 페이지에 해당 페이지의 모든 섹션 및 하위 섹션 목록이 표시됩니다. 그런 다음 화살표 또는 선은 사용자를 흐름의 다음 단계로 안내하는 페이지 섹션 및 CTA를 보여줍니다.

Behance의 Salinthip Kaewkerd의 샘플 사용자 흐름.

4. 사용자 흐름도 개요

형식이 결정되면 작업 흐름 매핑을 시작할 수 있습니다. 특정 다이어그램에 대해 선택한 진입점으로 시작하고 진입점과 작업 완료 사이의 모든 단계를 나열합니다.

진입점은 광고, 소셜 미디어, 자연 검색 결과, 외부 링크, 이메일 캠페인 등을 포함하여 사용자를 웹사이트로 이끄는 모든 소스가 될 수 있습니다. 앱은 웹사이트보다 진입점이 적은 경향이 있습니다.

다음 단계(사용자 인터페이스 흐름 다이어그램의 핵심)는 매핑하도록 선택한 작업에 따라 다릅니다. 여기에는 로그인 및 가입 양식, 제품 탐색, 체크아웃 프로세스 또는 온보딩과 같은 항목이 포함될 수 있습니다. 사용자가 각 페이지에 도달하는 방법, 페이지에서 수행할 수 있는 모든 작업 및 목표를 향해 진행하기 위해 해당 페이지에서 이동하는 위치를 고려하십시오.

사용자 흐름의 마지막 단계는 작업을 완료하는 사용자 작업이 아니라 사용자의 완료를 확인하는 기능이어야 합니다.

현재 전자상거래 웹사이트를 업그레이드하는 경우 Google Analytics 행동 흐름 보고서를 사용하여 사용자가 어디에서 왔는지, 웹사이트를 탐색하는 방법 및 사용자가 종료하는 위치에 대한 통찰력을 얻을 수 있습니다.

사용자 흐름을 매핑할 때 사용자가 하나의 작업을 완료하기 위해 선택할 수 있는 여러 경로가 있음을 알 수 있습니다. 분기 또는 노드는 기본 경로 매핑을 계속하기 위해 이러한 지점에서 분리됩니다.

흐름 다이어그램을 만들 때 이동 방향의 수를 제한하여 가독성을 높일 수 있습니다. 화살표가 모든 방향을 가리키면 다이어그램이 미로처럼 보이기 시작합니다. 기능 다이어그램을 만드는 데 사용할 수 있는 많은 사용자 흐름 도구가 있습니다.

5. 흐름 줄이기

사용자 흐름 다이어그램을 만든 후에는 가위를 사용할 차례입니다. 이 단계에는 세 가지 중요한 편집 작업이 포함됩니다.

1. 흐름 시각화에 필요하지 않은 정보 제거
2. 순수 사용자 탐색 외부의 세부 정보를 여정 지도로 이동
3. 중복되거나 불필요한 단계 식별

이 마지막 단계는 탐색 흐름을 시각화하기 위한 것이 아니라 경험을 개선하고 있는 사용자를 위한 것입니다. 사용자가 작업을 완료하기 위해 더 많은 결정과 조치를 취할수록 그렇게 할 가능성은 줄어듭니다. 전환 가능성을 높이려면 사용자 흐름을 최대한 단순화하십시오.

6. 의도가 있는 라벨

명확하게 사용자 흐름 다이어그램의 모든 요소에 레이블을 지정합니다. 각 모양, 페이지, 섹션 또는 작업이 참조하는 내용이 명확해야 합니다. 의미를 손상시키는 경우 속기 사용을 피하십시오. 완료되면 몇 명의 동료가 사용자 흐름을 검토하여 해석할 수 있는지 확인합니다.

데이터로 사용자 흐름 최적화

새 웹 사이트를 만들거나 새 디자인 또는 콘텐츠를 테스트할 때 실제 사용자 흐름을 검토하고 흐름 다이어그램에 표시된 대로 예상과 비교하는 것이 좋습니다. 불일치가 발생하면 이를 사용하여 순서도를 수정하거나 사용자 인터페이스 자체를 편집하여 계획한 대로 사용자를 안내할 수 있습니다. 여러 UX 연구 방법은 사용성 테스트, 작업 분석 및 트리 테스트를 포함하여 사용자 흐름을 테스트합니다.

또한 Google Analytics 또는 연구의 데이터를 사용하여 사용자 흐름을 최적화하여 판매를 늘릴 수 있는 위치를 확인할 수 있습니다. 전자상거래 웹사이트를 구축할 때 사용자 흐름은 전자상거래 판매 유입경로와 연결됩니다. 사용자가 유입경로 아래로 더 내려가는 것은 자연스러운 일이지만(따라서 유입경로 모양) 급격한 감소 지점은 개선해야 할 부분을 나타냅니다.

그리고 종종 개선은 탐색을 보다 자연스럽게 만들거나, 디자인을 편집하거나, 방향 복사를 추가하여 사용자 흐름을 최적화하는 것을 의미합니다.

흐름의 감소는 비즈니스 선택으로 인해 발생할 수도 있습니다. 잠재 구매자가 배송 비용을 확인한 후 반송률이 증가하면 높은 배송료가 문제일 가능성이 있음을 나타냅니다.

이탈률을 둘러싼 단계를 분석하고 문제(및 솔루션)가 무엇인지 가정합니다. 드롭오프가 줄어들고 더 많은 사용자가 다음 단계로 넘어갈 때까지 솔루션을 A/B 테스트합니다.

전자상거래 웹사이트 흐름 차별화

전자 상거래 흐름도는 유사한 패턴을 따르는 경향이 있습니다. 외부에서 페이지를 발견하고, 페이지에 들어가고, 제품을 보고, 장바구니에 제품을 추가하고, 체크아웃하고, 확인을 받습니다.

이 모든 단계는 본질적으로 전자 상거래와 관련된 단계이지만 사용자 흐름을 설계할 때 고유한 가치 제안과 대상을 고려할 가치가 있습니다.

더 제공할 수 있습니까? 사용자가 추가 기능의 이점을 누릴 수 있습니까?

일부 전자 상거래 상점은 개인화 퀴즈 또는 체험 기능을 포함하여 사용자 여정과 작업 흐름을 혼동합니다. 예를 들어 Sephora의 Virtual Artist를 사용하면 집에서 구매하기 전에 메이크업이 어떻게 보일지 시뮬레이션할 수 있습니다.

전자 상거래에서 사용자 흐름을 설계할 때 종종 잊어버리는 또 다른 위치는 구매 후입니다. 고객 구매를 확인하는 것은 고객 여정의 끝이 아닙니다. 이제 그들은 패키지를 추적하고, 도착을 초조하게 기다리고, 흥분한 마음으로 포장을 풀고, 잠재적으로 반품해야 합니다. 배송, 감사 페이지 및 상향 판매로 사용자 경험을 개선할 수 있는 방법을 고려해 볼 가치가 있습니다.

전자상거래 웹사이트 및 앱에 대한 흐름을 생성할 때 전자상거래 유입경로의 모든 단계를 염두에 두십시오.

• 고려 사항
• 평가
• 구입
• 구매 이후

효율적인 UX 흐름으로 판매 촉진

사용자 경험은 사용자가 보기 좋아하는 예쁜 디자인 그 이상입니다. 전환을 향한 전자 상거래 여정을 통해 리드를 안내하는 정보 아키텍처 및 콘텐츠를 설계하고 있습니다.

사용자가 쉽게 탐색할 수 있는 웹 사이트 또는 애플리케이션을 구축하고 한 단계에서 다음 단계로 이동하고 원하는 제품을 찾고 때가 되면 적절한 CTA를 클릭하는 것입니다.

진입 지점과 판매 시점 사이에 너무 많은 단계를 밀어넣는 것은 더 많은 작업을 수행하도록 요구하는 것을 의미합니다. 너무 적은 단계로는 주저함을 해결하기에 충분하지 않을 수 있습니다. 이는 더 큰 위험을 감수하도록 요청하는 것을 의미합니다. 온라인으로 구매할 때 일이나 위험을 좋아하는 사람은 없습니다.

웹 사이트의 각 작업에 대한 효율적인 사용자 흐름을 매핑하는 것은 소비자 마찰 지점을 파악하는 효과적인 방법이므로 더 나은 사용자 경험을 제공하고 결과적으로 판매를 촉진하는 디지털 제품을 설계할 수 있습니다.