실무로 키우는 UXUI 역량

UXUI 디자인 레벨테스트를 했는데 10점 만점에 9점을 받았다. Smore이라는 기업에서 만든 테스트였는데, 정답에 대한 근거가 유익해서 동료들에게 공유했다. 마케터와 디자이너들 사이에서 9점이면 꽤 높은 점수였는데, UXUI 전공자가 아니더라도 실무 경험치 덕분인 것 같다.

일하면서 만나는 궁금증

'가운데 정렬, 왼쪽 정렬 중 어느 쪽이 오래 읽기 좋은가?'

'메인 > 소구 포인트 > 액션 버튼 순으로 시선이 연결되는 디자인?'

'클릭을 유도할 수 있는 버튼의 색상과 모양은?'

'다음 보기 중, 어느 쪽이 입력이 더 빠른가요?

이론적으로 정확하게 설명하지 못해도 본능적으로 사용자 관점에서 선택했던 답이 대부분 맞았다.

광고도, 프로모션도 사용자의 첫 시선을 3초 이상 끌게 만들어야 절반의 성공이라고 생각한다. 주목을 끌지 못한 광고는 며칠 라이브 되다가 반응을 얻지 못하면 종료된다.

광고의 짧고 강력한 호흡과 달리 프로모션 상세페이지는 다소 긴 호흡으로 유저의 행동을 이끌어 내야 하기 때문에 사용자 경험 설계와 인터페이스가 더 중요하다고 생각한다. 뷰저블을 이용해 프로모션 효율을 측정하며 전환율을 개선하는 이유다.

- 가독성은 사용자의 이해도를 높이고,

- 주목도는 제품과 서비스에서 강조하며,

- 통일성은 콘텐츠의 신뢰도를 높일 수 있다.

Data-Driven UX 책으로 스터디를 하면서 데이터 숫자와 관련된 지표 분석에서 고려해야 할 다섯 가지 상황을 예시로 상세페이지 개선했던 사례를 이야기해본다. 나는 마케터이면서 기획자 역할을 하는 사람으로 UXUI 분야 전문가가 아니기에 나만의 노하우, 혹은 방법론으로 하나의 실무자의 사례로 봐주셨으면 좋겠다.

숫자와 관련된 지표 분석에서 고려할 5가지 사항 (83-94p)
1단계 사용자가 활동한 행동의 정도와 양상
2단계 상세 행동에 따라 달라지는 해석
3단계 통계와 평균의 함정 이해하기
4단계 시간의 흐름에 따라 데이터 분석하기
5단계 데이터를 세분화하여 해석하기

의사결정을 할 때 중요한 것 중 하나는 한쪽으로 치우친 생각으로 의사 결정을 해서는 안된다. 유연하게 생각하고 다각도로 고민해 봐야 제대로 된 개선을 할 수 있다. 이에 대한 의미는 5가지 고려 사항에서 예시를 들어보려고 한다.

1단계 사용자가 활동한 행동의 정도와 양상
클릭률이 높으면 관심도가 높다?

사용자가 관심 있게 보는 상세페이지 세부 이미지 영역에서 '클릭수'가 가장 높았다. 더 많은 이미지를 보여주기 위해서 이미지를 추가하다 보니 개수가 많아져서 복잡해 보였다. 이미지를 카테고리 별로 분류했고, [롤링] 형태에서 [탭] 형식으로 UI를 개선했다.

그리고 1주일 동안 어떤 카테고리에서 가장 높은 클릭수를 확인했다. 카테고리 4개에서 전반적으로 클릭수가 높았고, 1-4번까지 클릭수대로 순위를 매겼다.

'(동료) 4번이 가장 클릭이 높은데, 사용자가 가장 궁금한 정보가 4번인 것 같네요?'

'(나) 음, 그럴 수도 있는데, PC나 M에서 클릭하기 가장 편한 위치라서 클릭 수가 높을 수도 있지 않을까요? 전 오른손으로 스크롤을 내리고, 우측에 있는 탭을 가장 많이 누르거든요. 테스트 한 번 해볼까요?'

나의 개인적인 경험이었지만, 사용자의 니즈 혹은 편의성인지 확인하고 싶어 테스트를 해보기로 했다.

2주 뒤 결과는 [4번] 탭은 위치를 바꾸어도 가장 높은 클릭수를 기록했다. 확인하려는 니즈가 가장 높다로 의사결정하였다. 해당 테스트를 다른 상세페이지에서 했을 때 아닌 경우도 있었다. 각자의 서비스와 상품에 맞게 테스트 해보고 사용자의 행동을 파악하여 의사결정해야 한다.

뷰저블 메인 페이지의 저니맵과 히트맵 중에서 히트맵이 근소한 차이로 높기에 어떤 서비스가 니즈가 높은지 위치를 변경해 보는 테스트를 해봐도 좋을 것 같다.

2단계 상세 행동에 따라 달라지는 해석
도달률이 높으면 전환수가 높다?

상세페이지 가장 하단에 신청폼이 있다. 그렇다면 웹페이지로 유입된 신청자의 도달률이 50%가 넘는다면 전환 수도 50%일까? 그럴 수도 있고, 아닐 수도 있다.

뷰저블 모바일 영역에서 스와이프를 확인하면 수직과 수평방향으로 사용자의 행동을 볼 수 있다. 모바일 영역에서 하단 푸터까지 50% 도달했지만, 역 스크롤이 되고 있는 걸 확인할 수 있다.

전체 페이지를 확인하고 나서 원하는 정보를 찾으러 역 스크롤 했거나, 또는 원하는 정보가 없어서 다시 찾기 위해서 이동했을 수도 있다. 그래서 같은 조건으로 '탭(클릭)' 영역에서 어떤 버튼을 가장 많이 클릭했는지 보고 판단한다.

페이지 내부에 있는 버튼 보다 햄버거 버튼이나 상단에 GNB 클릭수가 상대적으로 높다면, 원하는 정보를 더 찾기 위해서라고 해석할 수 있다. 어떤 탭을 주로 더 궁금해 하는지 파악해서 본문에 상세한 내용이나 연결 버튼을 추가할수도 있다.

3단계 통계와 평균의 함정 이해하기
데이터 흐름의 근본적인 원인 파악

데이터를 해석할 때 단순히 절대적인 숫자로 판단하는 게 아니라 목적과 성격도 파악해야 한다.

'이탈률이 높은데 웹페이지 개선을 해야 할까요?'

오픈한 지 얼마 안 된 프로모션 페이지의 이탈률이 메인에서 50% 넘는다며 디자이너가 메신저를 보냈다.

'해당 페이지, 현재 트래픽 광고 라이브 중이라서 이탈률이 높게 보여요. 해당 유입 채널 빼고 다른 채널 이탈률 확인해 보시겠어요?'

이탈률 확인 때, 가장 유의해야 할 사항이다. 광고 캠페인의 목적이 전환이 아닌 트래픽 광고라면 이탈률이 상당히 높게 나타나 보일 수 있다. 그래서 데이터를 볼 때는 현상태의 수치만 볼 게 아니라 지속적인 추세를 봐야 한다.

PV 페이지 수에서 유입자 수가 이전주 보다 2배 높아졌다면, 광고 집행을 하고 있을 가능성이 크다. 그 광고 집행의 목적이 무엇인지, 어떤 매체에서 진행하고 있는지 확인해야 한다.

4단계 시간의 흐름에 따라 데이터 분석하기
주/월 단위로 데이터 트래킹 하기

프로모션의 효율이 언제 떨어지는지 파악하기 위해서 매주 클릭수, 체류시간 엑셀 리프트를 다운로드해서 정리했었다. 프로모션 페이지를 집행하면서 일정 시간 지나면, 클릭수가 줄어들고, 체류시간이 감소하기 때문이다.

매주 정리를 하다 보니 언제 효율이 떨어지는지 기간과 수치가 대략적으로 보였다. 상품과 서비스에 따라 다를 수 있지만 대략 10000px에서 도달률 30% 미만이면, 페이지를 수정해야 할 준비, 20% 미만이면 신규 또는 전면 수정이 필요하다고 의사결정*을 하게 되었다.

이처럼 데이터를 주차별로 누적해가면서 기본 지표를 세팅하는 게 핵심이다.

(*상세페이지가 어떤 상품, 서비스에 따라 수치는 다르며, 예시로 든 수치이기에 참고만 하시길)

5 데이터를 세분화하여 해석하기
진성 유저의 기기, 신규/재방문, 유입 경로 확인하기

이탈률에서도 언급했었지만, 웹사이트 목표에 따라서 데이터를 보는 기준도 달라진다. 프로모션 상세페이지는 신청자 수가 목표이기 때문에 어떤 세그먼트에서 전환율이 높은지 계산해야 한다.

진성 유저를 찾는 방법은 기기, 신규와 재방문, 경로에서 확인할 수 있다. 광고를 집행할 때 신규를 타깃으로 모바일은 주로 트래픽, PC는 전환 유입을 시켰었기에 PC에서 전환율이 높았다.

광고 예산과 매체에 따라서 전환이 달라지기에 다이렉트, 네이버, 구글, 페이스북 등 따로 분류해서 클릭수, 도달률, 체류시간을 분류해서 체크해 본다.

클릭수, 체류시간, 도달률까지 높은 지표가 진성 유저의 전환이 높을 가능성이 높은 매체일 가능성이 높다. 진성 유저의 핵심 지표가 파악되었다면, PC, 신규, 다이렉트 유입을 가장 먼저 확인하고 빠른 의사결정을 할 수 있다.

이처럼 숫자와 관련된 지표 분석은 기업의 진성유저, 상세페이지 전환율 개선 등을 이끌어 낼 수 있지만 한편으로는 다양한 원인을 염두에 두면서 분석해 봐야한다. 숫자의 함정에 빠져서, 시행착오를 겪지 않으시길 바라는 마음에 5가지 프로세스에 따른 개선 사례를 적어보았다.

-

뷰저블 서포터즈 1기 뷰저블리로 활동하게 되어 나만의 인사이트를 공유할 수 있는 기회에 대해 감사하게 생각하며, 다음 번 포스팅에서는 직무별 상세페이지 개선사례로 돌아올게요!

!

뷰저블 서포터즈 1기로 제품을 무료로 제공받아 작성된 솔직한 후기입니다.

? 마케터의 웹페이지 개선사례 ver 1 더보기
https://forum.beusable.net/ko/post/1084

#뷰저블 #뷰저블서포터즈

숫자 데이터 기반 UXUI 디자인 상세페이지 개선 시 고려할 5가지 사항

숫자 데이터 기반 UXUI 디자인 상세페이지 개선 시 고려할 5가지 사항