모달의 굴레에서 벗어나는 법
Source
중첩 모달(nested modal)이란?
모달(modal)은 화면의 주요 컨텐츠를 가린 후 사용자로 하여금 특정 행동을 하도록 강요하는 다이얼로그(dialog, 대화상자)를 의미한다. 중첩(nested) 모달은 두 개 이상의 모달이 쌓인 형태 혹은 상황을 의미한다.
중첩 모달을 줄여야 하는 이유
1. 사용 흐름이 복잡해져 길을 잃게 된다.
사용자의 사용 경험의 통제권은 반드시 사용자에게 있어야 한다. 중첩 모달은 서로 다른 정보들이 쌓여감에따라, 사용자가 '비상구'(emergency exit)을 찾지 못하게 만든다. 일반적으로 중첩 모달에 묻혀버린 사용자는 모달을 하나하나 다 클릭해가면서 다시 원하는 위치로 되돌아가야한다. 이러한 사용 흐름은 사용상 관련이 별로 없는 화면들을 보도록 강요하게 되면서 복잡하고 불필요한 경험을 하도록 만든다.
비상구(emergency exit): 사용자가 실수로 원치 않은 상태로 진입했을 때, 원래의 사용 흐름으로 돌아갈 수 있는 인터페이스를 의미함
2. 불확실성을 야기한다.
중첩모달은 화면에 복잡한 층(layer)을 만들게 되고, 이 각각의 층들이 어떤 관계 혹은 반응을 발생시킬지 모르기 때문에 사용자가 예측을 하지 못하게 만든다.
예를 들어, 사용자가 첫 번째 보라색 배경의 게시글을 클릭한다.
[첫 번째 모달 발생] 게시글이 브라우저에서 모달 형태로 뜨게 되고, 사용자는 게시글에 대한 상세 정보를 조회하기 위해 우측의 버튼을 클릭한다.
[중첩 모달 발생] 게시글 조회 모달 위에 게시글 상세 정보를 띄우는 모달이 나타난다.
[흐름 꼬임 발생] 혼란한 사용자는 브라우저의 '뒤로 가기' 버튼을 눌렀으나, 게시글 상세 모달은 남아있고 게시글 조회 모달은 사라졌다. 이런 상황이 발생하면, 사용자는 해당 모달을 꺼보려고 흐림(dimmed) 처리된 배경을 클릭하거나 모달 닫기 버튼을 찾는 등의 행위를 해야한다.
3. 공간 낭비가 발생한다.
대부분의 경우, 모달은 화면의 일부만 사용한다. 구글의 매테리얼 디자인 문서에서는 '전체 화면 크기의 대화상자는 모바일 기기에서만 사용해야 한다. 타블렛이나 데스크탑의 경우에는 모달 대화 상자를 사용해야 한다.'라고 적혀있다. 모달 밖의 공간은 사용자 경험을 더욱 풍부하게 만들 수 있는 중요한 컴포넌트를 위치시킬수도 있다. 또한, 모바일 기기와 같이 작은 기기에서는, 화면 공간의 대부분이 사용되기 때문에 화면 공간을 낭비하는 디자인은 최대한 피해야 한다.
해설: 뒷 내용에 나오듯, 배경 부분의 내용을 가리거나 대부분의 화면을 잡아 먹는 모달 형태가 아니더라도, 다른 인터페이스를 구축하여 사용자 경험을 더욱 매끄럽고 풍부하게 만들 수 있는 기회들이 있으니 모달 사용은 신중해야 함을 의미하는 것으로 해석됨.
4. 인지 부하(cognitive load)가 증가한다.
사용자는 현재 하고 있는 일들에 집중할 수 있어야 하며, 그 일들이 간편하게 해결될 수 있어야한다. 그렇기 때문에, 일반적으로 UX 디자이너들은 제품 사용 흐름이 최대한 물처럼 흐르듯 구성하려고 한다. 중첩 모달처럼 서로 관련되지 않은 것들을 쌓아버리면서 변수와 흐름의 경우의 수를 늘려버리는 건 사용자를 압도시킨다. 제품의 흐름상 사용자가 모달을 중첩적으로 열어야 하는 경험이 발생한다면, 아마 정보 구조(information architecture)상 여러 문제들이 발생하고 있다는 신호일 수 있다. 항상 사용자 경험을 자연스럽게 유지해야한다. 웬만한 사용자들의 집중력과 시간은 당신 편이 아닐테니까.
그러면 어떤 디자인 패턴(pattern)을 사용해야할까?
*디자인 패턴(pattern): 디자인 과정에서 발생하는 문제들에 대한 해결책
1. 무한 모달(infinite modal)
모달 위에 모달이 겹치는 형태가 아닌, 한 모달 내에서 화면의 흐름이 발생할 수 있도록 하는 것이다. 한 모달 인터페이스에서 진행되기 때문에 'X' 버튼 하나로 유저를 위한 비상구를 만들 수도 있으며, 일반적으로 통용되는 디자인으로 구성되어 있기 때문에 유용하다.
2. 사이드바(sidebar)
사용 맥락상 컨텐츠를 지속적으로 보여줘야 하는 상황이고, 수평 공간을 활용해도 되는 상황이라면 사이드바가 좋은 선택지일 수 있다.
3. 인라인 편집(inline edit)
인라인 편집 패턴은 사용자가 현재 사용하고 있는 화면에서 변수가 발생하기 때문에 사용 맥락을 잃지 않고 자연스럽게 이어가는 데에 도움을 줄 수 있다.
4. 인라인 노출(inline reveal)
화면 공간이 작거나 단계적인 흐름을 구축할 때 수직 공간에 활용하면 좋은 디자인이다. 평소에는 숨겨져 있다가 특정 버튼이나 작업을 완료하면 공간이 노출되는 패턴이다.
5. 팝오버(popovers)
사용하고 있는 화면에서 추가적인 맥락을 제공하여 정보를 덧붙일 때 좋은 패턴이다. 사용 흐름을 더 고도화시킬 수 있으며, 사용자가 느끼기에 드롭다운 패턴보다 가벼운 디자인이다.
6. 탭형 모달(tabbed modal)
정보들을 한데 모아 분류하여 탭 형태로 분류하는 패턴으로, 사용자가 내용을 쉽고 명확하게 탐색할 수 있는 형태의 디자인을 제공한다.
중첩 모달을 해결할 때 고민해야 할 질문
모달을 페이지 단위로 변경시켜 주요 사용 흐름으로 편입시켜야 하는가?
페이지 내의 정보에 집중할 수 있는 형태인가?
페이지가 여러 개의 페이지로 분할되어야 하는가?
다른 플랫폼들에서 특수하게 적용된 경험 디자인이 새로운 플랫폼에서 적용됐을 때 효과적으로 작동될 수 있는가?
이상적인 사용 흐름에 모달을 녹여내는 방법
사용자는 제품을 경험할 때 최대한 매끄럽게(seamlessly) 움직일 수 있어야 한다. 일반적으로 사용자들은 좌측에서 우측으로 이동하는 직선상의 경로를 구축하고 화면을 순서대로 경험하게 된다. 우리가 '뒤로가기'버튼을 좌측으로, '다음' 버튼을 우측으로 방향을 구성한 것처럼 말이다. 이런 좌측에서 우측으로 가는 경험의 경로에서, 부차적인 작업이 필요할 때 모달을 통해 잠깐 위로 아래로 움직이며 잠깐 샛길에 들기도 한다. 이런 부차적인 작업을 마치게 되면, 사용자는 반드시 원래 있었던 좌-우 경로에 돌아가야 한다(out-and-back).
