모바일 웹은 점점 급증해 가고 있다. 인터넷과 Web이 PC의 전유물이라는 사람들의 생각은 점점 없어져 가고 있는게 사실이다. 작년, 한해동안 미국에서만 6천3백만명이 넘는 사람이 모바일을 통해 웹에 접속하였다. 이는 2013년이 되면 전 세계적으로 17억명이 될것이라는 예견도 있다. 영국에서의 예만 보더라도 그 사실은 극명해 진다. 20%의 모바일폰 사용자들이 그 모바일 폰으로 인터넷을 즐기고 있다는 조사 결과도 나오고 있다.(Source : http://www.3g.co.uk/PR/Feb2007/4267.htm) 이게 불과 몇년 사이에 벌어진 일이다.
그래서 모바일 웹의 Design을 위한 Guide line의 필요는 절실했다. 그리고, 이곳 저곳에서 모바일 웹을 위한 정보들을 쏟아내기 시작했다.
모바일 웹 design을 위한 Guide line
1, 사용자가 원하는것을 빨리 내놓아라.
Google과 Yahoo의 모바일 웹 페이지
2, 선택된 아이템은 구분되어야 한다.
모바일 사용자들은 컨트롤이 정확하지 않다. 우리 손가락의 면적은 어쩔 수 없이 일정한 면적을 차지해야 하기 때문이다. 동시에 모바일 웹에서 하는 행동들은 스크롤, 하이퍼 링크 클릭, 버튼 클릭, 폼 필드 작성 등이다. 이런것들을 조작하는데 부족한 사용자의 컨트롤을 보완하기 위해서는 정확한 피드백이 필요하다. 이는 눌렸을때 버튼의 색깔등을 달리 함으로써 가능하다.
아래는 BBC의 모바일 웹 사이트로 이 두번째 가이드 라인 적용이 잘 되지 않은 예이다. 두번째줄인 "Greeks stage fresh general strike"라는 기사가 보이는가? 지금 저 기사를 클릭한 상태이다. 그러나 내가 클릭했다는 사실은 글자에 밑줄이 그어지는것 밖에는 알수가 없다. 또한 아래에 있는 텍스트로 된 기사들은 클릭할 수 있는것인지 조차 인지하기 어렵다.
BBC의 모바일 웹 사이트
아래 네이버의 모바일 웹 사이트는 이 두번째 가이드 라인을 잘 지킨 사례라고 볼 수 있다. 버튼 크기를 크게 늘려놔서 미스 클릭을 줄였을 뿐만 아니라 클릭시에 회색으로 아이콘을 덮게 되어서 내가 클릭했다는 사실을 정확히 인지할 수 있다.
3, 사용자가 입력해야 하는것은 최대한 줄여라.
텍스트를 입력하는 방식 외에 선택하는 방식을 취하라는것이 3원칙이다.
모바일 웹에서 텍스트 입력은 곤혹이다. 나도 로그인을 필요로 하는 페이지가 모바일에서 나타나면 꺼버리기 일수였다. 그 조그마한 에디터로 무언가를 치기 시작하면 오타도 많이 났을 뿐만 아니라 느렸다. 그래서 휴대폰으로 블로그를 작성하는 사람들은 당최 이해할 수 없었던것이 나의 입장이다.
텍스트 입력을 줄이기 위해서는 어떤 방안이 필요할까? "선택" 혹은 "미리 예상된 링크" 로 텍스트 입력을 줄일 수 있다.
맥도날드의 모바일 홈페이지 이다. 검색 창 아래쪽에 있는 "Find Restaurants by state"가 보이는가? 굳이 City이름을 텍스트로 입력하지 않더라도 저 버튼을 이용하며 State를 선택하고 City를 선택할 수 있는 것이 제공되어 내가 머무르고 있는 도시의 맥도날드를 쉽게 찾을 수 있다.
맥도널드 Mobile이 텍스트 입력을 최소화한 사례
4. 쓸데 없는 정보는 덜어내라.
모바일 폰의 스크린은 작다. 그야말로 Tidy하다. PC모니터의 몇분의 몇 정도밖에 안되는 픽셀밖에는 없다. 이런 특성을 가진 탓에 모바일 웹 페이지는 중요한 정보만을 담아야 한다. 중요한 정보를 선별하기 위해서는 사용자가 이 페이지에서 원하는게 무엇인지를 규정하는 작업이 선행되어야 한다. 그렇지 않으면 정작 중요한 정보들은 다른것들에 밀려서 찾기 어렵되 될것이 뻔하기 때문이다.
또한, 대부분의 모바일 폰 사용자들은 돈을 내고 페이지에 접속하고 있다. 그 말은 페이지에 수록된 정보의 양이 많으면 많을수록 사용자는 더 많은 돈을 지불해야 한다. 사용자는 자신이 원하는 정보를 로딩하는데 드는 비용은 충분히 감수하지만, 필요하지 않은 정보를 로딩하는데 내는 돈은 액수와 상관없이 불쾌한 경험을 가져다 준다.
아래의 Creative ink모바일 홈페이지를 보라. 이 홈페이지의 목적은 자회사의 포트폴리오를 홍보하고 주문을 따내는데 그 목적이 있다. 그렇기에 그 정보에만 집중하여 6가지 메뉴를 정확히 보여주고 있다. 기타 다른 메뉴나 작업물들의 그림은 다 덜어내었다. PC에서 접속했을때의 홈과 모바일에서 접속했을때의 홈을 비교해보면 어떻게 정보들을 덜어내고 트래픽을 최소화 했는지 볼 수 있다.
반면, 우리나라 대표 포털인 Daum과 Naver의 모바일 웹을 살펴보면 그 차이점도 극명하게 알 수 있다. Daum은 PC에서 접속했을때와 동일하게 모든 정보들을 제공하려다 보니 사용자는 홈에 들어갔을때 무엇을 클릭해야 할지 모른다. 하지만, Naver는 한눈에 내가 원하는 정보에 Access할 수 있다. 만약 뉴스를 보고 싶다면 한 뎁스 더 들어가서 확인하라는 것이다. 홈에서 뉴스를 열거하는것은 쓸데 없는 정보라 판단하였고 덜어내었기에 Simple하고 사용성이 높은 모바일 웹을 만들 수 있었다.
Creative ink 모바일 홈페이지
Daum과 Naver의 모바일 웹 페이지
5. 스크롤은 한방향으로만 제한하라.
수직 스크롤? 수평 스크롤? 이 둘중 한가지만을 사용해야 한다. 물론 스크롤을 사용하지 않도록 설계할 수 있다면 금상첨화다.
PC에서 웹 페이지를 탐색할때 수직 스크롤이 아닌 수평 스크롤까지 해야 하는 상황이라면 사용자는 웹 페이지의 내용을 탐독하기 힘들어 진다. 이는 모바일에서도 똑같이 적용된다. 아니, 모바일에서는 더 심각한 불편을 초대한다. 특히나 터치 스크린 폰을 사용할때는 의도한 방향이 아닌 다른 방향으로 스크롤 하기 쉽다. 그러므로 사이트 자체에서 스크롤을 한방향만 지원한다면 이런 장애물을 사전에 없앨 수 있다.
Google의 모바일 웹 페이지
아래 구글의 모바일 웹 사이트는 스크롤에 관해서는 최적화 되어 있다 할 수 있다. 수직 스크롤만을 지원하며, 모바일 화면에 딱 맞도록 설계되어 있다. Calendar에서 날짜를 클릭하는 일도 버튼이 적당한 크기로 설계 되었기 때문에 정보를 탐색하는데 무리가 전혀 없다.
Epilogue
출처 : Google image 검색
PC와 Mobile은 다르다. 처음에도 언급했듯이 같은 Naver에 접속한다 하더라도 PC에서 접속하는 목적과 모바일에서 접속하는 목적은 근본적으로 다르다. 그렇기 때문에 모바일 웹 페이지를 디자인 할때 위 5가지 원칙은 반드시 지켜져야 한다.
- 사용자가 원하는것을 빨리 내놓아라.
- 선택된 아이템은 구분되어야 한다.
- 사용자가 입력해야 하는것은 최대한 줄여라.
- 쓸데 없는 정보는 덜어내라.
- 스크롤은 한방향으로만 제한하라.
※ 위 5가지 원칙은 여러 모바일 웹 사이트를 돌아다니다 모바일 웹 뿐만이 아니라 일반적인 UI에도 적용되어야 하는 항목들을 추출한 것이다.
모바일웹? 모바일 어플리케이션? 그 둘 중 누가 더 점유율을 잡을 수 있을지는 아직 미지수다. 비용적인 측면에서 본다면 모바일 어플리케이션은 구매시에 비용을 지불 vs 모바일 웹은 이용할때마다 데이터 통신료를 지불해야 한다는 점이 존재한다. 그러나 이 두가지는 비용이나 점유율을 떠나서 사용자가 사용하기 편리한 UX를 제공해야 한다는 점은 일치한다.
또한, 위 다섯가지 원칙들은 모바일 웹에서만 한정 지을것이 아니라 일반 휴대폰 UI디자인 시에도 활용될 수 있다.
Reference
Mobile awesomenesshttp://www.mobileawesomeness.com/
모바일 웹 사이트를 총체적으로 볼 수 있는 사이트
Web crediblehttp://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml
7 usability guidelines for websites on mobile devices
모바일 웹 모범 사례http://www.w3c.or.kr/Translation/mwbp_flip_cards/
모바일 웹 모범 사례
Site pointhttp://articles.sitepoint.com/article/designing-for-mobile-web/3
Designing for the Mobile Web
Smashing magazinehttp://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/
Mobile Web Design Trends For 2009
Mobile web best practice 1.0 - Basic guidelineshttp://www.w3.org/TR/2008/REC-mobile-bp-20080729/#THEMATIC_CONSISTENCY
'Mobile > Web방식' 카테고리의 다른 글
| jQuery mobile Header 글씨 짤림 덜하게 만들기 (0) | 2017.10.13 |
|---|---|
| iPhone 사파리(safari)에서 확대 축소 막기 (0) | 2010.05.26 |
(로그인하지 않으셔도 가능)