모달은 대부분의 디자이너가 완전히 이해하지 못하는 유일한 UX 개념입니다. (Modality Is the One UX Concept That Most Designers Don’t Fully Understand)

이 글은 Fabian Sebastian Modality Is the One UX Concept That Most Designers Don’t Fully Understand 글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다

대부분 젊은 디자이너들은 직감을 바탕으로 디지털 제품을 만듭니다. 이것이 많은 경우에 효과가 있을 수 있지만, 직감에 의존하는 대신 잘 구축된 UI 솔루션을 논리적으로 구성하도록 도와주는 증명된 공통 표준이 있습니다.
이 글에서는 사용자 인터페이스의 일반적인 모달 표준을 살펴보고, 화면 종류가 두 가지 밖에 없는 이유에 대해 논의하고, 애플리케이션과 웹 사이트가 정보 아키텍처(information architectures)와 사용자 흐름을 직관적인 사용자 인터페이스로 전환할 때 앱과 웹 사이트가 어떻게 실패하는지 분석할 것입니다. 그리고 우리는 새끼 고양이들에 대해 이야기 할 것입니다.
대담한 주장으로 탐사를 시작합시다 :

화면의 유형은 오직 두 가지뿐입니다

  1. Modal Screens (모달 화면)
  2. Non-Modal Screens (비 모달 화면)
이게 전부입니다. 설명해 드리겠습니다. (거의) 모든 상상할 수 있는 뷰포트(viewport)는 이 두 범주 중 하나에 속합니다. 모달 화면(Modal Screen)과 비 모달 화면(Non-Modal Screen)을 구별하는 것을 이해하기 위해서는 우선 모달 화면을 정의해야 합니다.

"모달 화면"이란 무엇입니까?

presentation
Modal Screen examples
모달 화면은 다양한 모양과 크기로 제공됩니다 :
  • Fullscreen Modal Views (좌측에서 1번)
  • Popups (좌측에서 2번)
  • Pop-Overs (좌측에서 3번)
  • Lightboxes (좌측에서 4번)
  • Alerts/Notifications
  • (Multi-step) Dialogs
모달 화면과 모달이 아닌 화면 모두 하위 보기(child views)로, 응용 프로그램의 기본 창에 종속됩니다. 하지만 한 가지 중요한 차이점이 있습니다 :
"[모달 창 - A modal window]은 메인 창을 비활성화하는 모드를 만듭니다. 그러나 모달 창 앞에는 자식 창으로 표시합니다. 부모 응용 프로그램으로 돌아가기 전에 사용자가 모달 창과 상호 작용해야 합니다. "- Wikipedia
대부분의 모달 화면들은(특히 데스크탑 응용 프로그램) 메인 윈도우를 시각적으로 오버레이 하기 때문에 쉽게 식별할 수 있습니다. 이것은 백그라운드에서 메인 윈도우를 페이드아웃하는 팝 오버 메뉴(popover menus) 및 팝업 대화 상자( popover dialogs), 라이트 박스(lightboxes), 경고(alerts)... 등입니다.
그러나 모바일 화면 공간은 제한되어 있으므로 많은 모바일 모달 화면이 전체 화면을 차지합니다. 더 이상 기본 창을 볼 수 없으므로 비 모달 (Non-Modal) 화면과 구별하기가 더 어려워집니다.
presentation
Example iOS: Modal Screens on mobile often hide the app’s main window completely
주요 차이점은 각 화면과 상호 작용할 수 있는 방법에 있습니다. 비 모달 화면을 사용하면 사용자는 상위 화면으로 돌아갈 수 있지만 모달 화면에서는 주 창으로 돌아가거나 (이 예에서는 "저장") 사용자가 현재 작업을 취소해야 합니다.
비 모달 화면에 대한 가장 명확한 시각적인 표시는 네비게이션-navigation (이 예에서는 탭 바-Tab bar)의 가시성입니다. 비 모달 화면 (Non-Modal Screens)은 사용자가 서브 페이지에 있을지라도 주 네비게이션 레벨에서 앞뒤로 이동할 수있게합니다. 반면 모달 화면에서는 사용자가 기본 네비게이션을 다시 사용하기 전에 창을 닫을 것을 요구합니다 (이 예에서는 "저장"또는 "취소"). 이 구분은 대부분의 앱이 실패하고 있는 이유 중 하나이며 "Tab Bars is the new Hamburger Menus"라는 기사를 쓴 이유 중 하나입니다.

왜 모달이 사용되어야 하는가?

모달 화면은 간단한 문제를 해결합니다 : 사용자는 쉽게 산만 해지기 때문에 때로는 주의를 기울여야 합니다 (source). 모달 화면 (Modal Screen)은 정확히 말하면 사람들이 무언가를 산만하게 계속하기 전에 하나의 작업에 집중하도록 합니다.
"업무(task)가 완료되거나 메시지 또는 보기(view)를 닫을 때까지 사람들이 다른 일을 하지 못하도록 방지하여 집중을 하도록 만듭니다"- Apple

모달은 언제 사용해야 합니까?

모달 화면이 어떻게 보이는지, 비 모달 화면과 비교할 때 그 목적이 무엇인지 알게 되었으므로 "우리는 어떤 상황에서 사용해야 합니까?"라고 자문해야 합니다.
저는 새끼 고양이들에게 약속했으니... 우리는 독창적이고 혁신적인 실리콘 밸리 (Silicon Valley) 응용 프로그램을 만들고 있다고 상상해 봅시다. "Purrrfect" - 사용자는 귀여운 고양이 GIF를 업로드, 보기(view), 코멘트 할 수 있는 새끼 고양이 데이터베이스입니다. 화려한 개념입니다.
presentation
Source: https://giphy.com/gifs/tDgXAst2PhIYw
앱의 (단순화된) 사용자 흐름은 다음과 같습니다 : 사용자가 앱을 열고, 몇 가지 사용 가능한 탭 중 하나 (새끼 고양이 데이터베이스)를 들어가고 새끼 고양이 중 하나를 클릭한 다음 (세부 단일 새끼 고양이 보기로 입장) 코멘트 섹션 (코멘트 섹션을 입력).
presentation
Purrrfect user flow
또한, 사용자는 각 단계에서 추가 조치를 할 수 있습니다. 예를 들어, 새끼 고양이 데이터베이스 화면에서 다른 새끼 고양이를 데이터베이스에 추가할 수 있습니다. 또는 새끼 고양이 세부 화면에서 데이터를 편집할 수 있습니다.
이 화면들 중 어느 것이 모달이며 그렇지 않은 화면은 무엇입니까? 분류는 단순하지만 아무것도 아닙니다. - 이것은 제 개인적인 경험 법칙입니다.
독립적인 프로세스에는 모달을 사용하고 그 밖의 모든 것에는 모달이 아닌 화면을 사용하십시오.
"자체 포함된 프로세스"는 시작과 끝점이 명확한 모든 작업입니다. 이 작업의 제한된 시간 동안 사용자는 일반 사용자 흐름에서 벗어나 작업에 집중할 수 있게 한 다음 시작 지점으로 다시 이동시킵니다.
Google 구문은 다음과 같습니다 : Modal Screens (dialogs) for ...
"특정 사용자 작업, 결정 또는 승인을 요구하는 중요한 정보"- Google
우리의 purrrfect 응용 프로그램의 경우, 이는 기본 사용자 흐름 (응용 프로그램을 탐색하는 데 사용됨)이 모달이 아니라는 것을 의미합니다. 그러나 새끼 고양이 추가, 새끼 고양이 편집 및 의견 쓰기와 같은 특별한 시간제한 조치는 모달입니다.
presentation
사용자가 메인 플로우로 되돌아가기 전에 모든 모달 동작을 취소하거나 성공적으로 완료할 수 있습니다. 이러한 이유로 모달 화면은 뒤로 버튼 대신 취소 및 저장 버튼 (또는 다른 유사한 작업)을 사용합니다. 비 모달 화면에서 뒤로 버튼이 동시에 저장 작업을 수행하는 경우 취소 및 저장 버튼을 사용하여 모달 화면으로 전환하는 것이 좋습니다. 모순은 또한 사실입니다. 취소 및 저장과 같은 두 가지 다른 동작이 모달 화면에서 (동일한 동작을 수행하기 때문에) 이해되지 않으면 비 모달 보기로 전환할 수 있습니다. 이 경우 기본 네비게이션 (예 : 탭 바)이 화면에 계속 표시되어야 합니다.
우리의 게임을 변경하는 응용 프로그램으로 돌아가 봅시다. 다음과 같이 인터페이스를 사용할 수 있습니다.
presentation
possible purrrfect user interface
실제 세계에서는 모달과 비 모달의 구분이 덜 명확합니다. 예를 들어, 이미지의 전체 화면 보기는 프로세스 또는 대화 상자(dialog)가 아니지만 대부분의 응용 프로그램에서 모달입니다. 그리고 다른 특별한 상황에서도 모달은 사용자를 집중시키기 위해 사용됩니다. 우리의 새끼 고양이 디테일 화면(중간)이 편집자 코멘트와 같은 다른 액션 없이 뷰가 마지막인 경우, 우리는 모달 (전체 화면보기)을 사용했을 수 있습니다. 그러나 사용자가 정보 아키텍처를 보다 자세히 탐색하고 다양한 추가 작업 (주석 표시, 편집 등)을 수행할 수 있으므로 더 이상 명확한 끝 점이 없으므로 주요 흐름의 일부입니다. 따라서, 모달이 아닌 뷰.
액션이 자체 포함되어 있는지 또는 앱의 일반적인 탐색 플로우의 일부인지 평가하고 모달의 의미를 판단하는 것은 디자이너의 책임입니다. 의심이 되는 경우에는 Apple의 말을 기억하십시오.
모달의 사용을 최소화하십시오. 일반적으로 사람들은 비선형 방식으로 앱과 상호 작용하는 것을 선호합니다. 누군가의 주의를 끄는 것이 중요하거나, 응용 프로그램을 계속 사용하거나 중요한 데이터를 저장하기 위해 작업을 완료하거나 포기해야 하는 경우에만 모달 컨텍스트를 만드는 것이 좋습니다. — Apple
면책 조항 : 물론 인터페이스는 모달과 비 모달을 엄격하게 구분하지 않고도 완벽하게 작동할 수 있습니다. 그러나 모달의 개념은 Apple, Google, Microsoft 및 기타 기업의 인터페이스 생태계에 깊숙이 묻혀 있으며 사용자는 이에 상응하는 기대치를 가지고 있습니다.
예를 들어, 새로운 앱 스토어는 "Today" 탭의 하이라이트를 모달로 열지 만, 사용자는 여전히 더 많은 추천을 탐색 할 수 있습니다. 모달의 맨 아래 (명확한 종점 없음). 이렇게 하면 사용자는 고정된 끝점을 사용하지 않고도 모달의 더 깊은 곳을 탐색할 수 있습니다. 이 과정에서 탭을 변경할 수 없으며 더 이상 하위 페이지의 모달을 닫을 수 없습니다. 추천 이외의 다른 앱에서 동일한 앱 화면을 열면 화면이 비 모달로 표시됩니다. 이렇게 하면 탭 바 및 뒤로 작업이 유지됩니다 (현재 탭 바 아이콘을 다시 클릭하면 주 화면으로 이동합니다).
presentation
inconsistent Apple UI
왼쪽의 불일치는 다음과 같이 수정될 수 있습니다...
  • A: … 뒤로 버튼으로 비 모달 하위 화면에서 강조 표시 열기 및 탭 바 유지
  • B: … 사용자가 모달 내부 링크를 클릭하고 앱의 상위 수준에서 비 모답 하위 화면으로 계속 진행하는 즉시 모달 화면 닫기

모달은 어떻게 사용되어야 합니까?

우리는 모달을 사용해야 하는 시기에 대해 전반적으로 이해해야 합니다. 남아있는 유일한 질문은 "어떻게 디자인할까요?"입니다. 다음은 모달에 대한 빠른 체크리스트입니다.
  • 상단 네비게이션 바에 항상 닫기 버튼을 표시하십시오 (또는 'cancel'/ 'discard'/ 'minimize'/ ...). 사용자가 잃어버리면 쉽게 오버레이를 닫고 앱의 최상위로 돌아갈 수 있습니다.
  • iOS 및 Android의 취소 버튼은 네비게이션 바의 왼쪽 상단에 가장 일반적으로 배치됩니다. Android는 "닫기"/ "X"아이콘을 선호하는 반면 iOS는 "취소"텍스트를 선호합니다. 그러나 아이콘 버튼도 iOS에서 널리 사용되고 널리 이해됩니다.
  • iOS 및 Android의 저장 버튼은 기본적으로 네비게이션 바의 오른쪽 상단에 있습니다. 그러나 이 배치는 더 큰 디바이스에서 도달할 수 없습니다. 따라서 화면 하단의 고정 플로팅 배치 또는 페이지 끝의 인라인 배치는 제가 개인적으로 권장하는 대체 배치입니다.
presentation

다중 단계 모달

모달 대화 상자가 여러 단계 또는 하위 화면으로 구성되는 즉시 상황이 더 어려워집니다. 기본적으로 계속 버튼이 오른쪽 상단에 표시됩니다. 두 번째 단계 화면은 새 모달 화면을 열지 않지만 대신 모달 화면 내에 있으며 기존 모달 오버레이의 모달이 아닌 자식 화면으로 표시됩니다.
앞에서 권장 한대로 화면 맨 아래에 기본 동작 ( "저장", "적용"또는 "계속")을 배치하면 모달의 두 번째 단계의 오른쪽 상단 영역에서 취소 버튼 (선택 사항)의 공간을 확보할 수 있습니다. 왼쪽에서 오른쪽으로 이동하지만이 배치는 하위 화면에서 모달 화면을 닫을 수 있는 기능을 제공하지 않는 것보다 훨씬 좋습니다.
presentation

애니메이션

지금까지 iOS와 Android는 모달을 사용하는 방식이 매우 유사합니다. 그러나 애니메이션을 보면 다릅니다.
  • iOS: 애니메이션은 iOS에서 매우 표준화되었습니다. 비 모달 화면은 오른쪽에서 프레임 안으로 밀어 넣습니다. 탭 바는 화면 하단에 그대로 유지됩니다. 맨 위의 네비게이션 모음도 그대로 유지되지만 해당 내용은 사용자 정의 전환으로 사라집니다. 이 애니메이션은 또한 손이 닿지 않는 뒤쪽 버튼을 수용할 수 있는 뒤로 이동하는 데 사용된 가장자리 넘기기 제스처의 기초를 제공합니다. 모달 화면은 프레임의 하단에서부터 들어가고 전체 인터페이스 (새로운 상단 네비게이션 바)를 오버레이 합니다. 그들은 가장자리를 쓸어 넘기는 제스처를 사용하지 않으며, 제스처를 닫기 위해 맞춤 풀 다운을 하면 저장할 것이 없을 경우 도움이 될 수 있습니다.
  • Android : Android의 애니메이션은 훨씬 다양합니다. Material Design guidelines에서 '의미 있는 전환(meaningful transitions)'을 사용할 것을 권장합니다. 상단 탐색 막대가 내용을 페이드 하는 동안 "자식 요소가 손을 들어 올려 제자리에서 펼쳐집니다". 그러나 Android는 모달 애니메이션과 넌 모달 애니메이션을 구별하지 않습니다.

결론

많은 디자이너들이 직감을 바탕으로 제품을 디자인합니다. 때로는 직감이 평범보다 중요합니다. 그러나 그것이 합리적 일 때 공통 표준을 적용하거나 무시하기 위해서는 공통 표준을 아는 것이 중요합니다.
제 생각에 모달의 개념은 오늘날의 앱에서 가장 무시당하는 UX 원칙 중 하나입니다. 교차 플랫폼 응용 프로그램과 웹 기반의 하이브리드는 플랫폼 지침 및 규범을 사용하기가 쉽지 않습니다. 그러나 양식의 일반적인 개념은 필요한 경우 이를 깨뜨리기 위해 익숙해야 하는 지침입니다.

이 글은 번역 글입니다. 원본 링크입니다.



https://www.facebook.com/groups/224179755005643/
안녕하세요! Early adopter입니다.페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp