스마트폰은 웹사이트만 보는 용도가 아닌 전화 및 메시지, 모바일 뱅킹 등 다양한 기능을 가진 기기입니다. 즉, 스마트폰을 어떻게 쓰는지에 대해서는 다양한 활용방법이 많아 일일이 열거하지 못합니다.
최근 스마트폰으로 사이트를 접속하는 사람이 늘어나고 있어 모바일 사이트 전환을 하고 있는 사이트들이 늘어나고 있습니다. 사용자의 편리성 향상을 위해 스마트폰 대응 후 내부적으로 어딘가 모르게 사용하기 어려운 것이 이슈가 되고 있는 경우가 종종 발견하고 있습니다.
사용자들이 불편하다고 느끼는 모바일 웹 UI 디자인과 기능에는 주로 다음과 같은 것들이 있습니다.
링크 부분이 눈으로 구분하기 어려울 때
스마트폰에서 링크 부분이 한눈에 들어오지 않으면 사용자는 더 이상 사이트에 접속하지 않습니다. 직접 글로 표현하기 쉽고 알기 쉬운 구분색상을 가진 버튼과 배너를 제공하는등의 배려가 필요합니다. 이것은 클릭률과 이탈률등의 수치에 영향을 줍니다.
링크 부분을 누를 때 간격이 너무 가까울 때
웹사이트에서 링크 목록이나 배너등의 링크 부분이 길에 늘어선 경우가 많습니다. 링크건 버튼이 몰려 있는 경우, 사용자가 실수로 옆의 링크 부분을 눌러 엉뚱한 서비스가 나올 가능성이 있습니다. 이런 경우 링크부분과 링크부분의 간격을 충분하게 확보하여 사용자가 스트레스 없이 조작할 수 있도록 해야 합니다.
특히 스마트폰은 손가락으로 터치하여 링크를 눌러 이동하게 됩니다. 여기서 자주 누르는 손가락은 엄지손가락일 것입니다. 엄지손가락 양손을 모두 사용한다면, 검지 또는 중지에 따라 손 중에서도 가장 굵은 손가락에 맞춰 디자인을 고려해야 합니다. 그리고 어린이부터 어른까지 폭넓은 연령층이 사용하는 경우도 고려하여 제대로 동작을 못시키는 아이들이나 어른들을 고려한 디자인도 고려해야 합니다.
전화번호를 한번 탭해서 걸리지 않을 때
전화번호를 탭하면 전화가 걸리는 것은 이제 당연한 기능이 되었습니다. 전화를 한다는 것은 매장이나 회사에 연락을 하는 것으로 이 중요한 사용자 행위를 방해하지 않도록 배려하는 것이 중요합니다.
경로 정보가 지도앱에서 보이지 않을 때
지도 앱은 단순하게 지도만 보는 것이 아니라, 경로 검색과 네비게이션등의 기능을 가지고 있는 경우가 늘어나고 있습니다. 지도 앱 사용자는 어딜 가든 지도앱을 통해 필요에 따라 경로검색을 사용하는 경우가 많습니다.
원하는 페이지를 찾기 어려울 때
사용자가 원하는 페이지는 다양합니다. 예로, PC에서 찾은 사이트를 본 사용자가 스마트폰에서 접속하는 경우, 특정 정보를 원하게 됩니다. 아니면 홈 화면으로 돌아가려는 사용자가 있을지도 모릅니다. 사용자 목적에 맞게 알맞은 카테고리와 바로가기 기능등을 준비하여 원활하게 원하는 페이지에 도달하고 설계해야 합니다.
사이트가 표시되는데 5초이상 걸리는 경우
스마트폰에서 웹사이트를 열때 시작과 동시에 표시될 때까지 시간이 길면 길수록 사용자는 그냥 사이트를 닫아버릴 수도 있습니다.
현재 한국의 경우 5G환경이 주류인데 대기시간이 3초미만이라면 비교적 스트레스를 덜받고 사이트를 접속한다고 알려져 있습니다. 따라서, 5초이상 걸리는 경우 원래 사이트를 접속하려고 했던 사용자는 이를 포기하고 브라우저를 닫아버릴 가능성이 큽니다. 참고로 미국내에서는 1초이상 걸리면 스트레스를 받는다는 연구결과도 있습니다.
플래시를 사용하고 있다면
아이폰에서는 일단 플래시(Flash)를 사용할 수 없으며 어도비사도 플래시 종료를 하였습니다. 그리고 오래전에 만든 사이트를 운영중이라면 플래시를 사용하여 애니메이션 효과등을 주고 있다면 자바스크립트등으로 변경하길 권장합니다.
스마트폰 화면너비와 웹사이트 너비가 맞지 않을 경우
웹사이트의 전체 너비가 너무 작아 여백이 커지고 행별 길이가 줄어들면 가독성이 떨어지는 느낌이 강합니다.
웹사이트 화면 너비가 알맞으면 스마트폰 화면에서 효과적으로 활용할 수 있습니다.
웹사이트 전체 너비가 너무 크면 스크롤바가 가로방향으로 만들어져 조작성이 나빠집니다.
스마트폰 화면 너비는 기기별로 틀립니다. 이는 시대의 흐름에 따라 달라지는 경향이 강해진다는 것을 알 수 있습니다.
즉, 모바일 대응 사이트를 만든다면, 다양한 너비에 대응할 수 있도록 사이트 개발을 진행해야 합니다.
입력항목이 너무 많을 경우
문의양식이나 회원가입 양식 등에서는 세심한 배려가 필요합니다. PC에서는 쉽게 입력박스를 선택하고 텍스트를 입력할 수 있지만, 스마트폰에서는 입력박스를 선택하는 것도 쉽지 않고 텍스트 입력도 쉽지 않습니다.
접근할 수 있는 콘텐츠가 제한적일 때
실무프로젝트에서 사이트 개발을 의뢰하는 기업들을 보면, “스마트폰에서 이런 정보는 보지 않는다”, “외부에서 보는 몇가지 페이지만 스마트폰에 대응하자”라고 요구하는 경우가 종종 있습니다.
“스마트폰에서 이런 정보를 읽지 않는다”라고 한다면 이는 PC를 주로 사용하는 사람들의 말입니다. 실제로 여성 절반은 PC를 사용하지 않고 스마트폰을 주로 사용합니다. 즉, 스마트폰으로 인터넷 검색행위를 한번에 끝내길 원합니다.
“외부에서 보는 몇가지 페이지만 스마트폰에 대응하자”라는 것은 스마트폰 이용장소의 90%가 가정이라는 조사결과도 있듯이 스마트폰은 외출하거나 집에 있을 때도 가까이 두고 사용하는 기기라는 것을 잊지 말아야 합니다. 부담없이 검색할 수 있고, 방대한 정보를 읽을 수 있는 편리한 도구가 되고 있습니다.
이런 사용자의 사용성을 고려하면 발생하는 것으로 이는 모바일 전용 사이트는 PC용 사이트의 단순화된 버전이 아니라는 것을 기억해야 합니다. 스마트폰 환경에 최적화하여 PC에서 보는 웹사이트만큼 편리한 모바일 웹 UI 디자인으로 동일한 정보를 얻을 수 있어야 한다는 환경이 요구되는 것입니다.
화면에 대한 디자인 UI 및 UX는 다음 포스트를 참고할 수 있습니다.
프로그램 UI 와 UX 디자인- 컨텐츠 구조와 네비게이션
프로그램 UI 와 UX 디자인- 화면 레이아웃 및 액션
프로그램 UI 와 UX 디자인- 데이터의 표현과 정보 받기
Mobile Pattern – 모바일 웹 디자인 UI 레퍼런스 사이트