안녕하세요. 뷰저블 입니다. 오늘은 지난 3월 5일 베타오픈한 뷰저블리(www.beusably.net)의 UX/UI 개편 및 기능 업데이트에 관한 이야기를 담아보고자 합니다.
포그리트에서는 정기적으로 버그 및 기능을 개선하는 작업을 실시하고 있습니다.
포그리트에서 서비스를 운영하는 방식은 단순히 서비스를 버그를 수정하는데서 그치지 않습니다. 어린 아이를 기르고 보살피는 과정과 비슷합니다. 서비스를 오픈하고 나면, 계속해서 관심을 가지고 해당 서비스가 무엇을 잘하는지, 누구에게 잔소리를 듣고 온 것은 없는지, 누구와 잘 노는지 지켜보고, 이 옷을 입히었다가, 이 운동을 하게 했다가 하죠.
지속적인 방향잡이와 업데이트를 통해서 서비스가 성장하기 때문에 서비스를 배포하고 나서도 제품을 돌보고, 키우는 과정은 중요합니다.
오픈 후 10일 후, 뷰저블리는 개편을 시작했습니다. 뷰저블리 프로젝트에서는 무슨일이 있었을까요? 그리고 무엇이 바뀌었을까요.
쉬워야만 하는, 그러면서도 쓸만한 UX.
‘뷰저블리’는 “데이터 분석 허들을 없애자” 라는 비전 아래 탄생된 서비스이기 때문에, 무엇보다 사용자가 사용하기 쉬운 UX/UI가 중요했습니다.
데이터분석 입문자도 쉽게 사용할 수 있어야 하지만, 기존의 구글 애널리틱스와 같은 타 분석 서비스를 쓰고 있는 사람들도 뷰저블리에 매력을 느낄만한 포인트들을 찾아나가야 했습니다.
베타오픈 론칭 이전에도 많은 고민들을 통해 프로덕트를 내놓았지만, 론칭 이후, 더더욱 개선해나가는 작업을 게을리 하지 않았습니다.
뷰저블리가 중요시한 것.
Think big, start small, scale fast.
고객/시장에 대한 지속적인 배움.
저희가 배움을 얻은 방법은 크게 다음과 같습니다.
1. 베타 오픈 이후 추가 진행된 – 내부 UT
알파테스트에 포함되지 않았던 내부인원들을 대상으로, 추가적인 UT를 진행하였습니다. TASK를 주고 데이터 분석을 실제로 수행하며, 머리속에 생각나는 말을 내뱉는 Think Aloud 방식으로 진행되었습니다. 데이터 분석 경험이 없는 통번역가 직무, 해당 서비스 기획 초기부터 인볼브 되지 않은 개발자가 대상이였습니다.
2.실제 제품을 릴리즈 하고 알게 된 점들 적용.
제품 출시 후, 뷰저블리를 사용하고 있는 고객들의 데이터, 그들이 사용하는 현황들을 통해 저희는 저희가 이전에는 찾아내지 못했던 다음과 같은 중요한 부분들을 발견할 수 있었습니다.
1) 히트맵 하단바를 조작하기를 원했습니다만, 의도했던 바대로 전혀 사용하지 않습니다.
-> To Be: 시선의 흐름을 위해 GUI를 수정합니다.
2) *Referrer 등 당연히 알고 있을 것이라 생각한 용어들을 명확히 유추해내지 못합니다.
-> To Be: 뷰저블리의 타깃은 데이터 분석 프로세스를 처음으로 시도하는 업체를 포함합니다. 한국말로 바꾸었을 때 뜻이 명확해지는 용어들은 한국어를 사용하되, 언어설정 기능을 둡니다.
*Referrer: 방문자들의 유입경로를 의미합니다. (referrer=http referer) 사이트 방문객이 어떤 경로로 자신의 사이트에 방문했는지 알아볼 때 유용하게 사용되며, UX 분석의 경우 구글을 통해 들어온 사용자의 패턴과, 네이버를 통해 들어온 사용자의 패턴의 차이를 알아보는데 도움이 될 수 있습니다.
그 외 자세한 설명은 하단에 기재합니다.
릴리즈 이후의 지속적인 배움.
무엇을 바꾸었는가?
간결하고 직관적인 인터페이스 제공
뷰저블리는 실제 웹사이트 위에서 쉬운 조작만으로도 사용자가 보고자 하는 데이터를 직관적으로 보여주는데 중점을 두었습니다.
기존의 하단 배치는 3월 5일 오픈 버전과 동일하지만 사용자가 분석하고자 할때 접근하기 가장 쉬운 형태로 만들기 위해 다음과 같은 사항들을 고려했습니다.
-Visual Hierarchy
하단 툴을 조작하길 원했던 원 서비스 의도와 달리, 사람들은 히트맵을 살펴보는데에서 사용을 그쳤습니다.
툴의 GUI 개선을 통해 시선의 흐름이 하단 툴로 가는 것이 자연스러워지고, 조작 카테고리를 잘 보이도록 변경하였습니다.
-Information Hierarchy
분석 페이지 네비게이션을 통해 분석할 페이지를 지정하고 나면, 원하는 분석 날짜를 설정합니다. 이 분석 날짜에 따라, 디바이스 분기별로 데이터를 뿌려주게 되는데요,
이 셀에서 조작값들의 설정에 따라 PV와, UV를 읽을 수 있는 시선 흐름을 가지는데에 방해요소가 없도록, 하단 툴에 뿌려주는 정보와 기능들의 구조를 배치하였습니다. 이 하단 툴에서 어떤 조작값을 발생시키면, 그와 연관된 데이터들을 즉각적으로 볼 수 있도록 하여 사용자가 바로 보고 싶은 데이터 값에 도달하는 *감성 또한 충족시키는 데에 신경 썼습니다.
*최적의 경험을 위한 3요소 : 사용성, 감성, 유용성
유용성 : 사람들이 하고자 하는 일을 효과적으로 달성할 수 있어야 한다.
사용성 : 사람들이 되도록 적은 노력으로 소기의 목적을 이룰 수 있어야 한다.
감성 : 시스템을 사용하면서 사람들이 마음속에서 그 시스템의 기본 목적에 적합한 느낌을 받을 수 있어야 한다.
*별도의 순위 노출 기능.순위 노출 기능은 이번 개선에 추가로 생성된 기능입니다. 기존 뷰저블리는 “실제 웹사이트를 이용하는 환경과 동일한 상태에서 사용할 수 있는 분석 툴” 이 콘셉트이기 때문에 실제 등록된 사용자 브라우저의 화면을 전면을 그대로 사용하며, 새 페이지의 이동이나, 화면을 많이 가리지 않아야 한다는 제약이 있었습니다. UT 결과 해당 데이터 분석을 시도하기 위해 컴포넌트 UI를 일일이 호버 하여 지표값을 살펴보나, 그 현황을 파악하기 위하여 값을 기억하려는 노력을 보인다는 것을 발견할 수 있었는데요, 저희는 이를 다음과 같이 풀어냈습니다.
-> 전체 현황을 파악할 수 있도록 순위와 간략한 지표값을 한눈에 볼 수 있는 순위 모두 노출(한눈에 보기) 기능을 제공하되, 각 순위 구간별 시스템 컬러를 적용하여, 사용자는 히트맵과 UI 요소들의 데이터에 대한 빠른 현황 분석이 가능합니다.
(ex) 마우스 오버 한 요소의 1위와 15위를 나타내는 색상은 다릅니다.)
– 많이 사용하고 중요한 기능일수록 쉬운 UX/UI
*순위 노출 기능의 배치: 순위 노출 기능은 히트맵 툴 값을 켜고, 끄는 기능으로, 현재 조작 바의 위치보다 우측에 단독으로 배치되어야 하는 레벨을 가지고 있습니다. 그러나 사용자가 주로 사용하는 기능을 집중해서 보여주는 방식을 우선순위로 두어, 이용 목적이 분명한 사용자가 해당 기능으로의 접근을 쉽게 도달하는데 배치의 우위를 두었습니다.
– 똑똑한 기본 설정
실제 제품을 릴리즈 한 이후, 사용자들이 등록한 페이지 현황을 살펴보았습니다. 고객 데이터를 통해 모바일 디바이스에만 사용자가 유독 몰리는 등록 페이지 유형이 많다는 것을 확인할 수 있었습니다.
리포트 보기 단계로 들어왔을 경우, 사용자 Goal에 부합하는 가장 최적의 경로를 만들기 위해, 등록된 페이지에서 가장 많은 사용자가 접속된 디바이스 유형의 탭을 자동으로 노출하도록 하였습니다.
오픈 후 계속적인 배움.
개선사항 정리.
– 학습된 사용자를 위한 추가 분석 지표 제공 : 교차분석이 가능하도록 추가 지표를 제공합니다. (클릭 히트맵을 선택한 경우, 마우스 호버 값 교차 분석. 마우스 호버 히트맵을 선택한 경우. 클릭 지표 값 교차 분석을 위한 지표 값 제공)
– 마우스 호버 시, 지표값 레이어의 인터렉션 추가.
– 사용자 감성을 위한 브릿지 페이지 추가.
– 데이터 분석 화면 공유하기 기능 추가
(내부에서 데이터 분석을 빠르게 동시에 수행해야 하는 경우, 등록된 페이지의 공유하기 기능을 통하여 해당 히트맵에 대한 원활한 커뮤니케이션을 수행할 수 있습니다. )
– 기본 언어 값 한글로 제공.
– 더보기 메뉴 추가 : 글로벌 사용자 및 사용자 허들을 낮추기 위한 언어 설정 추가, FAQ이동 링크 추가.
– 뷰저블리 홈으로 가기 링크 추가
상단에서 언급되었던 내용.
– UX/UI 전면 수정
– 조작 상태에 따른 PV/UV 값 하단 툴에 노출
– 가장 많은 사용자가 유입된 디바이스 선택 탭 값을 디폴트 값으로 노출
앞으로 추가 개발/보완될 내용.
– 공유하기 시 사용자가 조작한 세팅 값을 그대로, 전달된 사용자가 받아 볼 수 있는 기능 제공. (신규 사용자의 구글 유입자 현황을 살펴보는 것으로 세팅해두었다면, 데이터 분석을 실시하는 팀원들끼리 좀 더 빠른 의사소통이 가능하도록 해당 조작 값 세팅을 그대로 사용자에게 전달합니다.)
– 공유하기 시 보안 설정을 위한 기능 제공
– 콘텐츠 도달률에 관한 히트맵 제공.
– 기타 그 외 모든 것.
제품 개발 이전에 충분히 고민하는 것 또한 중요하지만, 제품을 출시하고 나서의 배움과 적용은 더욱 중요합니다. 사용자 경험을 긍정적으로 만들기 위해 뷰저블리는 계속적으로 고객과 시장으로부터 끊임없이 배우고, 노력하고 있습니다.
앞으로도 개선될 뷰저블리의 모습을 기대해주세요.
지금 뷰저블리는 베타 오픈 중입니다.
회원가입 및 뷰저블리 이용 무료기간.
개편된 뷰저블리로 좀 더 가볍게 허들 없이 데이터 분석을 시도해보세요.
뷰저블리 지금 둘러보기 > https://www.beusably.net
