오버레이 는 모바일 에서 보편적인 UI 요소 가 되었습니다. 쿠키 권한, 채팅 풍선 , 쿠폰 제공 및 마케팅 구독 제안에 대한 성가신 팝업 외에도 탐색 메뉴 , 하단 시트, 제품 세부 정보 페이지 또는 -앱 브라우저. 많은 모바일 오버레이가 페이지의 한 섹션(부분 오버레이)만 차지하는 반면 일부 콘텐츠는 백그라운드에서 볼 수 있고 나머지는 전체 화면을 차지하므로 일반 페이지나 보기와 거의 구별할 수 없습니다. Macy의 앱(왼쪽)은 장바구니를 표시하기 위해 부분 오버레이를 사용했으며 Nordstrom.com(오른쪽)은 제품 이미지를 표시하기 위해 전체 오버레이를 사용했습니다 . HM.com은 부분 오버레이를 사용하여 기본 탐색에 사용되는 순차 메뉴 를 구현했습니다 . iOS용 Facebook: 뉴스피드(왼쪽)에서 기사를 탭하면 전체 페이지 오버레이(오른쪽)로 표시됩니다. 사용자가 배경(즉, 오버레이 아래의 콘텐츠)과 상호작용할 수 있는지 여부에 따라 오버레이는 모달 또는 비모달 이 될 수 있습니다 . 모달 오버레이 에서는 사용자가 배경과 상호 작용할 수 없지만 비모달 오버레이 에서는 그렇게 할 수 있습니다. Google 지도 모바일 앱은 모달 오버레이를 사용하여 정렬 옵션(왼쪽)을 표시하고 넌모달 오버레이를 사용하여 특정 위치에 대한 정보를 표시했습니다(이 경우 Nielsen Norman Group — 오른쪽). 이 두 오버레이는 화면 하단에 나타나는 응용 프로그램별 오버레이인 하단 시트의 예입니다. 모바일 오버레이의 주요 문제 중 하나는 다음 오버레이 해제 방법 중 하나를 통해 오버레이를 해제할 수 있다는 것입니다. 오버레이에 포함된 전용 버튼(일반적으로 닫기 또는 뒤로 버튼) 전체 페이지를 차지하지 않는 모달 오버레이의 경우 오버레이 영역 외부를 탭합니다. 하단 시트의 경우 오버레이 핸들을 아래로 스와이프 브라우저의 뒤로 버튼(웹에서) iOS 및 Android 모두 에서 뒤로 에 사용되는 가로 스와이프 제스처 (Android 휴대폰의 경우 휴대폰의 뒤로 버튼) 디자이너는 이러한 오버레이 해제 방법 중 어떤 것을 허용할지 다양하기 때문에 사용자는 때때로 예기치 않은 비용이 많이 드는 결과와 함께 잘못된 방법을 선택합니다. 여러 오버레이가 서로의 맨 위에 쌓이면 상황이 훨씬 더 복잡해집니다. 이러한 경우 오버레이 해제 방법은 사용자가 어떤 동작을 얻을지 쉽게 예측할 수 있는 방법 없이 맨 위 오버레이만 또는 전체 스택을 해제할 수 있습니다. . 예를 들어 시작하겠습니다. 최근 사용성 연구에서 8명의 참가자가 오버레이를 사용하는 다양한 모바일 사이트 및 애플리케이션과 상호 작용했습니다. 연구 참가자 중 한 명은 Walmart의 모바일 앱을 사용하여 전등을 쇼핑했습니다. 참가자가 제품 목록 페이지에서 제품을 선택하면 제품 설명이 오버레이로 표시됩니다. 그 오버레이에서 그는 첫 번째 오버레이 위에 다른 오버레이를 표시한 고객 리뷰 를 더 탭했습니다 . 제품 설명으로 돌아가기 위해 참가자는 상단 의 닫기 아이콘을 탭했습니다. 불행히도 그 작업은 오버레이 스택을 닫았고 참가자는 제품 목록으로 돌아가 선택을 잃었습니다. 자신의 잘못이 아니라 참가자가 잘못된 오버레이 해제 방법을 선택했습니다. 뒤로 이동하려면 화면의 뒤로 버튼이나 가로 스와이프 제스처를 사용해야 했습니다. Walmart 모바일 앱: 연구 참가자가 제품 목록(왼쪽 상단)에서 제품을 선택하면 오버레이(오른쪽 상단)에 표시되었습니다. 해당 제품에 대한 고객 리뷰 는 이전 오버레이 위에 다른 오버레이(왼쪽 하단)에 표시되었습니다. 사용자가 x 아이콘을 탭하여 제품 페이지로 돌아가면 대신 제품 목록 페이지(왼쪽 상단)로 이동했습니다. 고객 리뷰 오버레이 를 닫는 "올바른" 디자이너 승인 방법은 화면의 뒤로 화살표(노란색으로 강조 표시됨) 또는 가로 스와이프 제스처였습니다. 오버레이 해고 문제 이 예는 일반적으로 오버레이와 관련된 몇 가지 주요 문제를 보여줍니다. 사용자가 잘못된 오버레이 해제 방법을 선택합니다. 사용자의 작업이 손실됩니다. 누적된 오버레이는 혼란을 증폭시킵니다. 사용자가 잘못된 오버레이 해제 방법을 선택함 Walmart 예의 참가자는 오버레이 해제 방법 중 하나를 사용하여 고객 리뷰 오버레이에서 나와 제품 세부 정보 오버레이로 돌아갈 수 있습니다. 아래로 스와이프, 화면 왼쪽 가장자리에서 가로로 스와이프, 탭아웃 또는 두 개의 화면 버튼 중 하나를 누릅니다: 닫기 (x) 아이콘 또는 뒤로 화살표. 그는 어느 쪽이 원하는 결과를 얻을지 예측할 방법이 없었습니다. 그는 닫기 (x) 버튼을 추측했지만 (그는 모르고) 디자이너가 해당 기능을 위해 뒤로 화살표 또는 수평 뒤로 스와이프를 선택했습니다. 사용자가 잘못된 방법을 사용할 수 있는 또 다른 일반적인 시나리오는 오버레이가 전체 페이지처럼 보이는 경우입니다. 이 경우 사용자는 브라우저나 휴대폰의 뒤로 버튼을 사용하거나 가로로 스와이프하여 이전 보기로 돌아갈 수 있습니다. 그러나 오버레이는 기술적으로 별도의 페이지가 아니며 뒤로 버튼(적어도 표준 구현에서는)이 사람들을 이전 페이지 (이전 보기 가 아님)로 돌아가게 하기 때문에 결과적으로 사용자는 그들은 예상했다. 이 결과는 감각 방향 감각 상실과 통제력 부족에 기여합니다. LinkedIn 앱을 사용하여 일자리를 찾고 있던 또 다른 연구 참가자에게 일어난 일입니다. 그녀는 친숙한 회사인 GSK를 검색하고 LinkedIn의 인앱 브라우저에서 해당 회사의 웹 페이지로 이동했습니다. 그 페이지에서 그녀는 기본 탐색 메뉴를 열고 채용 정보를 선택했습니다. 그런 다음 하위 범주( 숙련 된 전문가)를 탐색 했지만 만족스럽지 않았기 때문에 메뉴에서 다시 상위 범주로 이동하기로 결정했습니다. 하지만 메뉴의 <채용> 버튼을 사용하는 대신(디자이너가 원하는 대로), 그녀는 안드로이드 폰의 뒤로단추. 그 제스처는 인앱 브라우저를 닫고 사용자를 회사의 LinkedIn 페이지로 다시 데려가 프로세스에서 메뉴를 닫고 사용자가 모든 노력을 잃게 만들었습니다. LinkedIn Android 앱: 참가자는 GSK 페이지(왼쪽 상단)에서 링크를 탭했고 인앱 브라우저에서 gsk.com을 표시했습니다(오른쪽 상단). 그녀는 순차 메뉴(오른쪽 아래)를 열고 Careers , Experienced Professionals (왼쪽 아래)를 차례로 선택한 다음 전화기의 뒤로 버튼을 사용하여 한 단계 위로 올라가 Careers 로 돌아가려고 했습니다 . 그러나 그 조치로 인해 그녀는 GSK의 Linked in 페이지(왼쪽 상단)로 돌아갔습니다. 사용자는 화면 상의 <채용 버튼(왼쪽 하단 스크린샷에서 강조 표시됨)을 대신 사용해야 했습니다. Walmart와 LinkedIn/GSK의 예 모두에서 디자이너의 관점에서 "올바른" 버튼(화면상의 뒤로 버튼)이 화면에 표시되었지만 다른 두 개의 버튼에서 일반적으로 다른 곳으로 이동하는 데 사용되는 경쟁이 있었습니다. 보기( Walmart 사용자의 경우 X 아이콘, LinkedIn 사용자 의 경우 전화기의 뒤로 버튼). 동일한 방식으로 레이블이 지정되어 있지만 다른 작업을 수행하는 여러 버튼이 페이지에 있는 경우 훨씬 더 혼란스럽습니다. 예를 들어 한 Instagram 사용자는 오버레이에 표시된 인앱 브라우저에서 Lowes의 웹사이트를 열었습니다. 그는 다른 오버레이를 사용하여 해당 제품에 대해 사용 가능한 사용자 정의를 표시하는 제품 페이지를 방문했습니다. 브라우저 오버레이와 제품 사용자 정의 오버레이에는 각각의 오버레이를 닫기 위한 x 아이콘이 있었습니다. 그러나 사용자가 제품 페이지로 돌아가고자 실수로 잘못된 페이지를 선택하고 대신 Instagram 보기로 돌아갔습니다. Lowes의 Instagram 쇼핑 페이지에서 쇼핑하는 참가자 는 웹사이트에서 보기 (왼쪽 상단)를 눌러 Lowes 사이트에서 더 많은 제품 세부 정보를 확인했습니다. 그는 인앱 브라우저(오른쪽 상단)에 제품 페이지가 표시되었고 해당 페이지에서 Number of Lights 를 탭하여 또 다른 오버레이(하단)를 열었습니다. 사용자가 두 번째 오버레이를 닫고 싶을 때 오른쪽 x 아이콘(강조 표시됨)을 사용하는 대신 왼쪽의 더 큰 X 를 탭 하여 브라우저 창을 닫고 Instagram 샵(왼쪽 상단)으로 돌아갔습니다. 사용자에게 현재 보기에서 다른 곳으로 이동할 수 있는 여러 방법(스와이프 제스처, 전화기의 뒤로 버튼, 화면상의 뒤로 버튼, 하나 이상의 닫기 버튼)을 제공하고 이러한 방법 중 일부가 다른 효과를 갖는 경우 사용자가 올바른 방법을 사용할 것임을 보장합니다. 실수로 잘못된 방법을 선택하면 혼란스럽고 짜증이 날 것입니다. 사용자의 작업이 손실됨 "잘못된" 오버레이 해제 방법을 선택하는 것이 실망스러울 수 있는 주요 이유는 실수로 인해 종종 사용자의 작업 손실이 발생하기 때문입니다. 실수로 프로세스에서 의도한 것보다 더 멀리 뒤로 이동하면 사용자는 처음부터 다시 시작하거나 포기해야 합니다. Walmart 사례의 참가자는 흐름에서 제외되어 처음부터 다시 시작하여 동일한 제품을 다시 찾아야 했습니다. LinkedIn 및 Instagram 사용자에게도 동일한 문제가 발생했습니다. 사용자가 작업을 잃기 쉬운 또 다른 상황은 실수로 부분 오버레이 외부를 탭하여 닫는 경우입니다. 예를 들어, Overstock.com에서 사용자가 순차 메뉴 에 사용된 모달 오버레이 외부를 실수로 탭하면 해당 메뉴에서 선택한 모든 하위 범주가 손실됩니다. Overstock.com은 사이트 메인 탐색을 위해 순차 메뉴를 사용했습니다. 사용자는 Decor(왼쪽)와 같은 메인 카테고리를 선택한 다음 Wall Decor (오른쪽)와 같은 2단계 하위 카테고리를 선택해야 했습니다. 메뉴 외부를 실수로 탭하면 메뉴가 닫히고 선택한 하위 범주의 현재 보기가 손실됩니다. 스택 오버레이는 혼란을 증폭시킵니다. Walmart 및 Instagram 사용자가 직면한 문제의 큰 부분은 서로 위에 여러 레이어의 오버레이가 있다는 것입니다. 사용자는 많은 레이어를 추적하지 않았고 실수로 마지막 레이어 대신 전체 스택을 닫았습니다. 이것은 매우 자주 발생합니다. 인앱 브라우저가 오버레이로 작동할 때 자주 발생하는 경향이 있지만 다른 상황에서도 발생할 수 있습니다. 예를 들어, 참가자 중 다른 한 명이 Google 지도를 사용하여 지역 레스토랑을 찾았습니다. 레스토랑 목록은 지도 상단의 하단 시트 오버레이에 표시되었습니다. 하단 시트는 전체 페이지를 차지하도록 확장될 수 있습니다. 그러나 참가자가 한 레스토랑을 선택하면 세부 정보 페이지가 첫 번째 레스토랑 위에 또 다른 오버레이로 표시됩니다. 레스토랑 목록으로 돌아가기 위해 참가자는 아래로 스와이프 제스처(일반적으로 하단 시트를 닫는 데 사용)를 사용했습니다. 그러나 그 결과 스택의 모든 시트가 닫히고 사용자가 인식하지 못한 레스토랑의 지도 보기로 돌아갔습니다. Google 지도 iPhone 앱: 레스토랑 검색 시 하단 시트(왼쪽 상단)에 표시된 레스토랑 목록과 지도가 표시되었습니다. 사용자가 목록을 아래로 스크롤하면 하단 시트가 전체 페이지를 차지하도록 확장됩니다(오른쪽 상단). 참가자가 레스토랑을 탭한 후 세부 정보 페이지는 목록 페이지 오버레이 상단의 전체 페이지 하단 시트(오른쪽 하단)에 표시되었습니다. 아래로 스와이프하여 레스토랑 보기를 닫고 레스토랑 목록으로 돌아가면 오버레이의 전체 스택이 손실되고 사용자는 지도(오른쪽)로 돌아갔습니다. 참가자는 자신의 레스토랑 목록이 표시될 것으로 예상했기 때문에(오른쪽 상단 스크린샷과 같이) 혼란스러워서 다시 검색을 다시 실행했습니다. 오버레이 해고 문제를 방지하는 방법 대체 패턴 사용 오버레이 문제를 피하는 가장 쉬운 방법은 가능한 경우 오버레이를 사용하지 않는 것입니다. 일부 콘텐츠는 특히 상황에 맞는 정보를 제공해야 하는 경우 오버레이로 가장 잘 표시됩니다. Google 지도의 목록 페이지는 필요한 오버레이의 좋은 예입니다. 사용자가 레스토랑을 탐색할 때 지도에 계속 표시되어야 합니다. 그러나 다른 경우에는 오버레이가 매우 불필요합니다. 예를 들어 Walmart의 제품 세부 정보는 쉽게 별도의 페이지에 있을 수 있고(아래 Revolve 앱에서와 같이) 고객 리뷰는 별도의 페이지에 표시될 수 있습니다(Revolve 앱에서도 마찬가지). 또는 확장 가능한 아코디언에서 접혀 있습니다(Nordstrom 앱에서와 같이). Revolve 모바일 앱은 별도의 페이지를 사용하여 제품 세부정보(왼쪽)와 리뷰(오른쪽)를 표시했습니다. Nordstrom 앱은 아코디언을 사용하여 리뷰 및 기타 항목 관련 정보를 표시하고, 전체 페이지 오버레이보다 부분적 오버레이 선호 이는 오버레이에 스크롤이 필요하지 않은 비교적 적은 양의 콘텐츠만 포함되어 있는 경우에 특히 좋습니다. 일반적으로 사용자가 일반 페이지가 아닌 오버레이를 다루고 있다는 사실을 알게 되면 브라우저의 뒤로 버튼을 사용하여 뒤로 돌아가려고 할 가능성이 줄어듭니다. Gmail(왼쪽) 및 NeimanMarcus.com(오른쪽)에서 사용하는 것과 같은 부분 오버레이는 인식하기 쉽고 사용자가 브라우저나 휴대전화의 뒤로 버튼 을 사용하여 오버레이를 닫도록 유도할 가능성이 적습니다 . 그러나 부분 오버레이에서 사용자가 스크롤해야 하는 경우 전체 화면 공간을 활용하지 않음으로써 사용자가 필요 이상으로 더 많은 작업을 수행하도록 할 수 있습니다. 또한 실수로 오버레이를 닫은 경우 페이지에서 해당 위치를 잃을 가능성이 더 높아집니다. 오버레이 스택을 사용하지 마십시오 가끔 오버레이를 사용하게 되더라도 사용자가 실수로 전체 스택을 닫고 작업을 잃을 가능성이 높아지므로 오버레이 위에 있는 오버레이를 멀리하십시오. 오버레이를 닫기 위한 닫기 버튼 포함 명확한 X 버튼이 있는 오버레이는 실수로 닫힐 가능성이 적었습니다(다른 닫기 버튼도 화면에 표시되지 않은 경우). 사용자가 아래로 스와이프와 같은 제스처를 사용하여 오버레이를 닫을 것이라고 가정하는 대신 이러한 버튼 중 하나를 포함하는 것이 좋습니다. 하단 시트의 경우 사용자가 하단 시트를 닫기 위해 아래로 스와이프해야 한다는 것을 알 것이라고 가정하지 마십시오. 해당 제스처를 지원해야 하지만 사용자가 표시되는 X 버튼을 사용하여 오버레이를 닫을 수 있도록 허용해야 합니다. Best buy 앱은 제품 이미지를 미리 보거나(왼쪽) 장바구니에 항목을 추가하기 위한 전체 오버레이를 위해 왼쪽 상단의 선명한 X 버튼을 사용했습니다(오른쪽). 내장된 뒤로 버튼은 오버레이를 닫아야 합니다. 사용자가 실수로 브라우저나 휴대폰의 뒤로 버튼을 사용하거나 가로로 살짝 밀기 제스처를 사용하여 오버레이를 닫을 위험을 감수하는 대신 내장된 뒤로 를 사용하여 오버레이를 닫도록 지원합니다. 따라서 사용자가 브라우저나 휴대폰의 뒤로 버튼 또는 제스처를 사용하여 실행 취소 역할을 하고 현재 보기에서 이전 보기로 돌아갈 수 있도록 해야 합니다. Dillards.com은 브라우저의 뒤로 버튼을 사용하여 전체 오버레이를 닫고(오른쪽) 제품의 세부 정보 페이지(왼쪽)로 돌아가는 것을 지원했습니다. 결론 오버레이는 UI 구성 요소(예: 탐색 메뉴)와 콘텐츠를 모두 표시하는 데 사용되는 모바일에서 널리 사용되는 디자인 요소입니다. 불행히도, 몇 가지 심각한 사용성 문제로 이어질 수 있습니다. 실수로 해제될 수 있으므로 사용자가 작업을 잃게 되고 인터페이스에서 단계를 다시 추적해야 합니다. 오버레이 스택은 특히 실수로 닫힐 가능성이 높습니다. 디자이너는 가능하면 오버레이를 멀리하고 대신 다른 디자인 구성 요소(예: 아코디언 또는 전체 페이지)를 사용하는 것이 좋습니다. 오버레이를 사용해야 하는 경우 사용자가 일반 페이지와 구분할 수 있도록 명확한 기호를 만들고 오버레이 내부에 제한된 콘텐츠만 표시합니다. 모든 오버레이(하단 시트 포함)에 대해 오버레이를 해제하는 다음 두 가지 방법을 지원합니다. 지우기 버튼 과 기본 제공(휴대전화 또는 브라우저) 뒤로 버튼 또는 뒤로 제스처.