UX 디자이너를 위한 웹사이트 최적화 5단계
뷰저블을 통해 웹 사이트 UX 데이터 분석 및 디자인 최적화하기
안녕하세요 뷰저블입니다. 오늘은 어떻게 UX 디자이너가 웹 사이트를 분석하여 최적화할 수 있는지에 대해 알기 쉽게 5단계로 나눠 알려드리겠습니다.
서비스를 분석하는 것은 마치 숲에서 나무를 내려다보는 과정과도 같습니다. 숲을 본 뒤 나무를 보고, 그 나무가 어떤 나무인지를 파악하죠. 그리고는 병들지 않았는지, 과실이 많이 열려 비료가 더 많은 곳으로 옮겨 심어야 하지는 않은지를 알아보아야 합니다. 크게 시작하여 작게 내려가세요.
1단계 : 서비스의 목적을 파악하세요.
2단계 : 서비스 목적 달성에 방해되는 문제 페이지를 발견하세요.
3단계 : 기능과 레이아웃을 검증하고 최적화하세요.
4단계 : 콘텐츠와 세부 UI를 검증하고 최적화하세요.
5단계 : 꾸준히 개선하고 개선 효과를 추적하세요.
뷰저블은 여러분의 서비스를 가장 쉽고 빠르게 최적화할 수 있는 5단계 방법을 제안합니다.
시작하지 않으셨다고요? 바로 행동으로 옮겨보세요. 경쟁사는 이미 시작했습니다!
1단계. 서비스의 목적을 파악하세요.
첫 번째 단계에서는 숲 내려다보기, 즉 거시적인 관점에서 서비스를 바라보는 것입니다. 가장 먼저 여러분 서비스의 목적이 무엇인지 파악하세요. 서비스 목적이 불명확하다면 내가 무엇을 목표로 분석을 실행해야 하는지까지 알 수 없게 됩니다. 또한, 이 목적에 따라 여러분이 뷰저블로 분석할 사용자의 특징 또한 달라지기 때문에 반드시 짚고 넘어가야 합니다. 이렇게 서비스 목적을 정의하는 것만으로도 여러분 사이트의 방향성이 제대로 잡혀있는지를 검토할 수 있습니다. 또한 사이트가 왜 우리 서비스를 방문하는지까지 유추할 수 있게 되죠.
이커머스 : 결제 완료를 통한 매출 향상
웹 서비스 : 데모 서비스 이용 또는 유료 결제를 통한 매출 향상
콘텐츠 서비스 : 사용자의 정기 구독을 통한 광고 수입 향상
B2B 기업 : 문의하기를 통한 고객 획득
* 위 목적은 기업과 내부 우선순위 따라 달라집니다.
2단계. 서비스 목적 달성에 방해되는 문제 페이지를 발견하세요.
- 해결 키 : Analytics, Funnels
큰 숲을 조망하였다면 이제 좀 더 작은 시점에서 영역으로 쪼개 관찰해야 할 차례입니다. 바로 어떤 사용자 경로, 즉 페이지가 목적 달성에 방해되고 있는지 또는 장벽인지를 검토하는 것입니다.
첫 번째로는 애널리틱스 메뉴를 활용할 수 있습니다. PV 규모가 큰 페이지는 보통 사용자에게 매우 중요한 페이지일 수 있습니다. 이 페이지의 이탈률이 높게 나타나는지 검토해보세요.
하지만 많은 페이지를 하나씩 검토는 것은 너무나 많은 시간을 필요로 합니다. 어떻게 하면 우선순위를 쉽게 정할 수 있으면서도 문제 페이지를 빠르게 발견할 수 있을까요? 첫 번째 단계에서 도출한 사이트 목표를 토대로 그 목표를 이루기까지의 사용자 여정을 적어보세요.
이커머스: 메인 > 제품 상세 페이지 > 장바구니 > 결제 > 결제 완료
웹 서비스 : 메인 > 체험판 등록 > 실행 > 유료 버전으로 업그레이드
콘텐츠 서비스: 메인 > 상세 콘텐츠 보기 > 정기 구독
b2b 기업: 메인 또는 상품 페이지 > 문의하기 > 문의 완료
두 번째로는 이 여정에 해당하는 페이지를 Funnels에 등록하여 가장 많은 방문자가 떨어져 나가는 위치를 파악하세요. 이러한 위치를 사용자는 가장 큰 장벽이라 느낍니다. 장벽을 개선하여 더 많은 사용자가 목적을 달성할 수 있도록 도와주세요.
3단계. 기능과 레이아웃을 검증하고 최적화하세요.
- 해결 키 : Reporting Heatmaps, Comparing Referers
다음 3단계에서는 위에서 찾은 영역의 나무들을 하나씩 살펴보는 단계입니다. 혹 주변 나무들로 인해 영양분을 못 받아 과실을 못 맺는 나무는 없는지, 그늘진 곳에 있어 말라 가는 나무는 없는지를 파악해야 할 때입니다. 과실을 못 맺는다면 주변 나무들을 제거하거나, 그늘진 곳에 위치한 나무는 햇볕이 잘 드는 곳으로 옮길 수 있습니다.
화장품 커머스 B사는 사용자가 상세 화장품 정보를 확인하기보다 리뷰를 우선적으로 확인하며 더 열광한다는 점을 알 수 있었습니다. 리뷰를 강조하고 네 번째에서 두 번째 탭으로 변경하였습니다.
육아 정보를 제공하는 A사는 사용자가 육아 정보 기능보다 중고 장터 메뉴를 더 많이 이용한다는 사실을 발견하였습니다. 메인 페이지에 중고 장터 메뉴를 노출하고 더욱 강조하였습니다.
4단계. 콘텐츠와 세부 UI를 검증하고 최적화하세요.
- 해결 키 : Reporting Heatmaps, Comparing Referers, Segmenting CTA
4단계에서는 나무속 열매들과 잎사귀들을 하나씩 살펴봅시다. 페이지 내 콘텐츠와 세부 UI를 살펴볼 차례입니다. 기능 단위에서 더 내려와 ‘기능 속 버튼들이 지니는 태스크별 달성도’를 확인하고 사용자의 행동과 심리를 도출하여 콘텐츠를 최적화합시다. 히트맵을 통해 신규/재방문 사용자와 유입경로에 따라 달라지는 사용자의 콘텐츠 소비 현황을 파악하세요.
클라우드 서비스를 판매하는 I사는 사용자가 100% 도달하지만, 관심도가 적은 상단 영역에 사용자의 관심을 끌기 위해 애니메이션 이미지를 삽입하고 문구를 변경하였습니다.
언론사 B사는 사용자가 기존 광고 배너를 제대로 확인하지 않는다는 사실을 확인한 후, 위치를 사용자 주목도가 높은 기사 바로 옆으로 옮겼습니다.
5단계. 개선 효과를 추적하세요.
- 해결 키 : A/B Testing, Reporting Heatmaps, Analytics, Segmenting CTA
검증이 끝났다면 이제 과감히 개선을 시작하도록 합시다. 그러고 나서 변경한 레이아웃 콘텐츠, CTA에 따라 지표가 어떻게 달라지는지 AB 테스트해보세요. 히트맵을 통해 사용자 행태를 추적할 수도 있습니다.
뷰저블을 통해 서비스 내 사용자 경험(UX)에 영향 끼치는 문제점을 발견하세요.
뷰저블이라면 그 많은 문제점들을 '새로운 비즈니스 기회'로 바꿔드릴 수 있습니다.
경쟁사는 이미 시작했습니다!
www.beusable.net
