모바일 터치 디자인하기

우리가 알고 있듯 모바일의 입력 장치는 손가락입니다. 이는 데스크탑의 마우스 커서와 달리 한계점이 존재하며 손가락 제스쳐 마다 기능과 특징이 존재합니다. 모바일(휴대용 터치 스크린) 디자인에서 가장 고려해야 할 부분인 모바일 터치에 관련해 살펴보고자 합니다. 

엄지손가락의 법칙(The Rule of Thumb)

2013년 스티븐 후버의 13,000명의 핸드폰 사용 관찰 연구에서 한 손으로만 사용하는 경우 49%로 가장 많고 한 손으로 핸드폰을 받치고 다른 손으로 화면을 탭을 하는 경우가 36%, 양손을 이용하는 경우가 15%로 핸드폰 사용하는 습관에 대해 알 수 있습니다. 

[스마트폰 사용방식]

[엄지손가락 사용 비율]

스마트폰 사용방식 중 엄지 손가락 사용률을 보면 75%가 되는데, 이는 대부분의 사용자가 핸드폰에서 엄지손가락으로 터치하는 방식을 많이 선호하고 편리하다고 생각하고 있다는 것을 보여줍니다. 

이에 따라 스마트폰 디자인을 할 때 데스크탑 디자인과 달리 모바일에서는 엄지 존 영역을 잘 활용하는 것이 중요하다고 말할 수 있습니다. 

아래에서 보면 스마트폰, 패블릿, 태블릿, 하이브리드 디바이스별 엄지손이 닿는 부분과 닿기 힘든 부분을 표시한 것을 보면 이해하기 쉽습니다. 엄지손가락을 사용하면 부채골 모양으로 정확하게 탭 할 수 있는 영역과 그렇지 않은 영역이 생기는데 이는 디바이스의 크기에 따라 영역이 조금씩 다르게 나타나고 손가락을 잡는 위치에 따라 달라지기도 합니다. 

[디바이스별 엄지존 영역]

디바이스별로 컨텐츠 배열을 할 때 엄지존을 기본 바탕으로 두고 중요한 부분을 엄지존에서 쉬운 영역인 핫존에 위치시킨다면 사용자들의 편의성을 높이고 원하는 정보를 정확하게 노출 시킬 수 있습니다. 이와 반대로 수정, 편집 등 현재 사용 중인 페이지를 변경하는 버튼은 핫존에서 먼 곳에 위치하여 실수로 터치할 수 있는 확률을 낮출 수도 있습니다. 

터치 타겟(Touch Target)

마이크로소프트에서 나온 연구 결과에 의하면 5mm 크기에서는 30번 중 한번의 터치 타겟을 놓치지만 7mm의 경우 100번 중 한번 실수를 하고 9mm에서는 200번 중 한번으로 비율이 낮아졌습니다. 이는 손가락 끝의 크기를 생각하고 작업을 해야 한다는 결과를 보여줍니다. 

모바일에서는 마우스를 이용하는 데스크탑 디자인보다 손을 사용하는 디바이스 특성상 커서의 정확성과 세밀함이 떨어지므로 손가락의 터치 반경과 비슷한 최소 44px 이상을 타겟 사이즈로 잡음으로 써 이용자가 실수할 수 있는 확률을 낮출 수 있습니다. 

[타겟 사이즈별 실패 확률]

[화면 위치별 최소 타겟 크기]

또한 앞서 알아본 엄지존에서 멀어질수록 터치하기가 힘들기 때문에 이에 비례하여 엄지존과 먼 곳의 터치 타겟 사이즈를 넓혀 정확성을 높이는 것이 좋습니다. 

타겟의 크기도 중요하지만 손으로 터치하는 모바일의 특성상 버튼이 여유없이 붙어 있으면 다른 공간을 터치할 확률이 높아지기 때문에 모바일에서 중요한 버튼의 경우 사이 간격을 충분히 두어야 사용자의 실수를 줄일 수 있습니다. 만약 버튼 사이 간격을 줄여야 한다면 반대로 버튼 크기는 커져야 할 것입니다. 

현재 모바일 유입 사용자가 늘면서 어느때 보다 모바일이 중요해지고 있습니다. 데스크 탑의 디자인을 그대로 옮겨와 축소 배열하는 것에서 벗어나 앞서 알아본 모바일 터치의 특징을 고려하여 작업한다면 사용자들에게 높은 편의성을 제공해줄 것입니다. 

※ 참고문헌, URL

   - 터치를 위한 디자인하기(조시 클라크)

   - 모바일을 위한 웹디자인(스매싱 매거진)