팝업을 좋아하는 사용자는 없다. 어떤 이유 또는 목적으로 표시하든 간에 팝업은 사용자가 하려고 하는 과정을 방해하는 경우가 많은데, 그에 대한 글이 있어 소개.
원문링크: https://www.nngroup.com/articles/popups/
Popups: 10 Problematic Trends and Alternatives
Whether modal or not, most overlays appear at the wrong time, interrupt users during critical tasks, use poor language, and contribute to user disorientation.
www.nngroup.com
우선 팝업의 종류를 나눈다. 모달은 팝업을 닫기 전까지는 배경이 되는 화면을 작동할 수 없는 방식을 말한다. (국내에선 흔히 '모달 레이어'라고 부른다) 팝업이 뜰 때 배경 페이지가 어둡게 딤 처리(dimmed)되는 방식을 라이트박스(lightbox)라고 한다. 많은 경우 모달은 라이트박스 형태를 띈다.
팝업을 띄우는 시점: 중요한 상호작용이나 단계 전에는 쓰지 마라.
1. 메인 페이지 콘텐트가 로딩되기도 전에 팝업 띄우기: 많은 웹사이트들이 광고용으로 이런 팝업을 쓴다. 사용자의 한 명으로 돌아가서, 내가 해온 행동을 생각해보자. 난 과연 몇 번이나 그 팝업을 닫기 전에 읽어봤는가?
그럼 어떻게 하나: 실제로 그 팝업이 사용자에게 어떤 가치를 주는가를 깊이 고민하면, 많은 경우 팝업이 답이 되지 않는다. 팝업이 허용될 수 있는 유일한 상황은 법적 의무로 뭔가를 고지해야 할 때다.
2. 로그인 직후에 팝업 띄우기: 메인 페이지가 로딩되기 전에 띄우는 것만큼 사용자를 방해한다고 한다. 사용자가 로그인을 했다는 것은 다음 단계로 진행하겠다는 명확한 의사를 뜻하는데, 거기에 팝업을 띄우는 건 방해 외에는 의미가 없다.
그럼 어떻게 하나: 로그인 후 사용자가 하려던 업무를 수행한 다음에 표시하라. 구글은 사용자가 인박스에서 어떤 행동을 한 뒤에야 그에 관한 안내를 모달 방식이 아닌 팝업으로 표시한다.
3. 상호작용 전에 이메일 묻기: 많은 사이트와 어플리케이션이 사용자가 뭘 하기도 전에 이메일 주소를 물어본다. 아무리 유용한 콘텐트를 보내줄 계획이라 하더라도, 사용자가 아직 그 샘플을 읽어보지도 않은 상태에서 이메일 주소를 물어보면 '얘들이 스팸 보내려는구만' 외에 긍정적인 반응이 나오기 어렵다.
그럼 어떻게 하나: 사용자가 프로모션 코드가 필요한 카테고리를 탐색하거나, 사이트를 한 번 훑어본 뒤에 표시해야 한다. 그것도 사용자가 보기에 적당한 크기로.
4. 사용자가 뭘 하기도 전에 피드백 요구하기: 사용자가 페이지를 방문한 목적을 먼저 수행한 뒤에 피드백을 요청해야 한다. 가령 전화요금을 내러 왔는데, 요금을 결제하기도 전에 '피드백을 환영합니다' 팝업을 띄워봐야 아무 의미가 없다.
그럼 어떻게 하나: 사이트를 방문한 최우선 업무를 수행한 직후에 피드백을 요청하라.
5. 결정적인 업무 수행 중에 피드백 요청하기: 사용자는 피드백을 주려고 사이트에 방문한 게 아니다. 그럼에도 아주 중요한 방문 목적을 수행하는 도중에 피드백을 요청하기도 한다. 가령 항공권을 발권하러 왔는데 갑자기 앱 별점을 요청한다든가.
그럼 어떻게 하나: 당연히 목적을 이룬 뒤에 피드백을 요청해야 한다. 화면 우측이나 푸터에 링크를 두는 등의 방식이 좋다.
6. 여러 개의 팝업을 계속 띄우기: 국내의 경우 중소규모 사이트에서 꽤 자주 보인다. 팝업 세 개가 동시에 뜨기도 한다. 원문 저자는 이걸 '비전문적이고, 처절하고, 정리가 안되어 보인다'고 표현한다. 한 마디로, 구질구질해 보인다.
그럼 어떻게 하나: 만약 반드시 필요한 내용을 담은 팝업을 띄워야겠다면, 꼭 하나만 띄워라. 하지만 그것보다는 반드시 필요한 내용이라면 팝업이 아니라 다른 방법을 찾아야 한다. (팝업은 안읽는다)
7. 사용자가 하위도메인이나 외부 사이트로 이동하기 전에 팝업 띄우기: 어떤 기업 사이트는 콘텐트나 어플리케이션 링크를 하위도메인 또는 외부 사이트로 연결해서 표시하기도 한다. 이럴 때 팝업으로 경고를 하면 외부로의 이동을 지나치게 강조하게 된다.
그럼 어떻게 하나: 사이트간의 이동을 최소화하고, 언제나 메인 사이트로 돌아오는 링크를 남겨둬야 한다. 꼭 경고를 해야 한다면 툴팁 같은 걸 써서 완곡하게 표현하라.
8. 모달 레이어로 콘텐트 접속을 방해하기: 뉴스 등을 읽기 위해 페이지 이동을 했는데, 콘텐트가 화면에 로딩된 직후에 모달 레이어가 뜨면 사용자의 신뢰를 잃게 된다. CNN 사용자 한 명은 "의심을 유발한다"고 표현했다.
그럼 어떻게 하나: 기사읽기를 방해하지 말고 화면 상단에 띠배너 형태 정도로 노출하라.
9. 공지를 모달 레이어로 하기: 중요한 공지사항은 모달 레이어에 담으면 안된다. 사용자는 이미 모달 레이어에는 좋은 정보가 없다고 짐작한다.
그럼 어떻게 하나: 화면 상하단을 활용하고, 모달 레이어를 쓰지 마라.
10. 적절한 혜택 공지 없이 채널 전환을 유도하기: 모바일 웹사이트에서 모바일 앱으로의 전환을 모달 레이어로 하는 경우가 많다. 이해는 하지만, 모달 레이어는 이럴 때 적절한 방법이 아니다.
그럼 어떻게 하나: 전통적인 배너를 사용해서 모바일 앱을 썼을 때의 장점을 묘사하라.
결론:
그럼 대체 팝업은 언제 써도 되는 건가? 답은: 최대한 쓰지마라. 군중심리를 따라 단기간 지표를 위해 사용자를 방해하지 말라. 필수불가결한 정보만, 반드시 적절한 때에 담아서 쓰라.
'웹과 모바일' 카테고리의 다른 글
| 개발자를 위한 디자인 팁 5가지 (0) | 2019.11.04 |
|---|---|
| 싱글 토글 버튼의 어려움 (0) | 2019.11.01 |
| Less, but better (0) | 2019.10.26 |
| 햄버거 메뉴와 소세지 링크의 장단점 (0) | 2019.10.24 |
| 디자인 트렌드를 따라야 할까? (0) | 2018.02.27 |
