팝업 종류별 개선 방안

최근 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