Touch-Friendly Design
Modern Touch-Friendly Design
Hoover의 "Design for Fingers, Touch, and People"에서는 UI designer가 아래와 같이 디자인하도록 조언하고 있다.
주요 콘텐츠와 액션은 화면의 중앙에 배치하라.
두 번째로 중요한 액션과 탭은 가장자리에 배치하라.
덜 중요한 기능은 메뉴 속으로 집어넣어라.
사용자가 특정 인터렉션을 어떻게 수행하는지 관찰하라. Grip, task, context가 중요하다.
아래가 내가 앱 디자인을 할 때 따르려고 하고 다른 사람에게 추천하는 터치 친화적인 가이드라인이다.
실제로 모든 디바이스에서 Hoober의 터치를 위한 디자인은 아래와 같은 결과를 보여주고 있다.
사용자는 한 가지 방법이 아닌 다른 방식으로 기기를 사용한다.
사용자는 화면의 중앙을 본다. - 주요 콘텐츠를 중앙애 배치하라.
사용자는 화면의 중앙을 터치한다. - 가능하면 주요 액션을 중앙에 배치하라.
사용자는 볼 수 있는 것만 터치한다. - 터치 타겟의 공간을 충분히 확보해서 터치하면서 타겟의 상태가 변하는 것을 볼 수 있게 하라.
사용자는 다른 기기들을 다른 방식으로 사용한다. - 사용자가 당신의 UI를 사용하는 방식에 대한 데이터를 모아라.
왜 이런 것들이 중요할까?
터치 인터렉션에 대한 UX 리써치는 아래와 같은 사항들을 보여주고 있다.
75%의 사용자는 엄지손가락만으로 화면을 터치한다.
49%의 사용자는 한 손으로만 폰을 잡고 사용하고, 36%는 한 손으로 폰을 잡고 다른 손으로 터치를 하며, 10%는 양 손의 엄지를 사용한다. 이 결과는 75%라는 숫자와는 좀 차이가 있다.
한 손 사용자의 67%는 오른손을 사용하고 33%는 왼손을 사용한다.
엄지 영역(Thumb Zone)은 한 손으로 폰을 잡았을 때 가장 터치하기 편한 영역으로 여겨져 왔다. 그러나 Thumb Zone을 다시 생각해볼 필요가 있다.
최근에는 사용자가 폰과 타블렛을 쥐는 방식이 매우 모호하다고 밝혀지고 있다. 모든 사용자가 폰을 동일한 방식으로 사용하지 않는다는 것이다.(Thumb Zone에서 말하는 것 처럼)
사용자는 폰을 매우 다양한 방식으로 사용한다. 사용자가 기기를 한 가지 방식으로만 사용하지 않고 여러 가지 방식으로 다룬다는 것을 알고 디자인해야 한다. 사용자는 과업(task)와 맥락(context)에 기반한 인터렉션의 종류에 따라 폰을 잡는 방식을 달리 한다. 게다가 사용자는 손가락을 움직이며 조작하여 엄지가 닿는 영역이 바뀌기도 한다.
사용자는 화면의 중앙을 좋아한다!
Hoober의 연구 결과에 따르면 사용자는 가능하면 콘텐츠를 화면 중앙으로 옮겨서 선택을 하는 경향이 있다고 한다. 사용자가 읽고 클릭할 수 있는 주요 아이템들은 화면의 중앙에 위치해야 하고 다른 화면으로 이동할 수 있는 경로를 제공해주는 부가적인 옵션들은 화면 상단이나 하단에 위치해야 한다고 한다.
이것이 Material Design에서 제안하는 Bottom bar같은 UI가 잘 작동하는 이유 중 하나이다. Bottom navigation bar는 화면의 가장자리에 위치하며 주요 액션에 쉽게 접근할 수 있게 해 준다. 이 것이 최근에 bottom navigation 패턴이 증가한 이유일 것이다.
더 읽어보기
Steven Hoober - Design for Fingers, Touch, and People
A List Apart - How we hold our gadgets?
UXMatters - How do users really hold mobile devices?
Smashing Magazine - Thumb zone - designing for mobile users
LukeW - Designing for large-screen smartphones
Josh Clark - Designing for Touch
