고객지원 > 지식/노하우

지식/노하우

지식/노하우

UX 분석으로 콘텐츠 레이아웃 및 배치 최적화

페이지 정보

작성일2018-09-17

본문

 

 

UX 분석으로 콘텐츠 레이아웃 및 배치 최적화
(주)넷스루 전략기획실

 

 

웹로그 분석은 웹 사이트 개편을 결정할 때 프론트엔드 개발자와 UX 설계자, 그리고 마케터에게 모두 중요합니다. 웹로그 분석으로 광범위하게 사용자의 행동을 분석하고 그 데이터를 기반으로 통찰력을 얻을 수 있지만, 수많은 지표와 데이터 이해의 폭이 다양해서 개선의 합의점을 찾기까지는 험난한 여정이 필요합니다.
d2b97c690682a22a8c7edd90327bdf4a_1537147
 
그래서 UX 설계시 웹 사이트 개선점을 보다 쉽게 찾을 수 있는 UX 분석 도구를 살펴 보았습니다. 사용자 행동에 기반한 히트맵을 사용하면 웹 사이트 레이아웃과 콘텐츠 배치를 결정할 때 매우 유용합니다. 이러한 분석 데이터를 이용하면 사용자 경험을 향상시킬 수 있는 변경 요소에 대한 의사 결정을 훨씬 쉽게 내릴 수 있고 궁극적으로 전환율 향상에도 도움이 됩니다.
d2b97c690682a22a8c7edd90327bdf4a_1537147
 
히트맵은 페이지에서 가장 사용자들이 관심 있어 하는 곳을 보여 주기 때문에 사용자가 가장 많이 관여하고 있는 영역과 요소를 알려줍니다. 중요한 요소와 정보가 올바른 위치에 있을 때 사용자를 페이지에 더 오래 머무르게 하고 전환으로 이끌 수 있습니다.
d2b97c690682a22a8c7edd90327bdf4a_1537147
   
다양한 히트맵 유형 중 스크롤 히트맵은 페이지의 적절한 레이아웃을 결정하는 데 특히 유용합니다. 일반적으로 사용자들이 집중해서 보는 페이지 영역은 짧습니다. 페이지를 아래로 스크롤 하면서 집중과 관심은 줄어들기 시작합니다. 스크롤 히트맵은 얼마나 많은 사용자가 페이지의 중요한 요소를 보는지 알려주고, 그에 따라서 콘텐츠 배치를 조정하는데 도움을 줍니다.
d2b97c690682a22a8c7edd90327bdf4a_1537147
 
또한 사용자가 평균 폴드 라인(Average Fold Line, 사용자들의 평균 브라우저 높이) 아래를 보려면 스크롤 해야 한다는 의미에서 폴드 라인이 표시되는 위치를 보여줍니다. 반응형 웹의 레이아웃을 위해 디자인을 최적화할 수 있도록 각 디바이스 유형에 대한 스크롤 히트맵을 보는 것도 중요합니다.
d2b97c690682a22a8c7edd90327bdf4a_1537147
 
웹 사이트를 디자인할 때 사용할 수 있는 레이아웃 옵션은 다양하지만 사용자에게 가장 직관적인 형식을 따르는 것이 가장 좋습니다. 사람들은 일반적으로 웹 사이트를 볼 때 "F"모양의 패턴을 따릅니다. 책처럼 책의 왼쪽 상단에서 오른쪽으로 읽은 다음 아래로 내려 그 패턴을 반복합니다. 왼쪽 상단, 페이지 맨 위의 헤더를 가로 지르는 콘텐츠는 가장 많은 상호 작용이 이루어지는 곳 입니다.

 
d2b97c690682a22a8c7edd90327bdf4a_1537147
 
그래서 보통은 로고를 맨 위 왼쪽 모서리에 배치하고, 그것을 클릭하면 홈페이지로 돌아오도록 링크를 겁니다. 네비게이션 도구 모음은 페이지 왼쪽이나 웹 사이트 상단에 고정합니다. 사용자가 탐색할 수 있도록 항상 스크롤 할 수 있게 해야 합니다. 이렇게 하면 멋진 사용자 환경이 만들어 집니다.
d2b97c690682a22a8c7edd90327bdf4a_1537147
     
사용자가 주로 중점을 두는 영역이 페이지의 가운데라면, 여기에 가장 중요한 콘텐츠를 위치시켜야 합니다. 핵심 콘텐츠를 부연 설명해 주는 정보와 중요하지 않은 정보는 화면 오른쪽에 위치해야 합니다. 이 위치는 화면에 잘 노출되지 않거나 사용자와 상호작용을 많이 하지 않기 때문입니다.
d2b97c690682a22a8c7edd90327bdf4a_1537147

 

 

 

다양한 마케팅 노력으로 사용자를 방문까지 유인했다면, 웹 사이트에서 방문자를 유지하고 전환을 유도하는 방식으로 웹 사이트를 최적화하는 데 집중해야 합니다. 히트맵 분석을 활용하면 사용자의 관심을 가장 많이 끄는 것이 무엇인지 쉽게 파악하고 사용자를 목표 행동으로 움직이도록 보완 요소를 발견할 수 있습니다. 이렇게 하면 점진적으로 이탈률을 낮추면서 전환율을 높일 수 있습니다.
  
d2b97c690682a22a8c7edd90327bdf4a_1537148

 
넷스루는 웹 사이트를 최적화하는 데 도움이 되도록 웹로그 분석 뿐만 아니라, 히트맵 같은 분석이 가능한 UX 분석 도구도 제공하고 있습니다.

 

 

d2b97c690682a22a8c7edd90327bdf4a_1537148

 

 

  • 트위터로 보내기
  • 페이스북으로 보내기

모바일 페이지로 이동