모바일 사이트 디자인의 12가지 원칙
UX 디자인 배우기 #01
Today UX 아티클
Medium에 게재된 Nick Babich의 글 Principles of Mobile Site Design 를 소개하고자 합니다.
모바일 유저는 매우 목적 지향적이며 원하는 것을 쉽게, 즉각적으로, 자기가 생각하는 대로 얻을 수 있을 것으로 기대한다고 합니다. 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 버전”이라고 쓰는 것이 명확하다고 합니다.
12,000명 브런치 구독자를 위한 특별한 혜택!!!!!
라이브 클래스 PM VOD 패키지(리서치/분석/전략/설계) 추천
300시간 이상 UX 강좌, PM을 위한 180여개 UX 강좌 묵음 패키지
브런치 구독자에 한해 정가 대비 90% 할인 쿠폰 증정합니다.
쿠폰 코드: 20241231
상세 정보 확인하기
