brunch

매거진 UX 디자인의 모든 것

라이킷 49 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Feb 01. 2017

모바일 앱에서 히든 제스처를 소통하는 방법

UX 디자인 배우기 #105

Today UX 아티클

babich.biz에 올라온 Nick Babich의 글 How To Communicate Hidden Gestures in Mobile App을 원저자의 허락을 받아 번역한 글입니다.

How To Communicate Hidden Gestures in Mobile App

Gestures, those little movements of finger and thumb that allow user to interact with an app. Touch interfaces provide many opportunities to use natural gestures like tap, swipe and pinch to get things done, but unlike graphical user interface controls, these interactions are often hidden from users, so unless users

babich.biz

제스처라는 엄지와 손가락의 작은 움직임은 유저가 앱과 상호작용할 수 있게 해줍니다. 터치 인터페이스는 탭, 스와이프, 핀치 등과 같은 자연스러운 제스처를 이용할 수 있는 많은 기회를 제공하지만, 그래픽 유저 인터페이스 컨트롤과는 다르게 이러한 인터랙션은 보통 숨겨져 있어서 유저가 그런 제스처가 존재한다는 사전 지식을 가지고 있지 않으면 시도하지 않을 것입니다.

어떻게 히든 제스처를 넣을 수 있을까요? 다행스럽게도 히든 제스처를 알려주는 비주얼 인터랙션 디자인 테크닉이 많이 있습니다.

온보딩 중 제공하는 튜토리얼과 워크쓰루

튜토리얼(tutorial)과 워크쓰루(walkthrough)는 제스처 기반 앱에서 상당히 인기 있는 방법입니다. 튜토리얼을 앱에 넣는 것은 많은 경우에 인터페이스를 설명하는 안내를 넣는 것을 뜻합니다. 하지만, UI 튜토리얼은 앱의 핵심 기능을 설명하는 가장 우아한 방법은 아닙니다. 이 접근법에는 두 가지 문제점이 있습니다.

앱 이용에 대한 안내 매뉴얼을 제공해야 한다면, 유저와 제대로 의사소통하고 있는 것이 아닙니다. 유저가 앱을 이용하기 전에 매뉴얼을 읽어보리라고 기대할 수 없기 때문입니다.

튜토리얼의 또 다른 문제는 유저가 처음 시작하면서 알게 된 앱 이용의 모든 새로운 방법을 기억해야만 한다는 것입니다.

예를 들어, Clear 앱에서 필수적인 7페이지짜리 튜토리얼을 거쳐야 합니다. 유저는 인내심을 가지고 정보를 읽으면서 외우려고 노력해야 합니다. 이는 나쁜 디자인이라고 볼 수 있습니다. 유저가 실제로 앱을 써보기도 전에 미리 할 일을 던져주는 것이기 때문입니다.

Clear 앱의 튜토리얼

여러 단계로 구성된 필수 UI 워크쓰루 피하도록 하세요. 대신 (필요하다면) 맥락 안에서 액션을 교육해야 합니다. 튜토리얼을 좀 더 점진적인 발견 방법으로 전환시킬 수 있습니다.

유저 인터페이스에서 할 수 있는 모든 액션을 설명하려고 하기보다는 한 번에 하나의 액션에만 집중하세요.

유튜브에서 안드로이드용 앱에서 사용하고 있는 제스처 교육 화면을 사례로 살펴봅시다.

안드로이드용 유튜브 앱

이 앱에는 제스처 기반 인터랙션이 있지만 유저에게 알려주기 위해 튜토리얼을 사용하진 않습니다. 대신, 처음 신규 유저가 앱을 켰을 때 유저가 특정 스크린에 들어가면 그 스크린과 관련된 액션만을 보여줍니다.

맥락 안에서 교육하는 방법

맥락 안에서 교육하는 테크닉은 이전과 다른 방식으로 유저가 특정 요소와 상호작용할 수 있도록 도와줍니다. 이 테크닉에는 보통 약간의 시각적 단서와 미묘한 애니메이션이 들어갑니다.

텍스트로 된 명령문

이 테크닉은 유저가 제스처를 수행하게 유도하거나 짧고 명확한 설명으로 인터랙션의 결과를 설명해주는 텍스트 명령문을 쓰는 겁니다.

팁

매우 짧은 텍스트로 안내문을 써보세요. 전반적으로 적은 텍스트를 쓸수록 유저가 읽어보고 실제 그 안내를 따를 확률이 높아집니다.

Credits: Material Design

힌트 모션

힌트 모션(혹은 움직이는 시각적 힌트)은 액션을 수행할 때 요소와 상호작용 하는 방법을 미리 보여줍니다. 예를 들어, Pudding Monster 게임 머신은 제스처에만 기반하지만, 유저가 너무 많이 추측하지 않고도 기본적인 아이디어를 얻을 수 있도록 도와줍니다. 애니메이션은 기능에 대한 정보를 전달해줍니다. 시나리오는 애니메이션을 통해 보이며 유저는 무엇을 해야 하는지 즉시 명확하게 이해하게 됩니다.

힌트 모션은 해당 요소를 이용하는 방법을 미리 보여줍니다.Credits: Pudding Monsters

콘텐츠 맛보기

콘텐츠 맛보기는 미묘한 시각적 단서의 한 사례로, 무엇을 할 수 있는지 보여줍니다. 아래 사례는 카드로 만든 콘텐츠 맛보기 사례입니다. 현재 카드 뒤에 다른 카드가 있다는 점을 간단히 보여주어 스와이핑이 가능하다는 것을 알려줍니다.

. 네비게이션 기능을 보여주세요. Credits: BarthelemyChalvet

결론

핵심은 모바일앱 혹은 웹앱에서 유저에게 제스처를 알려주는 모든 문제를 해결할 수 있는 하나의 해결책은 없다는 겁니다. 하지만 유저가 UI를 사용하도록 가르치는 것과 관련해서는, 콘텐츠 맛보기, 단계적 공개, 미묘한 애니메이션 등을 이용해 보길 권장합니다. 튜토리올과 워크쓰루는 최후의 수단으로 이용되어야 합니다.