터치를위한 디자인

뛰어난 모바일 디자인은 작은 화면에 구둣 주걱 그 이상을 수행합니다. 손가락과 엄지 손가락을 사용하여 서투른 손가락의 엉뚱한 탭을 수용합니다. 핸드 헬드 인터페이스의 물리적 특성은 디자이너를 시각 및 정보 디자인의 관습을 넘어 산업 디자인의 영역으로 데려갑니다. 터치 스크린에는 실제 인체 공학이 위태로워집니다. 픽셀이 어떻게 보이는지뿐만 아니라 손에서 느끼는 느낌입니다.

01. 경험 법칙

터치 스크린 디자인은 손가락이 장치에서 자연스럽게 쉴 수있는 위치를 신중하게 인식해야합니다. 예를 들어 한 손에 휴대 전화를 들고 미친 집게 휴대 전화 그립을 사용하지 않는 한 항상 엄지 손가락으로 두드리는 것이 좋습니다. 휴대폰의 경우 터치를위한 디자인은 엄지 손가락을위한 디자인을 의미합니다.

엄지 손가락은 놀랍습니다. 우리를 짐승과 분리시키는 것은 유명인 가십에 대한 애정과 함께 엄지 손가락이지만, 범위와 유연성이 제한되어 있습니다. 엄지 손가락으로 대부분의 대형 전화기를 제외한 모든 화면을 쓸 수 있지만 화면의 약 1/3 만 화면 하단의 엄지 손가락 반대쪽에 있습니다.

엄지 손가락으로 두드리는 핫존에 기본 탭 타겟을 배치합니다. 예를 들어 휴대 전화를 오른손으로 잡을 때 엄지 손가락은 화면 왼쪽 하단 모서리에서 자연스럽게 호를 그리며 떨어집니다.





이것이 툴바와 내비게이션이 일반적으로 전화 인터페이스의 하단 가장자리에 위치하는 중요한 이유입니다. 기존 화면 인터페이스에 익숙했던 것과 반대입니다. 데스크탑 소프트웨어 규칙은 메뉴를 화면 또는 창 상단에 배치하고 웹 사이트는 일반적으로 기본 탐색을 페이지 상단에 배치합니다. 그러나 우리의 제한된 엄지 손가락 팬은 그 관습을 뒤집고 탐색 및 기본 탭 대상이 바닥으로 가라 앉습니다.

엄지 손가락의 화면 하단 바이어스는 왼쪽 대 오른쪽보다 더 중요합니다. 우리 대부분은 휴대 전화를 사용할 때 왼손과 오른손 사이를 쉽게 뒤집습니다. 오른 손잡이 사용자는 종종 (예를 들어 글을 쓸 때) 왼손을 선호하거나 바꾸고, 왼손잡이도 종종 오른손을 사용합니다. 겸손한 대다수의 사용자가 왼쪽보다 오른손을 조금 더 자주 사용하지만 디자이너가 초조해 할만큼 강력한 추세는 아닙니다.

그러나 화면 하단의 경험 법칙은 사용하는 손에 관계없이 적용되며 탭 대상의 시각적 계층 구조를 구성하는 방법에 대한 힌트를 제공합니다. 자주 사용하는 버튼은 손쉬운 탭핑을 위해 화면 하단에 위치해야하며 다른 컨트롤은 위험을 방지해야합니다. 예를 들어 iOS에서는 편집 버튼을 쉽게 볼 수있는 오른쪽 상단에 배치하지만 우발적 인 변경 가능성을 줄이려면 손이 닿지 않는 곳에 배치하는 것이 관례입니다.



텀블러 블로그를 알리는 방법

기본 컨트롤을 화면 하단에 가라 앉히는 것은 엄지 손가락의 편안함뿐만 아니라 손가락이 화면을 가리는 단순한 사실입니다. 맨 아래는 마우스를 올려 놓은 손이 콘텐츠를 가리지 않는 부분입니다. 콘텐츠를 선명하게 보려면 앱의 컨트롤 위에 배치하세요. 이것은 iPod, 계산기, 휴대폰, 욕실 저울 등 대부분의 물리적 장치에 적용되는 친숙하고 상식적인 레이아웃입니다. 콘텐츠는 상단에, 컨트롤은 하단에 있습니다.

02. 나, 로봇

이 간단한 상단 / 하단 규칙은 Android 가젯의 하단을 껴안는 Android의 'gotta be me'시스템 버튼으로 인해 복잡합니다. (Android 3 'Honeycomb'릴리스 이전에는 항상 물리적 버튼이었으며 Android 4 'Ice Cream Sandwich'부터는 이제 가상 버튼입니다.) 이러한 시스템 전체 버튼은 지금까지 설명한 모든 이유로 화면 하단에 속합니다. 또한 앱별 컨트롤에 대한 손쉬운 경쟁을 도입합니다. 화면 하단에 컨트롤을 추가한다는 것은 툴바를 서로 겹쳐 놓는 것을 의미합니다. 아아, 탭 오류는 특히 화면 하단에 쌓인 컨트롤에서 흔히 발생합니다. 엄지 손가락이 호버링하여 뷰를 가리는 트래픽이 많은 영역에서는 버튼 충돌이 불가피합니다. 예를 들어이 Android 홈 화면 레이아웃은 오해를 불러 일으 킵니다.



터치 인터페이스에서 컨트롤을 쌓는 것은 항상 피해야합니다. 특히 화면 하단에는 더욱 그렇습니다. 안타깝게도 Android 앱은 시스템 버튼이 붐비지 않도록 화면 상단에 컨트롤이 있어야합니다. 이상적이지 않습니다. 이렇게하면 내비게이션이 엄지 영역 밖에 있고 버튼을 탭하면 손이 전체 화면을 덮습니다. 그러나 그것은 실수를 유발하는 대안보다 낫습니다.

Android의 경우 앱 탐색 및 컨트롤이 맨 위에 떠 있어야합니다. 이것은 홈 버튼이 Android의 버튼과 같은 종류의 경쟁을 만들지 않는 iPhone의 규칙과 반대입니다. Android, 왼쪽 및 iPhone 용 Foursquare 앱을 비교하여 결과 차이를 확인하십시오.

웹 : 앱 내부의 앱

스택 방지 지침은 모바일 장치의 웹 사이트에 대해 유사한 문제를 만듭니다. 물론 웹 사이트와 웹 앱은 다른 앱인 브라우저의 범위 내에서 작동합니다. 많은 모바일 플랫폼에서 브라우저에는 웹 탐색을위한 UI 충돌을 일으킬 수있는 자체 버튼과 컨트롤이 있습니다. 즉, 웹 사이트의 화면 하단에 탐색을 '고정'하지 않아야합니다. 웹 사이트의 툴바가 브라우저의 상단에 쌓이기 때문입니다. (이 가이드 라인은 모바일 브라우저의 CSS에서 position : fixed가 균등하게 지원되지 않아 툴바를 하단에 붙이는 것이 번거 롭다는 사실로 편리하게 강화되었습니다.)

Android와 달리 솔루션은 웹 탐색을 맨 위로 이동하지 않고 전체 페이지의 맨 아래로 이동합니다. 브라우저 크롬은 이미 일부 모바일 브라우저에서 공간을 차지하고 있기 때문에 마지막으로해야 할 일은 탐색 옵션으로 웹 페이지 상단을 조여 콘텐츠를 더욱 몰아내는 것입니다.

그의 훌륭한 책에서 모바일 우선 , Luke Wroblewski '너무 많은 모바일 웹 경험 ... 콘텐츠 대신 탐색 옵션 목록으로 대화를 시작하세요. 모바일에서는 시간이 소중하고 다운로드 비용이 많이들 수 있으므로 가능한 한 빨리 사람들이 원하는 것을 알 수 있도록하십시오. '

웹 경험은 콘텐츠로 이어져야하며 기본 탐색을 화면 하단으로 제한해야합니다. Wroblewski는이를 위해 유용한 디자인 패턴을 옹호합니다. Ad Age 모바일 웹 사이트 모든 탐색은 화면 상단의 툴바에있는 메뉴 버튼 뒤에 있습니다. 버튼을 누르면 전체 화면이 탐색 옵션으로 즉시 채워집니다. 메뉴의 모양은 즉각적이고 오버레이가 나타난 것처럼 느껴지지만 실제로는 페이지 하단의 탐색에 대한 앵커 링크입니다.

이 접근법에는 몇 가지 장점이 있다고 Wroblewski는 다음과 같이 썼습니다.

'이 디자인은 최소한의 탐색 요소 (상단의 단일 링크)를 사용하고, 사람들이 콘텐츠의 끝 부분에 도달했을 때 피벗하고 탐색 할 수있는 기회를 제공하고, 다른 메뉴의 콘텐츠를 복제하지 않습니다. 무엇보다도) 작동하려면 간단한 앵커 링크 만 있으면됩니다. 맞습니다. 멋진 자바 스크립트, 오버레이 또는 별도의 탐색 페이지를 유지하지 않아도됩니다. 페이지 하단에 연결되는 앵커 일뿐입니다. 그것은 HTML 0과 같습니다. '

'위에있는 콘텐츠, 아래에있는 컨트롤'은 단순한 규칙처럼 보이지만 지금까지 살펴본 것처럼 운영 체제 나 브라우저가이 프리미엄 부동산을 주장 할 때 앱 디자이너에게 다양한 결과를 가져옵니다. 결국 다음과 같이 작동합니다.

  • iPhone에서는 화면 하단에 앱 컨트롤 배치
  • Android에서는 화면 상단에 앱 컨트롤 배치
  • 웹의 경우 내비게이션을 페이지 하단에 배치합니다 (화면 하단이 아님).

그러나 이러한 지침은 휴대폰에만 해당됩니다. 더 큰 터치 스크린은 어떻게됩니까? iPad에서는 규칙이 다시 변경됩니다.

03. 태블릿, 구석 구석

엄지 손가락 영역은 우리가 다르게 잡고 있기 때문에 다른 점을 제외하고는 여전히 iPad에 적용됩니다. iPad 그립은 자세에 따라 다릅니다. 일어 서서 두 손으로 두 드려야합니다. 테이블에 앉으면 한 손으로 받치고 다른 손으로 두드리는 경향이 있습니다. 의자에 앉아 무릎에 놓고 다른 손으로 두드리는 경향이 있습니다. 눕거나 기대어 누워서 한 손으로 잡고 다른 손으로 두드리는 것입니다.

이 모든 그립에서 손가락은 장치의 다른 위치에 떨어지고 각 자세는 장치를 다양한 거리에서 잡습니다. 예를 들어, 우리는 서있을 때 iPad를 가장 가까이 잡고 눕거나 기대고있을 때는 가장 멀게 잡는 경향이 있습니다.

이 아이 패드 홀드는 다양하지만 두 가지 모두 사실입니다. 첫째, 우리는 최고의 활용을 위해 iPad를 기기의 상단 절반에 두는 경향이 있으며, 이는 엄지 손가락이 화면의 상단 3 분의 1, 모서리 근처에 자리하는 경향이 있음을 의미합니다. 둘째, iPad의 더 큰 화면으로 인해 전화로 할 수있는 것처럼 모든 것을 한 눈에보기가 어렵습니다. 인쇄 디자인과 마찬가지로 청중의 시각적 관심은 자연스럽게 태블릿 상단에 집중되며 디자인의 정보 계층은이를 반영해야합니다. 즉, iPad에서는 눈과 손가락이 자연스럽게 장치 상단을 차지합니다. (때로는 바닥이 전혀 보이지 않습니다. 가장 게으르고 아마도 가장 일반적인 자세 (누워 있거나 기대는 자세)에서는 바닥 베젤이 담요, 스웨터 및 부드러운 배로 사라지는 경향이 있습니다.

휴대폰과 달리 기본 컨트롤과 버튼은 일반적으로 iPad 앱 상단에 있어야합니다. 특히 iPad를 잡을 때 엄지 손가락이 일반적으로 떠오르는 상단 모서리를 측설해야합니다. Instapaper와 iPad 용 트위터는 좋은 위치를 보여줍니다.

컨트롤을 상단 중앙에 배치하지 마십시오. 그러나 이는 해당 버튼을 사용할 때 손으로 콘텐츠를 가릴 수 있음을 의미합니다. 컨트롤은 영향을주고 자하는 콘텐츠 바로 위로 이동해서는 안되므로 모서리로 이동하는 것이 유용한 패턴입니다. 예를 들어 데일리 for iPad는 상단 중앙에 스크러버를 제공하여 이슈 페이지를 스캔하지만 그렇게하면 손이 썸네일을 가려서 사용하기 어렵습니다.

After Effects에서 포토샵 레이어 애니메이션

04. 결론

데일리의 실수는 상단 모서리 가이드 라인에 대한 예외를 발견하고 대신 통제가 하단으로 이동해야하는 경우의 범주를 보여줍니다. 컨트롤이 콘텐츠를 표시하거나 영향을 미칠 때마다 항상 해당 콘텐츠의 아래 또는 측면에 나타나야하며 위가 아니어야합니다. 예를 들어 Sydney Morning Herald의 iPad 앱은 화면 하단의 페이지 표시기 색인을 따라 손가락을 드래그하여 그날의 모든 기사를 빠르게 스캔하는 새로운 방법을 제공합니다. 이 컨트롤은 많은 헤드 라인 목록을 보여주기 때문에 이러한 컨트롤을 화면 하단에 배치하는 것이 적절합니다. 상단에 배치하면 컨트롤을 터치했을 때 손으로 목록을 덮을 수 있습니다.

그래서 그것은 위 또는 아래입니까? 차이점은 다음과 같습니다.

  • iPad의 상단 모서리는 공유, 즐겨 찾기 또는 삭제와 같은 작업을위한 탐색 버튼 및 원터치 도구에 이상적입니다.
  • iPad 앱의 하단은 위의 캔버스에서 콘텐츠를 탐색하거나 미리 보는 컨트롤에 가장 적합합니다.

이것이 책이나 잡지의 페이지 미리보기 이미지가 하단에 가장 잘 배치되는 이유입니다. 마찬가지로지도로 드래그 할 랜드 마크 팔레트가 포함 된지도 작성 앱을 디자인하는 경우 해당 팔레트는 맨 아래로 이동하여 팔 전체를 계속 가리지 않고도지도와 상호 작용할 수 있습니다.

05. 실패하기에는 너무 크다

장치를 잡는 방식에 따라 컨트롤의 위치가 결정되는 경우 이러한 컨트롤의 크기를 결정하는 것은 손가락 크기입니다. 터치 디자이너는 실패하기에는 너무 큰 탭 타겟, 사람들이 시선을 사로 잡는 수준의 초점없이 탭할 수있는 두툼한 타겟을 만들어야합니다.

탭 타겟과 관련하여 얼마나 클까요? 글쎄, 손가락 끝의 크기는 얼마입니까? 모든 플랫폼이 여기에 지침을 제공하지만 평소와 같이 Apple은 가장 의견이 많으며 모든 모바일 플랫폼에 대해 가장 좋은 지침이라고 생각합니다. 탭 타겟을 최소 44 포인트 또는 약 1/4 '또는 7mm로 만듭니다. 웹의 경우 최소 44px도 잘 작동합니다. .

데스크탑에 익숙한 디자이너들에게이 큰 컨트롤은 거대하고 장난감 같은 느낌이 들지만, 그저 굴려보세요. 방대한 버튼과 거대한 탭 타겟은 공격하기 쉬울뿐만 아니라 가끔 산만 해지는 모바일 사용자도 쉽게 볼 수 있습니다.

완벽한 세상에서 모든 탭 타겟은 최소 44x44입니다. 하지만 대부분의 경우와 마찬가지로 때때로 타협이 필요합니다. 아이폰의 표준 컨트롤조차도 때때로 44 픽셀 규칙을 퍼 뜨리고있다. 예를 들어 키보드에서 키의 높이는 44 포인트이지만 너비는 30 포인트에 불과합니다. 마찬가지로 가로보기에서 버튼의 너비는 44 포인트이지만 높이는 38 포인트입니다. 여기서 애플은 선택의 여지가별로 없다. 이보기에 전체 QWERTY 키보드를 포함하는 것이 중요하지만 모든 키가 44 x 44 버튼에 맞지 않습니다. 뭔가 줄게있어.

제한된 공간이 탭 타겟에 압착을 넣을 때 가장 잘 작동하는 규칙은 다음과 같습니다. 탭 타겟이 높이 또는 너비가 44 포인트 이상인 한 꼭 필요한 경우 다른 차원을 30 포인트만큼 작게 압착 할 수 있습니다. . 그 의미는: 탭 타겟의 실제 최소 크기는 44 x 30입니다.

06. 무리 하지마

당신의 충실한 작가는 1985 년에 마침내 은퇴하기 전에 손목에 묶인 날렵한 카시오 계산기 시계를 사용하여 여러 해를 보냈다. 버튼이 너무 가깝습니다. . 당신은 5 개를 목표로했지만 2 개 또는 8 개를 생각해 낼 것입니다. 계산기보다는 행운의 바퀴였습니다. 즉, 버튼 크기가 탭 정확도를 결정하는 유일한 요소는 아닙니다. 간격도 고려해야합니다.

Jon Rawlinson의 사진

Jon Rawlinson의 사진

작은 화면을 위해 디자인 할 때 인터페이스를 복잡하게하여 이러한 문제를 해결하려는 유혹을 당할 수 밖에 없습니다. '이것들을 조금 더 가까이 두겠습니다. 이 도구 모음에 버튼을 하나 더 추가하겠습니다. ' 계산기 시계 전성기의 인기있는 문구를 인용하려면 : '그냥 안된다고 말하세요.'

버튼을 더 가깝게 누를수록 해당 버튼은 더 커야합니다. iPhone, Skype 및 Call Global App을위한 한 쌍의 VoIP 통화 앱을 고려하십시오. 두 어깨의 키패드 버튼은 서로 가깝지만 최소 44x44보다 훨씬 크게 만들어 보상합니다. 가까이에 있음에도 불구하고 버튼은 치기 쉽습니다.

하지만 두 앱이 다른 부분은 화면 하단에 있습니다. 두 앱 모두 위에서 설명한 것처럼 결코 이상적이지 않은 탐색 탭 표시 줄 바로 위에 버튼을 스택합니다. 하지만이 버튼은 Skype (왼쪽)에서 너무 크기 때문에 문제가 완화됩니다. 그러나 Call Global App에서는 탭 막대 상단을 껴안는 버튼이 너무 얇고 근접해 있다는 것은 잘못된 가능성이 있음을 의미합니다. 기술적으로 최소 44x30보다 크지 만 간격이 부족하고 화면 하단에 오류가 발생하기 쉬운 스태킹으로 인해 문제가 발생합니다. 레이아웃은 더 큰 버튼 또는 더 넓은 공간을 요구합니다.

이것이 핵심 교훈입니다. 직관적이지 않은 것처럼 보일 수 있지만 작은 화면 인터페이스의 성공은 큰 요소, 두툼한 버튼 및 통풍이 잘되는 공간에 달려 있습니다. 화면은 작지만 우리의 손가락 (그리고 우리의주의 지속 시간)은 그렇지 않습니다. 뚱뚱한 손가락을 염두에두고 디자인하십시오.

xara 사진 및 그래픽 디자이너 리뷰

조쉬 클락 모바일 디자인 전략과 사용자 경험을 전문으로하는 인터랙션 디자이너입니다. 그는 Tapworthy : Designing Great iPhone Apps의 저자입니다. Josh의 의상 인 Global Moxie는 미디어 회사, 디자인 대행사 및 창의적인 조직이 활용 가능한 모바일 앱을 구축 할 수 있도록 컨설팅 서비스와 교육을 제공합니다.

마음에 드 셨나요? 읽어보세요!