터치스크린에서 Drag&Drop은 어렵다?

궁금증
About Face3 번역본 - 공공장소의 인터랙션에 대한 이야기 중

사진 제공 : 한상택 님

키오스크에서 터치스크린을 적용할 때 

일반 터치스크린 인터페이스에 적용되는 원칙이 똑같이 적용된다고 이야기 하고 있습니다.

그 원칙 중 하나로 '터치스크린에서 드래그앤드롭 인터랙션은 매우 어렵다'(304page)라고 말을 하고 있습니다.

읽다보니 이런 의문이 듭니다.

"....정말(그런가)?"

그게 아니라면?
Drag&Drop 의 사용성이 절대적으로 '좋다'라고 말할 수 있는 근거는 딱히 없습니다.

그러나 이미 모바일 기기의 바탕화면에서는 아이콘 이동수단으로 어렵지 않게 쓰고 있고

사용자에게는 이벤트를 실행하는 액션 중 하나로 학습이 되어있는 상황에서 

Drag&Drop이 정말 어려운 인터랙션일까요?

그럼 About Face3에서 '매우 어렵다'라고 표현하는 건 어떤 관점에서 그렇게 이야기 하는 것일까요?

원문은 어떻게 말하고 있나?

pxd 한상택님께서 의견을 주셨습니다.
"우선 번역서에서  이해가 안 되는 부분은 번역이 잘 못 되었기 때문인 경우가 많은데요.
이 책의 번역도 허접해서 그런 오해를 할 수 있을 것 같네요. 그냥 단정적으로 매우 어렵다고 한 게 아니라 
원문에는 사용자가 키오스크를 사용하는 시간이 충분히 길지 않으니까
그런 드래그앤드롭 인터랙션을 사용한다는 것을  알아 채기 어렵다는 의미로 쓴 것 같네요."

'동의합니다.'

그러나 책에서는 'Drag&Drop이 어렵다'라는 것은 일반 터치스크린 인터페이스에 적용되는 원칙 중 하나라고 말합니다.
단순히 키오스크 앞에 사용자가 위치했을 때의 상황만을 고려한 내용은 아니라고 생각됩니다.

드래그 앤 드랍의 정의

'우리 모두의 백과사전' 위키피디아에서는 Drag & Drop을 어떻게 정의하고 있는지 확인해보았습니다.

드래그 앤 드랍

드래그 앤드 드롭(Drag-and-drop, 끌어서 놓기)은 컴퓨터 그래픽 사용자 인터페이스 환경에서 시각적인 객체를 클릭하면서 다른 위치나 다른 가상 객체로 드래그하는 행위이다. 
수많은 종류의 동작을 일으킬 수 있으며, 두 추상적 대상 사이에 다양한 종류의 연결을 만들 수 있다.
기능 동작에 한하여 모든 소프트웨어에 드래그 앤드 드롭을 사용할 수 있는 것은 아니지만 가끔은 사용자가 작업 수행을 하는 데 빠르고 쉽게 배울 수 있는 기술로 쓰일 수 있다.그러나 드래그 앤드 드롭 기능으로의 
행동 유도성이 부족하므로 항목을 드래그할 수 있는 여부가 늘 확실한 것은 아니다.[1]
 

출처를 찾아보았습니다.
제이콥 닐슨 아저씨의 이론이었습니다.제이콥 닐슨 아저씨도 worst offenders같은 단어를 사용하면서 Drag&Drop의 사용성에 대해서 부정적으로 말합니다. 반대로 체크박스나 버튼은 Painfully obvious라는 표현을 쓰며 클릭에 유리하다고 말합니다.

Drag-and-drop designs are often the worst offenders when it's not apparent that something can be dragged or where something can be dropped. (Or what will happen if you do drag or drop.) In contrast, simple checkboxes and command buttons usually make it painfully obvious what you can click.

물론 여기에서 말하는 드래그 앤드 드롭의 대상은 컴퓨터입니다. 
보통의 OS에서는 아이콘/파일/리스트의 이동, 아이콘 삭제(휴지통으로 드랍)등에 사용되는데, 생각보다 사용빈도가 높지는 않습니다. 이쯤되니 손가락을 이용하는 터치스크린에서는 '더 어렵게 느껴질 수 있다'라는 생각이듭니다.

동작 분석

드래그 앤 드롭의 동작을 분석해보면 크게 세 가지 동작으로 이루어집니다. 

Drag&Drop : 오브젝트 누르기(Hold) --> 끌기(Drag) --> 오브젝트 놓기(Drop)

쉽게 말하면 터치한 상태에서 오브젝트를 움직인다음 정지한 상태에서 손가락을 떼는 제스쳐입니다.[http://ashura4.blog.me/130110732530 - [스마트폰] 제스처의 정의와 종류]
 

손가락을 짧고 가볍게 눌렀다가 놓는 'Tap'에 Drag가 삽입된 형태로 생각하면 이해가 쉬울 것 같습니다.

Drag라는 동작이 하나 추가되었는데 사용성이 떨어지는 것으로 보아, Tap에 Drag가 추가되는 시점에 사용성을
떨어뜨리는 Pain point가 있는 것일까요?

현재 터치스크린에서 드래그앤드랍이 쓰이는 사례 분석

아이폰에 사용되는 Drag&Drop의 일부 사례를 찾아보았습니다.

1) 아이폰 리스트 편집 

    아이폰에서는 리스트 Edit에 일반적으로 쓰이는 기능입니다.

    Edit 버튼을 누르면 '삭제'버튼이 나타나면서 현재 화면이 보이는데

    처음에 보면 우측에 있는 세 개의 선이 어떤 기능을 하는지 알 수 없습니다.

    또한 터치로는 반응이 없습니다. Hold를 해야 리스트가 떠오르기 때문에 
    'Drag&Drop을 통한 리스트 이동'을 인지하기가 어려운 상황입니다.  
   

 
2) 아이폰 아이콘 이동 및 그룹핑 

    아이폰의 경우 아이콘을 이동시키기 위해서 'Long Tap'을 통해 잠금을 해제해야 합니다.

    그 이후에 Drag&Drop이 가능한데 아이폰의 경우 아이콘이 살랑살랑 흔들리는 모션을 보여주면서

    객체가 이동가능한 상태라는 것을 간접적으로 보여줍니다.(이것도 나이스한 솔루션이라고 생각되지는 않습니다)

    이어서 아이콘에 Hold를 하면 아이콘이 떠오르면서 다른 아이콘과 구분이 되고 이동가능한 객체라는 것을
    인지시켜줍니다. 그러나 이 상황에서도 x버튼이 더 먼저 보입니다. 
    클릭이 더 쉽게 행위를 유도하는 것을 간접적으로 보여주는 것 같습니다.

   

3) 아이팟 하단 메뉴 Edit 

    아이팟의 하단 메뉴 편집의 경우 아이콘을 길게 누르면 객체가 공중으로 떠오르는 이미지를 보여줍니다.

    공중으로 떠오르는 이미지를 통해 Layer를 구분짓고 

    아래 Layer에 있는 아이콘과는 구분되게 하여 이동가능성에 대한 어포던스를 높여주고 있습니다.

    어포던스를 높이는데 긍정적인 방향이라고 생각합니다.

  

정리해보자

1. 인지의 어려움

책의 본분에 언급된 것처럼 

터치스크린에서는 '탭(기본동작) 이외의 다른 인터랙션 사용 가능성에 대해, 짧은 시간에 인지하기 어려울 수 있습니다. Tap은 아래와 같은 짧은 동작으로 이루어져 있습니다.

Tap : 오브젝트 누르기 -> 오브젝트 놓기
탭과 달리 Drag&Drop에는 '끌기(Drag)'라는 동작이 추가되어 있는데 이 부분에서 Pain point가 있다고 생각합니다.
끌기(Drag)위해서는 오브젝트를 잡아놓는 Holding이 필요한데
'Holding을 유도하기 위한 어포던스'가 중요 요소로 생각되고
동시에 '이동(Drag)에 대한 어포던스'를 높였을 때 Drag&Drop에 대한 사용성을 높일 수 있다고 생각합니다.

위에 제시한 사례중 2번이나 3번처럼 과감하게 액션을 부여하는 것이 해결책 중 하나라고 생각합니다.

정리하면 [객체를 Touch point에 붙들어 놓을 수 있고(Holding), 이동(Drag)에 대한 행위 유도]를
이끌어내면 Drag&Drop의 사용성을 높일 수 있다고 생각합니다.

 

2.행위의 어려움
 

위에서 사례로 제시하지는 않았지만 

키오스크같은 큰 화면에서 Drag&Drop하는 것은 실제 이동거리가 커서 물리적으로 사용성을 떨어뜨리는 요소를 가지고 있습니다. 
 

마우스 커서나 모바일기기 핑거 액션은 짧은 거리를 움직이는데 비해서. 

화면이 큰 키스크린에서는 물리적인 거리, 화면이동시 딜레이 등 환경요소에 의해 사용성이 떨어지는 경향이 있습니다. 

(아이패드만 써봐도  웹페이지 스크롤이 휴대폰만큼 깔끔하게 되지 않습니다)

또한 키오스크가 수직으로 설치된 경우 수직면에서 드래그 하는 건 마우스질처럼 수평면 위주의 드래그에 비해 어렵게 느껴집니다. 그래서 특별히 재미를 위한게 아니라면 키오스크에서는 쉽고 단순한 터치로 가는게 대개의 경우 좋은 선택라고 생각됩니다.

(참조 : pxd 한상택님 의견)
 

3.학습의 어려움
 

Drag&Drop에 학습이 되어 있는 유저들은 얼마나 될까? 2011년 9월21일 방송통신위원회가 공개한 자료에 따르면 지난 6월까지 국내 스마트폰 가입자는 1560만9000명이라고 합니다. 대략 국내 총 인구의 33%가 스마트 폰을 쓴다고 가정하고,  그 안에서 Drag&Drop학습이 잘 되어 있는 사람만 추려낸다면 33%를 훨씬 밑도는 수치의 사용자만이 Drag&Drop에 학습이 되어 있다고 추론할 수 있습니다.(여기에 대한 수치적인 자료는 없습니다.한 번 조사해보고 싶네요). 

이 추론을 바탕으로 대략 4명중 1명만이 터치스크린 Drag&Drop에 대한 학습이 되어 있다고 가정해봅시다. 결과적으로 4명 중 3명은 터치스크린에서 Drag&Drop에 대한 경험이 없다고 추론할 수 있습니다. 이 정도 수치면 '일반적이지 않은 인터랙션'이라고 해도 될까요? 모바일기기에서 키오스크로 확장시키면 학습도가 더 떨어질 것입니다. 

 

글쓴이 후기

이 블로깅을 통해 단순히 'Drag&Drop 인터랙션이 사용자에게 정말 어려운 동작인가?'를 밝히고 싶었던 것은 아닙니다.

• 터치스크린에서 Drag&Drop은 쉬운 인터랙션은 아니다. (전제)
• 그렇다면 Pain Point는 어디에 있을까? (문제점)
•  그 Pain Point를 어떤 방식으로 개선할 수 있을까? (해결방법)

를 말하고 싶었습니다. 

정리해보니 문제를 던져놓은 수준밖에 안되는 것 같습니다. 단순히 블로그 한 편에 정리될 만한 사안이 아닌 것 같군요.

사용자 조사등을 통해 조금 더 납득할만한 Pain Point를 찾고, 어포던스를 높일 수 있는 방안에 대해 고민을 해본다면

Drag&Drop의 사용성을 높일 수 있는 방법들을 찾을 수 있다고 생각합니다. 개선의 여지가 분명히 있는 만큼 지속적인 관심을 가지고 고민해봐야 할 것 같습니다.

다음편에는 Drag&Drop의 사용성을 높일 수 있는 방안들에 대해서 정리해봐야겠습니다.

부족한 글 읽어주셔서 감사합니다.
관련된 주제에 대해서 의견 달아주시면 다음편 블로깅에 참고하도록 하겠습니다.

^^

• 카카오스토리
• 트위터
• 페이스북