당신은 아마 전에 거기에 가본 적이 있을 것입니다. 사용자에게 모달을 표시하는 것 중에서 어떻게 선택하고 언제 별도의 새 페이지로 이동합니까? 그리고 그것은 전혀 중요합니까? 실제로 그렇습니다. 결정은 사용자의 흐름, 컨텍스트, 세부 정보 조회 능력, 오류 빈도 및 작업 완료에 영향을 미칩니다. 두 가지 옵션 모두 잘못된 시간과 장소에서 파괴적이고 실망스러울 수 있습니다. 그러니 우리는 그것을 바로 잡는 것이 좋습니다. 자, 그렇게 하는 방법을 살펴보겠습니다. 모달 vs. 대화 상자 vs. 오버레이 vs. 라이트박스 우리는 종종 단일 모달 UI 구성 요소에 대해 이야기하지만 다양한 유형의 모달 간의 미세하고 복잡한 뉘앙스를 무시하는 경우가 많습니다. 사실 모든 모달이 동일한 것은 아닙니다. 모달, 대화 상자, 오버레이 및 라이트박스 등은 모두 비슷해 보이지만 실제로는 상당히 다릅니다.
Dialog"대화"(사용자 ← 시스템)에 대한 일반적인 용어입니다. 오버레이페이지 상단에 표시되는 작은 콘텐츠 패널입니다. ModalUser는 오버레이 + 배경 비활성화와 상호 작용해야 합니다. NonmodalUser는 오버레이 + 배경 활성화와 상호 작용해야 합니다. 모달에 주의를 집중시키기 위해 라이트박스 배경을 흐리게 했습니다.
Anna Kaley가 강조한 것처럼 대부분의 오버레이는 잘못된 시간에 나타나고, 중요한 작업 중에 사용자를 방해하고, 잘못된 언어를 사용하고, 사용자의 흐름을 방해합니다. 이는 본질적으로 방해가 되며 일반적으로 그럴 필요 없이 심각도가 높습니다.
확실히 사용자의 작업 결과가 큰 영향을 미치는 경우 사용자의 속도를 늦추고 중단해야 하지만 대부분의 시나리오에서 비모달은 사용자의 관심을 끌 수 있는 훨씬 더 미묘하고 친숙한 옵션입니다. 저는 항상 기본값으로 설정하는 것을 제안합니다. 모달 → 단일, 독립형 작업용 디자이너로서 우리는 종종 모달을 부적절하고 성가신 것으로 일축합니다. 그리고 종종 그렇습니다! —하지만 그 가치도 있습니다. 사용자에게 잠재적인 실수에 대해 경고하거나 데이터 손실을 방지하는 데 매우 도움이 될 수 있습니다. 또한 페이지의 현재 상태를 방해하지 않고 관련 작업을 수행하거나 세부 정보를 드릴다운하는 데 도움이 될 수 있습니다. 하지만 모달의 가장 큰 장점은 사용자가 현재 화면의 컨텍스트를 유지할 수 있도록 돕는 것입니다. UI뿐만 아니라 편집된 입력, 스크롤 위치, 아코디언 상태, 필터 선택, 정렬 등도 의미합니다.
때때로 사용자는 선택 항목을 빠르게 확인한 후(예: 위에 표시된 필터) 즉시 진행해야 합니다. 물론 자동 저장도 동일한 결과를 얻을 수 있지만 항상 필요하거나 원하는 것은 아닙니다. 그리고 UI를 차단하는 것은 종종 좋은 생각이 아닙니다. 그러나 모달은 어떤 작업에도 사용되지 않습니다. 일반적으로 사용자가 작업을 완료하고 원래 있던 위치로 돌아가야 하는 단일 독립 작업에 사용합니다. 당연히 우선 순위가 높고 짧은 상호 작용(예: 경고, 파괴적인 작업, 빠른 확인)에 잘 작동합니다. 모달이 도움이 되는 경우: 🚫 모달은 파괴적이고 침해적이며 혼란스러운 경우가 많습니다.🚫 비교 및 복사-붙여넣기가 어렵습니다.✅ 하지만 모달을 사용하면 사용자가 여러 컨텍스트를 유지할 수 있습니다.✅ 되돌릴 수 없는 오류와 데이터 손실을 방지하는 데 유용합니다.✅ 사용자를 새 페이지로 보내는 것이 방해가 될 경우 유용합니다. ✅ 사용자가 중단을 중요하게 생각하는 경우에만 모달을 표시합니다.✅ 기본적으로 비차단 대화 상자("비모달")를 선호합니다.✅ 사용자가 나중에 대화 상자를 최소화하거나 숨기거나 복원할 수 있도록 허용합니다.✅ 복잡한 입력을 확인하는 등 사용자의 속도를 늦추려면 모달을 사용합니다.✅ "닫기", ESC 키를 사용하거나 상자 바깥쪽을 클릭하여 빠져나가는 방법을 제공합니다. 페이지 → 복잡한 다단계 작업 흐름의 경우 모달 내의 마법사나 탭 탐색은 복잡한 기업 제품에서도 잘 작동하지 않습니다. 일반적으로 측면 패널이나 서랍이 더 잘 작동합니다. 문제는 사용자가 데이터 포인트를 비교하거나 참조해야 할 때 시작됩니다. 그러나 모달은 이 동작을 차단하므로 대신 여러 탭에서 동일한 페이지를 다시 엽니다.
보다 복잡한 흐름과 다단계 프로세스의 경우 독립형 페이지가 가장 적합합니다. 또한 페이지는 사용자의 완전한 주의를 요구할 때 더 잘 작동하며 이전 화면에 대한 참조는 그다지 도움이 되지 않습니다. 서랍은 간단한 모달로는 너무 복잡하지만 전체 페이지 탐색이 필요하지 않은 하위 작업에 적합합니다. 모달을 피해야 하는 경우: 🚫 오류 메시지에 대한 모달을 피하세요.🚫 기능 알림에 대한 모달을 피하세요.🚫 온보딩 경험에 대한 모달을 피하세요.🚫 복잡하고 긴 다단계 작업에 대한 모달을 피하세요.🚫 여러 개의 중첩된 모달을 피하고 대신 prev/next를 사용하세요.🚫 꼭 필요한 경우가 아니면 자동 트리거 모달을 피하세요. 둘 다 피하십시오반복되는 작업의 경우 복잡하고 작업이 많은 제품에서 사용자는 동일한 작업을 반복해서 수행하게 됩니다. 거기에서 모달과 새 페이지 탐색은 흐름을 방해하거나 사용자가 모든 다른 탭이나 보기 사이에서 누락된 데이터를 수집하도록 하기 때문에 마찰을 추가합니다. 끝없는 확인, 과장된 경고, 장황한 지침 또는 단지 참조 포인트 누락으로 가득 찬 중단된 경험을 사용자가 경험하는 경우가 너무 많습니다. Saulius Stebulis가 언급했듯이 이러한 시나리오에서는 확장 가능한 섹션이나 내부 편집이 더 잘 작동하는 경우가 많습니다. 즉, 작업을 현재 화면에 계속 고정시킵니다. 실제로 많은 시나리오에서 사용자는 독립적으로 작업을 완료하지 않습니다. 그들은 작업을 수행하면서 데이터를 조회하고, 값을 복사하여 붙여넣고, 여러 위치의 항목을 구체화하거나, 유사한 기록을 검토해야 합니다. 오버레이와 서랍은 작업 중에 배경 데이터에 대한 액세스를 유지하는 데 더 유용합니다. 결과적으로 컨텍스트는 항상 해당 위치에 유지되며 참조 또는 복사-붙여넣기가 가능합니다. 중단이 진정으로 가치를 더하는 순간을 위해 모달과 페이지 탐색을 저장합니다. 특히 중요한 실수를 방지합니다. 모달과 페이지: 의사결정 트리 얼마 전 Ryan Neufeld는 디자이너가 모달과 페이지 중에서 선택하는 데 도움이 되는 매우 유용한 가이드를 정리했습니다. 편리한 PNG 치트시트와 7개 섹션으로 분류된 질문이 포함된 Google Doc 템플릿이 함께 제공됩니다. 길고 매우 철저하지만 따라하기가 매우 쉽습니다.
어려워 보일 수도 있지만 매우 간단한 4단계 프로세스입니다.
화면의 컨텍스트. 먼저 사용자가 기본 화면의 컨텍스트를 유지해야 하는지 확인합니다. 작업 복잡성 및 기간. 단순하고 집중적이며 산만하지 않은 작업에는 모달을 사용할 수 있지만 길고 복잡한 흐름에는 페이지가 필요합니다. 기본 페이지 참조. 그런 다음 사용자가 백그라운드에서 데이터를 자주 참조해야 하는지, 아니면 작업이 단순한 확인 또는 선택인지 확인합니다. 올바른 오버레이 선택. 마지막으로 오버레이가 실제로 좋은 옵션인 경우 모달 또는 비모달(비모달 쪽으로 기울어짐) 중에서 선택하도록 안내합니다.
마무리 가능하면 전체 UI를 차단하지 마세요. UI를 부분적으로 덮지만 탐색, 스크롤 및 복사-붙여넣기를 허용하는 부동 대화상자를 갖습니다. 또는 모달의 내용을 측면 서랍으로 표시합니다. 아니면 대신 수직 아코디언을 사용하세요. 또는 많은 세부 정보를 표시해야 하는 경우 사용자를 별도의 페이지로 안내하세요. 그러나 사용자의 효율성과 속도를 높이려면 무슨 수를 써서라도 모달을 피하세요. 사용자의 속도를 늦추고 주의를 집중시키며 실수를 방지하는 데 사용하세요. Therese Fessenden이 지적했듯이, 방해받는 것을 좋아하는 사람은 아무도 없지만, 꼭 해야 한다면 그만한 가치가 있는지 확인하세요. "스마트 인터페이스 디자인 패턴"을 만나보세요 실제 프로젝트의 100가지 실제 사례가 포함된 15시간짜리 비디오 코스인 스마트 인터페이스 디자인 패턴에서 모달 및 대안에 대한 전체 섹션을 찾을 수 있습니다. 올해 후반에는 라이브 UX 교육도 제공됩니다. 대규모 드롭다운부터 복잡한 엔터프라이즈 테이블까지, 매년 5개의 새로운 세그먼트가 추가됩니다. 무료 미리보기로 이동하세요. BIRDIE 코드를 사용하여 15% 할인을 받으세요. 인터페이스 디자인 및 UX에 대한 비디오 코스인 스마트 인터페이스 디자인 패턴을 만나보세요.
비디오 + UX 교육비디오 전용비디오 + UX 교육$ 495.00 $ 699.00
비디오 + UX 교육 받기25개의 비디오 강의(15시간) + 실시간 UX 교육.100일 환불 보장.비디오 전용$ 300.00$ 395.00
비디오 코스를 받으세요. 40개의 비디오 레슨(15시간). 매년 업데이트됩니다. 2개의 비디오 코스가 포함된 UX 번들로도 제공됩니다.
유용한 리소스
다양한 유형의 팝업(Anna Kaley 저) Uxcel의 UI 모달 디자인 모범 사례 우리는 너무 많은 망할 모달을 사용합니다: UX 지침, 작성자: Adrian Egger 모달 및 비모달 대화 상자, 작성자: Therese Fessenden 최신 엔터프라이즈 UI 디자인: 모달 대화 상자, 작성자: James Jacobs 디자인 시스템의 모달
