구글의 크롬 엔지니어 매니저 Addy Osmani의 글입니다.
최근에 저는 베태랑 UX Designer인 스티븐 후버(Steven Hoober)와 터치 인터페이스에 대한 이야기를 나눴습니다. 후버(Hoober)의 “손가락, 터치 그리고 사람을 위한 디자인” 에서는 다음의 원칙을 권고하고 있습니다.
- 화면 중앙에 주 콘텐츠(Primary)와 동작(Actions) 배치
- 가장자리 부근에 2순위 동작(Primary Actions)과 탭 배치
- 메뉴 뒤에 3순위 기능(Tertiary functions) 배치
- 사용자가 어떻게 플렛폼과 특정 상호작용을 하는지 조사 합니다. 그립(Grip), 수행(Task), 문맥(Context)이 모두 핵심입니다.
다음은 앱을 만드는데 있어 이를 기반으로 디자인하려 노력하는 터치 친화적인 가이드이며, 다른 사람들에게도 추천합니다. Youtube와 Twitter의 모바일 웹에 위 가이드를 시각화 해보았습니다.
더 깊게 파고들면, 실 생활에서 터치을 위한 디자인 하기 위한 후버(Hoober)의 발견법(heuristics)은 모든 기기에 존재합니다.
- 한가지 방법이 아닌 다양한 방법들로 사용자가 기기를 사용할 수 있도록 디자인
- 사람들이 화면의 중앙을 본다. — 핵심 콘텐츠를 중앙에 위치
- 사람들이 화면 중심을 터치한다. — 가능한 핵심 동작을 중앙에 위치
- 사람들은 그들이 본 것만 탭(tap)한다. — 터치 타겟 주변에 여백을 두어 사용자가 탭(tap)하고 상태 변화를 볼 수 있게 한다.
- 사람들은 다양한 방식으로 다른 기기를 사용한다. — 사용자가 UI를 사용하는 방식에 대한 데이터를 수집한다.
왜 이런것들을 신경쓰는 건가요?
터치 상호작용에 대한 UX 리서치 결과는 다음과 같습니다.
- 사용자의 75%가 엄지로 터치합니다.
- 그러나 사용자의 49%는 한 손으로 잡고, 36%는 한손으론 스마트폰을 잡고 다른 손으론 터치하며, 10%는 양쪽 엄지를 사용합니다. (이로 인해 75%의 수치가 약간 오해의 소지가 있습니다.)
- 한 손 사용자 중 67%는 오른쪽 엄지를 사용하며, 나머지 33%는 왼쪽 엄지를 사용합니다.
후버(Hoober)는 10년 넘게 인터렉션 디자인에서 중추적인 목소리를 냈으며 조쉬 클라크(Josh Clark)과 같은 사람들과 함께 “엄지 영역(Thumb Zone)”을 이끌어 왔습니다. 그동안 Thumb Zone은 한 손으로 화면을 터치하기에 가장 편안한 영역으로 여겨져 왔습니다. 하지만 2020년에는 Thumb Zone을 피하세요.
최근 몇년 사이, 사람들이 스마트폰과 태블릿 PC를 어떻게 잡고 만지는가는 더욱 무의미해지고 있습니다. (Thumb Zone에서 말하는 것처럼) 모든 사용자들이 동일한 방법으로 스마트폰과 상호작용 한다는 것은말이 안되지만, 새로운 스티브(Steve)의 연구 결과에 따르면 수년간 제가 따르고 싶어하는 내용들이 있습니다.
사용자는 각기 다른 수 많은 방식으로 스마트폰과 상호작용 합니다. 한 가지 방법이 아니라 사용자가 기기를 사용하는 다양한 방식을 설계 해야 합니다. 대부분의 사용자들은 행동과 상황에 따라 상호작용하며 기기를 잡는 방식을 바꿉니다. 뿐만 아니라 사용자는 손가락을 움직이며 엄지손가락이 닿는 영역을 조절할 수 있습니다.
사용자들은 화면의 중앙을 정말 좋아합니다!
후버(Hoober)의 연구에 따르면 사용자는 콘텐츠를 화면 중앙의 한 위치로 이동 한 다음 해당 항목을 탭하는 것을 선호 한다고 강조했습니다. 그는 읽거나 클릭할 수 있는 주요 항목은 화면의 중앙에 위치해 있어야 하고, 다른 화면(경로)으로 이어주는 보조적인 옵션은 화면의 상단이나 하단에 배치되어야 한다고 제안합니다.
이것은 머테리얼 디자인(Material Design)에서 제안한 하단 바(Bottom Bar)가 잘 동작하는 이유 중 하나 입니다. 하단 네비게이션 바(Bottom navigation bars)는 가장자리에 가까이 위치하며 주요 기능(actions이라 나와있지만 문맥상 기능으로 표기)에 편안하게 접근 할 수 있습니다. 최근 몇 년 동안 하단 탐색 패턴의 인기가 증가한 것은 놀라운 일이 아닙니다.
마무리…
나는 후버(Hoober)의 가이드라인을 충분히 읽는 것을 추천합니다. 다음의 파트들(1, 2, 3)을 읽어보세요. 이 지침들은 훌륭합니다.
추가자료
- 스티븐 후버(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)
해외 레터를 구독하고 있어서 그쪽을 통해 번역했는데, 나중에 보니 관련 글이 많아 놀랐습니다. 후버의 글이 유명한가 봅니다.
윗글에서는 후버의 말도 맞지만 인터렉션에 따라 기기를 잡는 방법이 달라지고 그로 인해 터치 영역도 달라진다고 합니다. 저는 여기에 스마트폰이 커지면서 화면의 세로길이가 길어지는 것도 한몫 한다고 생각합니다.
개인적으로 스크롤 가능한 영역에서 터치를 할때 무의식적으로 중앙이나 손이 쉽게 닿는 위치로 이동한다음 터치하는 습관이 있는데, 이 글보고 놀랐습니다.
몇달전 Facebook혹은 Brunch를 통해서 터치 영역을 가늠할 수 있는 가이드 파일을 누군가 공유했던것 같은데 같이 첨부하려 했으나 찾지 못해서 아쉽습니다. (이 글을 보고 아시는 분이 계신다면 알려주세요.)
그 외에 후버를 국문으로 번역한 글이나, 가볍게 읽으면 좋을것 같은 글을 추가해봅니다. (터치 최소 사이즈 라던가, 일반 PC모니터에서의 주요 영역 등…)
- 모바일 터치 디자인하기 — https://cyberx.tistory.com/196
- 엄지영역(the Thumb Zone) : 모바일 사용자를 위한 디자인 — https://bit.ly/3fKq1iD
- 터치기기를 위한 디자인 팁 9가지 — http://blog.naver.com/olivestone12/220018301370
이번 글 부터는 긴 수식어 대신 원문 출처와 약간의 의견을 추가하며 작성하고자 합니다. 오역은 댓글로 알려주시면 감사하겠습니다.
