[UI자료] 모달과 논모달: 사용할 때와 사용하지 말아야 할 때

"https://www.nngroup.com/articles/modal-nonmodal-dialog/"를 번역한 글입니다

---

요약

모달 대화 상자는 사용자를 방해하고 액션을 요구합니다. 중요한 정보에 집중해야 할 때 적절합니다.

 

모달과 논모달 차이점을 더 잘 이해하기 위해 "대화 상자(dialog)"와 "모달(modal)"이라는 용어의 의미를 살펴보겠습니다. 대화 상자(dialog)는 두 사람 간의 대화를 말합니다. UI에서 대화 상자는 시스템과 사용자 간의 "대화"이며, 종종 사용자에게 정보나 작업을 요청합니다.

모드는 동일한 시스템에 약간 다른 사용자 인터페이스가 있는 특수한 상태입니다. 각 모드에는 다른 명령이 있을 수 있으며 동일한 명령(또는 작업)이 시스템 모드에 따라 다른 결과를 생성할 수 있습니다. 즉, 다른 모드에서 동일한 입력이 다른 결과를 가집니다. 예를 들어 Caps Lock이 켜져 있는 컴퓨터는 특수 모드에 있습니다. 입력되는 모든 문자는 대문자로 표시됩니다. Caps Lock이 켜져 있을 때와 꺼져 있을 때 문자를 입력하면 효과가 다릅니다. 또는 Microsoft Word의 변경 내용 추적 모드에서는 이전에 편집한 내용과 설명이 모두 표시됩니다(일반 기본 모드에서는 추적되거나 표시되지 않음).

"모드"와 "대화 상자"에 대한 이해를 통해 모달 대화 상자를 쉽게 정의할 수 있습니다.

 

정의

모달 대화 상자는 기본 콘텐츠 위에 표시되고 시스템을 사용자 상호 작용이 필요한 특수 모드로 이동하는 대화 상자입니다. 이 대화 상자는 사용자가 모달 대화 상자와 명시적으로 상호 작용할 때까지 기본 콘텐츠를 비활성화합니다.

 

모달 대화는 내 고양이 엠마와 같습니다. 고양이는 매일 아침 7시에 야옹 소리를 내서 먹이를 달라고 합니다. 나는 잠을 자거나 하루를 준비하려고 할 수 있지만 고양이는 내 앞에 자리 잡고 내가 그녀를 볼 때까지 더 크고 끊임없이 야옹 할 것입니다. 내 일을 끝내고 싶다면 즉시 고양이에게 말을 걸기 위해 하던 일을 중단해야 합니다. 때때로 그녀는 우리가 자고 있는 동안 새벽 3시에 이것을 하기로 선택합니다. 숙박하는 손님이 있으면 짜증나고 당황스러울 수 있습니다. (고양이를 보호하기 위해 먹이를 주면 매우 침착하고 다정하고 사교적인 기질을 가지고 있습니다.)

 

대조적으로, 논모달(또는 모덜리스) 대화 상자는 주요 콘텐츠를 가리거나 사용할 수 없게 만들지 않습니다.  사용자는 대화 상자가 열려 있는 동안 계속해서 기본 콘텐츠를 이용할 수 있죠(창 이동, 최소화 등). 고양이 비유를 계속하자면, 논모달 대화는 식사 중에 식탁 근처에 참을성 있게 앉아 음식 찌꺼기가 식탁에서 떨어질 수 있는 기회를 기다리는 고양이와 같습니다. 엠마가 이러고 있을 때 나는 먹고, 대화를 나누고, 큰 방해 없이 저녁을 즐길 수 있다. 나는 그녀를 완전히 무시하거나 남편이 좋아하는 것처럼 식사가 끝날 때쯤 테이블 아래에 있는 그녀에게 음식을 살짝 건네주도록 선택할 수 있습니다.

모달 대화 상자는 원래 즉각적인 조치가 필요한 오류 같은 것을 경고하기 위한 것이었습니다. 사용자를 중단시키는 것이 필수적이었죠. 따라서 대화 상자를 화면 중앙에 인터페이스의 초점으로 배치하여 매우 효과적이었습니다. 이러한 모달 대화 상자의 가장 큰 장점은 사용자의 관심을 끌고 문제를 인식하고 신속하게 수정할 수 있다는 것입니다. 그러나 발전하여 이제 합법적이거나 덜 합법적인 이유로 사용자의 관심을 끌기 위해 모달 대화 상자가 더 설득력 있게 사용됩니다.

 

모달 대화 상자의 단점

아래는 모달로 인해 발생하는 몇 가지 일반적인 문제입니다. 이러한 단점 때문에 중요하지 않은 활동에 사용될 때 문제가 됩니다.

 

즉각적인 주의가 필요합니다. 모달 창은 본질적으로 필수이며 사용자가 즉시 조치를 취해야 합니다. 대화 상자는 시스템을 다른 모드로 설정하므로 사용자는 대화 상자를 승인할 때까지 작업을 계속할 수 없습니다.

 

그들은 사용자가 무엇을 하고 있었는지 잊게 만듭니다. 모달 대화 상자는 사용자가 하던 작업에서 멀어지게 합니다. 중단은 사용자가 대화를 해결해야 할 뿐만 아니라 원래 작업으로 돌아가면 하던 일을 기억하는 데 노력해야 하기 때문에 시간과 노력의 손실로 이어집니다. 컨텍스트가 다른 작업으로 전환되면 모달 대화에 의해 부과되는 추가적인 인지 부하로 인해 사람들이 원래 작업과 관련된 세부 사항 중 일부를 잊어버릴 수 있습니다. 이 경우 원래 작업에 대한 컨텍스트를 복구하는 것이 훨씬 더 어려울 수 있습니다.

 

그들은 사용자가 대화를 닫는 추가 목표를 만들고 해결하도록 합니다. 대화가 표시되면 사용자에게 뎁스가 추가됩니다. 대화를 읽고 이해한 다음 결정을 내리는 것입니다. 대화가 정당화되고 실제로 중요한 정보가 포함되어 있지 않다면 사용자의 전환율을 낮출 수 있습니다. 이 점에 대해서는 나중에 더 자세히 설명하겠습니다.

 

그들은 백그라운드에서 콘텐츠를 차단합니다. 현재 창 위에 대화 상자가 나타나면 중요한 내용을 가리고 컨텍스트를 제거할 수 있습니다. 그 결과, 대화가 막 가려진 정보와 관련된 질문을 할 때 대화에 응답하기가 더 어려워질 수 있습니다.

 

모달 대화 상자 사용 지침

언제 모달 대화 상자를 사용하는 것이 적절합니까? 다음은 모달 대화 상자가 정말로 필요한지 결정하는 데 도움이 되는 몇 가지 지침입니다.

 

1. 중요한 오류를 방지하거나 수정하는 방법으로 중요한 경고에 대해 모달 대화 상자를 사용합니다.

사용자의 작업이 손실되거나 작업이 파괴적이고 되돌릴 수 없는 결과를 초래할 수 있는 기회가 있을 때마다 재해를 피하기 위해 사용자를 방해합니다. 모달 대화 상자를 보증할 만큼 심각한 오류를 확인하려면 다음을 고려하십시오.

 

사용자의 주의가 작업에서 멀어지면 문제를 수정하는 것이 더 쉬울까요 아니면 더 어려울까요?

가능하면 사람의 실수가 발생하기 전에 방지하는 것이 항상 좋습니다 . 그러나 일단 오류가 발생하면 모달 대화 상자가 아닌 기본 콘텐츠 내에 오류 메시지가 표시되면 오류를 수정하는 것이 더 쉬울 수 있습니다. 예를 들어, 양식의 오류는 사용자가 문제를 해결하는 동안 오류 메시지를 참조할 수 있도록 페이지에서 발생한 위치 옆에 나타내야 합니다. 그러나 사용자에게 컴퓨터가 10초 후에 다시 시작될 것임을 알리는 것은 사용자가 메시지를 인지할 수 있도록 모달 대화 상자에 표시될 수 있습니다.

 

오류는 되돌릴 수 없습니까?

되돌릴 수 없는 오류로 인해 정보가 손실되는 경우가 많으며, 이는 복잡하고 시간이 많이 소요되는 작업에 특히 피해를 줄 수 있습니다. 예를 들어, 장바구니에 항목을 추가하지 못하는 것은 전자 상거래 비즈니스에 불행한 오류일 수 있지만 사용자가 미묘한 알림을 알지 못한다면 되돌릴 수 없습니다(항목을 원할 경우 작업을 다시 실행할 수 있음). 반면에 파일을 덮어쓰거나 수백 개의 슬라이드에 변경 사항을 저장하지 못하는 것은 모두 되돌릴 수 없는 작업이므로 중단이 절실히 필요하고 이 경우 환영받는 경우가 많습니다.

 

Microsoft Powerpoint는 모달 대화 상자를 사용하여 되돌릴 수 없는 오류나 작업을 저장하지 않고 응용 프로그램을 종료하는 것과 같은 의도하지 않은 사용자 작업을 방지합니다.

 

Google Mail 데스크톱 앱: 이 모달 대화상자는 사용자가 메시지에 "첨부했습니다" 또는 "첨부된 내용을 참조하십시오"와 같은 핵심 문구를 포함시킨 후 파일을 첨부하는 것을 잊었을 때 나타납니다. 이 대화 상자는 사용자 오류(및 어색한 후속 이메일)를 방지합니다.

 

2. 모달 대화 상자를 사용하여 사용자에게 현재 프로세스를 계속하는 데 중요한 정보를 입력하도록 요청합니다.

누락된 정보로 인해 시스템이 사용자 시작 프로세스를 계속할 수 없는 경우 모달 대화 상자에서 해당 정보를 입력하라는 메시지를 표시할 수 있습니다. 아래는 사용자가 즐겨찾기 목록에 항목을 저장하려고 할 때 로그인 정보에 대해 사용자를 방해하기 위해 모달 창을 사용합니다.

 

Etsy는 사용자가 계속하기 전에 추가 단계가 필요한 작업을 시도할 때마다 모달 대화 상자를 사용합니다. 예를 들어, 사용자가 항목을 "즐겨찾기"로 표시하려고 하고 사용자가 로그인하지 않은 경우 원하는 작업을 수행하는 데 필요한 정보를 얻기 위해 대화 상자가 나타납니다.

 

3. 모달 대화 상자를 사용하여 복잡한 워크플로를 더 간단한 단계로 분할할 수 있습니다.

빠른 것이 항상 더 좋은 것은 아닙니다. 시간이 많이 걸리거나, 혹은 정신(혹은 감정)적인 작업은 한 번에 많은 정보를 요청하는 게 더 부담스러울 수 있습니다. 이러한 상황에서 모달 대화 상자를 사용하여 복잡한 정보를 더 간단하고 소화하기 쉬운 양으로 나눌 수 있습니다. 그러나 여러 단계가 있는 모달은 주요 작업에서 멀어지는 시간을 연장시켜 사용자가 처음에 하던 일을 잊어버릴 가능성이 더 높다는 점에 유의하는 것이 중요합니다. 따라서 순차적인 모달을 수행해야 하는 경우 사용자에게 진행 상황을 알려주어서 즉시 포기하지 않도록 합니다.

 

4. 모달 대화 상자를 사용하여 정보가 제공될 때 사용자의 작업이나 노력을 크게 줄일 수 있는 정보를 요청합니다.

모달은 요청되거나 제시되는 정보가 관련이 있을 때 효과적으로 작동하거나 현재 작업의 완료를 간소화할 수 있습니다.부동산 웹사이트인  Zillow.com의 경우 사용자는 계정이나 부동산 중개인 없이도 부동산 목록을 검색할 수 있습니다. 그러나 목록을 위해 에이전트에게 연락을 시도하면 사이트에 이미 에이전트가 있는지 묻는 모달 대화 상자가 표시됩니다. 이 정보는 즉각적인 다음 단계(리스팅 에이전트에 연락)에는 중요하지 않지만 향후 상호 작용을 간소화하는 데 여전히 유용할 수 있습니다. 대화 상자는 점진적 프로파일링을 하고 한 번에 하나의 대답하기 쉬운 질문을 제공합니다.

 

Zillow.com은 사용자가 특정 목록에 대한 문의를 제출한 후 추가 정보를 요청합니다. 사용자에게 부동산 중개인이 있는지 묻는 것이 합리적입니다.가리키다,미래에 다른 에이전트와 중복 대화의 가능성을 줄이기 때문입니다.

 

점진적 프로파일링의 핵심은 사용자의 기대하는 플로우를 제공하는 것입니다. 중단은 현재 작업과 관련이 있거나 도움이 될 때만 도움이 됩니다.

 

5. 현재 사용자 흐름과 관련이 없는 필수 정보가 아닌 경우 모달 대화 상자를 사용하지 마십시오.

위에서 논의한 바와 같이 모달 대화 상자는 사용자에게 많은 단점과 비용이 있습니다. 이러한 비용이 정당화되기 위해서는 작업과의 관련성과 중요성이 높아야 합니다. 사용자의 목표와 직접적인 관련이 없는 모달 대화는 성가신 것으로 인식되어 회사에 대한 신뢰를 떨어뜨릴 수 있습니다 .

또한, 모달 대화 상자와 같이 중요하지 않은 정보가 우선 순위가 높은 형식으로 표시되면 사용자는 이 형식의 추가 인스턴스에 주의를 기울이기를 거부합니다. 이것은 "양치기 소년"과 같습니다. 다른 사람들을 계속해서 오도하는 것은 당신이 정말로 필요할 때 신뢰를 주지 못하게 만들 것입니다. 일반적인 믿음과는 달리 메일링 리스트 가입은 비즈니스 리드를 생성하는 데 중요하지만 사용자에게는 중요하지 않습니다. 최근 웹 사용성 연구에서 우리는 이메일 뉴스레터 가입과 관련된 모달 대화에 대한 본능적인 경멸을 들었습니다.

 

GoodHousekeeping.com은 모달 메일링 리스트 대화상자로 한 걸음 더 나아갑니다. 배경이 비활성화될 뿐만 아니라 전체 화면 사진으로 대체되어 사용자가 웹사이트에서 어디에 있는지에 대한 모든 컨텍스트가 제거됩니다. 또한 사용자가 사이트 홈페이지에 처음 방문한 후 처음 3초 이내에 나타나므로 사용자가 해당 페이지에서 가치를 얻을 시간이 없습니다. 대화는 사용자나 사용자의 작업 흐름에 필수적이지 않은 정보를 요구하며 컨텍스트나 인지된 가치를 거의 제공하지 않습니다 .

 

맨 위: Wayfair는 모달 대화 상자를 사용하여 사용자에게 이 항목을 고정해야 하는 보드를 지정하도록 요청합니다. 다른 UI 요소(예: 기본 콘텐츠 내의 옵션)는 이 정보를 입력하는 데 더 적합합니다. 하단: 보드가 선택된 후 Wayfair는 모달 대화 상자를 사용하여 사용자에게 친구를 보드에 초대하도록 요청합니다. 이 작업은 사용자에게 필수적이지 않으며 항목 고정의 상호 작용 비용을 증가시킵니다.

 

6. 결제 흐름과 같은 고부담 프로세스를 방해하는 모달 대화를 피하십시오.

체크아웃은 사용자와 기업 모두에게 큰 부담이 되는 프로세스입니다. 사용자는 프로세스가 원활하고 안전하며 오류가 없는지 확인하기를 원하고 기업은 사용자가 구매 결정을 따르도록 하기를 원합니다. 모달 대화 상자는 부당한 경우 기껏해야 사용자의 주의를 산만하게 하고 최악의 경우 사용자 신뢰를 약화시킬 수 있습니다.

Walmart.com의 이전 버전에서는 모달 대화 상자를 사용하여 사용자에게 체크아웃 중에 로그인하라는 메시지를 표시했습니다. 기껏해야 이 모달은 사용자의 주의를 산만하게 하고 단순히 손님으로 결제를 완료하는 대신 Walmart.com 비밀번호를 찾기 위한 본격적인 탐구에 착수할 수 있습니다. 최악의 경우 사용자는 계정을 만들어야 한다는 압박감을 느낄 수 있으며, 그것만으로도 구매 결정에 영향을 미칠 수 있습니다. 이후 Walmart는 이 모달 대화 상자를 제거하기 위해 웹사이트를 재설계했습니다(그러나 재설계로 인해 게스트 체크아웃도 완전히 제거되었으며 이제 사용자에게 체크아웃용 계정이 있어야 합니다 . 솔직히 말해서 불쾌한 일입니다).

 

Walmart의 모달 대화는 관련이 있지만 중요한 작업은 아닌 위험한 토끼 구멍이 될 가능성이 있습니다.

 

7. 모달에서 사용할 수 없는 추가 정보 소스가 필요한 복잡한 의사 결정을 위한 모달 대화를 피하십시오.

모달 대화 상자는 사용자와의 짧고 직접적인 대화에 사용해야 합니다. 모달에서 사용자가 복잡한 조사를 수행하거나 추가 정보 소스를 참조해야 하는 경우(모달에 의해 차단될 수 있음) 해당 상호 작용에 적합한 UI 요소가 아닙니다.

 

Frontier Airlines는 모달 대화를 사용하여 기본 항공편의 상향 판매를 촉진합니다. 이 대화 상자는 사용자가 더 많은 비용을 지출하기로 결정하도록 요구하지만 해당 결정을 내리는 데 필요한 추가 정보에 액세스하는 것을 허용하지 않습니다(예: 적절한 자리가 남아 있는 경우).

 

대신 논모달 대화 상자를 고려하십시오.

작업이 중요하지 않은 상황에서는 논모달이 적절할 수 있습니다. 논모달 대화 상자는 사용자가 활동을 계속하고 관련이 없는 경우 무시할 수 있기 때문에 모달 대화 상자보다 덜 공격적입니다. 그러나 특히 화면에서 중요한 정보를 가리거나 너무 복잡한 상호 작용이 필요할 때엔 여전히 방해가 될 수 있습니다. 또한, 일부 논모달 대화 상자는 장치와 브라우저에서 잘 번역되지 않습니다. 예를 들어, 아래 Meowbox.com과 같이 데스크톱의 비모달 창이 iPhone에서는 모달 창이 될 수 있습니다.

 

Meowbox.com 데스크탑 사이트(왼쪽)에서 뉴스레터 가입을 위한 시간 제한이 없는 대화 상자가 홈페이지 오른쪽 하단에 나타납니다. 그러나 사이트의 모바일 렌더링(오른쪽)에서는 비모달 창이 전체 화면 모달 창이 되어 사용자가 앞으로 이동하기 전에 입력을 제공해야 합니다. 데스크톱 버전에서는 프롬프트를 쉽게 해제할 수 있지만 모바일 버전에서는 그렇지 않습니다.

 

논모달은 사용자가 특정 정보에 액세스하기 위해 모드 간에 빠르게 전환해야 할 때 유용합니다. 예를 들어 Google Mail은 새 이메일 메시지를 작성하기 위한 기본 방법으로 논모달 창을 사용합니다. 사용자는 이 창을 연 상태에서 계속 작업하고 작성된 이메일을 잃지 않고 최소화할 수 있습니다. 또, 예전 이메일이나 현재 이메일을 작성하는 데 도움이 될 수 있는 추가 정보를 찾을 수 있습니다.

 

Google Mail의 비모달 창을 사용하면 정보 쓰기와 읽기 사이를 쉽게 전환할 수 있습니다.

 

결론

모달 및 비모달 대화 상자는 모두 유용하며 사용자 참여를 요청합니다. 이러한 두 가지 유형의 대화 상자 중에서 결정할 때 사용자 관점에서의 흐름과 맥락을 고려해야 합니다. 불필요하게 사용자를 방해하지 말라는 뜻이죠. 기업이 비즈니스 목표를 향해 지속 가능한 발전을 하고자 한다면 디자인 과정에서 사용자 목표를 우선시해야 합니다.

 

잊지 마세요. 아무도 방해받는 것을 좋아하지 않습니다. 하지만, 반드시 방해해야 한다면, 그 비용을 들일 만한 가치가 있는지 확인하세요.