태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.


2010.09.09 22:37

팝업 종류별 개선 방안



Moux 연구회의 백승화님이 쓰신 관계디자인 책을 읽었습니다. 
저는 특히 '팝업 디자인' 부분이 인상깊었습니다.

이 책에서 '팝업 디자인'은 크게 확인팝업, 알림팝업, 입력팝업, 옵션팝업으로 구분된다고 하였습니다. 그 중에서도 핸드폰 내부 상황에 따른 인터럽트, 사용자 동작상황에 따른 이벤트로 구분을 하였습니다. 팝업 디자인 챕터에서는 해당 팝업상황에서 종류별 개선방안을 다루고 있으며 개선방안은 아래 표에 정리되어있습니다. (표의 내용은 Moux 팀블로그에서 가져와 재구성 했습니다.)

팝업 종류별 개선방안
이미지는 출처를 통해 재구성 http://moux.tistory.com/57


팝업 종류별 개선사항의 전반적인 내용에는 동의합니다만, 추가로 제 생각을 덧붙여서 정리해보았습니다. 

1. 소프트웨어 인터럽트 팝업
이 책에서 소프트웨어 인터럽트는 버그라서 사용자는 볼 일이 적다고 적혀있었는데, 소프트웨어 인터럽트 상황도 고려해서 디자인할 필요가 있다고 생각합니다. 

그 중에서도 '알 수 없는 오류 팝업'이 대표적인 소프트웨어 인터럽트 팝업이라고 생각이 되는군요. 현재 '알 수 없는 오류 팝업'은 정말 뭐가 오류인지 정확히 보여주지 않고 있습니다. 또한 해결방안도 제시하고 있지 않지요. 그래서 텍스트를 그대로 복사해서 이 오류가 무슨 오류인지 웹 상에서 물어보는 상황도 발생합니다. 

이미지 출처 : http://offree.net/1864

모바일의 상황도 크게 다르지 않습니다. 소프트웨어 인터럽트 팝업이 다른 팝업들에 비해 보여지는 빈도는 적지만, 사용자는 어쩌다가 나오는 팝업들에도 불편을 겪기도 합니다.

간혹 이렇게 알 수 없는 외계어들이 보이기도 합니다.

'소프트웨어 인터럽트 상황이 과연 사용자가 알아야 할 정보인가?', '소프트웨어 인터럽트 상황을 어떻게 사용자가 이해할 수 있는 언어로 표현할 것인가?' 를 고려해서 소프트웨어 인터럽트 팝업을 개선해야 한다고 생각합니다. 


2. 알림팝업의 하드웨어 인터럽트 팝업
알림팝업의 경우 확인을 눌러야 하는 제약사항이 있기 때문에 꼭 읽어야 하는 정보가 아니라 확인 차원에서 끝나는 경우에는 아래 화면처럼 Toast notification 을 보여주는 것도 하나의 방법일 수 있겠습니다.


3. 이벤트 동작재확인 팝업
이벤트 동작 재확인 팝업은 사용자가 정보를 잃을 위험이 있는 경우에만 노출하는 것이 좋습니다. 삭제같은 경우에도 되돌릴 수단이 있는 경우에는 팝업을 노출하지 않는 것이 좋다고 생각합니다. 

아이폰(아이팟 터치)의 경우 백업 수단이 있을때에는 삭제시 팝업을 노출하지 않습니다. 팝업을 노출하지 않는 대신 삭제 버튼을 숨겨놓아서(이를테면 리스트를 좌, 우 Flick 할 경우 삭제 버튼이 노출된다던지...) 삭제 모드로 진입하게 하는 경우도 있습니다. 예외적으로 아이폰(아이팟 터치) 에서 삭제시 팝업을 노출하는 경우는 삭제 버튼이 바로 노출되어 사용자의 실수를 유발할때 입니다. 일반적으로는 팝업을 볼 일이 없으므로 사용자는 편하게 기기를 사용할 수 있습니다. 

이벤트 동작재확인 팝업은 일반적인 상황에서는 제거하는것이 좋겠지만, 사용자가 정보를 잃을 경우를 배려해서 취사선택 하는것이 좋다고 봅니다.
메모장의 삭제 버튼이 노출되어 있으므로 팝업을 띄움

백업수단 (휴지통)이 있으므로 팝업을 띄우지 않음
 
삭제 버튼이 노출되어 있지 않으므로 팝업을 띄우지 않음


언급된 내용을 정리해서 표에 반영해 보았습니다.
팝업 종류별 개선방안 (제안)


팝업 디자인은 그동안 사용자들에게 골치덩어리로 여겨졌습니다. 그럼에도 불구하고 쉽게 팝업창이 없어지지 않는 이유는 팝업의 유용성에 있다고 생각합니다. 

- 가능하면 팝업을 보여주지 않는 것이 최선의 선택이겠지만, 팝업을 사용해야 한다면 제대로 사용해야 합니다.
- 팝업 용어는 사용자가 이해할 수 있는 용어로 보여주어야 합니다.
- 팝업 전후의 복잡한 시나리오를 간결하게 개선하여야 합니다.

상황에 맞는 적절한 팝업을 보여주기를 기대해봅니다. 


팝업디자인 관련 내용도 참고하세요.

1. 팝업 죽이기 http://moux.tistory.com/57
2. 모바일 팝업 문구 http://dobiho.com/?p=737
3. 무선인터넷 제한 상황에서의 모바일 팝업 다이얼로그 메시지 http://story.pxd.co.kr/69


저작자 표시 비영리
신고

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


Trackback 0 Comment 11
  1. moux 2010.09.09 23:04 신고 address edit & del reply

    백승화입니다.^^ 감사합니다.

    • uxdragon 2010.09.14 20:25 신고 address edit & del

      안녕하세요. 팀블로그 잘 보고 있습니다. 들려주셔서 감사합니다.:)

  2. 無異 2010.09.10 13:05 신고 address edit & del reply

    근데 개발자의 입장에서는 "알 수 없는 오류"는 정말 알 수 없어서 표시하는 경우가 대부분 입니다. 이런 오류가 왜 발생하는지 알면 고쳤겠지요 :) 저건 사용자에게 보여주기 위해서가 아니라 정말 예측할 수 없는 예외 상황의 디버깅 메시지라고 봐야할 것 같아요.

    • uxdragon 2010.09.14 20:25 신고 address edit & del

      정말 예측할 수 없는 예외 상황의 디버깅 메시지라고 해도 조금만 더 친근하게 할 수 있는 방법이 있을까요?

  3. 無異 2010.09.10 14:38 신고 address edit & del reply

    동작 재확인 팝업은 사용자가 실수 할 때도 있으니까 만회할 수 있도록 하는 forgiveness 원칙 안에서 보면 될것 같네요. 예를 든것은 관계디자인 책에도 나와있는 실수방지UI 중 warning과 undo에 해당하네요. 보통 error proof라고 하면 prevent에 맞추어져 있는것 같지만요.

    제프라스킨같은 경우는 모든것이 undo할 수 있어야하고 쓸데없는 warning이나 modal을 혐오하니까 선택은 하나밖에 없습니다. 근데 사실 모든걸 undo하게 할 수 있는건 아닙니다. 그런면에서 세번째 예시 화면인 비디오 항목 삭제 UI는 warning을 대체하는 훌륭한 해결입니다. 스텝이 늘어난것은 동일하지만 modal warning 팝업이 아니라 삭제 프로세스를 둘로 나눠서 이중 안전 장치를 한것이니까요.

    • uxdragon 2010.09.14 20:28 신고 address edit & del

      비디오 항목 삭제 UI는 이중 안전 장치 측면에서는 훌륭하다고 생각됩니다만, 삭제까지 가는 인지의 측면에서는 조금 어렵다는 생각이 듭니다. 이점에 대해서는 어떻게 생각하시는지 궁금하네요.^^;

    • 이성진 2010.09.15 02:35 신고 address edit & del

      잘 아시겠지만 iPhone등의 iOS기반의 device가 대부분 host종속적인 성격이 강합니다. Video의 삭제는 예전 iOS 1.0부터 존재하였지요. 음악은 지우지 못하면서 동영상은 어떻게 지우게 하였는가에 대한 의문은 지금도 계속되고 있습니다만, 가장 큰 이유 중 하나는 바로 저장공간 확보라는데 의미를 둘 수 있을 것입니다. 또한 iPhone 고유의 삭제 process인 우로 swipe후에 삭제 버튼을 눌러 해당 컨텐츠를 삭제하는 방법은 multiple delete와 single delete중에 single delete에 해당이 됩니다. 잘 아시겠지만 대부분의 리스트뷰에서 해당하는 공동된 UI풀이이지요.

      iOS에서 가장 마음에 드는 것 중에 하나가 삭제의 일관성이고 그 일관성 중의 대표적인 예가 비디오 삭제와 같은 swipe후 delete 버튼을 눌러 컨텐츠 삭제를 완료하는 것일 겁니다.

      일단 depth를 두번 타므로 안정성에도 도움이 되고 폐기 처분할 컨텐츠를 옆으로 치워버리는 손가락의 튕기는 행동을 UI에 적용한 좋은 방법이나. 단점은 사용자 인지도가 사용방법을 알기 전까진 알 수가 없다는 점, 그리고 그 내용을 가르쳐 주지도 않는다는 점입니다.

    • 無異 2010.09.15 12:01 신고 address edit & del

      swipe 삭제는 모르면 쓰지 말라는거 아닐까요? 비디오 삭제 못한다고 죽지는 않잖아요. :) 암튼 비디오 삭제를 제외하고는 모두 개별보기나 편집모드를 통해서 삭제를 제공하고 있잖아요. swipe delete는 그냥 단축키로.

      제프라스킨은 이렇게 동일한 기능을 여러방식으로 제공하는것도 싫어하던데, 그것까지는 동의 못하겠더라구요.

    • 전성진 2010.09.16 12:20 신고 address edit & del

      음악은 지우지 못하게 하고 동영상은 지울수 있게한 이유 중 하나가 이성진님 말씀하신 저장공간의 확보도 있겠구요, 또한가지는 사용자의 behavior pattern인데 음악은 한번 소유하면 지속적으로 듣는 반면 동영상은 한번 보고 난 것을 반복해서 보지 않습니다. 게다가 덩치도 크니 한번보고는 잠시 저장했다가 곧 지우게 되죠.

  4. 수다공작소 2013.06.01 11:14 신고 address edit & del reply

    잘 보고 갑니다. 복원할 수 있는 것은 확인 메시지를 구지 표시할 필요가 없다는 것. 바탕화면에서 앱아이콘 휴지통 넣을 때가 그렇네요.

Ad Test...