사용자는 서비스 사용 맥락에 따라 특정한 기능을 시작하고, 멈추고, 취소하길 원한다. 즉, 시스템에 대한 제어력을 얻고자 하는 것이다. 아무리 훌륭한 기능이라도 사용 과정이 불편할 때 사용자의 만족도는 크게 떨어지므로, 쉽고 간편한 시스템 제어(control) 환경을 만들 필요가 있다. 그런데 모바일에서는 사용자의 시스템 제어를 지원하는 UI 요소가 오히려 독이 되는 경우도 많다. 작은 크기의 모바일 화면이 더욱 복잡해져 사용자가 잦은 실수를 하거나 주요 콘텐츠에 집중하지 못하기 때문이다. 이와 같은 문제를 해결하기 위해 사용 흐름을 방해하지 않는 인터랙션 디자인에 대한 고민이 지속되고 있다. 모바일 웹·앱 서비스의 주요 기능에 적용된 제어 관련 인터랙션 사례를 알아보고, 이를 통해 강화되는 사용자 가치가 무엇인지 생각해보자

/

한 번에 다수의 콘텐츠를 제어할 수 있게

사진·동영상 관리 및 공유 기능이 있는 앨범과 SNS는 사용자가 다수의 콘텐츠를 제어해야 하는 서비스다. 여러 장의 사진을 선택하고자 할 때 기본 제어 방식은 사진 섬네일을 하나씩 터치하는 인터랙션이다. 여기에 추가적으로 제공되는 제어 방식인 드래그(drag) 인터랙션은 연속적으로 배열된 사진을 선택할 때 효율을 높인다. PC의 드래그 방식과 같아 사용자에게 친숙하며, 일일이 터치하는 행위를 생략하여 보다 빠른 선택을 가능하게 한다. 

ⓒ라인

두 번째로, 앨범 목록에서 다수의 섬네일 크기를 조절하고자 할 때에는 어떤 제어 방식이 효율적일까? 구글 포토(Google Photos)에서 사용자는 핀치-스프레드(pinch-spread) 인터랙션으로 섬네일 크기를 바꿀 수 있다. 핀치-스프레드 인터랙션은 모바일에서 사진을 확대하거나 축소할 때(zoom in-zoom out)에도 일반적으로 사용되어 사용자에게 익숙한 제스처다. 즉, 여러 섬네일의 크기를 바꿀 때에도 충분히 예상 가능하여 직관적인 제어 방식이다.

ⓒGoogle 

/

콘텐츠를 잘 찾아갈 수 있게

영상 및 음악, 팟캐스트 관련 서비스에서 사용자의 주요 태스크는 콘텐츠를  시청하거나 청취하는 것이다. 콘텐츠를 감상하는 상황에서 구간 이동에 대한 사용자 니즈가 자주 발생하는데, 이 과정이 오래 걸리면 사용 흐름에 방해가 된다. 그러므로 사용자가 큰 노력을 들이지 않고 구간 이동 태스크를 수행할 수 있도록 지원하는 것이 좋다.

영상이나 음악 콘텐츠의 재생 바는 콘텐츠 길이가 길수록 제어가 어렵다. 원하는 지점에 도달하기 위해 미세한 조절이 필요하기 때문에 여러 번 실패할 수 있다. 이와 같은 문제를 해결하기 위해 많은 영상 관련 서비스는 제어 영역을 화면으로까지 확장했다. 네이버TV, 카카오TV, 유튜브 등에서 화면 좌측과 우측을 더블 탭(Double Tap)하면 각각 10초 전과 후로 이동 가능하다. 직전에 놓친 장면을 보거나 화면 변화를 보면서 빨리감기 하듯 이동할 때 유용하다. 

ⓒYoutube

아프리카TV와 왓챠플레이의 경우, 화면 자체가 재생 바와 동일한 역할을 한다. 화면 어느 지점에서나 드래그 제스처로 구간 이동을 시작할 수 있어, 영상을 시청하는 도중 재생 바의 제어 버튼을 찾아야 하는 번거로움을 없앴다.

ⓒ왓챠플레이

제어 영역을 확장하는 것 외에, 아예 새로운 방식의 제어 옵션을 추가하는 경우도 있다. 음악은 영상과 달리 구간을 예측할 수 있는 이미지가 없기 때문에 재생 바를 통해 원하는 지점으로 이동하기 어렵다. 이 때, 음악 가사는 구간을 예측할 수 있는 인터페이스 요소로 활용 가능하다. 멜론과 TED 사이트는 각각 가사와 transcript를 탭하면 해당 구간으로 이동하는 인터랙션을 제공한다. TED 사이트의 강연 콘텐츠는 영상이지만 시각적 변화가 적고 교육적인 성격이 강해 이와 같은 인터랙션이 유용하다.

ⓒTED Conferences, LLC, ⓒKakao Corp

/

콘텐츠를 효율적으로 탐색할 수 있게

쇼핑 관련 서비스는 사용자의 탐색 흥미를 유지시키는 것이 중요하다. 탐색을 통해 원하는 상품을 찾고, 구매할 확률도 높아지기 때문이다. 모바일 쇼핑 행동의 특징 중 하나는 짧은 시간 내에 수시로 이동한다는 것이다. 많은 쇼핑 서비스는 이 때 반복되는 과정을 제거하여 사용자의 탐색 피로도를 줄이고자 한다. MANGO와 ZARA에서는 상세 페이지의 상품을 좌우로 슬라이드(slide)하여 다른 상품의 상세 페이지로 빠르게 이동할 수 있다. 상품 목록과 상세 페이지 간 이동을 귀찮게 생각하는 사용자들이 환영할 만한 인터랙션이다.

ⓒMango

ⓒZARA

ⓒZARA

사이트 내 상품 콘텐츠가 많을 경우 사용자들의 탐색 피로도는 더욱 가중된다. 상품 목록만 빠르게 훑어보거나 상위권 상품만 확인한 후 이탈하기 쉽다. 알리바바는 화면 이동에 대한 사용자들의 부담을 줄이기 위해 상품 목록에서 더 많은 상품을 발견하도록 유도한다. 목록에서 마음에 드는 상품 섹션을 스와이프(swipe)하면 비슷한 상품들이 해당 섹션에 노출된다. 

ⓒAlibaba.com

지나치게 긴 상품 상세 페이지도 탐색 피로도에 영향을 준다. 미미박스는 사용자가 긴 상세 페이지를 탐색할 때 스크롤을 더 빠르게 할 수 있는 슬라이더(slider)를 제공한다. 넓은 범위의 이동을 원하는 사용자에게 유용하다. 화면에서 손을 떼지 않고 속도감 있게 스크롤할 수 있어, 길이가 긴 콘텐츠를 제공하는 모바일 서비스(ex.웹툰)에서 자주 사용된다.

ⓒ미미박스

/

결코 사소하지 않은 변화

보편적인 인터페이스와 인터랙션 패턴대로 설계된 서비스라도 제어하기 어렵거나 비효율적인 경우가 많다. 겉으로 드러나지 않은 이유는, 사용자가 이미 불편함에 익숙해진 것일 수도 있다. 하지만 경쟁 서비스가 늘어나고 사용자 층이 확대될수록 제어와 관련된 인터페이스와 인터랙션을 고민해야 한다. 이는 사용성 측면에서 서비스를 더 유용하게 만들 수 있는 방법을 찾기 위함이다. 섬세한 제어를 지원하는 것은 사용성 뿐 아니라 고객과의 소통을 지향하는 브랜드 경험 차원에서도 중요하다. 사소한 요소일지라도 사용자의 불편함을 이해한 결과가 반영되어 있기 때문이다. 가려운 부분을 긁어주고 주요 기능을 더 '잘' 사용할 수 있게 만드는 것, 서비스의 전반적인 사용자 경험을 고도화하는 전략이다.