모바일웹(mWeb)의 25원칙
지난번 글, '모바일웹(mWeb)은 죽지 않는다'에서 왜 우리가 mWeb에 주목해야 하는지를 설명하였습니다. 오늘은 구글에서 제안하는 모바일 사이트 디자인의 25원칙을 소개해 드릴까 합니다. 아직 한글로는 제대로 소개가 되지 않았지만 'think with Google' 사이트의 이 기사를 한글로 요약정리해 드립니다. (*이 소개는 회사의 업무/견해와는 무관한 개인적인 노력임을 밝혀둡니다.)
메인 페이지 및 사이트 내 유저 흐름
1. 가장 중요한 메뉴를 크고 분명하게 위치시킨다.
- 유저가 사이트에 들어와서 무얼 해야 하는지 바로 알 수 있도록 가장 중요한 Call-to-Action 버튼을 메인 페이지의 가장 눈에 띄는 곳에 위치시킨다.
2. 메뉴 카테고리는 데스크톱보다도 최대한 더욱 간결하게 만든다.
- 데스크톱에서 사용하는 상세하고 복잡한 카테고리 분류는 모바일에 적합하지 않다.
3. 어느 페이지에서나 메인 페이지로 쉽게 돌아갈 수 있게 한다.
- 모든 페이지의 최상단에 회사의 로고를 배치하고, 로고 클릭을 통해서 메인 페이지로 돌아갈 수 있게 한다.
4. 프로모션 광고가 과하게 페이지를 차지하지 않도록 한다.
- 특정 프로모션이 팝업으로 떠서 일반 유저들이 다른 페이지를 둘러보지 못하도록 하지 않는다.
사이트 내 검색
5. 사이트 내 검색창을 항상 사이트 상단에 배치한다.
6. 자동완성/오타 자동교정 기능을 검색창에 제공한다.
- 모바일 타이핑은 항상 어렵기 때문에 자동완성, 검색어 추천, 오탈자 자동 교정 검색 등의 스마트 검색 기능이 필요하다.
7. 검색 필터를 제공해서 검색 결과의 퀄리티를 높인다.
- 필터를 제공해서 최적의 검색 결과를 보여주되, 검색 결과가 0이 되는 검색 필터 설정은 적절한 안내와 함께 진행하지 못하도록 기능을 제한한다.
8. 제품/서비스 종류가 다양하다면 유저에게 먼저 물어본다.
- 때로는 검색 필터를 아예 검색할 때부터 물어보는 것이 효과적일 수도 있다.
전자상거래 및 전환
9. 회원가입/로그인 없이도 사이트를 둘러볼 수 있게 한다.
- 너무 이른 단계에서 로그인을 요구하면 사이트 이탈이 늘어난다.
10. 회원가입/로그인 없이도 물건을 구매할 수 있게 한다.
- 손님 모드로도 상품 구매가 가능한 옵션을 제공하되, 회원가입 및 로그인을 유도할 만한 충분한 유인을 제공한다.
11. 이미 알고 있는 유저 정보는 항상 '자동 채움'이 되도록 한다.
- 이미 로그인 한 유저라면, 회원정보에 입력한 내용을 다시 물어보지 않는다.
12. 구매 도중에 상담센터로 전화할 수 있는 버튼을 제공한다.
- 특히 복잡한 작업이 필요한 페이지에서 곧바로 전화걸기 기능을 제공하여 페이지 이탈을 줄인다.
13. 하던 작업을 다른 기기에서 쉽게 마무리할 수 있는 저장 기능을 제공한다.
- 여전히 많은 사람들이 모바일에서의 전환을 꺼리므로, 입력한 진행단계를 저장하여 다른 기기에서도 쉽게 다시 진행할 수 있는 기능을 제공하는 것이 좋다.
유저 정보 입력
14. 유저가 정보를 입력하는 과정을 최적화한다.
- 번호를 입력하는 부분엔 번호 키보드를 제공한다거나, 주민등록번호를 입력하면 자동으로 생년월일과 성별이 선택되는 등의 최적화된 입력 경험을 제공한다.
15. 토글 및 드롭다운 메뉴를 잘 활용한다.
- 모바일 타이핑은 항상 어려우므로 가능하면 토글이나 드롭다운 메뉴로 유저가 쉽게 입력할 수 있도록 한다.
16. 날짜 입력이 필요한 경우에는 캘린더 UI를 활용한다.
- 날짜와 요일을 확인하기 위해서 유저가 사이트 밖으로 나가야 하는 상황을 줄인다.
17. 정보 입력 오류를 실시간으로 유저에게 알려준다.
- 실시간으로 각 필드에 입력된 값의 유효성을 확인해서 유저에게 정확하게 입력이 되었는지 알려준다. 입력된 값이 잘못되었다면, 무엇이 문제인지 정확하게 알려준다.
18. 입력 정보의 숫자를 최대한 줄이고, 진행상황을 보여준다.
- 진행상황(Progress Bar)을 시각적으로 보여줘서 유저가 전체 과정의 어디쯤 위치해 있는지를 알게 해준다.
모바일 유저 인터페이스(UI)
19. 사이트의 모든 페이지가 모바일 친화적이어야 한다.
- 모바일 페이지와 데스크톱 페이지가 아직 섞여있다면, 전부 모바일 친화적인 페이지로 업데이트한다.
20. 콘텐츠를 보기 위해 화면을 확대하게 해서는 안된다.
- 확대를 해야만 볼 수 있을 정도로 작은 정보들은 유저들이 놓치기 쉽다.
21. 상품 사진은 고해상도로 확대해 볼 수 있게 한다.
- 유저들은 항상 사진을 크게 보고 싶어 한다.
22. 가장 적합한 화면보기(가로/세로)를 유저에게 알려준다.
- 하지만 가장 중요한 call-to-action은 어느 방향에서나 분명히 드러나야 한다.
23. 새로운 브라우저 창이 열리지 않도록 한다.
- 모바일에서 여러 개의 창 사이를 옮겨 다니는 것은 쉽지 않은 일이다.
24. PC 화면으로 보기 옵션은 불필요하다.
- PC 화면으로 보기 옵션은 모바일 사이트의 내용이 PC 사이트보다 불충분하다는 인상을 준다.
25. 왜 유저의 위치정보가 필요한지 구체적으로 설명한다.
- 항상 유저의 위치정보를 받을 필요가 없다. 필요한 경우에만 활성화시킬 수 있는 옵션을 제공한다.
