글 작성자: 디자이너 백

팝업은 즉각적으로 사용자의 주의를 끌 수 있는 수단이다.
남용하게 되면 사용자의 불편함은 물론이고 신뢰를 잃을 수 있기 때문에 신중하게 사용해야한다. 실제로 팝업 시점을 어설프게 쓰거나 나쁜 의도가 보인다면 이탈률이 증가하게 되고, 서비스의 부정적인 이미지로 낙인찍히게 된다. 사용자가 반드시 알아야 할 정보가 있거나 중요한 선택의 순간이 아니라면 팝업을 지양해야한다. 

 

팝업은 언제 써야되나

  • 중요한 내용이나 공지사항이 있는 경우
  • 사용자의 금전적 손해를 입을 수 있는 경우 
  • 명시적 동의가 필요한 경우 
  • 중요한 기능이나 업데이트 안내 

 

팝업은 언제 쓰지 말아야되나

  • 광고를 과도하게 노출하는 경우 
  • 너무 잦은 확인을 받으려고 하는 경우
  • 팝업 내용이 글쓴이(서비스오너)의 입장이 중심인 경우
  • 최초 접속시 모달, 팝업, 토스트팝업이 연쇄적으로 나오는 경우

 

팝업 내의 버튼 수 

  • 확인을 위한 버튼은 1개 
    • 확인: 간접적 동의를 내포. 부정적인 정보가 희석이 됨 -> 부정적인 팝업에 사용하기 좋음 
    • 닫기: 중립적인 내용에 알맞음
  • 결정을 하기위한 버튼은 2개 이상

 

헷갈리는 팝업 UX 

  • X  아이콘 버튼과 닫기 버튼을 함께 사용할 필욘 없음
    • 버튼/텍스트와 시각적 위계가 다른 아이콘이 좁은 팝업에 추가될 때 단순히 텍스트가 길어지는 것은 다른 혼란스러움이 생김
  • 제목과 본문이 중복되는 경우
    • 사용자 입장에서는 팝업이 무겁고 번거롭게 느껴짐
    • 본문을 없애고 제목에 표현해주고 아이콘을 간결하게 써야함
  • 제목과 버튼 텍스트가 성격이 같아야 함
    • 제목: 스트립을 공간을 비우시겠습니까? / 버튼: 예, 아니오 (X)
    • 제목: 선택한 스트립을 삭제하시겠습니까? / 버튼: 취소, 삭제 (O)
  • 팝업 안에 스크롤은 없어야 함 
    • 팝업은 필수적인 정보와 필요 버튼만 나열할 뿐 부가적인 양의 콘텐츠를 제공하지 말아야 함
    • 이상적인 텍스트는 1 ~2문장으로 끝내는 것이 좋음
    • 2가지 이상의 행동을 요구하지 말아야함
  • 팝업을 중첩해서 쓰지 말아야 함
    • 팝업을 중첩하면 UX가 매끄럽지 못하게 됨
  • PC사용자라면, 팝업 콘텐츠를 빠르게 응답할 수 있도록 변경해야 함 
    • 팝업을 키보드 ESC 를 눌러도 종료가 되어야 함
    • 익숙한 ESC버튼을 눌러 이전의 페이지로 돌아가고 싶어하기 때문
  • 사이즈가 너무 크면 안됨
    • 사용자들의 시선이 위치한 곳에 팝업을 띄워야 함
    • 메인 페이지와 시각적으로 확실하게 구분되게 만들어야 함
  • 팝업 닫기 버튼이 확실하게 잘 보여야 함
    • 닫기 버튼이나 X버튼을 잘 보이도록 함
    • 아래쪽 닫기 버튼이나 취소 버튼이 잘 보이도록 함
    • 팝업 밖을 선택하면 팝업이 닫히도록 함 (모바일)