큰 화면의 스마트폰을 위한 디자인
Designing for Large Screen Smartphones
스마트폰은 계속 커지고 있지만 손의 크기는 커지지 않는다. 어떻게 해야 화면이 커져도 엄지를 이용해 편하고 빨리, 그리고 쉽게 인터렉션을 할 수 있게 할 수 있을까? 여기 몇 가지 고려해볼 수 있는 사항들이 있다.
Designing for Thumbs
1,333명의 스마트폰 사용자를 분석해 본 결과, 스티븐 후버는 75%는 엄지를 사용하고 49%는 한 손으로 폰을 잡고 사용한다고 한다. 큰 화면에서는(4인치 이상) 디바이스의 상단에 있는 컨트롤을 터치하기 위해서는 컴포트 존을 훨씬 벗어나서 엄지를 뻗어야 한다.
예를 들면, 나는 개인적으로 이 이슈를 아마존의 뮤직 앱을 듣다가 경험할 수 있었다. 음악을 탐색할 수 있는 주요 컨트롤이(내가 자주 사용하는 메뉴) 화면의 좌측 상단에 있었다. 한 손 사용자에게는 최악의 위치이다. 큰 스마트폰에서 컨트롤을 누르기 위해서는 핸드폰의 중간 부분을 다시 잡거나 두 손으로 잡아야 했다.
OS-Level Solutions
아마존 뮤직과 같이 디자인된 앱을 편하게 사용할 수 있게 하기 위해, 모바일 OS는 상단에 위치한 컨트롤들에 손가락이 닿을 수 있도록 하는 시스템 레벨의 기능을 만들었다. 애플은 이 기능을 Reachability라고 부른다.
Reachability 기능은 폰의 홈 버튼을 빠르게 두 번 누르면 애플리케이션이 화면의 중앙 아래로 내려오게 하는 것이다. 이것은 손가락이 닿지 않는 컨트롤들에 손가락이 닿을 수 있도록 만들어준다. 괜찮기는 하지만, 한 번 누르면 되는 기능을 세 번을 눌러야 실행을 할 수가 있다.
Reachability는 자동 타임아웃 기능이 있다. 더블 탭을 하면 컨트롤들을 아래로 내리고 뭐가 있는지 보려고 하면 앱은 이미 위로 올라가 있다. 다시 홈 버튼을 더블 탭 하는 불필요한 행동을 해야 하는 것이다.
Edge Swipe Gestures
엄지손가락을 큰 화면의 좌측 상단으로 이동하는 것은 어렵지만, 기기의 하단에서 모서리를 swipe 하는 것은 어렵지 않다. 이 "edge-swipe" 제스처는 간단하지만 역시 나타난 메뉴의 컨트롤들은 여전히 thumb-zone에서 멀리 벗어나 있다.
다른 모든 제스처 컨트롤들과 같이, 이렇게 메뉴에 접근하는 방식은 눈에 보이지 않아서 잊어버리기 쉽다. 다시 말해서, 메뉴를 보고 싶은 니즈가 있을 때 이러한 제스처가 있다는 것을 기억해서 알고 있어야 한다는 것이다. 결론적으로 이 제스처는 상단의 눈에 보이는 메뉴 컨트롤을 대체할 수 없으며, 보완만 할 수 있다.
또한 edge swipe 방식은 한 손 사용자에게 메뉴를 꺼내는 것만 쉽게 만들어 주며, 메뉴 안의 콘텐츠를 누르는 것을 쉽게 만들어 주지는 못한다.
Bottom Positioning
한 손이나 한 손가락을 사용할 때 자주 사용하는 액션을 쉽게 터치할 수 있도록 하기 위해, 컨트롤을 화면 하단에 배치하는 것을 고려해봐야 한다. 이 방법은 단지 누르기 쉽게 하기 위한 것만은 아니다. 페이스북이 최근에 한 테스트에 의하면, iOS의 하단의 탭 바는 몰입도, 만족도, 인지의 속도를 모두 증대시켰다고 한다.
아마존 뮤직 앱에서, 메뉴 버튼을 하단에 배치할 수도 있고, 메뉴 안에서 가장 자주 사용하는 항목을 화면 하단에 나타나도록 할 수도 있다. 이러한 방법으로 메뉴에도 쉽게 접근하고, 메뉴의 콘텐츠에도 빠르게 접근할 수 있다.
Floating Action Buttons
많은 디자인 솔루션이 다양한 OS에서 잘 작동을 하지만, 잘 고려해봐야 할 디자인인 몇 가지 있다.
예를 들면 Android OS의 화면 하단은 시스템 내비게이션 바에 할당되어 있다는 것이다. 이것은 하단에 위치한 컨트롤들은 시스템의 내비게이션 바에 근접하게 되어 잘못 누르기 쉽게 된다는 것을 의미한다. 실제로, 안드로이드의 가이드라인에는 "하단 탭 바를 사용하지 말라"라고 명시하기도 한다. (현재은 하단 내비게이션 바를 사용하는 것으로 변경되었음)
구글의 Material design에는 floating action button의 형태로 솔루션을 제공하고 있다. Floating action button은 다른 UI들 위에 떠 있는, 즉각적인 액션을 위한 특별한 타입의 버튼이다. 보통 이 액션들은 내비게이션에는 해당하지 않지만, 아마존 뮤직 앱에서는 내비게이션을 자주 사용하기 때문에 적용할만하다.
원문 출처 : https://www.lukew.com/ff/entry.asp?1927
