[UI/UX 원칙 #1] 모바일 사이트 디자인의 12가지 UX 원칙 가이드라인

"모바일 사이트 디자인의 12가지 원칙"

닉 바비치 [모바일 사이트 디자인의 12가지] 소개하고자 합니다.

모바일 사용자들은 매우 목적 지향적이며, 원하는 정보를 쉽고 즉각적으로, 자신이 생각하는 방식으로 얻을 수 있기를 기대합니다. Google의 연구에 따르면, 모바일 방문자들은 모바일 최적화된 사이트를 다시 방문할 가능성이 더 높다고 합니다. 이에 따라 모바일 친화적으로 사이트를 개선하기 위한 12가지 방법을 소개하고 있으며, 주로 이커머스 사이트를 사례로 들어 설명하겠습니다. 

원칙1. 최적화

전체 사이트를 모바일에 맞게 최적화해야 합니다. 

세로 스크롤링만 사용하기, 콘텐츠를 먼저 보여주고 불필요한 건 제거하기, 열(column)의 개수 제한하기, 데스크탑 페이지와 모바일 최적화 페이지 섞지 않기 등의 구체적인 방법을 제시되어야 합니다. 

원칙2. call-to-action button

모바일 환경에 맞게 행동을 불러 일으키는 버튼(call-to-action button)을 만들어야 합니다. 

원칙3. 메뉴는 짧고 유용하게

메뉴는 짧고 유용하게 만들어야 합니다.

메뉴 카테고리는 7개를 넘지 않아야 합니다. 또한 메뉴를 유용하게 만들기 위해서는 인기도나 유저가 느끼는 가치도에 따라 순서를 정하고, 유저가 이해할 수 있는 용어만 사용해야 합니다.

원칙4. 검색 기능은 눈에 띄게

사이트 검색 기능은 눈에 띄게 만들어야 합니다.

원칙5. 글자 크기와 이미지 확대할 필요가 없게

글자 크기와 이미지는 확대할 필요가 없게 디자인해야 합니다.

원칙6. 제품 이미지와 영상은 질이 좋은 것만 사용

제품 이미지와 영상이 곧 제품이기 때문에 질이 좋은 것만 사용해야 합니다.

원칙7. 친화적인 터치 타겟

손가락 친화적으로 터치 타겟을 만들어야 한다고 합니다. 

MIT Touch Lab의 연구에 따르면 손가락 첫 마디의 아랫부분의 평균 길이는 10-14mm이며 손가락 끝 부분은 8-10mm라고 합니다. 때문에 터치 타겟의 크기는 가로 세로 10mm X 10mm면 좋고, 타겟 사이의 거리는 10px 이상이어야 합니다.

원칙8. 충분한 탐색

유저가 충분히 탐색할 수 있게 해줘야 합니다

너무 일찍부터 가입을 강요하면, 85% 이상의 유저가 사이트를 떠날 수 밖에 없습니다. 유저는 사이트의 내용을 충분히 보고 난 후에 개인 정보를 제공하려 하기 때문에 전환율을 높이기 위해서는 이런 장벽을 최소화 해야 합니다. 가입/로그인 없이 이용 할 수 있는 방법 제시, 비회원 구매 등을 제공하고, 가입은 가치를 제공할 때만 요청하되 최소한의 데이터만 요구해야 합니다.

원칙9. 스크린 방향 안내

스크린 방향을 어떻게 하는 것이 좋은지 알려줘야 합니다.

가로로 디자인 되었건 세로로 디자인 되었건 유저는 방향을 바꾸라는 자극을 받기 전까지 한 방향을 유지해야 합니다.

원칙10. 제품 이미지 확대 가능

제품 이미지는 확대 가능하게 만들어야 합니다.

특히 리테일 사이트에서 중요한데, 유저는 확대 정도를 조절하고 싶어하기 때문에 한 가지 확대 비율만 제공하지 말고 확대 정도를 조정할 수 있게 해줘야 합니다.

원칙11. 디바이스간 호환

다른 디바이스로 옮기기 쉬워야 합니다.

어떤 유저들은 모바일로는 제품 검색만 하기 때문에 나중에 다시 다른 디바이스에서 볼 수 있도록, 정보를 쉽게 저장(장바구니, 위시리스트, 즐겨찾기 등)하고 공유(이메일, SNS 등) 할 수 있게 해줘야 합니다.

원칙12. 하나의 브라우저 윈도우 안에서 이용

하나의 브라우저 윈도우 안에서 이용할 수 있어야 합니다.

다른 윈도우를 열어버리면 방문자가 다시 본 사이트로 돌아가는 경로를 찾지 못하는 위험이 있습니다.

보너스) “전체 사이트”라는 레이블링은 피함

“전체 사이트”라는 말을 보면 유저는 해당 모바일 사이트가 웹 사이트의 요약 버전이라고 오해할 수 있기 때문에 “데스크탑” “PC 버전”이라고 쓰는 것이 명확합니다.