[번역] 엄지를 고려해 디자인하기
Thumb Zone에 대해 알아봅시다!
데이터와 분석, 디자인을 키워드로 하는 좋은 글을 찾아 번역해서 소개하고 있습니다.
여섯 번째 소개글은 소개팅 앱 Tinder의 리드 디자이너이자 프로젝트 매니저인 Scott Hurff가 쓴 <Designing for Thumbs>입니다. 모바일 앱 내의 사용자 행동을 분석하면서 Thumb Zone에 관해 궁금해하시는 분들이 꽤 계시는데요. 이 글을 통해 실제 사용자가 앱을 사용하는 맥락까지 고려해서 디자인하는 방법에 대해 알아볼까요?
원문은 링크를 클릭해 확인하실 수 있습니다.
(앱을 사용할 때 '엄지로 접근 가능한 영역'을 뜻하는 Thumb Zone이라는 용어는 따로 번역하지 않고, 영문 그대로 사용하였습니다. 또한 매끄러운 전개를 위해 의역된 부분이 있습니다. )
오늘은 인터페이스를 디자인하는 데 있어 물질계(!)를 어떻게 고려해야 할 지에 대해 얘기해 보려고 합니다.
갑자기 마이너리니 리포트, 백 투 더 퓨처 같은 세상 혹은 토니 스타크의 훌륭한 비서 자비스와 같은 엄청난 홀로그램.. 같은 얘기를 하겠다는 건 아니에요.
우리는 ‘엄지(thumb)’에 대해 얘기할 겁니다.
아직 터치 스크린을 고려해 디자인을 해본 적이 없으신가요? 곧 그렇게 될 거예요.
보세요. iPad를 자유자재로 쓰고 있는 아기의 모습을!
오 이거 신기한데욥~ㅇ.ㅇ최초로 한 세대가 터치스크린을 먼저 접하면서 자라고 있습니다. 터치에 기반한 인터랙션은 쉽게 사라지지 않을 것입니다. 마우스는 이미 과거의 유물이 되어 가고 있죠. 이제 우리는 두들기거나(tap), 핀치(pinch) 되고, 스와이프(swipe) 되고, 줌(zoom).. 그리고 이 외에도 많은 액션이 가능한 화면을 위해 디자인해야만 합니다.
이것을 어떻게 다루어야 할까요?
제품 디자인의 역사에 대해 탐험했던 기억을 떠올려보세요. Lillian Gilbreth, Henry Dreyfuss, 그리고 Scott Cook의 작업에 대해 살펴봤었죠. 큰 주제가 무엇이었나요?
조사(Research)입니다. 다시 말해, 우리는 사람들이 그들의 핸드폰, 태블릿을 어떻게 잡고 이용하는지 그리고 터치가 가능한 데스크톱을 어떻게 사용하는지 이해할 필요가 있습니다.
다행히도 이미 모바일 전문가인 Steve Hoober가 2013년 초에 1,333명의 사람을 대상으로 조사를 실시했습니다. 이를 통해 사람들이 핸드폰을 다음과 같이 방식으로 잡는다는 것을 알아냈습니다.
한 손으로 잡기: 49%
요람처럼 감싸기: 36%
두 손으로 잡기: 15%
어느 한쪽 손을 잘 쓰는지에 대한 수치는 교훈적입니다:
오른손으로 터치: 67%
왼손으로 터치: 33%
Hoober에 의하면 왼손잡이는 전체 인구의 약 10% 정도를 차지합니다. 위 연구에서 왼손을 쓰는 사람의 비율이 꽤 높게 나온 이유는 사람들이 동시에 무언가를 할 때 (예를 들면, 흡연을 하거나 자전거를 타거나 커피를 마시거나 소시지를 먹는 등의 행동) 사용하는 패턴과 관련이 높을 것입니다.
Created by Luke Wroblewski사람들이 핸드폰을 잡는 방식은 점점 더 중요해지고 있습니다. iPhone 6와 6+가 출시되면서 3.5인치와 4인치 화면은 빠르게 감소하고 있습니다. 앱 혹은 반응형 사이트를 만들거나 옛날 방식으로 모바일에 최적화된 웹 뷰를 만드는 사람들이 있다면 이를 통해 깨닫는 바가 있어야 합니다. (저를 포함해서요.)
감소 추세는 이미 진행 중입니다. Adobe의 2014년 Mobile Benchmark Report에서 조사한 바에 따르면 4인치 이하의 핸드폰을 사용하는 비중이 11% 이하로 줄어들었다고 합니다.
단, 위 수치는 2014년 4월에 팔린 핸드폰만을 대상으로 한 것입니다. Apple이 2015년 1월에 어떤 회사보다 고무적인 분기 실적을 발표했다는 것을 고려한다면 대략 75백만 대의 iPhone이 팔렸을 것이고 iPhone 6는 가장 많이 쓰이는 디바이스가 되었을 것입니다. (역자: 글이 쓰여진 때는 iPhone 7 출시 이전이라 전반적인 통계에 포함되지 않습니다.)
이 말은 즉슨, 엄지를 고려해 디자인하는 것이 어느 때보다 중요하다는 사실의 반증이기도 합니다. 다행히도 해상도 사이즈는 점점 범용화 되어가고 있습니다. 한 조사에 따르면 가장 많이 사용되는 안드로이드 화면 크기의 5.1인치에서 5.7인치 사이인 것으로 알려져 있습니다.
3.5인치 화면을 고집하던 애플의 변화는 우리의 삶을 작은 화면에서 탈출하는 것을 쉽게 만들 것입니다. (iPhone 6와 6 vmffjtm의 화면 사이즈는 각각 4.7인치와 5.5인치입니다.)
왜 우리의 디자인을 변경해야 할까요? Hoober의 조사에서 보여주듯이, 사람들은 자신의 핸드폰을 사용하면서 인터페이스의 요구에 따라 쥐는 방법을 바꿉니다. 사람들은 무의식적으로 어떤 액션을 취하거나 설정을 바꾸기 위해 손의 위치를 계속 바꾸는 것으로 보입니다.
이 사실은 다시 한 번 저의 주의를 환기시킵니다. 왜 사람들은 당신의 앱에 적응해야 할까요? 왜 당신의 앱은 특별할까요? 왜 핸드폰을 쥐는 방식이나 엄지가 미치는 영역에 있어서 많은 사람들이 가장 편안하게 느낄 수 있는 방식으로 앱을 제어하도록 디자인하지 않나요?
엄지(thumb)를 위해 디자인 하라고요?
엄지를 위해 디자인한다는 것은 무슨 의미인가요? 그것은 엄지손가락이 가장 자연스럽고 편하게 이동하는 곡선에 따라 인터페이스를 만든다는 것을 의미합니다.
이것도 쉬운 얘기는 아니네요. 우리는 무의식적으로 화면의 여러 영역 중 특정 컨트롤에 닿기 위해 핸드폰을 쥐는 방식을 바꿉니다. 당신이 닿기 어려운 영역에 쉽게 닿기 위해 손가락을 늘려 핸드폰을 고정시키거나 각도를 바꿔본다고 장담하죠.
우리는 어딘가에서부터 시작해야만 합니다. Hoober의 연구가 알려주는 패턴 중 하나는 대부분 핸드폰 아래를 쥐고 바닥부터 엄지를 오른쪽 코너로 밀어내듯이 사용한다는 것입니다.
Thumb Zone
이것은 Thumb Zone이라는 콘셉트로 우리를 이끌어 갑니다. 히트맵의 종류라고 생각할 수 있는데, 우리의 엄지가 핸드폰의 화면의 각 부분에 얼마나 쉽게 닿을 수 있는지 예측한 것입니다.
가장 일반적인 사례를 바탕으로 Thumb Zone 지도를 만들기 위해 Hoober의 조사를 참고 했습니다.
한 손으로 사용
스크린에 오른쪽 엄지로 탭
엄지 사용범위는 아래쪽에서 오른쪽 코너로 밀어내듯 사용
2007년부터 발표된 iPhone 화면 크기에 적용된 Thumb Zone 지도는 아래와 같습니다.
iPhone 6와 iPhone 6 플러스를 직접적으로 비교해볼까요?
“안전한” 영역을 나타내는 녹색 영역이 대체로 비슷하다는 사실을 눈치채셨나요? (iPhone 6 플러스에서 조금 다릅니다만 이후에 더 자세히 살펴보죠.) 우리의 엄지손가락이 스크린 크기에 따라 마법처럼 늘어나지는 않기 때문입니다. 아쉽네요. 전 어렸을 때 스트리트 파이터의 달심(팔이 늘어나는 캐릭터)을 꽤 좋아했는데 말이죠.
스트리트 파이터..하지만 iPhone 6 플러스에서 꽤 명확히 변하는 것은 “ow”(아야!) 공간입니다.
게다가 iPhone 6 플러스의 “natural”(자연스러운) 영역의 모양이 어떻게 변했는지 한 번 보세요. 기기 자체가 커졌기 때문에 새끼손가락을 안전장치로 사용하면서 기존과는 좀 다르게 잡는 방법이 필요합니다. 화면 크기에 따라 경험이 얼마나 달라졌는지를 생각해보면 놀라운 사실이죠.
주의: 제 엄지손가락은 화면 전체를 가로질러 닿지 않습니다. 아마 당신이 저보다 손이 훨씬 클 거예요. 그래서 일반적인 규칙을 정했습니다.
당신이 쥐는 방식을 바꿀 때 Thumb Zone이 어떻게 변하는지 분석해봅시다. 가끔, 핸드폰의 수직 가운데 지점을 탭 하는 것이 훨씬 쉽다고 느끼지 않으시나요? Thumb Zone 목업의 오른쪽 부분에 흰색 점으로 표시해 놓은 부분 말입니다. (아래 그림 참조)
iPhone 6와 iPhone 6 플러스의 경우 해당 지점을 표시해놓은 흰색 점은 아래와 같습니다:
iPhone 6 플러스의 경우 화면의 크기 때문에 자연스럽게 닿을 수 있는 엄지의 영역이 어떻게 달라졌는지 보이시나요? iPhone 6와 비교해봤을 때 iPhone 6 플러스의 영역이 훨씬 크고 넓습니다.
엄지 친화적인 인터페이스의 사례
아까도 얘기했듯이 전체적인 모바일 화면 크기는 좀 더 비슷해지고 있고 이것은 좋은 일입니다. 하지만 4.7인치 범위의 화면들을 디자인할 때 작은 버전의 디자인을 크기만 그대로 늘리는 것으로 생각해서는 안됩니다.
실제 앱 디자인에 어떻게 적용되는지, 인간공학적인 측면을 고려해 설계된 몇 가지 사례들을 알아봅시다.
(1) Airbnb
Airbnb의 리브랜딩 이후, 모바일 앱은 중요한 액션을 화면의 아랫부분 근처에 위치시켰습니다. 아래 두 가지 예제 이미지를 살펴보세요.
두 화면 모두 명확한 주요 액션 버튼을 가지고 있고, Apple의 '접근성 기능'(홈버튼을 두 번 탭 해서 화면의 윗부분을 아래로 당겨 내리는 방식)과 같은 OS 단계의 컨트롤이나 불명확한 제스처에 의존하지 않습니다.
반면, Airbnb는 상단부에 위치한 back 버튼까지 손가락을 뻗는 것을 방지하기 위해 Apple의 ‘가장자리 스와이프’(왼쪽에서 오른쪽으로 스와이프 해서 이전 화면으로 돌아가는 기능)를 잘 사용하기도 합니다.
(2) Tinder
Tinder의 화면 아랫부분에 위치한 주요 컨트롤은 명확하고 멋지면서 Thumb Zone의 영역에 있어서도 매우 안정적입니다. 더 환상적인 것은 각각의 카드를 스와이프 하는 방식(소개팅 대상에 대해 “좋아요” 혹은 “싫어요” 의견을 선택하는 방법)인데, 조작부가 엄지가 닿기 쉬운 부분에 적절하게 위치해 있습니다.
결국, 앱은 내비게이션을 위해 좀 더 다양한 스와이프의 방식에 반응할 수 있도록 설계되고 있습니다. Settings, Discovery, Messages 그리고 Moments 같은 기본 메뉴를 옮겨 다니는 것은 한 손으로 가능해 졌습니다. 멋지지 않나요?
지금까지 얘기한 내용을 실제 세계에서 사용될 당신의 앱에 적용하기 위해서는 사용자들이 어떤 기기를 많이 사용하는지, 사용하는 맥락은 어떠할지 등등이 함께 고려되어야 합니다.
구체적인 실천 지침
링크되어 있는 Thumb Zone PSD 파일을 당신 제품 디자인에 적용해보세요. 제품 중요 컨트롤 부분이 얼마나 손가락이 닿기 쉽게 디자인되어 있나요?
레이아웃에 대해 기존에 알고 있던 것을 다시 생각해보세요. 그리고 다양한 기기들에 적용해 보세요. Luke Wroblewski의 “Responsive Navigation”을 참고하면 영감을 받기 좋을겁니다.
여러분의 제품을 사용하고 있는 사용자들의 데이터를 스스로 연구해보는 것도 매우 가치있는 일입니다. 핸드폰을 어떻게 잡고 사용하나요? 당신의 제품을 실제 손에 들고 있을 때 어떤 상황에서 사용하나요?
출처 링크
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
https://twitter.com/lukew/status/510442401736187904
http://www.lukew.com/ff/entry.asp?1927
역자 추천 링크
티몬 앱 v4.1.0 디자인 제작 후기
Thumb Zone을 앱 리뉴얼에 실제 적용해 본 티몬의 앱 제작기
키오스크형 터치 UI에서 더 나은 스크롤 방향은 무엇일까?
인간공학적인 지식을 실제 제품에 적용하려는 노력의 훌륭한 사례
Fingers, Thumbs, and People
본문에도 많이 언급된 Steven Hoober의 연구 요약본
사용자들이 앱을 실제 사용할 때, Thumb Zone 의 안전한 영역을 클릭하는지 유저해빗의 히트맵을 통해 확인해 보세요!
