태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


2011.09.25 16:55

터치스크린에서 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의 사용성을 높일 수 있는 방안들에 대해서 정리해봐야겠습니다.

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

^^
팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 6
  1. miriya 2011.09.26 00:04 신고 address edit & del reply

    키오스크는 대부분 감압식 디스플레이를 사용합니다.
    감압식 디스플레이로 드래그앤 드랍을 한다는걸 생각하니 아득해지는군요.
    손가락 지문이 다 닳을것 같습니다.

    • 無異 2011.09.26 11:18 신고 address edit & del

      지하철 역내에 설치된 다음 디지털뷰의 로드뷰 위치 이동이 감압식터치스크린에 드래드앤드롭 UI를 사용 한 좋은 사례입니다. 지문이 닳기 전에 애가 닳아 돌아버릴 뻔 했습니다. 끌려오다가 말다가.

    • 엄청난동동이 2011.09.26 20:17 신고 address edit & del

      저도 이 글을 블로깅을 준비하면서 지하철 다음 로드뷰를 테스트 해보았는데
      정말 좋지 않더라구요. 그게 감압식이기 때문이라는 것은 생각치 못했는데
      그걸 알고나니, 그 때 불편했던 것들이 왜 그랬었는지 고개가 끄덕여집니다.

      그 큰 화면이 버벅거리는데 상당히 부담스러웠구요
      눈높이에 따른 시야각 때문에, 생각했던 위치에 오브젝트를 정확히 옮길 수도 없었구요
      지하철 노선도를 확인할 때 눈높이 아래에 있던 포인트들은 정확히 터치하기가 힘들었습니다.
      눈에 보이는 위치에서 오조준을 해야 정확히 찍을 수 있었다는..

      여튼 좋은 의견 감사합니다. ^^

  2. 김금룡 2011.09.26 00:19 신고 address edit & del reply

    개인적으로 터치 스크린에서의 Drag & Drop 동작이 마우스의 Drag & Drop 동작보다 절대적으로 어려울 수 밖에 없는 이유가 있다고 생각됩니다. 그것은 바로 터치 스크린에서의 Filcking 동작이 Drag 동작과 중복되기 때문인데요. 이때문에 터치 스크린에서 Drag & Drop을 하려면 모드를 사용해야 하는 어려움이 있습니다. 하지만 이렇게나 어려운 동작을 아이폰에서는 롱탭을 이용한 모드를 제공함으로써 사용자에게 학습을 시키고 있는데요. 그 이유는 오브젝트 재배열이 빈번하게 사용되는 기능이 아니며, 위치 배열만큼은 Drag & Drop이 물리적인 환경에서의 이동 동작과 일치하는 직관성 때문입니다. 따라서 빈번히 사용되는 단순 기능으로 구성된 키오스크에서는 Drag & Drop이 적절치 않다고 책에서도 애기하는 것 같습니다.

    그리고 About face의 13장. 메타포, 숙어, 어포던스 장에서도 Drag&Drop 동작 자체를 스크롤 등과 같이 가장 어려운 단계의 숙어로 정의하고 있습니다. 태생 자체가 클릭보다 이미 어렵다는 애기죠. 물론 디지털 환경에서의 숙어라도 한번 익히면 매우 쉽게 쓸 수 있다는 특징이 있기 때문에 UI 숙어의 무궁무진한 발전 가능성도 책에서 언급을 했구요. Drag & Drop 같은 경우에는 한번 학습된 경우 오브젝트 선택과 타겟 선택이 필요한 동작에서 매우 편리하게 사용됩니다.

    정리하면 Drag & Drop자체는 애시당초 Tap보다 어려울 수 밖에 없는 동작이라고 생각됩니다. Drag & Drop의 pain point를 개선하려면 적절한 사용 맥락과 한번의 학습이 필요한 숙어임을 받아들여야할지도 모르겠습니다. 결론을 떠나서 엄청난동동이님이 Drag & Drop의 사용성에 대한 고민은 매우 흥미로웠습니다. 앞으로도 좋은 글 부탁드립니다.^^

    • 엄청난동동이 2011.09.26 20:25 신고 address edit & del

      Drag&Drop이 다른 핑거 액션에 비해 상대적으로 사용성이 떨어지는 동작이라는 것. 이 부분에 대해서는 어느 정도 공감이 갑니다. 이제 우리의 숙제가 남은 것 같군요 . ^^ 요걸 어떻게 개선할 것이냐..ㅎ 함께 고민해봅시다. 댓글 달아주셔서 감사합니다. 큰 보람을 느끼게 되는군요.

  3. 전성진 2011.10.14 18:53 신고 address edit & del reply

    키오스크에서 드랙앤드랍을 피하라는 것의 요점은 학습할 시간이 없다는 것입니다. 그 말은 드랙앤드랍은 그 기능을 인지하고 이해하기까지 어느정도의 학습이 필요하다는 말이죠. 드랙앤드랍이라는 것은 3차원의 경험에 근거합니다. 책상위의 작은 물건은 본능적으로 '옮길 수 있다'고 인지할 수 있습니다. 2차원 평면 디스플레이에서의 오브젝트는 '옮길 수 있다' 보다는 '눌러서 이동'의 경험이 더 우세하겠죠? 동일 공간에서 '옮길 수 있는' 오브젝트와 '눌러서 이동'하는 버튼이 공존하면 더 혼란스러워 질 것입니다. 여기에서 키오스크라는 연령, 능력 등을 예측할 수 없는 불특정 사용자라는 특성에, 길가다가 낯선 기계를 만나서 사용해야 하는 상황을 감안하면 드랙앤드롭을 피하라는 주문이 무리하지 않은 것 같습니다. 그러나 이것도 역시 디자인하기 나름인데....'옮길 수 있을 것 같은' 어포던스를 충분히 주고, '옮기는 방식'에 의한 UI를 주로 채용한다면 키오스크에서도 가능할 것이라 생각합니다. 이에 적합한 주제를 찾아보는 것도 좋겠네요.

Ad Test...