[UX] 가벼운 이야기2010.09.09 22:40



최근 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://pxdux.tistory.com/69


Posted by 위승용 (uxdragon)

댓글을 달아 주세요

[UX] 가벼운 이야기2010.03.30 09:00

1. 팝업 다이얼로그란?

팝업 다이얼로그는 팝업의 형태로 알림, 혹은 확인, 취소 등을 수행하는 장치입니다. PC 환경에서는 팝업 메뉴가 마우스의 오른쪽을 클릭하면 상황에 따라 나오는 컨텍스트 메뉴를 사용되는 용도, 혹은 선택의 목적으로 사용되어 왔습니다. 모바일 환경에서는 주로 확인의 목적, 혹은 선택의 목적으로 사용되고 있습니다.

Designing Interface 책에서는 모달 패널과 팝업 메뉴를 다음과 같이 설명하고 있습니다.

모달 패널 (modal panel)
사용자가 현재 상황에 대한 문제를 해결할 때까지 오직 한페이지만 보여준다. 문제 해결과 관련되지 않은 다른 네비게이션은 할 수 없다.

팝업 메뉴 (pop-up menus)
마우스의 오른쪽을 클릭하거나, 패널이나 아이템에서 이와 유사한 행동을 하면, 상황 메뉴와 같은 팝업 메뉴가 나타난다. 팝업 메뉴에는 일반적으로 인터페이스에서 사용할 수 있는 모든 액션이 아니라, 특정 상황과 공통된 액션들만이 들어 있다. 간략하게 만들어야 한다.


또한, 위키피디아에서는 다이얼로그를 다음과 같이 설명하고 있습니다.

대화상자 (dialog)
그래픽 유저 인터페이스에서 대화 상자는 사용자에게 정보를 보여 주거나 응답을 받는 인터페이스에서 사용되는 특별한 창이다. 대화 상자라고 부르는 까닭은 컴퓨터와 사용자 사이에 대화할 수 있는 기능을 제공하기 때문이다. 사용자에게 무언가를 알려 주거나 사용자로부터 입력을 요청하는 등, 또는 그 두 가지 기능을 모두 수행할 수 있다.

물론 PC환경에서의 용어라 그대로 적용하기에는 무리가 따르겠지만, '팝업 기능을 수행하는 모달패널' 혹은 '팝업 기능을 수행하는 다이얼로그' 정도로 부를 수 있겠습니다.



2. 무선인터넷 제한 상황에서의 App.별 팝업 다이얼로그 메시지

그렇다면 모바일 환경에서 팝업 다이얼로그는 어떻게 사용되고 있을까요? 팝업 다이얼로그를 전체적으로 비교하기에는 다소 무리가 따르기 때문에 하나의 주제를 가지고 비교해보고 싶은 생각이 들었습니다. 아이팟 터치를 사용하다보면 Wi-Fi 를 사용할 수 없는 상황이 있는데, 이 상황에서 아이팟 터치 App. 들은 어떻게 팝업 다이얼로그들을 사용하고 있는지 살펴보았습니다.

크게 아이팟 터치의 App. 은 기본으로 설치되어있는 App. 이 있으며, 사용자가 직접 설치할수 있는 App. 으로 구성되어 있습니다. 비교항목은 제가 보유하고 있는 무선인터넷을 필요로하는 App. 위주로 비교하였습니다.


2-1 아이팟 터치 내부 App.






2-2. 아이팟 터치 외부 App.










3. 팝업 다이얼로그의 메시지, 버튼, 정보표현 방식 비교

아이팟 터치 App. 에서 사용된 팝업 다이얼로그 메시지와, 버튼 및 정보표현 방식에 대해서 [표1] 에 정리해 보았습니다. 


[표1] 무선인터넷 제한 상황에서의 모바일 팝업 메시지
표를 클릭하시면 크게 보실 수 있습니다.

텍스트의 종류는 '현재의 상태만 알려주는 경우'와, '현재의 상태 및 해결 책을 알려주는 경우'가 있습니다. 드물게 '친근함을 유도'하는 메시지가 있습니다. 윙버스 App. 의 경우 인터넷에 연결되지 않은 상태를 알려주며, 무선인터넷 연결 상태를 확인해 달라는 해결책을 제시하고 있습니다. 또한 팝업을 한번 더 띄워 무선인터넷이 제한된 상황에서도 미리 다운로드된 맛집 정보를 볼 수 있는 방법을 제공하고 있습니다.

버튼의 경우에는 '승인', '확인', 'OK' 를 주로 사용하고 있습니다. Tweetery App.의 경우는 'Cancel' 과 'Try again'의 두 개의 버튼을 제공하고 있습니다. skype App. 의 경우 '거절'이라는 다소 이상한 레이블을 제공하고 있습니다.

정보 표현 방식의 경우 '팝업'을 띄워 제한상황을 알리는 경우가 있고, '내부'에 제한상황을 보여주는 경우가 있습니다. 아프리카TV App.의 경우 팝업을 보여주고 '자동종료'가 됩니다.

iGmail 과 Gmail App.의 경우 무선인터넷 제한 상황에서는 아무 정보도 보여주지 않고 있습니다. 한국사람들을 대상으로 하는 App. 인 경우에 영어를 사용해서 일반 사용자들에게 해석을 요구하는 경우도 있습니다. 일반 사용자들은 잘 모를 수 있는 전문용어를 사용하는 경우도 있습니다.

팝업 다이얼로그 메시지는 문제점을 알려주고, 문제점을 해결할 수 있는 방법을 가르쳐주며, 무선인터넷 제한 상황에서도 저장된 정보를 자유롭게 볼 수 있게끔 유도해야 하겠습니다.



4. 글을 마치며

이 글을 읽고 이러한 의문을 제기할 수 있을 것입니다. '과연 요즘시대에 무선인터넷이 안되는 경우가 어디있겠느냐?' 고 말입니다. 이 글의 경우 무선인터넷이 되고 안되고를 떠나서 팝업을 통한 알림이 과연 친절한가? 혹은 충분히 신중히 설계되었는가? 에 초점이 맞추어져 있다고 생각합니다. 무선인터넷 제한 상황은, 같은 환경에서 비교하기 위한 수단으로 사용되었음을 밝힙니다.

또한 '팝업창이 과연 필요한가?' '팝업창이 얼마나 유용한가?' 에 대해 질문할 수 있습니다. 이 질문의 명쾌한 답을 여기서 드릴수는 없을 듯 합니다. 다만 모바일 환경에서 팝업 다이얼로그는 충분히 사용되고, 남용되고 있다고 생각합니다. 불필요한 팝업창을 계속 띄워서 사용자를 불편하게 할 것이 아니라, 정말 유용한 정보를 적시적소에 녹여내는것이 중요하다고 생각합니다.

팝업창을 똑똑하게 사용하는데에는 여러가지 방법이 있겠습니다. 팝업창의 메시지를 친근하고 재미있게 하는 방법이 있을 수 있습니다. 팝업창을 사용하지 않고 App.의 내부에 메시지를 녹여낼 수도 있습니다. 팝업을 한번만 띄우게 하고, 원치 않을경우 더이상 띄우지 않게 조정할 수도 있을 것입니다. 팝업에서 확인 버튼을 없애고 일정 시간이 지나면 자동으로 사라지게 하는 방법을 사용할 수도 있습니다. 아니면 사용자를 믿고 불필요한 정보들은 자동으로 처리하게 할 수도 있겠습니다.

이 글은 제한된 상황에서 작성하여, 모든 팝업의 경우를 다루고 있지는 않습니다. 팝업의 경우 알림의 경우 외에도 선택이 필요한 경우가 있습니다. 또한 요즘에는 팝업 창을 단순히 버튼으로만 배치하지 않고 다양한 컴포넌트들을 같이 섞어서 사용하는 경우도 있습니다.

앞으로 팝업 다이얼로그가 사용자에게 그저 귀찮기만한 골칫덩이가 아닌, 정말 유용한 정보를 제대로 보여줄 수 있는 소통의 창이 되기를 기대해봅니다. :)


Posted by 위승용 (uxdragon)

댓글을 달아 주세요

  1. 댓글을 남겨주세요. ^^

    2010.05.21 09:54 신고 [ ADDR : EDIT/ DEL : REPLY ]