brunch

매거진 신비한 모바일 인터페이스 사전

라이킷 320 댓글 8

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 플러스엑스 Jan 11. 2019

1원칙.
다이렉트하게 만들어라

author - 우뚝솟은비니 | UX 디자이너

Previous Brunch.

『리치 인터페이스 디자인』이라는 책의 6가지 디자인 원칙과 가이드라인을 바탕으로 최근의 모바일 인터페이스 사례를 살펴보고 있습니다.

00_웹 인터페이스는 어떻게 모바일에 적용되었을까

author - 호롤룰루 | UX 디자이너 | 얼마 전, 피땀눈물 흘려가며 준비하던 프로젝트가 갑자기 미세먼지마냥 하늘에 흩날리는 바람에 잠시 여유시간이 생겼습니다. 이 시간을 어떻게 의미 있게 채울까 고민하던 중에 『리치 인터페이스 디자인』이라는 책을 읽고 팀원들과 공유하면 모두에게 유익한 시간이 될 것 같아 UX/UI팀원들 앞에서 약 30분간의 북리뷰 PT를 진행했습니다.(사실 책임님이 시킴) 막상

brunch.co.kr/@plusx/20

*gif가 다량 포함되어있습니다. PC나 아이폰 브런치 앱에서만 재생이 되기 때문에 PC 혹은 아이폰 브런치 앱에 접속해서 읽어주시면 감사하겠습니다:)

제1원칙

다이렉트하게 만들어라

페이지의 전환이나 새로고침 없이 사용자가 보고 있던 페이지 내에서 상호작용 해야 한다는 원칙.

이 원칙과 관련하여 『About Face』의 저자 엘런 쿠퍼는 ‘출력(output)이 있는 곳에 입력(input)이 있게 하라’고 이야기했습니다. 즉, 콘텐츠를 다른 페이지로 전환 후에 편집하는 대신에, 그 상황에서 내용을 보면서 즉시 수정할 수 있어야 한다는 것입니다.

‘음악 재생 화면에서 재생 대기 목록을 편집하라’는

테스크로 세 가지 음악 스트리밍 어플을 비교해보겠습니다.

1. Apple music

재생 화면을 스크롤하면 재생 목록이 바로 노출되는 방식으로, 뎁스(depth)가 생기지 않고 화면 전환 또한 생기지 않습니다.

2.Youtube music

유튜브 뮤직은 화면을 스크롤 다운하거나 하단의 다음 곡 알림을 터치하면 재생목록 레이어가 노출되는 방식을 사용하고 있습니다. 하지만 사용자가 여전히 같은 화면 안에 있다고 인지하도록 레이어의 높이를 제한하고 있고, 재생/다음 곡/전체 화면 등의 음악 재생 테스크도 여전히 수행 가능합니다.

3.Melon

멜론은 음악 재생 화면에서 대기목록 편집까지 [플레이 화면→재생 목록→편집 모드]의 총 3 depth를 거쳐야 하며, 2번의 화면 전환이 발생합니다. 반복되는 화면 전환의 문제점은 테스크를 수행할 때뿐 아니라, 원래 화면으로 돌아올 때 더욱 드러납니다. 원래 화면으로 돌아오려던 사용자는 A루트를 통해 음악 재생 화면으로 돌아오는 대신, 종종 B루트를 통해 의도치 않게 홈 화면으로 이탈하게 됩니다. '편집 [완료]'버튼이 있던 위치에 있는 '재생목록 레이어[닫기]'버튼 때문입니다.(제가 자주 그래요...)

왠지 같은 위치에 있는 [완료]와 [X]버튼을 무의식 중에 차례로 누르게 될 것 같지 않나요?

따라서 '다이렉트하게 만들라'는 1원칙에 비춰볼 때, 대기목록 편집 측면에서는 애플과 유튜브에 비해 멜론의 사용성이 비교적 떨어진다고 할 수 있습니다.

그렇다면 어떻게 해야 더 다이렉트한 인터페이스를 만들 수 있을까요?

책에서는 1원칙에 해당하는 상호작용 패턴으로 아래 세 가지를 제시하고 있습니다.

인터페이스를 더 다이렉트하게 만드는 패턴들
-페이지 내 편집: 페이지를 이탈하지 않고 콘텐츠를 편집하는 패턴
-드래그 앤 드롭: 모두가 아는 그 드래그 앤 드롭
-직접 선택: 선택된 대상에 직접 액션을 가하는 패턴

이 중, ‘드래그 앤 드롭’ 패턴의 가이드가 아주 흥미롭습니다.

드래그 앤 드롭

드래그 앤 드롭은 보기에는 단순한 인터렉션으로 보이지만, 설계할 때는 생각 이상으로 고려해야 할 점이 많은 패턴입니다.

'사용자는 무엇을 드래그할 수 있는지 어떻게 알 수 있는가?'
'대상을 드래그 앤 드롭한다는 것은 어떤 의미인가?'
'대상을 드롭할 수 있는 곳은 어디이고, 드롭할 수 없는 곳은 어디인가?'
'드래그할 수 있음을 알리기 위해 어떤 행동 유발성을 시각적으로 사용할 것인가?'
'드래그하는 도중에 드롭이 가능한 영역과 불가능한 영역을 어떻게 표시해야 하는가?'
'실제 대상을 드래그하는가? 아니면 대상을 반투명하게 드래그하는가?'
'아니면 드래그되는 것이 썸네일 이미지인가?'
'드래그 앤 드롭으로 상호작용 하는 동안 어떤 시각적 피드백을 써야 하는가?'

이러한 상호작용이 일어나는 세세하고 개별적인 상황을 상호작용 순간(interesting momonts)라고 합니다.

사용자가 드래그 앤 드롭을 하는 동안, 피드백을 제공해야 할 순간인 ‘event’가 최소 15가지 이상 발생할 수 있고, 이를 시각적으로 알려주는 6가지의 ‘actor’가 존재하기 때문에 최소 90가지의 상호작용 순간이 만들어질 수 있습니다. 이 모든 순간에 적절한 피드백을 주어야만 끊김 없는 사용자 경험을 제공할 수 있습니다.

하지만 모든 순간에 걸쳐 시각적 요소와 상호작용 방식을 일관성 있게 유지하는 것은 무척 어려운 일 일 것입니다. 때문에 책에서는 ‘구멍’ 없는 드래그 앤 드롭 설계를 위해 <상호작용 순간 표>를 일종의 체크리스트로 활용하도록 제언하고 있습니다.

상호작용 순간 표

・세로축: 행위자들
・가로축: 사건
・교차하는 칸: 바라는 행동

(책 예시) 마이 야후! 드래그 앤 드롭 디자인을 위해 작성되었다는 상호작용 순간

책에서 제시한 웹 버전의 <상호작용 순간 표>를 모바일 버전으로 바꿔보았습니다.

mobile Ver. 상호작용 순간 표

세로축의 첫 번째 행위였던 ‘마우스 오버’의 경우, 모바일에서는 마우스의 역할을 손가락이 대신하고 있으므로 ‘탭’이라는 행위로 바뀔 수 있습니다. 가로축에서 시각적 피드백을 담당하던 '마우스 포인터'는 모바일로 넘어오면서 촉각적 피드백인 ‘햅틱'으로 대체되었습니다. 또 이 외에도 설계하고자 하는 드래그 앤 드롭 상황에 따라 가로축이 추가되거나 변경될 수 있을 것 같네요.

드래그 앤 드롭을 좀 더 세부적으로 살펴보면 네 가지 주요 패턴으로 나눌 수 있습니다.

01. 모듈 드래그 앤 드롭
02. 목록 드래그 앤 드롭
03. 개체 드래그 앤 드롭
04. 실행 드래그 앤 드롭

01. 모듈 드래그 앤 드롭

페이지에 있는 모듈을 재배열한다

(모듈 드래그 앤 드롭) 네이버의 판 관리 기능

네이버는 포털 메인화면의 ‘판 관리’를 모듈 드래그 앤 드롭 패턴으로 제공하고 있습니다. 그런데 네이버의 드래그 앤 드롭은 어딘지 불편합니다.

문제점: 드래그로 항목을 끌어왔을 때 초록색으로 표시되는 모듈의 앞에 배치되는지, 뒤에 배치되는지 알 수가 없습니다. 이에 더해, 정확한 위치에 드롭하지 않을 경우 실패가 빈번하게 일어납니다.

해결책: 만약 드래그 한 항목이 어디에 드롭되는지 삽입 표시선을 넣는다거나, 다른 모듈들이 뒤로 밀려서 드롭 공간에 빈 공간을 만들어 준다거나 했다면, 드롭 영역에 대한 정확한 피드백 제공이 가능했을 테고 실패 빈도 또한 줄일 수 있었을 것입니다.

02. 목록 드래그 앤 드롭

페이지 내 항목을 상하 또는 좌우 방향으로 움직여 재배열한다

(목록 드래그 앤 드롭) 카카오톡의 샵 검색 관리

카카오톡은 네이버 판 관리와 같은 기능을 '목록 드래그 앤 드롭 패턴'으로 제공하고 있습니다.

카카오가 사용한 목록 드래그 앤 드롭의 경우, 순서를 바꾸는 조작이 훨씬 쉽고, 목록이 상하로 나열되기 때문에 바뀐 순서에 대한 인지 또한 명확합니다. 무엇보다 네이버 방식에 비해 실패 빈도가 현저하게 줄어듭니다.

03. 개체 드래그 앤 드롭

개체 사이의 관계를 바꾼다

(개체 드래그 앤 드롭) 아이 클라우드 드라이브

아이클라우드 드라이브는 ‘개체 드래그 앤 드롭’ 패턴을 이용해 파일을 폴더 안으로 이동시킬 수 있게 하고 있습니다. 하지만 아이클라우드의 드래그 앤 드롭은 어딘가 심심하고 모호합니다.

1. 유인 요소가 없어 드래그 앤 드롭 기능 자체를 발견하기가 어렵습니다.

2. 드래그를 하게 되더라도 ‘드롭' 하기 전까지는 이게 폴더 안으로 들어가는 건지, 순서가 바뀌는 건지 시각적 피드백이 모호합니다.

3. 한번 폴더 안에 들어간 파일을 다시 밖으로 꺼낼 방법이 없습니다.

(개체 드래그 앤 드롭) 구글 드라이브

같은 기능을 같은 패턴으로 제공하고 있는 구글 드라이브의 경우, 아이클라우드에 비해 훨씬 다양한 피드백을 제공하고 있습니다.

1. 선택한 파일이 폴더 영역을 지나갈 때, 작게 축소되는 전환 효과를 이용해 현재 선택한 파일이 폴더 안으로 이동된다는 것을 확실히 인지시킵니다.

2. 드롭이 불가능한 파일 영역을 지날 때는 드롭이 불가능하다는 시각적인 피드백을 확실하게 주고 있습니다. (오른쪽(\)표시)

3. 폴더 안으로 파일을 이동 후에는, 화면 하단에 실행 취소 토스트를 띄워주어 사용자가 실수할 경우까지 대비하고 있습니다.

04. 실행 드래그 앤 드롭

드롭한 대상에 어떤 행동을 취한다

(실행 드래그 앤 드롭) 카카오 뮤직 종료

PC 환경에서 실행 드래그 앤 드롭의 가장 쉬운 예시로 아이콘을 드래그해 휴지통에 넣어서 삭제하는 행동을 들 수 있습니다. 카카오 뮤직이 같은 방식을 모바일에 적용해 카카오톡 앱 내에서 음악 종료 기능으로 사용하고 있습니다.

목록 드래그 앤 드롭

위에서 살펴본 네 가지 드래그 앤 드롭 패턴 중에서 음악 스트리밍 어플들이(애플뮤직, 유튜브 뮤직, 멜론) 재생 대기 목록 편집을 위해 공통적으로 사용하고 있는 패턴이 있는데요, 바로 '목록 드래그 앤 드롭'입니다. 가장 화면 전환이 적었던 애플뮤직을 예로 들어 좀 더 자세하게 분석해보겠습니다.

앞서 배운 <상호작용 순간 표>를 애플뮤직의 목록 드래그 앤 드롭에 적용한 것입니다.

❶ 디폴트 화면에서는 목록 우측 아이콘으로 드래그 앤 드롭이 가능하다는 유인 요소를 제공하고 있습니다.

❷길게 탭 했을 경우, 센 햅틱으로 촉각적 피드백을 주고 드래그가 시작됩니다. 이때 드래그 대상 항목은 반투명하게 변하는 동시에 그림자 효과를 주어 떠오른 듯한 시각적 효과를 주고, 항목이 떠오른 자리에는 공백이 생깁니다.

❸~❹드래그가 시작되고 드롭이 가능한 유효 영역으로 항목이 이동하면, 약한 햅틱으로 드롭이 가능함을(항목의 순서가 바뀌었음을) 알리고 순서가 바뀐 항목들이 이전에 생긴 공백을 채웁니다.

이때 흥미로운 점은 드래그 대상이 다음 항목의 전체 영역을 이동해야 순서가 바뀌는 것이 아니라, 영역의 절반을 지나는 순간을 기점으로 순서가 바뀐다는 것입니다. 이 섬세한 타이밍 덕분에 사용자는 애플뮤직의 드래그 앤 드롭이 즉각적이고 편리하다고 느낄 수 있습니다. 만약, 절반이 되지 않는 시점에서 순서가 바뀌었다면 조작이 너무 민감해져서 사용자의 피로도가 올라갔을 테고, 영역 전체를 지나야 만 순서가 바뀌었다면 목록 편집이 둔하게 느껴졌을 것입니다.

❺목록이 길어져 화면 바깥으로 드래그할 경우, 드래그 중인 항목의 위치는 유지하고 그 외 목록들은 빠르게 스크롤되며 이동합니다.

❻드롭에 성공할 경우 역시 약한 햅틱으로 촉각적 피드백을 줍니다.

목록 드래그 앤 드롭 가이드라인과 애플 뮤직

가능하다면 빈칸 생성 방식을 사용하여 실시간으로 드래그 앤 드롭의 결과를 알 수 있게 하라.

→ 항목이 선택되면 원래 자리를 빈칸으로 비워두고 있습니다.

드래그 앤 드롭이 가능하다는 유인 요소를 제공하라.

→ 목록 우측의 아이콘으로 드래그가 가능하다는 것을 알려주고 있습니다.

마우스를 3px이상 움직이거나 최소 0.5초 이상 누르고 있을 때 드래그가 시작되게 하라.
→ 0.5초 이상 꾹 누르고 있어야 항목이 떠오릅니다.

모든 상호작용 순간에서 사용자에게 지속적으로 필요한 정보를 제공해야 한다.

→ 선택 시 항목이 z 축으로 떠오르며 그림자 생성으로 시각적 정보를 제공합니다.

→ 드래깅 중에는 반투명 표시를 합니다.

→ 선택 시, 순서가 바뀌는 순간, 드롭 성공 시에 각각 세기가 다른 햅틱으로 촉각적 정보 제공합니다.

Coming next.

2원칙. 가볍게 유지하라

3원칙. 페이지에 머무르게 하라

4원칙. 유인 요소를 제공하라

5원칙. 전환 효과를 사용하라

6원칙. 즉각적으로 반응하라