17. 팝업의 10가지 문제적 트렌드와 대체방안들
[3. 툴팁, 다이어로그, 학습을 위한 오버레이]
사용자 리서치의 수십 년 동안의 안내로 인해 우리는 사람들이 팝업이나 모달을 좋아하지 않다는 것을 알고 있다. 나는 최근 사용성 연구를 통해 이 사실이 다시 한번 생각났다. 작업을 완료하려고 시도하는 동안 팝업이 뜰 때마다 계속해서 테이블 너머로 휴대전화를 던졌다. 답답한 마음이 든 사용자는 그자 작업해야 하는 태스크를 버려두고 웹사이트를 매우 안 좋은 인상을 갖고 떠나버렸다. 몇몇의 다른 유저들은 그들의 휴대전화를 내던지지는 않았지만 비슷한 감정을 느꼈다.
팝업 (오버레이 또는 팝오버 형식으로 나타는)은 윈도우 또는 대화상자이고 페이지 콘텐츠 맨 위에 나타난다. 팝업은 2개 차원이 있다.
1. 사용자가 나머지 페이지와 인터렉션 할 수 있는지 없는지
모달 : 사용자는 오버레이 위에 있는 콘텐츠만 인터렉션 할 수 있고 나머지 콘텐츠 페이지는 사용할 수 없다
논모달 : 사용자는 백그라운드 콘텐츠와 인터렉션 할 수 있고 오버레이 된 팝업도 함께 볼 수 있다.
2. 백그라운드가 딤 처리되어 있는지 안되어있는지
딤처리 된 경우 : 딤처리 되어있으면 라이트박스라고 팝업을 부른다
딤처리 안된 경우 : 특별한 이름은 없지만 백그라운드가 딤처리 되어있지는 않다
몇 주동안 나는 내가 보게 되는 웹사이트와 모바일앱의 모든 팝업의 스크린숏을 떴다. 평균적으로 한주에 25개의 팝업을 캡처했다. 이 실험은 나의 사용성 연구 리서치 자료로 활용되어 많은 수의 잘못된 적용 사례들을 발견하였고 너무 많이 오버레이가 과용되는 사례들을 찾게 되었다. 우리는 웹사이트가 이러한 요소를 너무 남용하여 팝업이 유용한 디자인 해결책이 되는 것이 아닌 문제가 되는 사례가 훨씬 많은 지경이 이르렀다. 이 글에서 나는 내가 관찰하고 고려해야 하는 주요한 요소들에 대해 논의하기 위해 이슈들을 정리해 보았다. 팝업 대신 적용 할 수 있는 현실적인 대체 방안들은 서비스를 제공하는 제공자의 의도와 사용자의 경험을 좋게 유지할 수 있다.
팝업 타이밍 : 인터렉션 전 또는 중요한 작업 중에는 팝업을 표시하지 않는다
1. 메인 페이지가 로드되기 전에 팝업을 보여주는 것 : 여러 가지 사용사례에 상관없이 사용자가 웹 사이트나 응용프로그램에서 가치를 얻기 전에는 절대 팝업을 표시하지 말아라. 사용자의 작업이 페이지에 도착하기도 전에 중단되기 때문에 이러한 팝업은 매우 거슬린다. 사람들은 웹사이트에서 콘텐츠가 로드되기도 전에 뜨는 팝업들에 대해서 익숙해졌고 보통 이를 무시하거나 작업으로 돌아가기 위해 가장 빨리 닫는 방법을 즉시 찾는다. 페이지가 로딩되기 전에 뜨는 팝업들은 답답하게 느끼게 하고 사용자들이 미칠 것처럼(frantic이라는 단어를 썼는데... 번역하면서도 이정돈가? 싶다;; 팝업을 로딩되기 전에 만난다고...? 미친다고? 조금 과격한 표현인 느낌) 느끼게 한다. 또한 구굴의 검색엔진결과에도 안 좋은 영향을 미치게 되는데 사용자가 특히 모바일에서 콘텐츠에 액세스 할 수 없게 만드는 사이트의 경우 검색 순위에서 불이익을 주기 때문에 이러한 사실을 인식하지 못한 사이트는 검색 엔진 결과에서 낮은 순위에 나타날 위험이 있다.
대신해야 할 것 : 사용자에게 맥락적으로 관련이 있는 정보가 나타나기 전까지는 팝업을 보여주지 않는다. 상호주의 원칙을 사용해라. 방문자에게 이메일 주소를 요청하든 팝업을 거부하든 무엇이든 묻기 전에 가치를 부여하라. 사용자 테스트를 실행하여 팝업에 어떤 내용을 표시하는 것이 가장 적절한지 방안을 찾아야 한다. 페이지 내용이 로드되기 전에 모든 종류의 팝업을 표시하는 것이 허용되는 경우는 사이트가 쿠키 사용을 수락하거나 나이를 확인해야만 하는(술을 판매하는 사이트 등) 법적의무가 있는 경우가 유일하다.
2. 사용자가 로그인하자마자 팝업을 보여주는 것 : 팝업이 사용자가 로그인하자마자 보이는 것은 페이지 콘텐츠가 로드되기 전에 팝업을 보여주는 것만큼 사용자를 성가시게 만드는 것이다. 사용자가 계정에 로그인했을 때 사용자들은 다음 단계 또는 마음속으로 하려던 작업을 떠올릴 것이다. 그렇지 않다면 왜 로그인까지 하겠는가? 로그인하자마자 팝업을 보여주면 사용자가 작업완료하는 것을 방해하고 지체시킬 것이다. 왜냐면 그들은 다음 스탭에 집중하고 있기 때문에 팝업에 주의를 기울이지 않거나 보자마자 닫아버릴 것이다.
대신해야 할 것 : 사용자에게 시간을 주고 그들이 작업을 완수할 수 있도록 여유를 준 다음에 팝업을 노출시킨다. 사용자 계정에 대한 팁, 가이드, 또는 새로운 기능에 대한 정보를 일정 시간이 지난 다음 보여준다면 수용가능한 팝업 내용이 된다. 어느 정도 시간이 지나면 결국 유용한 계정 팁, 안내 또는 새로운 기능을 제시하는 것은 괜찮지만 제시된 콘텐츠 또는 새로운 기능에 의해 사용자의 작업이 향상되거나 추가로 지원되는 경우에만 팝업으로 보여준다. 이러한 경우에는 덜 거슬리는 툴팁 또는 작은 비모달 오버레이로 보여주어 상호작용 할 수 있도록 하는 것이 좋다
3. 사용자의 이메일 주소를 상호작용 전에 물어보는 것 : 많은 사이트 또는 앱은 사용자의 이메일 주소를 묻는 팝업을 콘텐츠와 상호작용하기 전에 물어보고 있다. 전자상거래서비스, 뉴스웹사이트, 앱 그리고 블로그에서 이런 팝업은 상습적으로 노출됩니다. 이런 접근은 사람들이 이메일 주소를 너무 빨리 물어보는 팝업이 나타나서 짜증을 내는 것뿐 아니라
사람들이 생각하기에 이 사이트는 원치 않은 스팸메일을 앞으로 발송할 것이라고 짐작하기 때문에 문제이다.
예를 들어 한 사용자가 아래 예시처럼 웹사이트에 방문하였는데 비밀 판매에 접근하기 위해서 이메일 주소를 묻는 모달 오버레이를 보게 되었을 때 불만이 생겼다. 이 사용자는 "웹사이트에서 하려던 작업을 시작하기도 전에 이런 것들이 뜨는 것은 정말 짜증 난다. 내가 이제 막 이 사이트에 접속을 하게 되었는데 내가 이메일 구독자가 되고 싶은지 어떻게 알 수 있겠는가? 저는 이 팝업을 사이트를 둘러보고 나서 조금 있다가 받고 싶다."라고 말했다.
대신해야 할 것 : 이메일 팝업을 일찍 띄우는 대신에 언제 사용자가 편안하게 그들의 이메일을 공유하고 싶어 질지 고민해야 한다. 프로모션 코드를 받기 위해서 이메일 제공을 요청할 것인지 또는 모든 블로그 포스트를 읽거나 보고 났을 때 구독 이메일요청을 제공할 것인지 고민해야 한다.
4. 사용자들이 의미 있는 어떤 작업이든 마무리하기 전에 피드백을 물어보는 것 : 당신의 사용자들로부터 피드백을 받는 것은 중요하다 하지만 사람들이 당신의 웹사이트에서 의미 있는 작업을 끝내기도 전에 피드백 창을 자주 보여주는 것은 하면 안 된다. 사이트와 앱은 사용자가 높은 피드백 점수를 주고 작업을 진행하기를 바라는 경향이 있다. 하지만 이런 일은 거의 일어나지 않는다. 사용자를 오히려 팝업을 다시 찾을 의도 없이 빠르게 닫으려고 한다.
경험의 적절한 지점에서 사용자에게 의미 있는 피드백을 얻는 것은 그들의 어려움과 장애물에 대한 통찰력을 제공한다. 그러나 너무 빨리 피드백을 물어보면 가장 중요한 때에 피드백을 받지 못할 위험이 있다. 예를 들어 아래 ATT.com에서 전화 요금을 지불하려 하는 동안 한 연구 참가자는 이제 막 요금납입을 하려는 페이지에 랜딩 하자마자 피드백 팝업을 만나게 되어 답답했다. 그녀는 "글쎄... 나는 요금을 납부하고 나서 피드백을 주려고 했다 하지만 나는 아무것도 하지 않은 상태에서 피드백을 달라는 팝업을 보게 되고 황당했다"말했다
대신해야 할 것 : 사용자가 당신의 사이트에서 중요한 작업을 완료했을 때 즉시 피드백을 물어봐라. 이런 접근은 방해를 최소화하고 피드백이 실제 상호작용 경험에 바탕한 것임을 분명히 한다. 예를 들어 블루진이라는 비디오 컨퍼런싱 소프트웨어에서는 사용자에게 미팅이 끝났을 때 피드백을 바로 물어본다. 이런 요청은 너무 이른 시점에 묻는 것도 아니고 맥락적으로 연관성이 있고 적절한 시점에 묻는 것이다.
5. 중요한 작업을 하는 중간에 끼어들어 사용자에게 피드백을 묻는 것 : 사용자는 방해받는 것을 싫어한다. 사용자가 중요한 작업을 완수하려는 도중에 피드백 팝업이 뜨는 예는 많다. 대부분 피드백을 주는 것은 사용자가 방문하는 이유의 가장 높은 우선순위가 아닐 것이다. 그렇기 때문에 사용자가 중요작업을 할 때 중간에 팝업을 띄우지 말아야 한다.
대신해야 할 것 : 중요한 작업이 완료된 후에만 사용자에게 피드백을 제공하도록 요청하는 것 외에도 사용자가 언제든지 피드백을 제공할 수 있는 정적이고 방해되지 않는 수단을 제공해야 한다. 스크린의 옆 사이드 탭, 푸터에 링크로 또는 내비게이션 안에 링크로 피드백을 전달할 수 있도록 만들어두면 사용자가 피드백을 공유하고 싶은 때가 되었을 때 공유할 수 있게 된다.
6. 여러 개의 팝업을 연속해서 보여주는 것 : 여러 개의 팝업을 연속해서 보여주는 것은 당신의 웹사이트가 프로페셔널해 보이지 않고 답답해 보이고 정리되어 보이지 않게 된다. 사용자들 당황하게 만들 뿐만 아니라 한 개씩 창을 닫도록 추가적인 노력을 요구해야 한다. 만약 당신의 사이트가 다른 종류의 다양한 팝업을 사용한다면 팝업이 적용된 상태를 테스트를 통해 사용자가 한 번에 여러 개의 팝업을 보게 되는지 꼭 검증해야 한다.
대신해야 할 것 : 만약 당신이 치명적인 정보를 반드시 팝업으로 보여줘야 한다면 한 번에 한 개만 보여주는 것으로 확실하게 디자인해야 한다. 치명적인 정보를 팝업에 보여주지 않는 것이 훨씬 나은 방법이다 사람들은 읽기도 전에 팝업을 꺼버리는 경향이 있기 때문이다. 대신, 페이지에 시각적으로 눈에 띄는 요소와 위치에 문맥적으로 가장 걸맞은 메시지를 직접적으로 보여주어라. 적히는 문구는 분명하게 사용자가 이슈를 바로 잡을 수 있고 다음단계로 갈 수 있는 분명하고 정확한 문구로 적혀야 한다.
팝업의 맥락 : 화면이 전환되거나 콘텐츠에 접근하는 것을 방해하지 말아라
7. 사용자가 새로운 하위 메뉴 또는 사이트를 벗어나려고 할 때 모달뷰를 보여주는 것 : 몇몇의 기업 웹사이트들에는 콘텐츠 또는 앱으로 접근하는데 하위 메뉴 또는 외부 사이트로 링크가 연결되어 있다. 사용자가 메인 사이트를 떠나기 전에 모달 오버레이 팝업을 보여주고 사이트를 떠나는 트랜지션에 대해서 알려주는 것은 문제가 있는 팝업 타입이다. 너무 과하게 트랜지션을 강조하게 되어서 사용자가 오히려 헷갈릴 수 있기 때문이고 특히 단순히 새로운 탭을 열려고 한 것인데도 이런 팝업이 뜨면 왜 이런 팝업이 뜨는지 이해하기 어렵기 때문이다.
우리의 사용성 테스트 중 한 개의 세션에서 HSBC의 일자리를 찾아보는 참가자 한 명이 3개의 다른 사이트를 번갈아가며 사용해야만 했을 때 두 개의 다른 전환 모달을 접하게 되었다. 그는 "와우 이 사이트는 나를 계속 다른 사이트로 이동시킨다. 나는 내가 지금 어디 있는지 더 이상 모르겠다. 만약 그들의 직무지원 절차가 이처럼 복잡하고 분절되어 있었다면 나는 솔직히 내가 좋은 곳에서 일할 수 있을 것이라고 생각하지 않는다. 이런 경험은 아무리 사이트 디자인이 좋아 보여도 너무 정신없다. "말했다.
대신해야 할 것 : 모달을 삭제하고 사이트 간의 트렌지션을 최소화하고 외부 링크와 연결되어 있는 사용자의 경우 항상 메인 사이트로 돌아올 수 있도록 유지시켜라. 만약 당신의 사용자가 당신의 사이트를 떠날 때 경고를 받아야만 한다면 툴팁같이 덜 개입하는 방식으로 트랜지션이 살짝 일어나는 것으로 디자인한다.
8. 모달오버레이를 통해 콘텐츠에 접근하도록 방해하는 것 : 모달 대화상자가 사람들이 아티클 또는 긴 콘텐츠 (어바웃어스 또는 뉴스 섹션)을 로드 하자마자 나타나는 것은 이 사이트가 콘텐츠에 접근하는 것에 조건이 있는 것처럼 보이게 한다. 이러한 대화상자는 신뢰를 잃어버리게 하기 때문에 잘못된 곳에 위치한 것이다. 한 사용자가 CNN 모바일 앱에서 사용자가 뉴스레터 모달오버레이 화면이 아티클이 로드되자마자 계속 보게 되니 점점 답답함을 느끼게 되었다. 그는 '이렇게 로드가 되자마자 모달오버레이가 계속 뜨니 CNN 뉴스레터 서비스에 대한 의심이 최고에 이르렀다. 나에게 이메일 또는 가입에 대해서 아티클이 뜨자마자 바로 물어보지 말아라.'라고 말했다.
대신해야 할 것 : 사용자가 방해 없이 콘텐츠 내용을 바로 확인할 수 있도록 허용하라. 페이지 제일 위쪽에 얇고 닫기 쉬운 배너 형태로 모달오버레이를 대체해라. 이런 팝업을 대체할 수 있는 대안들은 사용자가 뉴스레터를 구독 하고 싶을 때 사용자가 그들의 주요 작업의 정보를 소화하는 것을 방해받지 않고 스스로 알아서 할수 있게 된다.
팝업 컨텐츠 : 모달오버레이가 메세지를 전달 할 수 있을 것이라고 가정하지 말아라
9.GDPR과 쿠키에 관련된 안내 모달 오버레이 사용 : 사용자는 이미 서둘러서 그들에게 아무런 유익이 없을 것이라고 가정해버리고 모달 오버레이를 닫아버린다. GDPR 또는 쿠기수집정보등의 중요한 정보를 전달하기 위해서는 오버레이를 사용하지 않는다.
대신 해야 할 것 : 친절한 모달이 아닌 오버레이는 페이지 바닥 또는 옆에서 나타나는 오버레이이다. 이런 형태는 개입을 최소화하고 사용자가 그들이 하려는 작업을 이어서 할 수 있도록 허용한다. 사용자의 개인 데이터가 수집되고 사용되는 것에 대한 충분한 정보를 주도록 확실하게 한다.
10.분명한 이점에 대한 내용 없이 모달오버레이로 접속하고 있는 채널을 변경하도록 독려하는것 : 모바일웹사이트에 접속했을때 모바일 앱에서 접속하도록 독려하는 모달오버레이를 띄우는 것은 평소에 자주 우리가 보게되는 것인데 특히 이커머스나 뉴스레터 웹사이트에서 많이 볼 수 있다. 이런 오버레이는 많은 상황에서 방해가되고 문제가 된다. 웹 사용자는 한번만 써보려고 접속한 사용자이기 때문에 앱까지 다운받을 의향이 없는 경우가 대부분이기 때문이다.
서비스 제공자 입장에서는 앱을 다운로드 하도록 독려하는 것이 당연하겠지만 모달 오버레이는 당신의 앱다운로드를 위한 광고효과로써는 올바른 접근이 아니다. 심지어 사용자가 당신의 앱을 이미 갖고 있을 경우 채널을 이동해서 다시 처음부터 작업을 다시 실행해야한다면 더 번거롭게 만들 뿐이다. 모달 오버레이는 귀찮게 만들 뿐이다.
대신 해야할 것 : 사용자의 현재 작업을 방해하지 않으면서 당신의 모바일에 대한 인식을 만들어라. 탑배너에 앱다운로드 내용을 안내하고 앱을 사용하면 어떠한 이점이 있는지 사용자에게 안내를 해라.
결론
팝업 팝업은 계속 나타난다. 사용자 경험측면에서 허용되지 않을 경우 팝업을 그만 사용해라.
전체적인 결론은 당신은 아마 허용이 되는 팝업을 사용하는 것이 무엇인지 궁금해 할 것인데 이에 대한 대답은 sparingly 절약해서 (남용하지 말라는 표현의로 해석된다) 다른 사이트들에서 많이 사용하고 있다고해서 팝업을 그냥 적용하려는 충동을 억제하여 사용자를 방해지 말아라. 사용자의 요구를 존중하고 피드백 수집, 데이터 수집 통지, 이메일 주소 수집 또는 채널 전환을 장려하는 서비스제공자의 의도를 올바로 적용하기 위해서 대안적으로 적용 할 수 있는 접근방안들을 검토한다.
중요한 정보를 전달하기 위한 모드 오버레이의 사용을 적절한 시점에만 적용한다. 중요한 작업을 중단하거나 크고 거슬리는 팝업으로 관련 컨텐츠를 차단하지 않는다. 팝업이 사용자를 답답하게 만들지 않도록 사용성 테스트를 수행하여 전체 사용자 경험을 향상시키는데 도움이 되는 실제 통찰력을 얻을 수 있다.
https://www.nngroup.com/articles/design-pattern-guidelines/#Input%20Controls
