썸존과 터치 포인트 + 제스처 (탭 / 롱 프레스 / 핀치 / 플링 etc)

 

썸존과 터치 포인트

터치 타깃 or 핑커터치포인트

- 손 끝으로 클릭하기 위해 유효한 터치 영역을 제공해야 한다.

- 누군 손가락이 얇고, 누군 뭉툭하기에 표준을 제시(:

 

안드로이드 : 48 x 48 dp
iOS : 44 x 44 pt

 

*최소 터치 영역의 사이즈를 48dp로 적용

 

 

사용 환경 이해

- 스마트폰 사용환경과 사용자의 습관에 따라 다름

 

1. 지하철, 버스에서 한 손(왼손, 오른손)으로 사용
2. 침대에 누워서 거치해서 사용
3. 길을 걸어가며 한 손에 가방(짐)을 들고 사용
4. 책상에 앉아 양 손으로 사용
5. 흡연을 하거나 커피를 마시며 왼손으로 사용

- 2013년도 Steven Hoober가 진행한 조사 결과

1. 한 손 사용 : 49%
2. 감싸기 : 36%
3. 양 손 사용 : 15%

: 15%를 제외하고는 한손으로 조작하는 경우가 많다. 이럴때 어느영역이 터치영역이 쉽고 어려운지 이해할 필요가 있다. 물론, 이러한 수치는 10년도 더 된 정보고 스마트폰의 크기도 커지고 다양화되었기에 양손 비중이 더 높아졌을 가능성도 높지만, 정확한 수치에 집중하기보다는 한손으로 사용할 수 밖에 없는 상황을 맞닥뜨렸을 때- UI를 어떤 식으로 구축하는지 이런것들을 고민하는게 디자이너 입장에서 중요하다.

 

 

Thumb Zone

- 화면 내 엄지 손가락으로 터치하기 쉬운지 어려운지 디바이스의 스크린 화면 크기에 따라 요소의 클릭 난이도가 다르다.

- 주요한 액션 버튼은 중앙 하단에 배치하는게 클릭하기 편하다 ㅎㅎ.

대표적인 예시 : Samsung ONE UI

> 보는 영역과 인터렉션 영역을 나눠 쉽게 기능을 사용할 수 있도록 고안된 레이아웃.

 

폴더블 환경 내 접근성

: 폴더블 시장이 매우 커지고 있기 때문에 공부할 필요가 있다(:

: 닿기 다소 불편한 영역 / 닿기 편한 영역 / 닿기 어려운 영역 고려하기

 

 

제스처

- 디바이스와 인터렉션을 위해 사용되는 제스처 이해하기.

- 앱이라는 것을 실생활에서 너무 익숙하게 사용해서 딥하게 공부해본 적은 없지만- 특징과 예시, 명칭정도는 숙지하자(:

 

제스처를 이해해야 하는 이유

사용자 입장에서 의도한 대로 동작할 것이라는 믿음이 깨지면 사용자에게 짜증유발 할 수 있다🥹.

 

 

탭 Tap

: 가장 많이 사용되는 제스처로, 특정 오브젝트를 탭하면 해당 기능을 동작한다.

 

Ex.

> 콘텐츠 탭하면 상세페이지로 이동.

> 장바구니 버튼을 탭하면 장바구니 페이지로 이동.

> 삭제 아이콘 탭하면 해당 요소 삭제.

> 체크박스 탭하면 체크 선택.

 

 

더블 탭 Double Tap

: 탭을 빠르게 두번 클릭하는 것을 말하는데, 딱 정해진 피드백은 없다.

 

Ex.

> 인스타그램에서 콘텐츠 더블 탭하면 좋아요 눌림

> 구글맵에서 더블 탭하면 지도 확대됨

> 아이폰에서 사진 더블 탭하면 사진 확대됨

 

 

롱 프레스 Long press

: 특정 영역을 길게 누르고 있을 경우에 숨은 기능이 활성화 됨.

 

Ex.

> 삭제가 가능한 리스트에서 활용시 멀티 삭제 기능 노출

> 아이폰 사진 목록에서 롱 프레스하면 복사, 공유, 즐겨찾기, 삭제 기능 노출

> 아이폰 홈에서 롱 프레스하면 홈 화면 편집, 앱 제거 등 기능 노출

 

 

스크롤 Scroll

: 수직, 수평으로 스크롤을 통해 화면 내에 더 많은 콘텐츠를 볼 수 있다.

*수직 스크롤은 동일한 레벨의 콘텐츠를 보거나 큰 범주에 해당하는 내용을 볼 때 사용되고, 수평 스크롤은 좁은 범주로 특정 카테고리에 해당하는 콘텐츠 확인할 때 사용함.

 

Ex. 

> 리스트 페이지 내에서 원하는 콘텐츠 탐색시

> 특정 카테고리에 있는 콘텐츠 탐색시

 

핀치 Pinch

두 손가락으로 동시에 터치 후 확대/축소하는 제스처로, 확대하는 것을 Pinch open, 모아 축소하는 것이 Pinch closed

 

Ex.

> 지도 확대/축소하여 자세한 지도 정보 얻고자 할 때

> 사진 확대/축소 시

 

 

드래그Drag, 스와이프Swipe, 플링Fling

 

드래그: 느리고 섬세한 제어가 가능하며, 일반적으로 대상이 화면에 있다.

스와이프 : 좌에서 우로, 우에서 좌로 넘기는 제스처

플링: 빠른 제스처로 동작하며, 속도의 임계값을 넘을 경우 동작한다.

*드래그, 스와이프, 플링은 비슷하지만 속도에 대한 기준이 다르다.

 

드래그 ex.

> 화면 내에 특정 물체를 이동시킬 때

 

스와이프 ex.

> 같은 레벨의 탭을 클릭하지 않고 탭 간의 이동할 때

> 가장 자리 스와이프 할 경우 현재 화면과 별개의 콘텐츠를 호출하거나 페이지 이탈할 때

 

플링 ex.

> 무언가를 제거할 때

 

 

팬 Pan

: 한 손가락을 떼지 않고 이동하는 제스처로 전방향으로 콘텐츠를 탐험할 때 사용됨.

 

Ex.

> 지도 맵에서 전방향으로 탐색할 때

> 화면 높이나 너비보다 큰 콘텐츠 탐색할 때

 

 

회전 Rotate

: 핀치와 비슷하게 두 손가락을 동시에 터치한 상태에서 회전시켜 원하는 방향으로 기준을 변경할 때 사용

 

Ex.

> 지도 맵에서 방향을 전환하며 탐색할 때

> 네비게이션 앱에서 지도의 방향 전환

 

 

주의해야할 점 두가지

 

1. 특정 제스처로만 기능에 접근할 수 있으면 안 됨.

> 직관적이지 않은 사용성으로 화면 내 기능을 숨기면 안 된다.

> ex. 삭제 버튼 없이, 꾹 눌러야 삭제 기능 동작

 

2. 익숙한 제스처 사용해야 함

> 사용자의 제스처에 대한 인터렉션이 기대하는 대로 동작하지 않으면 불편함을 느낀다.

> OS별 제스처 가이드라인 확인 필요

 

 

**머티리얼 디자인 제스처 가이드라인 살펴보기🖤

Apple Developer 사이트에서도 Touchscreen gesture 페이지가 있다. 여기에 있는 글들도 읽어보면 좋다(: