안녕하세요~ 소라토파파 센쇼(@sensyo) 입니다. 블로거 뿐만 아니라 웹사이트를 운영하는 모든 분들께 도움될만한 정보가 있어 공유 드려요.
Google에서 모바일용 사이트 최적화에 관한 대규모 리서치를 실시했습니다.
그 결과로 부터 도출한 모바일 사이트 최적화 25가지 Rule은 모바일 시대에 특히 to C Business(B2C등)에 빠질 수 없는 내용입니다.
조사에 관해
본 조사는 Google과 AnswerLab 공동으로 실시되었습니다.
모바일 사이트에 있어 양질의 디자인 관행을 제언하는것을 목적으로 행해진 본 조사는 아래의 방법론으로 실행되었습니다.
- 시카고, 샌프란시스코에서 119시간의 Userbility 테스트를 감행
- iOS, Android 양자를 포함하는 유저에게 조사를 실시
- 유저는 상품의 구입, 가격조사, 예약 등, 컨버젼에 관련한 작업을 실행하고, 각 사이트의 유저빌리티를 평가 함
- 유저의 평가에 더해, 리서치 담당자도 객관적 평가를 실시
조사에 관한 개요는 이쯤으로 하고, 모바일 사이트 최적화를 위한 25가지 Rule를 살펴보기로 하죠.
1. CTA를 눈에 띄게 한다
“회원등록”과 “무료체험” 등을 포함한 사이트 안에서도 가장 중요한 CTA버튼은, 반드시 유저의 눈이 머무는, 사이트의 중심에 설치합시다.
유선순위가 낮은 Task를 요구하는 CTA버튼과 그 외 요소는, 스크롤 다운 하지 않으면 안보이는 페이지 하부와, 메뉴 안에 설치하고, 가장 중요한 CTA버튼을 두드러지게 합시다.
2. 메뉴를 간소하게
데스크탑에서는 CVR증가에 공헌 할 것 같은 상세메뉴 리스트도, 모바일에서는 눈만 아플뿐. 리스트의 수는, 작은 스마트폰 화면의 공간을 차지하지 않게 최소한으로 합시다.
각 리스트의 타이틀도 최대한 명확하고 알기 쉽게, 짧은 제목으로 변경하도록 합니다.
3. Top Page 복귀를 간단하게
대다수의 모바일 유저는, 사이트內의 각 페이지 상부에 있는 회사로고를 이용해서 Top Page로의 이동을 시도한다. 이에반해 로고에 링크가 설정되어있지 않은 경우, 큰 불만을 느끼는것으로 나타났다.
위 그림과 같이, 반드시 페이지 상부의 로고를 설치하여, 유저가 불편하지 않게 사이트를 되돌아갈 수 있게 구조설계에 신경 씁니다.
4. 프로모션은 적당히
프로모션과 광고가 CTR버튼에 가깝게 있는 경우, 유저의 마음이 꺾여 결과적으로 컨버전으로 이어져야할 행동의 실행이 어렵게 되는 케이스가 있다는것이 본 조사를 통해 보여졌다.
“유저의 눈에 띄는 것”만 생각하여, 네비게이션에 영향을 끼치고 있지는 않은지 사이트內를 점검할 필요가 있다.
5. 사이트內 검색을 용이하게
목적이 분명한 유저야 말로 사이트內 검색을 이용하는 경향이 있다.
컨버전에 가장 가까운 유저를 놓치지 않기 위해, 사이트內 검색Bar는 반드시 가장 눈에 띄는 장소에 설치 합니다.
6. 최고의 검색 체험
모바일 유저는, 데스크탑 유저보다 훨씬, 불필요한 행동을 취하거나, 목적에 도달하지 못하고 여러 페이지를 돌아다니는것을 싫어한다.
유저의 스트레스를 유발하지 않기 위해서도 1. 첫번째 페이지에 표시되는 결과와 검색 키워드의 관련성 2. 자동완성 3. 오탈자 자동보정 등, 최고의 검색체험을 제공 합시다.
7. 상세검색기능의 최적화
메뉴와 키워드 검색에서 원하는 상품을 찾지 못한 경우, 유저는 상세검색 기능을 사용합니다.
실험 결과에 의하면, 1. 나름 머리를 써서 검색했는데 검색결과가 전혀 줄어들지를 않거나 2. 검색결과가 0건 등의 케이스에 있어 유저는 강한 좌절감을 느끼는 경향이 있고, 단순히 상세 검색 기능을 설치하는것만이 아닌, 상품의 재고상황 등과 함께 정렬 방법에도 궁리를 할 필요가 있다는것을 알았다.
8. 검색은 검색전에 시작된다
고객층이 다양한 경우, 상품수가 압도적으로 많은 경우에는 사이트 유입과 동시에 성별, 원하는 상품의 카테고리(신발, 가방 등 대분류), 사이즈 등, 2~3가지 질문을 사전에 준비합시다.
그 후 키워드 검색을 하는편이 훨씬 쾌적함을 느낍니다.
9. Activation > Revenue
이제 막 유입해온 유저에게 구입과 예약 등의 컨버전 관련 행동을 원하는것은, 많은 경우에 CVR을 떨어뜨리는 원인이 됩니다.
처음 들어온 유저에게는, 초조해하지 말고, 상품과 사이트의 검색을 중심으로 사이트內를 돌아다닐 수 있는 사이트 설계에 초점을 맞춥시다.
10. 회원등록 없이 구입
아무리 구입의욕이 극에 달했을지라도, 회원등록의 필요성에 의해 구입의욕이 감퇴한다는 조사대상 유저가 많이 보였다고 보고 되었습니다.
처음 구입하는 유저를 위해서도, “비회원 구입” 옵션 하나정도는 추가해서 손해는 안봅니다.
11. 손안에 있는 정보를 최대한 활용
유저가 등록을 싫어하는 이유 한가지는, 정보입력의 번거로움 입니다.
이미 회원등록을 마친 유저에게는, 절대로 같은 정보를 두번 입력하지 않게 자동완성 기능을. 신규유저에게는 등록 절차를 대폭 줄일 수 있는 결제 서비스의 도입등을 고려하면 좋겠습니다.
12. Click to Call
복잡한 정보와 민감함 정보를 취급할 때에는, 클릭 한번에 전화를 걸 수 있는 Click to Call 버튼을 설치하여, 유저의 불신감을 없애줍시다.
인터넷 보안에 대한 의식이 높아지는 요즈음, 전화로 등록하는 편이 안심할 수 있다는 유저가 상당히 많은것 같습니다.
13. 한수 앞을 내다본다
설령 구입의욕이 피크에 달해도, 시간이 없어서 라든지에 의해 그자리에서 컨버전이 이루어지는 경우가 많이 있습니다.
그런 유저라도, 시간에 여유가 있을때라도 지를수 있게 “장바구니 담기”, “SNS에서 공유”, “메일로 전송” 등의 옵션을 반드시 준비해 드립시다.
멀티 디바이스 시대에는 특히나 중요한 방책입니다.
14. 입력 프로세스의 최적화
스마트폰에서의 문자 입력은, 유저에게 데스크탑과 비교해 상상도 할 수 없이 힘든 고통을 안겨줍니다.
“등록항목은 이 이상 줄일 수 없어” 라고 할 지라도, 1. 엔터를 누르면 다음 항목으로 자동 이동, 2. 번호 입력 폼에는 자동으로 숫자패드를 표시하는 등, 프로세스에 존재하는 불필요함을 최대한 줄여줍시다.
15. 입력 메소드의 최적화
각 입력항목에 대해, 최적의 input method가 적용되어 있는지 확인합시다.
예를들면, 년월일 같은 경우 “년, 월, 일” 각각의 필드가 아니라, 아래 그림처럼 한번에 설정할 수 있으면 유저의 수고가 대폭 감소합니다.
16. 카렌다의 비주얼화
특히 예약상품을 다루는 사이트의 경우, 반드시 카렌다는 숫자가 아닌 비주얼하게 보여줍시다.
카렌다 어플을 열어 날짜를 확인하기 위해 홈버튼을 누른것이, 그대로 돌아오지 않게 되는 케이스도 적지는 않은것 같습니다.
17. 입력에러 대책
한가지 항목의 입력 에러 때문에 그 외의 입력항목이 사라져 버린다, 그것만큼 끔찍한 것도 없습니다.
각 항목에 명확한 라벨(“PW”가 아니라, “8문자 이상의 패스워드”등)을 넣는것은 물론, 입력오류가 발생하면 그자리에서 알려주는 입력확인(Auto Validation), 그리고 만일 리프레쉬 되어도 데이터를 확실히 보존해 주는 등, 입력에러에 의한 스트레스를 극한까지 내려주는 구조를 만들도록 의식합시다.
18. 에코와 예측가능성
입력항목은 최소한으로 합시다.
자동입력을 사용해 각 항목들의 수고를 줄일 수 있는 경우(예를들면, 우편번호)에는 반드시 이용합시다.
또한, 어떻게서도 수를 줄일 수 없는 경우에는, 입력을 몇가지 단계로 나누어, 각 단계 및 그 진척상황을 표시하고, 유저에게 현시점의 진행정도를 파악 할 수 있게 해 줍시다.
끝이 보이는지 안보이는지에 따라서도, 유저의 심리적 부담은 크게 변합니다.
19. 사이트 전체를 스마트폰에 최적화
일부는 데스크탑 대응, 일부는 스마트폰 대응이라는 이도저도 아닌 말로만 스마트폰 사이트가 곧잘 보입니다.
본 조사중에서도 그런 “혼합형”의 웹사이트는 오히려 모바일 유저의 UX를 악화시킨다는 결과가 나왔고, 사이트 전체를 스마트폰에 최적화 시키는것이 중요하다는것을 알았습니다.
20. No More Pinch
모바일 유저는, 화면을 잡고 줌인, 줌아웃 하는것을 지겹게 느낍니다.
스트레스를 조장할 뿐만 아니라, “Zoom의 과정에서 CTR버튼을 놓치고 있을 가능성도 본 조사에서 다수 지적되어, “No more pinch” 줌인, 줌아웃이 필요없는 사이트 제작이 급선무라고 할 수 있겠습니다.
21. 이미지 확대
단순하게 이미지를 게재하는것만으로, 유저의 구매의욕을 최대화 하지는 못합니다.
특히 의류제품에 관해서는, 고화질 이미지를, 확대하여 볼 수 있게 표시하는 것만으로, 유저가 얻는 정보량은 큰 차를 보이며, 그 결과로서 컨버전의 향상에 이어지기 쉬울 것입니다.
22. 오리엔테이션의 최적화
정보량이 많아, 가로보기에 최적인 경우에는, 유저에게 Popup으로 알려줍시다.
한눈에 볼 수 있는 정보량이 증가하여 유저에게 있어서는 큰 스트레스 해소 포인트가 될 수 있습니다.
23. 한화면에 Keep
복수의 윈도우를 사용한 조작은, 유저가 원래의 사이트로 돌아오지 않을 가능성을 높이는 리스크를 안고 있습니다.
같은 사이트內 컨텐츠를 “새 창으로 열기”버튼을 피하는것은 물론, 유저가 새 창을 열어 되도않게 값싼 정보를 찾으러 가지 않도록, 단일 윈도우內 쿠폰이나 비교정보를 설치 합시다.
24. Full Site표시는 NG
모바일 사이트에서 자주 보는것이 “Full Site”, “Full Site는 이쪽” 이라는 문구.
본 조사에서 유저가 “모바일 사이트”와 “풀사이트(PC판)” 2가지 선택지를 받게된 때, 유저는 “모바일 사이트는 정보가 빽빽하게 되어 보기 어렵다”, “Full Site가 정보가 더 많겠지(실제론 정보의 양이 같음에도)” 라는 인상을 받았다고 말합니다.
그러한 오해의 결과, 모바일 최적화가 되어있지 않은 “Full Site”로 넘어가린다면, 모처럼의 모바일 최적화도 헛수고가 되어버립니다.
사소한 것이지만, “Full Site”가 아닌, “PC버전”이나 “데스크탑 버전” 이라는 표현으로 오해를 줄입시다.
25. 위치정보 취득은 신중하게
유저의 이용상황을 이해하기 전에 위치정보를 취득하여, 그 정보에 입각한 컨텐츠를 추천하려는것은 쓸데없는 참견입니다.
실제로 조사중에서도, “다른 장소의 호텔을 예약하려고 했음에도, 현위치의 호텔이 소개되어 곤란했다” 라고 답한 유저가 있어, 위치정보의 취득은 어느정도 신중한 편이 좋다는것을 알았습니다.
어디까지나 위치정보는 유저 자신이 입력하는것을 전제로, “주변 할인정보 보기”와 같은 CTR버튼을 준비해 두는것이 효과적이라고 말 할 수 있겠습니다.
마지막으로
모바일 유저는, 모바일의 능력이 데스크탑과 비교해 떨어진다는것을 고려하지 않고, 데스크탑의 UX와 동등한 체험을 하기를 원합니다.
원하는 수준이 높은 유저의 니즈에도 확실히 응해 나갈수 있게, 본 기사에서 소개한 스마트폰 사이트 최적화 25가지 Rule을 반드시 적용합시다.
또, 기술적인 체크사항으로 아래의 5가지도 적용합시다.
- 스마트폰용 배너가 데스크탑 사이트로 유도되고 있진 않은지 확인한다.
- 원활한 체험을 연출하기 위해, 페이지의 다운로드 회수를 최소화 한다.
- 복수의 브라우저, 버전, 디바이스에서도 모바일 사이트의 움직임을 확인한다.
- 페이지의 컨텐츠가 논리적인 순서로 로딩되고 있는지 확인한다.
- 모바일 사이트 전체의 분석을 실행한다.
참고：PRINCIPLES OF MOBILE SITE DESIGN:DELIGHT USERS AND DRIVE CONVERSIONS
참고자료는 영문인데 눈요기로라도 한번 보심이…
오탈자 및 오역은 댓글 부탁해요.
