안녕하세요 뷰저블입니다. 실제 웹 사이트 위에 UX 히트맵을 시각화하는 뷰저블리로 오늘은 ‘패럴렉스 페이지’의 사용성 문제를 찾아보는 시간을 가지고자 합니다. 뷰저블리는 패렐럭스 페이지와 SPA, 반응형, 적응형 등의 Rich UI를 지원합니다. 오늘 살펴볼 페이지는 뷰저블의 핵심 강점을 소구 하는 ‘Why Beusable?’ 페이지입니다.
뷰저블리의 마우스 클릭 히트맵과 마우스 무브 히트맵으로 ‘Why Beusable?’ 페이지를 자세히 들여다보겠습니다. https://www.beusable.net/why 에서 실제 웹 페이지를 먼저 확인해주세요.
클릭할 수 없는 ‘스크롤을 내려주세요.’ 아이콘을 클릭하는 사용자들
아래 이미지에서 흰색 사각 박스를 주목해주세요. 오늘의 첫 번째 문제 대상 포인트입니다. 왜 그럴까요? 이 영역은 사용자가 마우스를 후버 하여 직접 클릭한 곳이지만, 클리커블한 요소가 아니기 때문에 클릭을 한다고 하더라도 아무런 인터랙션이 일어나지 않습니다. 클릭할 수 있다고 생각하여 마우스를 올려 클릭하지만, 원했던 행동인 ‘클릭을 통한 아래 페이지로의 이동’이 일어나지 않기 때문에 사용자는 쉽게 실패감 또는 좌절감을 느끼게 합니다. 이번 이슈는 저희 뷰저블의 웹 사이트 개선점으로 올려두었습니다.
캐러셀 영역의 ‘현재 상태 UI’ 클릭하는 사용자들
클릭할 수 없는 영역을 클릭하는 대표적인 사례는 또 무엇이 있을까요? 바로 캐러셀 UI 영역입니다. 라이브 히트맵을 통해 분석 후 실제로 UI를 개선한 사례도 있습니다. 바로 뷰저블 메인 페이지의 고객사 인터뷰 캐러셀입니다.
아래 이미지에서 마찬가지로 사각 박스를 확인해주세요. 사각 박스 안의 UI는 캐러셀이 몇 개의 콘텐츠로 구성되어 있는지 전체 콘텐츠 개수와 함께 현재 몇 번째 콘텐츠를 보고 있는지 ‘상태’를 나타내기 위한 것입니다. 우측 화살표를 통해 페이지를 이동하는 것이 대다수이지만, 몇몇 유저들은 더 빠르게 원형 아이콘을 통해 콘텐츠를 전환하기를 바라고 있었습니다. 사각형 박스에 클릭 히트맵과 무브 히트맵이 잡히는 것을 보면 알 수 있죠.
하지만, 시용자가 마우스를 후버 하거나 클릭을 하더라도 아무런 인터랙션이 일어나지는 않았습니다. 역시나 웹 사이트 경험에 실패감을 느끼겠죠. 히트맵으로 사용자가 ‘클릭을 하고 관심을 가진다’는 사실을 안 후 지금은 클리커블한 요소로 개선하게 되었습니다.
다른 서비스의 캐러셀 UI는 어떨까요? 이베이코리아의 G9는 메인 Fold 상단의 절반에 가까운 영역을 캐러셀 UI로 소구하고 있었는데요, 클릭을 하면 해당 순번의 캐러셀 콘텐츠로 이동할 수 있도록 편리한 UI를 지니고 있었습니다. 하지만 모바일 웹처럼 쉽게 플리킹이 불가능하기 때문에 좌우로 페이지를 쉽게 넘길 수 있는 화살표 아이콘을 부여한다면 더 좋을 것 같습니다. 화살표를 넣는다면 아래 작은 원형 아이콘들보다 화살표에서 더 많은 클릭수가 일어날 것으로 예상합니다. 또 캐러셀 콘텐츠가 10개 이상이라 사용자가 현재 전체 몇 개의 콘텐츠 중 몇 번째 콘텐츠를 보고 있는지 등도 ‘1/10’ 등으로 추가적으로 알려주면 좋을 것 같습니다.
11번가와 아래 이미지의 이랜드 몰의 경우 이런 캐러셀 UI에 후버만 해도 해당 순번의 캐러셀로 콘텐츠가 바뀌는 UI를 지니고 있습니다. 한번 이런 UI를 체득한 사용자는 클릭은 최소화하고 후버를 주로 일으키지 않을까 예상합니다. CJ몰도 콘텐츠 수가 많아 전체 몇 개 콘텐츠 중 몇 번째 콘텐츠를 보고 있는지 알 수 있으면 좋겠네요. 화살표가 좌우로 있어 편리하게 캐리셀을 넘길 수 있었습니다.
이번 인사이트 블로그 글을 작성하며 다른 커머스의 홈페이지를 수십 개 살펴보았습니다. 일부 사이트는 일부 커머스 캐러셀의 원을 클릭하더라도 콘텐츠가 넘어가지 않는 경우가 많았습니다. 아마 뷰저블 메인 페이지 데이터처럼, 실제 뷰저블 데이터로 살펴본다면 클릭과 무브가 높게 나타날 것으로 예상합니다. 히트맵으로 여러분의 웹 사이트의 사용성 문제를 발견해보세요. 기획자 또는 디자이너의 의도와 사용자는 다르게 반응할 수 있습니다!
