15.모달 &
모달이 아닌 다이얼로그
[3.툴팁, 다이어로그, 학습을 위한 오버레이]
모달과 논모달 (모달이아닌) 다이얼로그에 대한 차이점에 대해서 이해하기위해서 우리는 "다이얼로그"와 "모달"의 의미에 대해서 알아야한다.
다이얼로그는 두명의 사람이 대화하는 것을 의미한다. 유저 인터페이스에서 다이얼로그는 시스템과 사용자간의 대화를 의미하고 자주 사용자에게 시스템이 취해야하는 행동 또는 정보를 요구하는 방식으로 구현된다.
사용자인터페이스의 모드들은 특별한 상태로 다소 다른 인터페이스를 가지게된다. 각 모드는 다른 명령어에 의해서 달라지거나 시스템모드에 따라서 같은 입력이더라도 다른 결과를 확인하게 된다.
예를 들어서 컴퓨터에서 Caps Lock 을 켜게되면 특별한 모드로 변경되어서 대문자로 영문이 작성이 된다. 글자를 적는 적은 Caps Lock 켰을때와 껐을때 다른 효과를 갖게된다. 또는 마이크로소프트 워드에서 트랙체인지모드가 있는데 이 모드는 모든 편집과 코멘트가 보이게 된다. 기본 모드에서는 보이지 않는다.
'모드'와 '다이얼로그' 를 이해하면 '모달 다이얼로그'를 쉽게 정의할 수 있다.
정의 : 모달 다이얼로그는 메인 컨텐츠 위에 나타나고 사용자의 상호작용에 의해서 시스템의 모드를 바꾸게 된다. 이 다이얼로그는 사용자가 분명하게 모달 다이얼로그에서 상호작용을 할때까지 메인 컨텐츠를 사용 할수 없게한다.
모달 다이얼로그는 내 고양이 엠마같다. 아침 7시에 매일 울고 나는 고양이에게 밥을 준다. 나는 자려고 노력하거나 일어나서 준비를 하려고 하지만 내 고양이는 내 앞에서 더 크게 끊임없이 내가 고양이를 볼때까지 울어댄다. 내가 하려던 일을 끝내고 싶다면 나는 즉시 고양이의 울음에 반응해줘야 한다. 가끔 내 고양이는 새벽3시에 내가 잘때도 이렇게 내가 볼때까지 운다. 손님들이 자고 가게 되는 경우에는 새벽또는 아침에 울는 고양이 때문에 귀찮거나 당황스러울 수 있다.
이와 대비되는 논모달 (모달이 아닌) 다이얼로그와 윈도우창은 메인 컨텐츠를 사용 할 수 있도록 한다. 다이얼로그 박스가 보여지는 것이 사용자의 인터페이스를 기능적으로 바꾸지 않는다. 사용자들은 메인컨텐츠와 계속 상호작용 할 수 있고 논모달 다이얼로그의 크기를 줄이거나 옮길 수도 있다. 내 고양이 예를 다시 들자면 논모달 다이얼로그는 밥먹는 동안 식탁옆에 얌전히 앉아서 떨어진 음식을 먹을 수 있는 기회를 기다리는 것같다. 엠마가 이럴때 나는 먹을 수 있고 이야기 할 수 있고 저녁식사를 방해없이 즐길 수 있다. 나는 고양이와 함께 있다는 것을 무시거나 아니면 조금 음식을 테이블 밑으로 떨어뜨려 먹게 할 수있다.
모달 다이얼로그는 사용자에게 에러 또는 사용자의 즉각적인 행동이 요구되는 시스템 상테에 대한 알림을 줘야 할때 의도적으로 적용되도록 하는 것이 원래 취지였다. 이런 경우에는 모달 다이얼로그는 에러를 고치기위해 사용자들의 작업 중간에 끼어드는 필수 요소이다. 그래서 이런 다이얼로그 박스의 위치가 스크린의 중간에 놓이는 것은 효율적이다. 사용자의 주의를 끌고 문제를 빨리 인지하고 고치기 위해서 이런 모달 다이얼로그는 큰 이점이 있다.
모달 다이얼로그의 단점
아래는 일반적인 모달 다이얼로그의 단점들이다
- 그들은 즉각적인 주의를 끌도록 요구한다.
모달 윈도우창은 강제적이고 사용자가 즉각적으로 행동하도록 요구한다. 다이얼로그가 시스템을 다른 모드로 바꾸기때문에 사용자는 다이얼로그를 인지하고 작업할때까지 다른 작업을 이어서 할 수 없다
- 그들은 사용자의 작업 흐름을 방해한다.
모달 다이얼로그는 사용자가 처음부터 작업하던 곳에서 부터 멀어지게 강요한다. 다이얼로그가 나타날때마다 사용자가 다이얼로그에 응답해야할 뿐아니라 그들이 원래하던 작업으로 다시 돌아가야하기 때문에 원래 하던 작업의 맥락을 이해하는데 시간과 노력이 소요된다.
-그들은 사용자들이 무엇을 하고 있었는지 까먹게 한다. 한번 작업하는 맥락이 다른 작업으로 바뀌게 되면 추가적으로 발생하는 인지 부하가 모달 다이럴로그 때문에 발생하므로 사람들은 원래 작업하고 있던 내용의 디테일한 관련 내용들을 까먹을 수도 있다.
- 그들은 사용자들이 추가적인 목표를 생성하고 시작하도록 만든다. 다이얼로그가 보여질때 다이얼로그를 읽고 이해하기 위해서 추가적인 단계가 사용자가 작업하는 흐름에서 추가되는 것이다. 이런 상호작용 비용의 증가는 다이얼로그가 잘 정의 되어있고 중요한 정보를 포함하지 않는 경우 사용자 탓을 하게 되는 경향이 있다. 이부부에 대해서는 뒤에 자세하게 이야기 하겠다.
이런 단점들 때문에 모달 다이러로그는 중요하지 않은 활동에 사용될때 문제가 된다.
모달 다이얼로그를 위한 가이드라인
모달 다이얼로그를 언제 사용해야 적절한가? 아래의 몇가지 가이드라인이 모달 다이얼로그를 꼭 사용해야만 하는 화면을 결정해야할때 도움을 줄것이다.
1.모달 다이얼로그를 치명적인 에러 또는 예방 할 수 있는 에러에 대한 중요한 경고를 해야할 때 사용해라.
사용자가 작업하던 내용을 잃게되거나 사용자의 행동이 했던 작업 내용을 파괴하거나 작업흐름을 거꾸로 할 수 없거나 할때 재앙을 피하기 위해서 끼어들어야하는 기회는 언제든 있다.
모달 다이얼로그로 경고하기에 충분히 심각한 에러인지 결정하기 위한 고려사항은 아래와 같다
- 만약 사용자의 주의가 작업하던 내용으로 부터 떨어지게되면 발생한 문제를 고치기에 쉽거나 어려운가?
가능하다면 언제나 에러가 발생하기 전에 방지하는 것이 맞다. 어떤 에러는 에러가 발생하면 모달 다이얼로그 대신에 메인컨텐츠 안에 에러 메세지가 표시되고 간단하게 고칠 수도 있을 것이다. 예를 들어 에러가 폼작성할때 나타나게 된다면 페이지 위에 나타나야하고 에러가 발생한 바로 옆에 나타나야하는데 이는 사용자가 에러메세지가 표시된 위치를 확인하고 문제를 고칠 수 있기 때문이다. 그러나 사용자의 컴퓨터가 10초안에 다시 시작한다고 하면 이런 정보는 모달 다이얼로그로 보여줘야하고 사용자가 해당 메세지를 확인할 수 있어야 한다.
- 이 에러는 되돌릴 수 없는가? 되돌릴수 없는 에러는 자주 정보를 잃게 된다. 이런 에러는 복잡하고 시간 흐름에 의한 작업 내용에 특별히 손상을 입힐수 있다. 예를 들어 장바구니에 물건을 추가하는데 있어서 사용자가 미묘한 알림을 알아채지 못했다면 되돌릴수 없다. 장바구니에 다시 물건을 담기위해서는 해당작업을 반복해야만한다. 다른 예로 파일을 덮어쓰거나 몇백장되는 슬라이드 문서의 변경내용을 저장할때도 되돌릴 수 없는 작업이기 때문에 반드시 중간에 끼어들어서 확인 작업을 요청하는 것이 반드시 필요하고 이런 확인 내용은 환영받는다.
2.모달 다이얼로그를 사용자가 지금 진행하는 작업에서 중요한 정보를 입력해야만 할때 사용해라.
정보가 누락되어 시스템이 사용자가 하고 있는 작업을 계속 진행 할 수 없게 막을때 모달 다이얼로그는 사용자에게 해당 정보를 입력하라고 메세지를 표시 할 수 있다.
Etsy 서비스는 아래에서 보여주는 바와 같이 모달 윈도우로 사용자가 마음에드는 아이템리스트에 아이템을 저장 하려고 할때 로그인 정보를 입력해야한다고 보여주고 있다.
3.모달 다이얼로그는 복잡한 작업흐름을 단수한 단계로 보여주는 요소로 사용되어야한다.
작업흐름에 대해서 빨리 작업하는데 항상 더 나은 것은 아니다. 시간 소요와 인지적으로 작업에 관여되는 점에 있어서 많은 정보는 한번에 물어보게되면 벅찰 수 있게된다. 이런 상황에서 모달 다이얼로그는 복잡한 정보를 조금 더 단순하게 소화할 수 있을 만한 분량으로 쪼개는데 사용 될 수 있다. 마법사는 모달 다이얼로그로 사용되는 일반적인 예이다.
그러나 여러 단계가 있는 모달 다이얼로그는 원래 하려던 작업에서 멀어진 상태로 시간을 보내는 것이라 사용자가 원래 뭘 하려고 했었는지 까먹게 만들수 있다는 점을 유의해야 한다. 그래서 당신이 여러단계의 모달을 적용해야만 한다면 사용자에게 그들이 어떤 단계에 있는지 알려줘서 사용자들이 모달 내용 작업을 하다가 그만두지 않도록 해야한다.
4.모달 다이얼로그를 사용자의 작업이나 노력을 현저하게 줄여줄 수 있는 정보를 제공하기 물어보기 위해 사용해라
모달은 요청하거나 제시되는 정보가 관련이 있을때 효과적으로 작동하거나 현재 작업을 능률적으로 완료 할 수 있다.
Zillow.com 서비스의 경우 부동산 관련 웹사이트 인데 사용자는 웹사이트 계정 또는 부동산 중개인 없이 부동산 리스트를 탐색 할 수 있다. 그러나 사용자들이 중개인에게 연락하려고 시도하게 될때 사이트는 모달 다이얼로그에 그들이 이미 중개인과 함께 부동산을 알아고보고 있는지 아니면 혼자 알아보는 것인지 물어본다. 이 정보는 다음 단계로 진입하기 위해서 치명적인 정보는 아니지만 이 정보는 이 후 상호작용 작업 단계에 도움이 될만한 가치있는 정보이다. 이 다이얼로그는 적극적인 프로파일링과 답변하기 쉬운 질문을 한번에 하나만 나타내는 것이다. 이런 질문들은 조금만 기여해도 되고 관련있는 정보에 집중 할 수 있게 한다.
적극적인 프로파일링의 핵심은 작업흐름의 사용자 기대치를 따를 수 있다는 것이고 중간에 개입하는 다이얼로그는 사용자가 현재 작업하는 작업에 관련이 있거나 도움이 되는 것이어야 의미가 있다.
5.모달 다이얼로그를 현재 사용자가 작업하는 흐름에 관련없는 필수적이지 않은 정보에 사용하지 말아라.
위에서 설명한 대로 모달 다이얼로그는 여러개의 단점들이 있고 사용자들의 시간과 인지부하를 소비하게 만든다. 이런 소비되는 에너지를 사용하는 것이 정당화 되기 위해 수행해야하는 것과 그 중요도가 반드시 높은 경우에만 적용해야한다. 모달 다이얼로그는 사용자의 목적에 직접적으로 관계가 있지 않은 모달이 나타나게 되면 이는 불편할 뿐 아니라 회사의 신뢰도를 까먹게 된다.
추가적으로 필수적이지 않은 정보가 모달 다이얼로그처럼 높은 우선순위 포맷으로 나타날때 사용자들은 이 포맷에 대해서 더이상 주의를 기울이지 않게 된다. 이것은 마치 이홉우화의 양치기소년의 이야기 처럼 반복적인 잘못된 정보가 사람들의 신뢰를 잃게 되어 진짜로 필요할때 신뢰를 얻지 못하는 것과 같다.
반대 쪽의 유명한 믿음은 메일링 리스트 등록은 비지니스 측면에서는 중요하지만 사용자에게는 중요하지 않습니다. 최근 웹 사용성 연구에서 뉴스레터 등록과 관련된 모달 다이얼로그에 대한 사용자들의 비호감적인 태도에 대해서 알게되었습니다.
6.결제 진행같이 고도의 공정과정을 거치는 경우 모달 다이얼로그 개입을 피해라
결제같이 집중 작업 해야하는 과정은 사용자 뿐 아니라 비지니스 서비스 제공자의 입장에서도 중요도가 높기 마찬가지이다. 사용자는 끊김없이 결제진행을 하고 싶어하고 안전하고 에러없이 되기를 원하며 서비스제공자 비지니스 측에서도 사용자가 그들의 구매 결정을 확실하게 진행하기를 원한다. 이런 과정에서 띄워지는 불필요한 모달 다이얼로그의 경우 주의를 분산시키고 최악의 경우 사용자의 신뢰를 잃을 수도 있다.
오래된 버전의 월마트 사이트는 모달 다이얼로그를 결제하는 동안 로그인창으로 띄워서 보여주었다. 이 모달은 사용자의 결제 흐름을 방해하고 게스트 계정으로 결제하는 과정을 심플하게 진행하는 것보다 월마트의 비밀번호가 무엇이었는지 찾는데 집중하도록 만드는 잘못된 결과를 초래할 수 있게 된다. 사용자가 계정이 없는 경우에는 계정을 만드는데 집중하게 되면서 구매결정을 미루게 될 수 있는 영향을 미친다. 월마트는 웹사이트에 모달 다이얼로그를 삭제하는 것으로 리디자인을 했지만 리디자인 결과물도 이상한 점은 비회원 결제 버튼을 없애버려서 결국 또 계정이 있는 사용자만 구매를 할 수 있게 만들어서 이또한 불편하게 만들어져있다.
7.모달 다이얼로그를 선택할 수 없는 정보를 보여주는 식으로 내용을 담아 복잡한 의사결정을 내리도록 적용하지 말아라
모달 다이얼로그는 내용이 짧고 직접적인 내용으로 사용자에게 제공되어야한다. 만약 모달에서 요구하는 내용이 사용자가 복잡한 조사를 해야하거나 정보의 추가적인 내용을 상담받아야하는 것이라면 모달로 적용하지 않아야한다.
대신 모달이 아닌 다이얼로그를 고려해보라
치명적인 결과를 불러일으키는 것이 아닌 작업의 경우 모달이 아닌 다이얼로그가 적절할 것이다. 모달이 아닌 다이얼로그는 모달보다는 방해받는 느낌이 들기 때문에 사용자는 계속해서 하던 작업을 이어가거나 관련없는 내용이면 무시할수있다. 그러나 모달이 아닌경우에도 성가실수있는데 특히 만약 내용이 중요한 정보인데 애매모호하게 적혀있거나 너무 복잡한 상호작용을 요구할때 그러하다.
그리고 몇몇의 모달이 아닌 대화상자는 디바이스와 브라우저 간 잘 호환이 안되는데 예를 들어 모달이 아닌 데스크탑 웹 크롬브라우저에서는 윈도우창으로 뜨던것이 사파리 브라우저인 모바일에서는 아래의 Meowbox 서비스 처럼 full screen창으로 뜰 수 있다.
모달이 아닌 윈도우는 사용자가 특정 정보에 접근하기위해 빠르게 모드 전환을 해야할때 유용하다. 예를 들어 구글 메일의 모달이 아닌 창을 띄우는 경우 모달이 아닌 창으로 띄워주고 있다. 사용자는 작업을 하는 동안에도 이 창을 띄울 수 있고 최소화할 수 있으며 최소화 할때 내용을 읽지 않게되고 최대화를 하여 모달윈도우 창으로 띄울 수도 있다. 이런 분리된 화면은 사용자가 새로운 이메일을 작성하는 동안에도 이전 메일의 위치에 접근 할 수도 있고 추가적인 정보를 알 수 있다.
결론
모달 또는 모달이 아닌 다이얼로그는 사용자의 참여를 독려하거나 요구할때 유용하다. 모달 또는 모달이 아닌 다이얼로그 중 어떤 것을 사용해야하는 지 결정해야할때 사용자의 맥락이나 흐름을 고려해야한다. 불필요하게 사용자에게 개입하거나 그들의작업을 방해하는 것을 피한다. 사용자들이 문제를 해결하기 쉽게 그리고 그들의 목표를 쉽게 달성 할 수 있도록 한다. 디자인 결정을 내릴때 비지니스 적인 목표가 우선시 될 수 있지만 사용자의 목표를 우선시 하도록 한다.
모달 다이얼로그에 대해서는 이렇게 말할 수 있다. 사용자는 중간에 방해받는 것을 누구도 안좋아하지만 당신이 해야한다면 그 가치있는 비용인지 확실하게 해야한다.
*저는 전문 번역가가 아니기 때문에 정확한 내용은 아래 원문을 참고하시기 바랍니다.*
https://www.nngroup.com/articles/modal-nonmodal-dialog/
