Click/Tap 히트맵

Click/Tap 히트맵이란? Click/Tap 히트맵은 사용자들이 웹 페이지의 어떤 요소에서 얼마나 많이 클릭하거나 탭하는지를 시각화하여 보여주는 도구입니다. 이를 통해 사용자의 행동 패턴과 관심 영역을 파악할 수 있습니다. 히트맵 조회하기Reporting Heatmaps > [Click/Tap] 을 클릭하면 클릭/탭 이벤트에 대한 히트맵 및 데이터를 확인할 수 있습니다. 리포트의 좌측: 히트맵 영역캡처 화면의 링크/버튼에 대한 클릭/탭 데이터무효클릭/탭(링크/버튼이 아닌 영역에 대한 클릭/탭)리포트의 우측: 지표 영역요소별 클릭 순위 통계 및 상세 지표통계 및 분석 정보는 각 히트맵 별로 상위 10위 까지의 데이터를 보여줍니다. Click/Tap 통계 이해하기 Click/Tap Count페이지 내에서 클릭/탭이 발생한 컨텐츠 정보를 순위별로 나타냅니다.클릭/탭 통계는 링크 및 버튼 요소만 집계하여 분석합니다. Unique Click/Tap (순클릭/탭) 순 클릭/탭이 발생한 컨텐츠 정보를 순위별로 나타냅니다. 클릭/탭 통계는 링크 및 버튼 요소만 집계하여 분석합니다.Note Click/Tap Count와 다른 점은? 중복 클릭/탭을 제외한 순 클릭/탭으로서, 실제 클릭을 일으킨 방문 PV 순위를 보여준다는 데에 있습니다. Click/Tap Count Rank링크나 버튼 같은 클리커블 요소의 순위를 확인할 수 있습니다. 상위 10개 콘텐츠를 기본으로 제공하며, '더보기'버튼을 통해 이벤트가 발생한 모든 컨텐츠에 대한 정보를 확인할 수 있습니다. Click/Tap 지표 이해하기 Click/Tap Rate - 전체 클릭 횟수 대비 Click/Tap Count 비율 - 해당 페이지에서 발생한 전체 클릭/탭 이벤트 중, 해당 컨텐츠의 클릭/탭이 차지하는 비중을 이해할 수 있습니다. Scroll to Click/Tap - 스크롤이 도달한 PV 대비 클릭/탭 한 PV 비율 - 컨텐츠가 화면에 노출된 사용자에 한하여 해당 컨텐츠가 선택된 비율을 나타냅니다. 특정 위치에 있는 컨텐츠의 스크롤 도달률은, 해당 컨텐츠의 성질이 아닌 다른 UI의 구성에 의하여 영향을 받게 됩니다. 따라서 다른 위치에 노출된 사용자 규모를 기반으로 컨텐츠 별 클릭 성과를 비교해 볼 수 있습니다. Note Scroll to Click/Tap 이해하기 - Scroll to Click/Tap이 높은 컨텐츠는, 사용자에게 노출되었을 때 클릭률이 높은 요소입니다. - 반대로 Scroll to Click/Tap 비율이 낮은 컨텐츠는, 사용자에게 노출되었을 때 클릭률이 낮은 요소입니다. Click/Tap PV Rate - 전체 PV 중, 클릭한 PV 비율 = Unique Click/Tap = 순 클릭/탭 - 해당 컨텐츠를 클릭/탭한 실제의 PV 규모를 확인할 수 있습니다. Click/Tap PV Rate는 중복된 클릭/탭을 제외하고 집계됩니다. 중복된 클릭/탭이 제외되기 때문에, 전체 PV 중에서 실제로 클릭/탭한 PV와 클릭/탭하지 않은 PV의 규모를 각각 정확히 파악하는데 참고할 수 있습니다. Note Click/Tap PV Rate 활용하기 - 중복된 클릭/탭을 제외하는 이유는, 순 클릭/탭을 집계하기 위해서 입니다. 순 클릭/탭의 수치를 배경으로 한 분석과 통계치는 1 PV가 동일한 컨텐츠를 한 번 또는 여러 번 클릭/탭하더라도, 해당 컨텐츠를 클릭/탭한 PV에 끼치는 영향은 1로 동일하다는 전제하에 집계됩니다. - 페이지가 전환되지 않아 반복적으로 클릭이 가능한 컨텐츠를 클릭/탭한 실제 PV 규모를 확인할 수 있습니다. Hover → Click Time - 마우스 Hover 후 Click 되기 까지의 평균 시간 - 마우스가 Hover로 접근 후 Click 하기 까지의 시간차를 뜻합니다. 사용자들이 마우스로 Hover 함으로써 컨텐츠를 눈으로 확인하고, 선택을 결정하기 까지의 시간 차이를 의미할 수 있습니다. Hover to Click - Hover 한 Count 대비, Click Count 비율 - 해당 컨텐츠에 마우스로 접근한 횟수 대비, 클릭으로 연결된 비율을 의미합니다. - 사용자가 해당 컨텐츠에 마우스로 접근하여 관심을 보이고 확인한 정도에 비하여, 실제 관심과 목적에 의한 선택의 비중이 얼마나 되는지 확인할 수 있습니다. Dbl. Tap Rate - Double Tap Count / All Double Tap Count(%) - 더블 탭 이벤트가 발생한 분포 중, 해당 컨텐츠에 대한 비중을 확인할 수 있습니다. 히스토리(그래프) - 조회 기간 동안, 해당 요소의 Click/Tap 추이 - 조회 기간에 따른 해당 요소/컨텐츠 별 카운트의 변화를 Line 그래프로 보여줍니다.

벤치마크 데이터 확인하기

벤치마크 데이터란? 뷰저블 서비스에 누적된 웹사이트 데이터를 기반으로 뷰저블 AI가 8가지 산업군으로 분류하여 추출한 업계별 평균 데이터입니다. *뷰저블 AI가 분류하는 8가지 산업군 제공되는 업계 평균 데이터 벤치마크 데이터에는 1세션당 페이지수, 평균 체류시간, 전환, 이탈, 롤백, 새로고침 등의 업계 평균 데이터가 제공됩니다.*아래 이미지 예시를 참고해주세요! 1. 1세션당 페이지수 *1세션당 페이지 수는 무엇인가요?1세션은 웹 사이트에 접속한 이후 복수의 페이지를 둘러보며 취한 행동을 말합니다.즉, 1세션당 페이지 수는 사용자가 한 세션 동안 방문한 페이지의 숫자를 의미하며, 이를 통해 사용자가 웹사이트에서 얼마나 많은 페이지를 탐색했는지 알 수 있습니다. 2. 평균 체류 시간 3. 전환 4. 이탈 5. 롤백 6. 새로고침 벤치마크 데이터 확인하는 방법 벤치마크 데이터는 뷰저블 Journey Map에서 제공되는 데이터로, Journey Map 랭킹(Ranking) 리포트와 트렌드(Trend) 리포트에서 확인하실 수 있습니다. 1. 랭킹 (Ranking) 리포트 저니맵 대시보드에서 Ranking 리포트를 클릭해주세요. 랭킹리포트의 상단에서 벤치마크 데이터를 바로 확인할 수 있습니다. 2. 트렌드 (Trend) 리포트 저니맵 대시보드에서 Trend 리포트를 클릭해주세요. 트렌드 리포트에서 각 시퀀스별 이탈을 업계 평균 데이터와 비교할 수 있습니다.*시퀀스는 무엇인가요?시퀀스는 사용자가 웹사이트를 탐색하는 동안 거치는 일련의 페이지나 이벤트를 의미합니다. 이를 통해 사용자의 행동 패턴을 분석하고, 특정 경로를 따라가는 사용자의 경험을 시각화할 수 있습니다. ▼벤치마크 데이터를 바로 확인해보고 싶다면!▼

Live Heatmap(라이브 히트맵)의 Exposure Rate(노출도) 수집 기준

데이터 수집 기준 라이브 히트맵은 조회 당일(오늘) CTA Selector 기준으로 데이터를 표시합니다. 해당 요소의 위치나 id값 등이 변경되었다면 조회 기간별 데이터가 상이하게 보일 수 있습니다. 라이브 히트맵에서 Exposure를 잡는 기준 (1) 표준태그를 감싸고 있는 패딩 요소가 기준으로 노출되는 부분을 체크합니다. 해당 패딩 요소의 정중앙을 다른 표준태그의 패딩 요소가 가리지 않아야만 노출이 되었다고 인식(조건 A)(2) 페이지 방문자 (1PV) 발생 → 페이지 스크롤링 → (조건A)컨텐츠가 랜더링되어 노출 → Exposure로 잡힙니다.

Live Heatmap 이미지 다운로드

Live Heatmap의 타임캡슐 기능으로 현재 보여지는 Live Heatmap의 화면을 pdf로 다운로드 받으실 수 있습니다. ⓘ 로그인 필요 페이지의 경우 캡처 서버가 접근할 수 없어 로그인 화면이 캡처되거나 로딩지연되면서 다운로드가 불가한 점 참고해 주세요. <다운로드 방법>1. 네비게이션 바 우측에 '다운로드 버튼(타임캡슐)'을 클릭해 주세요. 2. 그리고 분석 기간을 선택하신 후 'PDF 다운로드' 버튼을 클릭해 주세요. 3. 해당 기간으로 캡처가 진행되며, PDF로 다운로드하여 조회가 가능합니다.

Live Heatmap이 실행되지 않습니다. 케이스별 해결 방법을 알려주세요.

1. 라이브 히트맵 실행 시 기능 네비게이션 바가 뜨지 않고 웹페이지만 구동되는 경우(1) 코드 설치 유무를 확인해 주세요. (2) 스크립트 차단 여부를 확인해 주세요 (URL 뒤에 붙는 뷰저블리 파라미터가 제거되었는지 확인)ⓘ Live Heatmap 실행 시 페이지 내 설치된 뷰저블 코드가 인식할 수 있도록 파라미터를 전달하는데, 해당 페이지가 파라미터를 붙여서 접속하면 강제로 없애버리도록 구현된 경우일 수 있습니다. - Live Heatmap(뷰저블리)을 오픈한 브라우저에서 개발자도구 > [Console] > Errors 리스트 중에서 Refused 된 beusably 찾기: beusable_viewer, beusable_navigation_off, beusably_lang, beusably_token (3) 랜딩 url과 등록 url이 일치하는지 확인해 주세요.접속시 등록 url 뒤에 붙은 파라미터가 제거되는지접속 시 실제 이동되는 url이 변경되는지순서대로 접근해야하는 페이지인지 -> 랜딩페이지가 '결제수단'인 경우 : 장바구니>배송지>결제수단로그인 이후 가능한 페이지인지 -> 로그인 후 라이브 히트맵 접속 2. 라이브히트맵 실행 시 리다이렉트 반복, 오류 얼럿 뜨는 경우등록한 URL에서 예외 적용되지 않은 파라미터가 추가 발생 시 오류 처리하도록 개발되었을 가능성이 있습니다. -> 해당 URL에 Live Heatmap 관련 파라미터가 추가되어도 오류 처리되지 않도록 차단 해제 후 다시 실행 부탁드립니다. <뷰저블의 라이브히트맵 파라미터>beusable_viewer (알파벳/숫자 조합)beusable_navigation_off (알파벳)beusably_lang (알파벳)beusably_token (알파벳/숫자/기호조합) 3. 502 Bad gateway Error 뜨는 경우 보안망 이슈로 인한 문제일 수 있습니다. -> 사내 프록시에 *.beusably.net 도메인 등록 요청을 부탁드립니다. 4. 사이트 구조 상 URL 직접 입력 시 페이지 데이터 조회되지 않는 경우ⓘ Live Heatmap은 등록된 URL로 바로 접속하여 히트맵을 표현하기 때문에 URL 직접 접근 시 페이지를 바로 띄울 수 없는 구조라면 Live Heatmap에서도 데이터 표현이 어렵습니다. <케이스 예시> 새 창 팝업 형태로 페이지를 띄울 때, 사이트에서 팝업에 필요한 데이터를 조회해서 넘기는 형태일 때한 번이라도 해당 팝업 페이지에 진입한 이력이 있다면 데이터를 불러오지만, 이력 없다면 빈 페이지 노출시키게 됩니다. -> 해당 페이지에 진입한 이후 > 라이브히트맵 실행 > 라이브히트맵 파라미터 부분 복사(beusable_viewer 부터~) > 해당 페이지 URL 뒤에 복사한 파라미터를 붙여넣어 주세요. 5. 모바일 라이브히트맵에서 데스크탑 URL로 리다이렉트 되는 경우데스크탑 URL이 모바일 URL로 리다이렉트 되어, 모바일 라이브 히트맵으로 접속하였을 때 모바일이 아닌 데스크탑 UI가 보이게 되는 현상입니다. -> 에이전트를 모바일로 변경하여 라이브히트맵에 재 접속하신 후 모바일 라이브히트맵이 정상 구동되는지 확인해 주세요. 6. 보안 이슈로 뷰저블리 차단된 경우 (1) 라이브 히트맵 실행 시 파라미터도 삭제되지 않으나 실행되지 않는 현상이 발생합니다. 개발자도구 → Console 에서 beusably 검색하여 차단여부 확인 → 차단해지 필요 (2) 콘솔창에서 CSP 차단이슈로 아이프레임 실행이 차단되었는지 확인 - 라이브히트맵 실행 → 개발자도구 → Console에서 다음과 같은 메시지 여부를 확인 Content-Security-Policy: frame-ancestors 'none';*개발자 도구 이미지 X-Frame-Options 'deny';*개발자 도구 이미지-> 아이프레임 차단으로 라이브 히트맵 실행불가 현상발생 중으로, 등록된 페이지 도메인의 차단을 해지하여 아이프레임 사용 허용 필요. 7. 라이브 히트맵 실행 시 브라우저에서 '권한이 없습니다' 라고 팝업 발생하는 경우(1) 크롬에 설치된 확장 프로그램과의 충돌 가능성 -> 크롬의 확장 프로그램을 사용 정지하거나 삭제 부탁드립니다. (2) 브라우저 보안 업데이트(3rd파티쿠키 지원 중단)로 인한 뷰저블 쿠키값 관련 이슈 (2020.03.24) ⓘ 조치 방법 <Chrome 브라우저>해결 1. 크롬에서 외부 쿠키에 대해 사용 불가한 옵션 풀기(1) 크롬에서 chrome://flags/#same-site-by-default-cookies 접속(2) [SameSite by default cookies] 항목을 [Disabled]로 변경(3) [Relaunch] 실행 해결 2. 크롬에서 타사 쿠키 차단 해제하기(1) 크롬에서 chrome://settings/content/cookies 접속 (크롬 설정 → 개인정보 및 보안 → 사이트 설정 → 쿠키 및 사이트 데이터 메뉴)(2) [타사 쿠키 차단] 토글 [비활성화] 하기 <Safari 브라우저>해결. 사파리에서 모든 쿠키 차단 해제하기(1) Safari 환경설정(2) 개인정보 보호(3) [모든 쿠키 차단] 해제하기

A/B 테스팅 가능 범위 문의

A/B 테스팅을 진행해보려고 하는데, 뷰저블 방식에 대해서 몇가지 문의드려요.1. 히트맵 기능 관련 문의 전체 페이지를 대상으로 테스트하는것이 아닌 일부 요소 (ex 버튼, 배너) 를 AB 테스트 하는경우에도 히트맵 기능이 유용하게 쓰일수 있을지 문의드립니다2. 하나의 페이지에 시점을 다르게 설정한 AB 테스트가 가능할까요? 예) 하나의 페이지에 1~15일 까지 A타입 UI를 적용, 16~30일 까지 B타입 UI를 적용하여 비교 분석 3. AB 테스트 조건값을 설정/변경한 뒤 수집된 데이터는 몇시간 뒤에 확인 가능한가요?4. 테스트 가능 범위는 UI 변경사항 모두 테스트 가능하다고 보면 될까요?5. 다변수실험(MVT) 가능여부 상호 배타 실험 가능 여부 (ex) A 테스트를 보는 사용자에게는 B가 노출되지 않도록 설정이 가능할까요?

User test vs. Usability test - 언제 어떻게 진행될까?

사용자 테스트는 언제, 어떻게 진행될까요? 이것에 대해 알기 위해서는 먼저 사용자 테스트를 왜 시행하는지 이해해야 합니다. 사용자 테스트는 잠재적 고객인 사용자의 니즈를 파악하고, 효과적인 아이디어를 창출하며, 제품 및 서비스의 concept를 도출해 내는 것이 목적입니다. 따라서 사용자 테스트는 새로운 아이디어가 떠오르기 시작할 때부터 진행하는 것이 좋습니다. 그리고 사용자 테스트를 통해 그 아이디어가 효과적인지, 실제 사람들이 이것을 정말 원하는지, 원할지를 알아보아야 합니다. 사용자 테스트는 기획의 초기 단계에서 아이디어를 점검하기 위한 것이므로, UX 기획자뿐만 아니라 마케터도 진행할 수 있습니다. 테스트 방법은 여러가지가 있습니다. 구조화/비구조화 interviewA/B test – 이때의 A/B test는 인터페이스의 디자인을 대상으로 하는 것이 아닌 아이디어 개선(생성) 전과 후에 대한 평가로 진행됩니다.FGI 앞의 테스트 방법의 예시처럼 사용자 테스트는 주로 대면, 질적 조사 방법을 사용하여 이루어집니다.반면에 사용성 테스트는 **사용성 평가(Usability Evaluation)**라는 말이 더 어울리는데요, 제품/서비스의 개선 목표를 가지고 사용자의 제품 사용 모습을 관찰하여 행동과 이유를 파악하는 것이 목적입니다. 특히 사용자에게 태스크를 부여하는 것이 주된 테스트 방법입니다.사용성 테스트는 제품의 기능적 이슈를 찾는데 집중하며, 기능을 개선하고 효과적인 솔루션을 도출하는 것을 목표로 합니다. 사용자 테스트를 기획 초기에 주로 실시하는 것과 달리, 사용성 테스트는 프로토타입이나 디자인이 어느 정도 만들어졌을 때 디자인 평가를 위해 진행됩니다. 사용성 테스트 방법 예시는 다음과 같습니다. A/B test – 이때의 A/B test는 기존, 개선된 디자인을 비교하는 테스트 방법입니다.First click testQuestionnaire testPrototype test사용자 테스트와 달리 사용성 테스트는 대면/비대면 자유롭게 진행되고, 질적/양적 조사 방법을 다양하게 활용하는 것이 특징입니다. 지금까지 사용자 테스트와 사용성 테스트의 시행 방식 차이와 종류에 대해 알아보았습니다! 감사합니다:)

GA에서의 PV와 히트맵에서의 PV가 다른 이유

안녕하세요. 현재 GTM에 뷰저블 태그를 입력하여 무료 기간으로 사용중입니다.향후 실제 적용시 비용 등을 확인하기 위해 GA와 뷰저블 히트맵의 PV를 체크하는데 너무 많은 수가 차이가 나고 있습니다.혹시 이 부분 어떤 이유인지 알 수 있을까요? 아래 스크린샷은 동일 기간, 동일 페이지에 대한 PV입니다.

GNB 개편 성과 분석 리포트, 다들 어떻게 쓰세요?

안녕하세요, 저는 이커머스 서비스를 운영하고 있는 서비스기획자입니다.저희 제품 카테고리가 좀 변경/추가되면서 GNB를 좀 개편하게 되었는데요.얼마전 GNB 개편 전/후레이아웃 성과를 분석하라는 과제를 진행하게되어 저희가 이용 중인 뷰저블을 활용해서 분석 및 리포트를 작성해보려고 합니다.리포트 작성은 처음이라서, 혹시 요런 내용의 분석리포트를 작성해 보신 경험이 있으신 분께 분석팁을 좀 얻고 싶어서요~!일단 제가 좀 살펴본 바로는 아래 히트맵을 통해서 세 지표를 중심으로 GNB 메뉴별로 분석해보는 것인데요.- Click 히트맵 : Click PV Rate, 노출대비 클릭률(Scroll to click)- Scroll, Exposure 히트맵 : 도달률/노출률좀 하다보니 이게 어떤 기준으로 클릭률이 높다/낮다를 판단할 수 있는지 좀 애매한 부분도 있어서ㅠㅠ 어떻게 구분해서 분석하시는지 좀 궁금해요.꿀팁 좀 부탁드립니다.ㅠㅠ

모바일 히트맵이 필요한데 iOS, AOS 모두 지원하나여?

뷰저블 이제 사용하려고 검토 중이라 질문이 많네요 ㅎㅎ 저희가 모바일 히트맵이 필요한데 뷰저블에서 iOS, AOS 모두 지원하는게 맞죠~?

누구나 쉽게 따라 하는 UX 디자인 KPI 수립하기

UX디자인을 분석하기 위해서는 정량화된 목표가 필요합니다. 이 목표는 ‘KPI’로써 쉽게 수립할 수 있습니다. 이번 포스팅을 통해서 UX 디자인을 위한 KPI를 수립하는 방법과 주요 예제를 소개합니다. 기획자와 디자이너는 ‘서비스 운영’이 론칭보다 더욱 중요합니다. 기획자와 UX 디자이너의 가장 중요한 역할은 서비스 론칭이 아닙니다. 서비스 론칭을 넘어 운영을 통해 ‘비즈니스 상의 목표를 달성’하는 것이 되어야 합니다. 운영을 하며 비즈니스 목표를 달성하고 있는지를 측정-분석하고, 문제점이 발견된다면 이를 개선함으로써 계속해서 발전시켜나가는 것이 중요합니다.서비스 운영은 비즈니스 목표 달성을 위한 가장 중요한 단계입니다. 보통 UX 방법론이라 하면 사용자 여정 맵이나 퍼소나 등의 사용자 심리를 가시화하는 것들을 떠올리곤 합니다. 이 두 가지 모두 타깃을 명확히 한다는 점에서 중요하지만 비즈니스 성과로 반드시 직결된다고는 말할 수 없습니다. 비즈니스 성과 달성을 위한 활동 기준과 목표를 보통 업계에서는 KPI(핵심 성과지표)라 부릅니다. UX 디자인에서도 이 KPI를 도입하여 ‘얼마나 더 뛰어난 사용자 경험을 제공하는가?’를 정량화하고, 서비스를 이 기준에 따라 운영-개선함으로써 비즈니스 목표를 달성해나갈 수 있어야 합니다. KPI의 기본적인 개념과 좋은 KPI의 3가지 특징 KPI는 Key Performance Indicator로 핵심 성과지표라 부릅니다. 사이트가 지니는 목표 달성도를 나타낼 때 중요한 정량적 지표가 됩니다. KPI는 ‘무엇을, 언제까지 달성할 것인가’를 정리하여 달성 기준과 수치를 나타내는 것으로 ‘최종적인 목표’라고 볼 수 있습니다. 비슷한 용어로는 KGI(Key Goal Indicator, 핵심 목표지표)라는 것이 있습니다. KGI는 사이트의 목적 그 자체가 되는 정량적인 지표를 의미합니다. ‘중간 목표’라고 이해하면 쉽습니다.좋은 KPI에는 보통 세 가지 특징이 있습니다. 여러분의 KPI는 어떤가요? 함께 비교하며 살펴보세요.(1) 측정과 비교가 가능합니다.체류 시간, 사용자 태스크 달성률 등 측정이 가능하고 비교가 가능해야 합니다.(2) 수치를 통해 행동을 일으킬 수 있습니다.서비스 분석은 기본적으로 ‘개선’을 위해 실시하는 것입니다. 지표를 확인하여 개선 행동으로 이어질 수 있는지, 다시 말해 기업에 영향력을 줄 수 있는지 여부를 파악하세요.(3) 누구나 이해하기 쉽습니다.조직의 누구나 KPI를 보면 바로 이해할 수 있을 정도로 알기 쉬워야 합니다. 업종 별 대표적인 KPI (1) 기업 사이트 및 영업용 사이트기업 사이트의 목표는 매출이 되기보다 ‘근본적인 목적 달성 여부’가 무엇인지를 먼저 생각해야 합니다. 보통 다음 수치들을 KPI로 삼을 수 있습니다.– 스토어 팜이나 소셜 커머스 등 ‘커머스 사이트로 이동하는 배너 또는 링크의 클릭 수’를 KPI 대상으로 삼을 수 있습니다.– 신상품이나 신규 경영진 소개 등 기업이 ‘가장 주력해서 홍보해야 하는 콘텐츠의 페이지 뷰 수’를 목표로 삼을 수 있습니다. 이 외에도 신상품 또는 주력상품 페이지의 체류 시간을 목표로 설정할 수도 있습니다.– 기타 고객의 자료 청구 페이지 클릭률, 평가판 서비스 다운로드 수 등이 있습니다.(2) 미디어 사이트페이지 뷰 수, 회원가입률 등을 목표로 삼을 수 있습니다. 마케팅 측면에서 본다면 페이지 뷰 수가 근본적인 수익원이 됩니다. 페이지를 어떻게 나눌 것인지를 고민하면 페이지 뷰 수에 영향을 미칠 수 있습니다.(3) 커머스 사이트매출이 보통 가장 최종 목표가 됩니다. 매출을 달성시키기 위한 회원 가입자 수, 1일 또는 1개월당 방문한 사용자 수, 상품 상세 페이지 도달률 등을 높이는 등 다양한 KPI를 세울 수 있습니다.(4) 소셜 네트워크유저 인게이지먼트가 중요한 KPI가 됩니다. 좋아요! 클릭수, 코멘트, 공유수 등을 목표로 삼을 수 있습니다. 누구나 따라 할 수 있는 UX 디자인을 위한 KPI 수립하기 UX KPI는 보통 서비스 기획 실시 전 퍼소나를 설정할 때 함께 수립하면 좋습니다. 그럼 서비스를 실제로 디자인해나갈 때 이 KPI를 염두하며 업무에 임할 수 있게 됩니다.첫째, 어떤 사람의 어떤 문제를 어떤 서비스로 해결하고 싶은지를 정의 내립니다.뷰저블 홈페이지의 목표는 ‘UX 디자인 분석에 관심 있는 사용자에게 뷰저블의 다양한 기능과 가치를 소개해준다.’가 됩니다.둘째, 서비스가 사용자에게 어떤 경험을 제공하는지 구체적인 가치를 정의 내립니다.서비스가 유저에게 어떤 경험을 제공하는지를 구체적으로 정의 내립니다. ‘사용자에게 가장 제공하고 싶은 경험이 무엇인가?’라는 질문에 대답하면 쉽게 정리할 수 있습니다. 뷰저블에서는 ‘웹 서비스 분석 및 개선을 위한 뷰저블이라는 서비스 정보를 알 수 있다’, 이를 통해 ‘뷰저블을 이용한다’가 됩니다. 이 핵심가치는 KPI를 달성하기 위한 사용자 경험의 기본이 입니다.셋째, KPI를 수립합니다.무엇을 달성하면 위 두 번째 항목에서 결정한 서비스 핵심 가치가 만족되는지를 고민하면 쉽게 수립할 수 있습니다. 뷰저블에서는 회원 가입자 수, 뷰저블 사용하기 버튼 클릭 수 등을 KPI로 수립하고 있습니다. 뷰저블은 전체 페이지뷰 수 대비 Try Beusable 버튼 클릭률을 주요 KPI 중 하나로 삼고 있습니다. 넷째, KPI 측정을 위한 기간을 설정합니다.지속적으로 UX를 개선시키기 위해서는 ‘기간’을 두는 것이 무엇보다 중요합니다. 뷰저블은 주 단위, 월 단위로 위 KPI를 측정합니다. KPI를 측정할 때 사용자를 매우 구체적으로 정의 내려야 판단 오류를 피할 수 있습니다.예를 들어 전체 100명 중 한 명의 특정 유저 한 명이 중복해서 ‘뷰저블 시작하기’ 버튼을 100번 클릭하고 99명의 유저는 그냥 떠나버린다고 생각합시다. 100명의 유저가 고루 100번 클릭했을 때와 수치는 똑같을지라도 근본적인 의미는 매우 달라집니다.마지막, 뷰저블을 사용하여 ‘수립한 KPI’를 바탕으로 서비스를 분석-개선해 나갑니다. 뷰저블의 클릭 히트맵과 Segmenting CTA 기능등을 활용하면 목표 달성 여부를 파악할 수 있습니다. 위에서 정한 KPI를 바탕으로 뷰저블을 통해 계속해서 목표 달성 여부를 확인하고, 서비스를 반복해 개선합시다. 서비스의 성장은 론칭이 아닌 ‘운영’에서 판가름 납니다. 서비스 운영상에 이 지표를 어떻게 달성해나갈 것인가를 생각해 보도록 합시다.여러분의 KPI가 결정되었다면 뷰저블을 통해 서비스 분석을 본격적으로 시작해 보세요! :)

UX Case Study [8] : 이커머스 사이트 내 검색 기능 사용자 니즈 분석하기

안녕하세요, 뷰저블 UX Researcher입니다. 오늘 다뤄볼 주제는 이커머스 사이트 뿐만 아니라, 커뮤니티 등에서 아주 중요한 역할을 하는 '검색' 기능과 관련한 페이지에 대한 분석이에요. 1. 분석할 페이지와 분석 목적 파악이커머스 마케터라면 특히, 주력으로 판매하는 제품군의 주요 고객의 니즈를 파악해서 마케팅 전략을 세우는 것이 무엇보다 중요한데요,그래서 이번 분석을 통해 인기 판매 상품인 '노트북'을 검색하는 고객들은 어떤 니즈를 가지고 있는지, 또 '검색 결과 페이지'를 개선한다면 어떤 정보가 추가 되어야할지 등의 중요한 정보를 얻고자 해요. 2. 분석 대상 파악하기'노트북'을 검색한 고객의 니즈를 확인하기 위해서, 검색 결과 페이지를 통해 상품 상세 페이지를 진입한 고객의 행동을 비교 분석해보는 방법이 있는데요, 그 중 하나의 지표로 어떤 요소로 많이 전환 했는지 알 수 있는 TOP 10 클릭 순위를 분석해 봤어요. 3. 분석 결과 해석 및 인사이트 도출글 상세 상세 페이지의 유입경로를 각각 '전체' vs '검색 결과 페이지'로 설정한 후 각 TOP 10 클릭 요소를 비교해 보니,'검색 결과 페이지'에는 있고, '전체'에는 없는 요소가 있었는데, 그게 바로 '1:1 문의하기' 버튼이에요. [Mobile Click Heatmap] 상품 상세 페이지의 TOP 10 Click 요소 (유입경로: 전체 vs 검색 결과 페이지)또 라이브 히트맵에서 노출 대비 클릭률을 비교해봐도,실제로 '검색 결과 페이지'에서 유입된 고객의 '1:1 문의하기' 노출 대비 클릭률이 전체 대비 5배 가량 높은걸 확인할 수 있어요. [Mobile Live Heatmap] 상품 상세 페이지의 '1:1 문의하기' 버튼 노출 대비 클릭률 (유입경로: 전체 vs 검색 결과 페이지) 이와 같은 데이터들을 종합해 봤을 때, '노트북'을 검색한 고객은 1:1 문의하기에 대한 니즈가 있어 검색 기능을 이용하는 패턴이 있음을 쉽게 파악할 수 있어요. 4. 개선 인사이트 특정 상품 1:1 문의에 대한 니즈를 가진 고객들이 굳이 검색 결과 페이지를 거쳐 상세 페이지까지 진입할 필요 없이 더 빠르게 니즈를 충족할 수 있도록, 검색 결과 페이지의 각 상품에 '1:1 문의하기' 아이콘을 제공해 보는 것은 어떨까요? 이처럼 유입 경로에 따른 고객의 클릭 순위, 클릭률 비교를 통해 특정 제품을 검색하는 고객의 니즈를 분석해 보았는데, 어떠셨나요? 검색 기능이 있는 사이트라면, 여러분들께서도 직접 이런 분석 방법을 활용해 보세요! 분석 결과 해석에 어려움이 있거나, 다른 현업자들의 의견이 궁금하다면 댓글과 포럼 게시판에 남겨주세요! :)

UX Case Study [6] : 상품 목록 페이지(PLP) 상단에 노출할 컨텐츠 결정하기

안녕하세요, 뷰저블 UX Researcher입니다. 오늘은 스크롤 히트맵의 주목도 그래프(Attention graph) 분석을 통해고객의 관심도 높은 컨텐츠를 확인하여 개선안을 도출했던 사례를 소개해 드리려고 해요. 1. 분석할 페이지와 목적 파악하기다양한 제품을 판매하는 이커머스 사이트의 '전체 상품 목록' 페이지를 분석한 내용인데,분석을 진행한 목적은 '각 제품군별 상품 목록 페이지(PLP)'에 진입 시 노출되는 상단 영역에 노출할 컨텐츠를 찾고자 함이에요. 분석할 '전체 상품 목록' 페이지는 (1)프로모션 (2)인기 상품 (3)이벤트/기획전 (4)패키지 상품 컨텐츠로 다양한 제품과 이벤트 등을 소개하고 있고, 상단에는 '각 제품군별 상품 목록 페이지(PLP)'로 진입이 가능한 'LNB 메뉴 영역'이 있어요. 'LNB 메뉴 영역' 내 각 제품군(PC, 노트북, 패드, 워치)을 클릭한 고객들이 (1)~(4) 중 어떤 컨텐츠에 가장 관심을 많이 보이는지 확인하면, 각 PLP에 어떤 컨텐츠를 노출하면 좋을지 쉽게 결정할 수 있겠죠? [데스크탑: 전체 상품 목록 페이지] 2. 분석 대상 파악하기'LNB 메뉴 영역'에서 각 제품군을 클릭한 고객들의 니즈를 파악하기 위해 Segmenting CTA 기능을 사용했어요. 각 제품군을 클릭한 고객들의 주목도 그래프를 분석하여,각 사용자들은 (1)~(4) 중 어떤 곳에 관심을 보이는지 확인해 보기로 했어요. 3. 분석 결과 해석하기각 제품군을 클릭한 고객들의 주목도 그래프를 '전체 고객'의 그래프와 비교했을 때,제품군별로 주목도 그래프가 높아지는 구간이 확연히 다른 것을 확인할 수 있죠? PC는 '(1)인기상품' 영역에, 노트북은 '(2)이벤트/기획전' 영역에,패드와 워치는 '(4)패키지 상품' 영역에 가장 관심도가 높았다고 해석할 수 있었어요. [데스크탑] : 전체 고객의 주목도 vs 각 제품군을 클릭한 고객의 주목도 그래프 4. 개선 인사이트제품군별로 고객의 관심이 높았던 컨텐츠를 '각 제품군의 상품 목록 페이지(PLP)'에 노출하여,고객의 탐색과 체류시간을 늘려보는 방향으로 제품 목록 페이지를 개선하는 방안을 검토해 보면 어떨까요? 이번 편에서는 주목도 그래프로 고객의 니즈를 파악하는 방법을 알아보았는데요,뷰저블로 고객의 니즈를 파악할 수 있는 정말 다양한 방법을 꼭! 실제 분석하실 때 활용해 보시고, 분석 결과 해석에 어려움이 있거나, 다른 현업자들의 의견이 궁금하다면 댓글과 포럼 게시판에 남겨주세요! :)

UX Case Study [2] : 분석 목적에 따라 히트맵 / 주요 지표 활용하기

안녕하세요, 뷰저블 UX Reseacher입니다. 지난 포스트( https://forum.beusable.net/ko/post/456 )에서는 웹페이지 UX 분석을 위한 첫 단계로 '페이지 등록 절차' 대해 다뤘다면,오늘은 분석 목적에 따라 활용할 수 있는 다양한 기능들과 지표 활용 방법에 대해 설명해 보려고 해요. 일반 가이드에는 없는, UX Researcher만의 해석 꿀팁들이 담겨있으니 주목해 주세요! :) 1. PC/Mobile : Click/Tap Heatmap 유효클릭/탭 : 사용자의 전환율 파악 가능무효클릭/탭 : 사용자의 pain-point 파악 가능무효 클릭이란, 링크가 아닌 곳에 클릭이 발생한 경우를 말함 [Desktop] Click Heatmap ☻ 분석 팁!분석에 활용되는 주요 유효 클릭 지표와 해석 방법지표정의분석 TipClick(Tap) RateClicks/페이지 내 전체 clicks(%): 전체 페이지 내 클릭(탭) 비중전체 관심 중, 해당 콘텐츠에 대한 비중으로 해석Click/(Tap) PV Rate(%)Click PV(Unique Click)/전체 PV(%): 해당 콘텐츠를 클릭한 PV의 규모 도달률/노출률 대비 Click PV Rate를 확인하면, 실제 해당 콘텐츠의 전환 성과로 볼 수 있음 Hover to Click RateClicks / Hover (%): 관심을 가진 사람 중 클릭으로 이어진 비중 낮다면? 왜 관심으로 이어지지 않았을지 검토 필요높다면? 고객의 니즈에 부합한 콘텐츠로 해석 Hover to Click time Hover한 사람이 클릭까지 걸린 시간 짧다면? 결정까지 어려움이 없었다고 해석길다면? 사용자가 망설였거나, 이해하지 못했을 가능성Scroll to Click/Tap(%)특정 콘텐츠/영역에 도달한 사용자 대비 해당 요소를 클릭한 사용자의 비율 사용자 도달 대비 전환 효율Double tap rate전체 더블 클릭 대비 해당 요소에 발생한 더블 클릭 비중100%라면? 해당 요소에만 더블 클릭이 발생했다고 해석로딩 속도가 느리진 않은지 클릭이 원활하게 이뤄졌는지 점검 필요 2. PC : Move Heatmap - 사용자들의 관심도 파악 가능[Desktop] Move Heatmap Move 히트맵을 Click/Scroll 히트맵 지표들과 교차 분석하면 인사이트를 쉽게 얻을 수 있어요! 클릭 vs 호버호버 > 클릭 : 관심이 많으나 전환으로 이어지지 않은 콘텐츠호버 < 클릭 : 관심이 적으나 많은 전환으로 이어진 콘텐츠클릭 = 호버 : 관심도 많고 전환도 높은 콘텐츠 [Desktop] Click vs Move Top 10 요소 비교 도달 vs 호버사용자 도달률이 낮은데 높은 관심의 콘텐츠 확인사용자 도달률이 높은데 낮은 관심의 콘텐츠 확인 3. PC/Mobile: Scroll Heatmap (1) 히트맵 색상 컨텐츠 영역까지 얼마나 많은 사용자가 도달했는지 파악 가능주요 컨텐츠까지의 도달률이 너무 낮다면, 위치 조정 등을 통해 우선 스크롤 노출률/도달률 자체를 높이는 방안 검토 필요 (2) Attention Graph (도달률X체류시간)구간별로 얼마나 숙독/주목했는지(체류시간) 파악 가능캐러셀이나 자동 애니매이션처럼 컨텐츠가 많은 구간인데 오히려 주목도가 낮아지거나 비슷하다면, 컨텐츠 개수나 영상 길이를 줄이는 방안 검토 필요 신규/재방문, 유입경로별 주목도를 비교해보면 각 그룹별 관심도 차이를 확인할 수 있음페이지 내 상대적인 주목도를 표현한 것이기 때문에, 다른 두 그룹의 체류시간을 비교할 땐 각각의 구체적인 수치를 계산하여 비교가 필요함 [Desktop] Scroll Heatmap내 주목도 그래프 > 주목도가 낮아지는 구간 (3) 페이지 효율 Average Fold를 기준으로 상/하단 영역의 클릭/호버수 비교를 통해 페이지 효율을 파악만약 페이지 하단의 길이가 더 짧은데 클릭/호버 인터랙션이 더 많다면, 하단의 효율이 더 좋다고 판단할 수 있음 페이지 효율을 확인할 수 있는 지표 (4) 스크롤 중단율사용자가 어느 구간에서 가장 많이 중단하는지, 이탈률이 가장 높은 콘텐츠 구간을 구체적인 픽셀로 확인이 가능함구간별 막대 길이(도달률)의 차이가 클 수록 중단율이 큰 구간으로 해석할 수 있음스크롤 중단율이 가장 높은 구간을 확인할 수 있음 4. Mobile: Zoom/Swipe Heatmap (1) Zoom 어떤 컨텐츠/영역에서 더 자세히 또는 확대해 보고싶은 니즈가 있었는지 파악 가능이커머스 사이트에서 특정 상품 상세 이미지에 Zoom in 인터랙션이 발생했다면 추가 이미지 제공이 필요하진 않을지 검토 필요 (2) Swipe 어떤 컨텐츠/영역에서 여러번 스와이프가 일어났는지 파악 가능상/하 스와이프: 화살표가 수가 많다면 해당 영역을 여러번 재탐색 했다고 해석할 수 있음 좌/우 스와이프 : 스와이프가 일어날 곳이 아닌데 발생했다면? 착각을 주고 있진 않은지 UI 점검 필요 5. Path Plot 사용자 그룹별 탐색 과정, 경로를 비교할 수 있음 평균 사용자 그룹: 평균적인 활동 범위를 가진 그룹FANs 사용자 그룹 : 적극적으로 페이지(서비스)를 탐색한 그룹상위 25%의 높은 활동률을 보이는 그룹으로 ‘잠재 고객’으로 이해할 수 있음전환한 사용자 그룹 : 설정한 그룹 중 전환한 사용자의 탐색 흐름 어떤 콘텐츠를 살피고 전환했는가 파악전환하지 않은 사용자 그룹 : 설정한 그룹 중 전환하지 않은 사용자의 탐색 흐름 사용자들의 pain-point 파악[Desktop] 평균 그룹 vs FAN 그룹의 Path Plot 비교 ☻ 분석 팁!Fans group & Non-Conversion로 세그멘팅하여,충성도는 높지만 전환하지 않은 유저들의 특징 파악하고자 할 때 활용할 수 있음 6. Live Heatmap SPA 구조의 페이지 혹은 햄버거 메뉴와 같이 동적인 요소, 페이지 길이가 가변적일 때 데이터 확인 & 컨텐츠의 효율 측정 가능[Desktop] Live Heatmap > 숨어있는 레이어와 햄버거 메뉴의 노출 및 클릭 지표 (1) 노출률 요소가 사용자 화면에 노출된 비율만약 페이지 길이가 가변적이라 스크롤 데이터 확인이 어려운 경우 라이브 히트맵의 Click PV Rate/노출값으로 대체 가능노출 자체가 너무 적다면, 레이아웃 변경 등을 통해 노출 자체를 늘리는 것을 먼저 검토 (2) 관심율 호버 PV/노출 PV (%)해당 콘텐츠를 본 사용자가 어느정도의 관심을 보였는가컨텐츠에 대한 소비 효율을 확인할 수 있음 7. User Analytics (1) 유입경로(직전 URL로 구분)사용자의 특성과 니즈 파악 가능도메인 상이 여부에 따라 내부/외부로 구분외부 유입 중 각 유입(검색/SNS 등) 채널별 비중은 어떤지 확인 각 유입(검색/소셜)이 전체 중 차지하는 비중은 얼마인지 확인 가능 (2) 전환경로내부 유입이 많은 경우내부에서 어떤 정보를 획득하고 다른 페이지로 전환된 유저인지 파악 가능외부 유입이 많은 경우 어떤 곳에 관심을 보이는지, 외부 사용자 특성 파악 가능 8. Segmentation (1) Referrer(유입경로)직전 URL로 구분됨유입 경로별로 사용자의 특징 비교 가능 (2) 신규/재방문 사용자신규/재방문 사용자 별로 히트맵의 특징 비교 가능 콘텐츠 제공 목적, 타겟에 따라 신규/재방문 유저를 구분하여 볼 수 있음 (3) Segmenting CTACTA를 클릭한/클릭하지 않은 사용자에 따른 특징 비교 가능 구매로 전환한 사용자와 그렇지 않은 사용자 비교 분석클릭한 사용자가 유입된 직전 URL 마케팅 효과 측정 or 마케팅을 집행할 채널을 정할때 활용 9. Funnel / Session 리포트 (1) Funnel 분석개선하고자 하는 프로세스를 퍼널로 등록하여 페이지별 전환율 확인 ‘최종 목적지까지의 전환율’ 향상을 위한 개선점 파악 가능각 페이지별 이탈률을 계산하여 이탈률이 가장 높은 구간의 페이지를 발견하고 개선점 찾아보기경로별 User Flow를 확인하여 예상대로 유저들이 움직이는지 파악 가능 뷰저블 홈페이지 Funnel 등록 : 메인 > Features > Pricing(최종 목적지) (2) Session Report 개별 사용자 상세 탐색 분석전환된, 전환되지 않은 유저들의 개별 흐름을 확인하여 pain-point 분석 가능 [Session Report] Features 페이지에 방문한 한 고객의 탐색 흐름 오늘은 다양한 뷰저블의 기능들을 지표 해석에 실제로 활용하는 꿀팁들을 알려 드렸는데요, 직접 한번 활용해보시고 분석 결과 해석에 어려움이 있거나, 다른 현업자들의 의견이 궁금하다면 댓글과 포럼 게시판에 남겨주세요! :)

SPA가 뭔가요? SPA의 개념부터 분석 방법까지 알아보자!

😃안녕하세요, 뷰저블 팀입니다.😀 오늘은SPA가 무엇이고 방문한 웹 사이트가 SPA인지 확인하는 방법에 대해서알아보겠습니다.1. SPA가 무엇인가요?SPA는 Single Page Application의 약자로 URL이나 페이지가 바뀐 것 같더라도 실제로는 콘텐츠만 갱신되는 형태의 단일 페이지를 말합니다. 일반적으로 우리가 방문하는 웹 사이트는 보통 MPA (Multi Page Application)인데요, 이는 사용자가 한 페이지에서 다른 페이지로 이동할 때 새로운 페이지의 정적 리소스를 다시 다운로드하는 방식을 사용합니다. 즉, MPA는 여러 페이지의 연결로 이루어져 있기 때문에 콘텐츠를 추가하고 싶으면 원하는 만큼 페이지를 추가할 수 있으나 페이지 이동 시 새롭게 리소스를 가져오기 때문에 느린 이동 속도를 가지게 됩니다. 하지만, SPA는 하나의 페이지로 이루어져 있습니다. 때문에 사용자의 인터랙션으로 요청된 새로운 콘텐츠에 대해서 전체 페이지를 다시 불러오지 않고 해당 콘텐츠만 변경되는 특징을 가지고 있습니다. 이 특징 덕분에 새로고침이 발생하지 않아 로딩 시간이 굉장히 빠른 것이 장점입니다. 2. SPA 페이지는 어떻게 확인하나요?현재 내가 방문한 웹 사이트가 SPA인지 MPA인지 확인하고 싶다면 아래 방법을 따라 해보세요!이번에는 예시를 보여드리기 위해 ‘Beusable 공식 홈페이지’와 ‘뷰저블 포럼 페이지’에서 SPA 페이지 확인 방법을 실행해보겠습니다. 먼저, Beusable 공식 홈페이지에 들어가 개발자도구 > Sources 탭 > Page 탭을 열어봅시다. 이 때 다른 페이지로 전환하는 버튼을 누르게 되면(A페이지)(B페이지로 전환 했을 때)오른쪽에 보이는 Page 탭에서 리소스가 다시 새로고침되고 있습니다!따라서 Beusable 공식 홈페이지는 MPA 페이지군요! 다음으로 뷰저블 포럼 홈페이지에 들어가 동일한 방법으로 개발자 도구를 열어봅시다. 이 후 다른 페이지로 전환하는 버튼을 누르게 되면(A페이지)(B페이지)MPA 방식처럼 리소스가 새로고침되지 않는 모습을 보여주고 있습니다.이처럼 전환 버튼을 눌렀을 때 url은 변경되지만 리소스가 새로고침되지 않는 뷰저블 포럼 페이지는 SPA 페이지라고 볼 수 있습니다. 3. SPA 페이지를 뷰저블로 분석하고 싶어요!뷰저블 히트맵은 MPA 방식의 웹사이트 기준으로 PV를 측정하는데요, 사용자가 A페이지에서 B 페이지로 진입해 페이지 리소스가 새로고침될 때 B 페이지의 1pv를 수집하게 됩니다. 하지만 SPA 방식의 웹 사이트는 페이지가 하나이기 때문에 처음으로 진입한 페이지에서만 1PV가 측정되고 이후에 다른 페이지로 전환해도 리소스가 새로고침되지 않기 때문에 진입 이후의 페이지에서는 PV가 측정되지 않는다는 단점이 있습니다. 때문에 웹 사이트가 SPA 방식으로 구성되어 있다면 히트맵 상단 우측에 있는 SPA 토글을 체크해야 원하는 페이지의 데이터가 수집할 수 있습니다. SPA 분석 토글을 체크하면 URL이 바뀌는 것을 기준으로 PV를 측정하기 때문에 SPA 페이지에서도 정확한 PV 측정이 가능해질 수 있습니다.지금까지 SPA가 무엇인지, SPA 페이지 확인 방법과 히트맵 분석 방법에 대해서 알아보았습니다!이 포스팅을 통해 SPA에 대한 궁금증이 풀리셨기를 바랍니다! 또 SPA 페이지는 원래 A/B Testing 기능이 지원되지 않았는데조만간 UX Writing이 지원되는 기능 업데이트가 있을 예정입니다.SPA 기능 업데이트에 대한 포스팅도 놓치지 말고 많은 관심 부탁드립니다! 😊