UX) Modal & Nonmodal Dialogs: When (& When Not) to Use Them

이 글을 번역 및 정리한 글입니다. 

모달을 언제 사용해야 하는지에 대한 글

Modal형 Dialog는 사용 흐름에 끼어들어 특정 작업을 요구한다.
따라서 특정 정보로 사용자의 주의를 끌어야 하는 경우 사용하는 것이 적절하다.

Dialog와 Modal

dialog (대화 상자)

dialog는 두 사람 간의 대화를 의미한다. UI에서는 시스템과 사용자 간의 대화로 시스템이 필요한 정보를 사용자에게 입력 받는 등의 상호작용을 dialog라고 할 수 있다.

mode

하나의 시스템에서 약간 다른 형태의 UI를 의미한다. 약간 다른 형태를 예를 들면 Caps lock이 켜져 있는 상태나 MS Word에 Track changes 모드가 켜진 상태가 있다.

Modal Dialog

Modal Dialog는 메인 콘텐츠를 비활성화 시키고 그 위에 표시되어 사용자를 시스템과 상호작용하는 특수한 모드로 시스템을 이동 시키는 대화 상자를 의미한다.

반면에 non-modal dialog는 메인 콘텐츠를 비활성화 시키지 않고도 사용자가 시스템과 상호작용할 수 있는 대화형 UI를 의미한다. 사용자의 사용 흐름을 방해하지 않는다는 특정이 있다.

장점

1. 사용자에게 즉각적으로 사용자 상태를 알리거나 행동을 요구할 수 있다.
2. 주로 화면 중앙에 배치하고 메인 콘텐츠들과의 상호작용을 비활성화하여 사용자의 주의를 쉽게 끌 수 있다.

단점

1. 즉각적인 주의가 필요하다는 것은 장점이 될 수도 있지만 사용자가 dialog 자체를 늦게 인식한다면 현재 작업을 계속 할 수 없는 상태를 만들 수도 있다.
2. 사용자의 작업 흐름을 중단시켜 UX를 저해할 수 있다.
3. 사용자에게 추가적인 작업을 만들어준다. 예를 들어 Dialog를 닫는 행위 등이 추가된다.
4. 메인 콘텐츠가 가려진다. 만약 dialog에서 사용자가 메인 콘텐츠에 있는 내용이 필요하다면 내용이 가려진 점이 불편하게 느껴질 것이다.

Modal Dialog 사용 가이드라인

적절하게 modal dialog를 사용할 수 있는 가이드라인

1. 크리티컬한 오류를 방지하거나 수정해야 하는 경우와 같은 중요한 경고에 사용하라

사용자의 작업이 손실되거나 특정 행동이 돌이킬 수 없는 재앙을 일으킬 경우와 같이 중대한 이슈에 사용을 중단시키는 용도로 modal dialog를 사용해야 한다.

modal dialog를 사용해야 할 만큼 중대한 오류라고 판단하는 기준은 다음과 같다.

• 사용자의 주의가 오류가 발생한 지점에서 멀어져도 괜찮은지?예를 들어 양식 내 오류는 modal dialog가 아니라 그냥
• 휴먼 에러는 발생하기 전에 방지하는 것이 가장 좋지만, 만약 휴먼 에러가 발생한다면 modal dialog로 알리는 것보다는 메인 콘텐츠 위에 그냥 표시해 주는 편이 사용자가 인지하고 수정하기 더 쉽다.
• 오류가 돌이킬 수 있는 것인지
• 돌이킬 수 없는 오류는 입력한 정보가 날아가게 되는 것인데 이는 사용자에게 매우 큰 피해를 준다. 예를 들어 장바구에 항목을 추가하지 못한 오류가 난 것은 불편을 초래하긴 하지만 사용자가 한 번 더 작업을 수행하기만 하면 되고, 뭔가를 잃는 상황은 아니다. 반면에 파일을 덮어쓰거나 변경 사항을 저장하지 않는 오류 등을 돌이킬 수 없는 손실을 유발하므로 modal dialog를 사용해서 사용을 중단하게 해서라도 오류를 막거나 사용자에게 인지를 시켜주는 것이 좋다.

2. 현재 프로세스를 이어서 진행할 수 있도록 사용자에게 필수 정보를 요청해야 할 때 사용하라

특정 프로세스는 사용자가 정보를 필수로 입력해야만 진행할 수 있는데 이 경우에 modal dialog를 사용해서 사용자에게 즉각적으로 정보를 요청할 수 있다.

예를 들어 사용자가 어떤 사이트에서 특정 항목을 자신의 개인화된 즐겨찾기 목록에 추가하고 싶을 경우 로그인이 반드시 필요한데 이를 위해 modal dialog로 로그인 정보를 입력받는다.

3. 복잡한 워크 플로우를 간단한 단계들로 쪼개는데 사용하라

워크플로우 상에서 빠른 것이 항상 좋은 것은 아니다!

시간과 감정을 많이 소모해야 하는 작업의 경우, 한 번에 많은 양의 정보를 요청하는 것은 사용자에게 심리적 부담을 안겨 준다. 따라서 이 경우에는 modal dialog를 사용하여 복잡한 정보와 작업을 간단한 단위로 쪼갤 수 있다.

다만 이는 작업에 소요되는 시간이 증가되고, 작업 진행 중 사용자가 현재의 목적과 방향을 잃거나 피로감을 크게 느낄 수 있다는 단점이 있다. 따라서 여러 단계의 modal을 사용하는 경우, 사용자에게 현재 진행 상황을 알려주어 작업의 방향을 잃지 않고 포기하지 않을 수 있도록 도와줘야 한다.

4. 현재의 작업을 간소화할 수 있는 정보를 요청할 때 사용하라

예를 들어 A 라는 복잡한 작업을 할 때에는 반드시 B의 조건이 만족해야 한다는 가정이 있다면, A를 수행하기 전에 modal dialog를 띄워 사용자에게 B의 조건 충족 여부를 묻는다면 조건을 충족하지 않는 경우 복잡한 A라는 작업을 아예 시작조차 하지 않아도 된다.

이때 핵심은 워크 플로우에 대한 사용자의 기대를 충족해야 된다는 것이다. modal dialog를 띄워 사용자의 프름을 방해하는 것은 오직 현재 작업에 관련이 있는 경우에만 도움이 된다.

5. 현재 워크 플로우과 관련이 있는 비필수 정보에는 modal dialog를 사용하지 마라

앞서 이야기한 바에 의하면 modal dialog는 잘못 사용하면 단점이 더 많을 수 있다. 이 단점을 정당화하려면 modal dialog에서 다루는 정보가 현재 사용자가 수행하는 작업과 아주 긴밀하게 관련이 있거나 중요해야 한다. 사용자의 목표와 직접 관련이 없는 것은 오히려 사용 흐름에 방해가 되어 전체 서비스의 신뢰를 떨어뜨릴 수도 있다.

중요도가 떨어지는 정보를 modal dialog에서 다루는 경우 사용자는 다른 modal dialog들에도 주의를 기울이지 않게 된다. - 마치 양치기 소년처럼 -

6. 결제 작업과 같은 중요한 작업을 방해하는 modal dialog를 사용하지 마라

결제는 사용자와 시스템 모두에게 중요한 프로세스인데 이때 쓸데 없는 modal dialog를 사용하여 산만하다는 느낌을 주면 시스템에 대한 신뢰도가 떨어지게 된다.

7. modal 내에서 찾을 수 없는 추가 정보가 필요한 결정을 내려야 하는 작업은 modal dialog를 사용하지 마라

modal dialog는 사용자와 짧고 직접적인 대화에 사용되어야 한다. modal 외부에서 추가 정보를 찾아야 하는 경우, modal dialog를 적합하지 않다.

Nonmodal Dialog

크리티컬한 작업이 아닌 경우 nonmodal dialoge가 더 적합하다. nonmodal dialog는 사용자가 방해받지 않고 그들이 하던 작업을 계속할 수 있게 하기 때문에 덜 거슬리는 편이다. 하지만, 이것 역시 화면에서 중요한 정보를 제대로 표시하지 않거나 너무 복잡한 상호작용을 요구하는 경우에는 방해가 될 수 있다.

게다가, 어떤 nonmodal dialog들은 디바이스와 브라우저 간에 잘 번역이 되지 않을 수 있다. 예를 들어 데스크탑의 크롭에서 nonmodal dialog였던 것이 아이폰 사파리에서는 modal이 되는 경우가 있다.

사용자가 특정 정보에 접근하기 위해 UI 모드를 빠르게 전환해야 할 때 nonmodal dialog는 유용하다. 예를 들어, 구글 이메일은 새 메일을 작성할 때 nonmodal 창을 기본 모드로 사용한다. 사용자들은 새 창을 열어둔 채로 이 작업을 계속할 수 있고, 그것을 유지한 채로 창을 축소 또는 확장할 수 있다. 이렇게 뷰를 분리하여 사용자들이 현재 작성 중인 메일에 필요한 정보들을 이전의 메일이나 다른 곳에서 얻을 수 있다.

결론

modal과 nonmodal dialog는 사용자의 참여를 요청할 때 도움이 된다. 두 가지 종류의 dialog 중 결정을 해야 할 때, 사용 맥락과 작업 흐름을 고려해라. 불필요하게 사용자를 방해하거나 작업 흐름에 끼어드는 것은 피하고 사용자들이 더 쉽게 사용 목적에 도달할 수 있도록 해야 한다.

modal dialog를 사용해야 한다면, 이것을 명심해라:

누구도 방해 받는 것을 좋아하지 않는다. 하지만 만약 반드시 방해 해야만 한다면 그것이 분명한 목적과 정당함을 가지도록 하라.