본문 바로가기

Technology

모바일웹에서 헤더를 꼭 고정해야 될까요?



모바일 웹을 서핑 하다 보면 크게 3가지 유형의 웹사이트를 발견할 수 있습니다.


  • 고정된 헤더 (주로 내비게이션 아이콘과 함께 있습니다.)

  • 보통의 헤더 (콘텐츠와 같이 스크롤 되는 헤더입니다.)

  • 하단 고정 내비게이션(탭이나 옵션이 들어간 내비게이션; 앱에서는 많지만 웹에서는 별로 없습니다.)


일반적으로 제작자들은 고정된 헤더를 선호합니다. 메뉴 혹은 다른 버튼을 쉽게 클릭하기 좋기 때문입니다. 웹에이전시 엑시스웹(exis web)의 제임스 포스터(James Foster) 씨는 이러한 헤더 위치 종류가 사용자에게 어떤 영향을 미치는지 궁금했습니다. 그래서 A/B 테스트를 진행했는데요, 결과는 아래와 같습니다. *A/B 테스트란? 서로 다른 디자인이나 기능을 보여주고 사용자의 반응을 비교하면서 보다 좋은 디자인을 결정하는 테스트


고정된 헤더와 스크롤되는 헤더의 A/B 테스트


제임스 씨는 두 가지 테스트를 준비했습니다.

A. 헤더가 콘텐츠와 스크롤 되는 경우




B. 헤더를 고정한 경우





공통으로 상단에 45px 크기의 헤더가 있습니다. A는 헤더가 콘텐츠와 함께 움직이고, B는 고정되어 있습니다. 이 두 가지 경우에 메뉴의 로고, 검색 버튼 클릭 수와 사용자 활동 수(세션)이 어떻게 차이가 나는 지 측정했습니다.



테스트 결과

약 100,000 모바일 방문자들이 테스트했습니다.




사용성 측면에서만 봤을 때 큰 차이점을 보이는데요.

B. 고정된 헤더가 A. 보다 3배 높은 메뉴 클릭 수를 보여줍니다.





하지만, 두 결과에서 사용자 활동 횟수는 차이가 없습니다. 


즉 사용자가 고정된 헤더에서 메뉴 클릭은 많지만, 사용자들의 실질적인 활동 수는 차이가 없었습니다.


또한, 구글 애널리틱스 데이터를 통해 A, B 헤더별 ‘검색 기능 사용 횟수’를 참고해 보았는데요, 데이터에 따르면 고정된 헤더는 545번, 스크롤 헤더는 452번 사용했다고 합니다. ‘검색 기능 사용 횟수’도 A/B 헤더가 큰 영향을 미치지는 않는 것 같습니다.


결론


그렇다면 모바일웹에서 어떤 헤더 방식이 더 좋은지 정답이 있을까요? 정답은 없습니다. 테스트 결과를 살펴보아도, 결정적으로 두 경우에 사용자 활동 수가 거의 동일했습니다. 고정된 헤더는 시야에 계속 따라다니니, 버튼 클릭 수가 좀 더 많을 수 있겠죠. 그렇지만 헤더 자체가 새로운 페이지로 들어갈 필요성까지 가져다 주지는 못 했습니다.


페이지 조회 수를 높이는 것이 목표라면, 헤더의 위치를 떠나 사이트를 완성도 있게 작동하게 하는 것이 좋은 방법이라고 생각합니다.




출처: exis web


by 원숭이 발자국