[UX] 터치기기를 위한 디자인 팁 9가지

 

터치기기를 위한 디자인 팁 9가지

출처: http://blogs.balsamiq.com/ux/2013/09/24/mobile-ux-sketchnotes/

http://bahns.net/5673522

 

 

Mobile-UX-Summit-Sketchnotes.pdf

 

 

가장 중요한 터치 영역을 확인하라

1. 손으로 잡는 모양에 따라 다른 부분이 중요
2. 한 손 사용(49%) : 한 손 엄지가 닿는 부분 중요
3. 양손 사용: 한 손 엄지/한 손 검지(36%), 양손 엄지(15%)
    

콘텐츠를 컨트롤 위에 배치하라

1. iOS – 화면 아래에 컨트롤 배치
2. 안드로이드 – 화면 위에 컨트롤 배치(시스템 메뉴 위에 다시 앱 메뉴가 배치되면 곤란)
3. 모바일 웹 – 페이지 아래에 컨트롤 배치(필요하면 점프해서 가도록 구성)
    

선례에 따르는 것이 좋다

1. 태블릿은 아래에 메뉴를 배치 하는 것이 좋지 않음
2. 태블릿은 위나 잡았을 때 엄지가 닿는 좌우 측면이 유용

3. 터치 랩탑의 경우는 다름

• 좌우 영역이 유용한 점은 비슷함
• 위 영역보다 아래가 나음. 세워진 화면에서 위까지 손 들기 귀찮아 함
   

화면 크기만 보고 터치 특성이 같다고 생각하면 안 된다

1. 포인팅 장치의 정확도는 기기마다 다르다
2. 정확도에 따라 컨트롤 크기를 다르게 설정할 필요 있음

3. CSS4 – pointer media query 참고

• coarse: 스마트폰, 터치스크린 / 위 리모콘, 키넥트
• fine: 스타일러스 화면 / 마우스, 터치패드 
   

모든 데스크탑 디자인도 터치를 고려해서 만들어야 한다.

1. 마우스 오버는 터치할 때 무용지물임
2. 사람들이 터치로 사용하는 제품에는 마우스 오버 효과를 쓰면 안됨
    

터치 영역은 최소 44*29 픽셀 이상으로 하라

1. 최소 7mm 는 확보해야 엄지로 터치가 가능하다
2. 7mm = 44 pixel = 2.75em  (44*29 픽셀이 진짜 최소 크기)
3. 웹은 44px , iOS 앱은 44pts, 안드로이드 앱은 44dp 로 맞추면 무난하다
   (일반적으로 가장 널리 사용되는 160dpi 디스플레이에 맞춘 크기임)
    

수직으로 44 픽셀 vertical rhythm을 만들어라

 

(44픽셀 줄 간격에 맞춰 디자인 한 것처럼 만들라는 뜻)
 

아이콘이 클 수록, 가까이 있을수록 터치가 쉽다 (Fitts의 법칙)

(스마트와치를 멀리서 바라보고 쓰려면 버튼이 커야 한다)
 

스크린만 생각하고 디자인하지 말고, 센서를 생각하고 디자인하라

 

(최근 모바일을 먼저 설계하고 다른 것을 나중에 하라는 원칙이 유명한데, 이제 센서를 먼저 고민하고 화면을 나중에 생각하는 시대가 오고 있다. 그러니 화면을 고민하기 전에 센서를 먼저 생각하라는 뜻인 듯)