1. UX : 메시지 박스는 대부분 악하다
UX 관점에서 경고 상자는 모든 경우에 좋지 않습니다. 데스크톱 앱에서. 웹 앱에서 알림 또는 인라인 JavaScript 메시지로. 어디에나.
이유를 알고 싶다면 Alan Cooper¹의 About Face 3을 읽을 수 있습니다. 이것은 어떻게 워크 플로를 방해하고 사용자를 성가 시게 하는지를 잘 설명 하고 현재 소프트웨어에 존재 하는 거의 모든 경고 상자가 얼마나 잘못되었는지를 설명 합니다. 542 페이지의 ""Wolf! "를 부르는 대화 상자는 경고 상자가 정기적으로 해제되어 모델이 완전히 손상되었다고 설명합니다. 이 책의 543 페이지에는 세 가지 주요 설계 원칙이 나와 있습니다.
- 묻지 마십시오.
- 모든 행동을 뒤집을 수있게하십시오.
- 사용자가 실수를 피할 수 있도록 모덜리스 피드백을 제공하십시오.
그런 다음 저자는 올바른 설계 방식으로 경고 상자를 교체하는 방법을 알려줍니다.
프롬프트 메시지는 약간 다릅니다. 그럼에도 불구하고 그들은 앱의 사용자 경험을 깨뜨립니다. 사용자가 무언가를 입력하도록하려면 텍스트 상자 나 텍스트 영역을 사용하여 필요할 때 JavaScript로 장식하십시오. 게으르지 말고 RIA 및 AJAX 지원 앱 시대에 풍부한 인터페이스를 제공하십시오 . 모든 경우에 JavaScript가 비활성화되면 프롬프트가 표시되지 않습니다.
웹 페이지에서 경고 상자와 프롬프트는 모두 성가시다. 몇 가지 예 :
일부 포럼에서는 목록 항목을 무한정 프롬프트하여 목록을 작성할 수 있습니다. 이는 목록을 작성하는 동안 복사 붙여 넣기를 포함하여 페이지 자체를 사용할 수 없음을 의미합니다. 당신은 또한 하나의 작은 필드가 있습니다. 긴 텍스트는 어떻습니까? 굵은 이탤릭체는 어떻습니까?
"계속하면 사진이 프로필에서 확실하게 제거됩니다. 계속 하시겠습니까?" . 물론입니다! 그렇지 않으면 "내 프로필에서 사진 제거"를 클릭합니까? 왜 당신의 웹 앱이 내가 바보라고 생각합니까? 실제로 Gmail과 같은 Google 애플리케이션은 올바른 접근 방식을 보여줍니다. 원하는 것을 제거, 삭제, 제거 할 수 있으며 그렇게하면 앱에 작은 "실행 취소"링크가 표시됩니다.
"우리의 가장 큰 설문 조사를 원하십니까?" . 글쎄, 실제로 나는 당신의 웹 사이트를 방문하기 위해 거기에 있었지만, 당신은 당신의 성가신 메시지로 나를 귀찮게하기 때문에 오히려 다른 곳으로 갈 것입니다.
"저작권이 보호 된 사진을 보호하기 위해이 웹 사이트에서 오른쪽 클릭을 사용할 수 없습니다 . " 글쎄, 실제로 내 의견을 보내기 전에 맞춤법 검사기의 언어를 변경하려면 마우스 오른쪽 버튼을 클릭했습니다. 물론 철자를 확인하지 않고 보내겠습니다.
결론 : 사용자 경험의 관점에서 응용 프로그램은 대부분 메시지 상자를 잘못 사용합니다.
하지만 기다려! 많은 저품질 웹 사이트는 JQuery 메시지를 성가신 반투명 배경으로 모든 페이지를 다루는 성가신 경고 상자를 대체합니다. 따라서 단점이 남아 있습니다.
웹 애플리케이션에서 메시지 상자를 사용하지 않는 또 다른 이유가 있습니다.
2. 디자인 : 경고 상자는 자신의 디자인이 있습니다
경고 상자를 전혀 디자인 할 수 없습니다. 색상, 크기 및 글꼴을 변경할 수 없습니다. 이것은 사용자에게 더욱 성가신 일입니다. 당신은 웹 응용 프로그램을 사용하고 있었고, 워크 플로우가 어디에서나 보이고 응용 프로그램의 시각적 측면과 일치하지 않는 메시지로 인해 깨졌습니다. 버튼의 언어는 웹 응용 프로그램이 아닌 OS / 브라우저 언어와 일치한다고 계산하지 않습니다.
디자이너에게는 JavaScript 메시지가 경고 상자보다 훨씬 강력합니다.
그들은 또한 훨씬 더 광범위합니다. 대담하고 이탤릭체를 추가 할 수 있으며, 자신의 버튼을 선택할 수 있습니다 (어떻게하면 "죄송합니다. 입력 한 비밀번호는 유효하지 않습니다. [비밀번호 재설정] [다른 비밀번호 사용] [취소]"?) ²) ².
3. JavaScript : 응용 프로그램 흐름이 중지됩니다
경고 상자를 표시하면 사용자가 클릭 할 때까지 JavaScript 실행이 중지됩니다. 웹 사이트에서는 문제가 없을 수 있습니다. 웹 앱에서는 종종 문제가됩니다.
4. 샌드 박스 : 사용자가 컴퓨터를 재부팅하도록 강요하지 마십시오
당신에게 무한한 수의 메시지 상자 를 보여주는 엉터리 웹 사이트를 기억 하십니까? 기술적 인 배경이 충분하지 않은 사용자가 작업을 계속할 수있는 유일한 방법은 실제로 컴퓨터를 재부팅하는 것입니다. 경고 상자가 웹 사이트 나 웹 응용 프로그램의 범위를 벗어납니다. 사용자가 브라우저의 다른 탭에 액세스하지 못하게 할 권한이 없습니다 ³.
동일한 문제로 인해 브라우저는 다른 방식으로 해결해야했습니다. 예를 들어 Firefox는 탭에 경고를 표시 할 때 다른 탭에 대한 액세스를 허용합니다. 반면에 Chrome에서는 더 이상 페이지에서 경고 상자를받지 않고 다른 탭에 대한 액세스는 차단하고 있는지 확인할 수 있습니다.
Firefox 접근 방식은 완벽하게 유효하지만 Chrome은 여전히 모든 탭을 차단하기 때문에 비판을받을 수 있으며 문제가 발생합니다. 정말 중요한 것을 보여 주려고 했습니까? 맞아, 사용자는 그것을 보지 못할 것입니다.
사실은 동일하게 유지되며 대부분의 사용자에게는 경고 상자가 표시되므로 여전히 사용자에게 친숙하지 않으며 충분한 기술 배경이없는 사용자를 심각하게 차단할 수 있습니다. 인라인으로 JavaScript 메시지는 페이지를 차단하지만 브라우저 자체는 차단할 수 없습니다. 웹 앱 모델은 일종의 샌드 박싱이므로 예를 들어 사용자 키보드에 액세스하거나 컴퓨터를 재부팅하거나 하드 디스크에서 파일을 읽거나 전체 화면으로 이동하거나 두 개의 모니터를 사용할 수 없습니다. 샌드 박싱 모델 .
마지막으로, 응용 프로그램에서 경고 상자를 표시하기로 결정할 때 사용자가 다른 탭에 있으면 어떻게해야합니까? 사용자가 중요한 일을하고 있고 현재 앱과 상호 작용하지 않으려면 어떻게해야합니까?
¹ Face 3, 인터랙션 디자인의 필수 요소 , Alan Cooper, Robert Reimann 및 David Cronin 정보 ISBN 978-0-470-08411-3; 25 장 오류, 경고 및 확인
² 이것은 단지 예일뿐입니다. 웹 응용 프로그램에서는 디자인 선택이 잘못되기 때문에 수행하지 마십시오.
³ 데스크톱 응용 프로그램의 세계와 비교하려는 경우 인라인 JavaScript 메시지는 데스크톱 응용 프로그램의 메시지 상자와 같습니다. 반면, 브라우저의 경고 상자는 다른 데스크탑 응용 프로그램에 액세스하는 것을 차단하는 전체 화면 불투명 배경에서 아무 데나 표시되는 창과 같습니다. 내 컴퓨터에서 한 번 수행하기로 결정한 모든 앱은 즉시 영구적으로 제거됩니다.