PC에서 모바일로, 무게중심이 점차 옮겨가는 요즘,
화면도 작아지고 마우스도 없는 모바일 환경에서 고객은 어떻게 반응할까요?
결론부터 말씀드리면 모바일에 히트맵을 적용하여 ‘터치’의 패턴을 분석하면 우리가 몰랐던 고객의 니즈와 고객이 느끼는 불편함을 발견할 수 있답니다.
최근 스마트폰 보급률이 80%에 육박하면서 모바일로 쇼핑하는 사람들이 빠르게 늘어나고 있습니다. 이렇게 시장이 변화하는 흐름에 맞춰 많은 기업들이 모바일웹을 제작하여 모바일 쇼핑 수요를 잡는데 안간힘을 쓰고 있는데요. 유통업계는 앞으로 5년 안에 모바일 시장이 인터넷 시장을 따라잡을 것으로 예상된다고 합니다.
그럼 먼저, 스마트폰으로 모바일 쇼핑을 즐기는 소비자들은 어떤 기준으로 쇼핑을 하는 것일까요?
최근 설문조사 결과에 따르면 소비자들이 모바일 쇼핑을 할 때 가장 중요시 하는 것은 ‘사용자 편의성(UX)’으로 나타났습니다. 과반수에 가까운 48%의 응답자가 사용자 편의성을 쇼핑 선택의 척도로 삼고 있었으며 25%는 ‘할인 이벤트’, 11%는 ‘거래 안전성’을 꼽았습니다.
모바일웹은 작은 화면을 통해 정보를 전달하며, 방문자들은 이동하면서 접속하기도 하고, 주로 한 손으로 터치를 하면서 전환을 일으키기 때문에 전환구조가 간단하게 구성되어 있는 것이 특징입니다. 그래서 모바일웹을 운영하실 때는 사용자 경험(UX)을 반영하는 것이 웹사이트를 운영할 때보다 더욱 중요합니다.
이처럼 모바일웹이 많이 활용되면서 모바일 분석에 대한 수요도 갈수록 높아지는 만큼, 모바일웹에 히트맵을 적용하여 방문자와 UI 간 관계를 분석한 사례를 소개해드리겠습니다.
아래는 봄맞이 이벤트를 진행하는 대형 쇼핑몰의 모바일웹에 히트맵을 적용한 사례입니다.
Step 1. 봄을 맞이 하여 상큼하게 새로운 이벤트를 진행하고자 이벤트 페이지를 만들었습니다.
히트맵을 적용해보니 모바일 첫화면에 있는 이벤트 세일 문구중 특히 숫자에 고객들의 터치가 집중되는 것을 확인할 수 있으시죠?
처음 이 히트맵을 보고 운영자는 2가지 가설을 세웠습니다.
첫 번째, 숫자를 터치한다는 것은 고객들이 가격에 민감하다는 증거일 것이다.
두 번째, 방문하는 고객이 오른손잡이가 많기 때문에 우연히 오른쪽 부분을 터치 했을 수도 있다.
그리고 가설을 확인하기 위해 텍스트와 이미지의 위치를 변경해 보았습니다
.
Step 2. 새로운 이벤트 페이지에서는 같은 지점에 터치가 많이 이루어지지 않는 것으로 확인되어, 이 사이트 방문자들은 가격에 민감하며 무의식적으로 숫자에 반응했다는 것을 알 수 있었습니다.
Step 3. 그런데 새롭게 바꾼 이벤트 페이지에서는 고객들이 가운데 띠 모양 배너를 많이 터치하고 있는 것을 볼 수 있는데요.
사이트 운영자는 새로운 히트맵의 형태를 보고 이 부분을 고객들이 많이 터치하기 때문에 ‘이 영역이 핫(HOT)한 것 같으니 롤링배너를 넣으면 어떨까?’ 라는 생각을 하였습니다.
그러나 실제로 운영자가 고객의 터치 패턴을 따라 터치해보면서 확인해 본 결과, 해당 부분에 링크가 연결되어 있지 않아서 고객들이 상세페이지로 넘어가기 위해 계속 터치하고 있었던 것이었습니다. (처음 만들었던 이벤트페이지에서는 해당부분에 링크가 있었으나 새로운 이벤트 페이지를 만들면서 텍스트 영역과 터치 영역을 분리하였습니다.) 그래서 해당 텍스트 영역에 링크를 연결하여 고객이 원하는 정보를 빨리 볼 수 있도록 UI를 수정하였습니다.
모바일웹은 이처럼 텍스트 영역과 터치 영역이 분리되어 있는 경우가 많아 사용자들이 어려움을 겪는 경우가 많습니다. 따라서 링크가 한 개인 경우는 링크영역을 분리하지 않도록 하여 터치를 쉽게 할 수 있도록 해야 합니다.
히트맵™ 활용 Tip!
위 사례와 같이 현실성 있는 사용자 경험을 빠르게 모바일웹에 반영하면 고객의 전환율을 높이는데 도움을 줄 수 있습니다. 그리고 모바일웹이 성공하기 위해서는 운영자가 방문자의 터치 패턴에 지속적으로 관심을 가지고 고객의 입장에서 전환에 이르기까지 어렵지는 않은지, 사이트에 문제는 없는지, 문제점이 있다면 신속하게 해결해주어야 합니다.
모바일에 히트맵을 적용해 본 결과 어떠신가요? 매우 흥미로우시죠? 여러분의 모바일웹에도 한번 적용해서 확인해보세요.
분명 기존에 모르고 있던 고객의 니즈와 고객이 느끼는 불편을 찾으실 수 있을 겁니다.
“70%” 라는 텍스트에 터치가 집중된것은 이해가 되나, 조금 다른 관점에서 볼 필요가 있어 보이는 자료이네요. 가령 “위-아래” “좌-우”의 분포를 보이는 것과 “우측 하단”의 분포를 보이는것으로 봐서는 해당 페이지에 접근 사용자가 다른 정보를 찾기위해 좌우 혹은 상하 스크롤을 시도했다는것으로 이해해야 되지 않을까요? 물론 우측 하단에 모인 것 역시, 스마트폰을 들고 있던 손의 “엄지”를 사용한 흔적으로도 추측해 볼 수 있겠구요.
의견감사합니다.
말씀과 같은 관점에서 보니 윤경옥님의 말씀이 일리가 있습니다. 모바일의 사용성에 대한 분석은 저희로서도 아직 익숙하지 않은 분야이다 보니, 여러 인사이트를 도출할 수 있는 관점을 알려주실 때마다 점점 흥미로와져서 좋습니다.
네, 스크롤을 위해 접근하는 것으로 본다면 상하로 움직임이 많다는 뜻은 ‘해당 화면에서 적절한 정보를 못 얻었기에’ 또는 ‘화면이 너무 시각적 표현만 있고 컨텐츠 알맹이가 안보여서’로 봐도 괜찮은 가정이 될까요?
의견감사합니다.
말씀과 같은 관점에서 보니 윤경옥님의 말씀이 일리가 있습니다. 모바일의 사용성에 대한 분석은 저희로서도 아직 익숙하지 않은 분야이다 보니, 여러 인사이트를 도출할 수 있는 관점을 알려주실 때마다 점점 흥미로와져서 좋습니다.
네, 스크롤을 위해 접근하는 것으로 본다면 상하로 움직임이 많다는 뜻은 ‘해당 화면에서 적절한 정보를 못 얻었기에’ 또는 ‘화면이 너무 시각적 표현만 있고 컨텐츠 알맹이가 안보여서’로 봐도 괜찮은 가정이 될까요?
증명을 하기위한 조건이 불분명하네요.
증명을 하려면..
같은 배너에서 숫자부분의 위치만 바꾼다던지 빼던지 해야할텐데..
배경과 레이아웃 자체가 바뀌잖아요.
그리고 배너 영역이 불분명한게.. 문제가 되네요.
가로를 가로지르는 검은색 바는 배너에 속해있는지….
아래 배너를 나누는 역활인지도 불분명하고요..
사실 저 디자인이 배너인지 컨텐츠의 일부인지도 직관적으로 느껴지지 않네요.
사용자의 패턴을 분석하기에는
이미 배너 디자인 자체가 잘못 되었다고 생각이 되네요.