"구식"으로 간주되는 JavaScript의 프롬프트, 확인 및 경고 [닫힘]


21

최근에는 체육관을위한 웹 기반 관리 시스템을 개발하고 있습니다. 이전 앱은 Visual Basic으로 개발되었습니다. 새로운 응용 프로그램의 경우 모든 프론트 엔드 스크립팅은 jQuery를 사용하고 서버는 PHP 및 MySQL을 실행합니다. 일반적인 엘 체아 리눅스 기반 스택입니다.

어쨌든, 오늘날 JavaScript의 프롬프트, 확인 및 경고 메시지 대화 상자가 왜 그렇게 많이 사용되지 않는지 궁금했습니다. 모달 창 및 경고 메시지를위한 많은 jQuery 플러그인이 있으며, 언어가 이미 제공하고있는 모든 것을 모방하려고 시도하며 모든 브라우저가 올바르게 지원해야합니다.

복잡한 양식 및 특수 요구 사항에는 수작업 또는 플러그인 기반 솔루션을 사용하는 것이 좋지만 단일 값을 요청하거나 레코드 삭제를 확인해야하는 경우 왜 웹 응용 프로그램에 이러한 오버 헤드를 추가해야합니까? 또한 iOS 및 Android는 프롬프트, 확인 및 경고를 사용할 때 잘 조정 된 메시지 대화 상자를 제공합니다.


7
"엘 싸구려?" 정말? 그게 조금 흥미롭지 않습니까?
asthasr

1
혼란 스러워요. 먼저 응용 프로그램이 Visual Basic으로 개발되었다고 말한 다음 서버가 PHP를 실행하고 있다고 말합니다. 응?
jhocking

@ jhocking : 이전 시스템은 VB로 작성된 데스크톱 응용 프로그램이라고 말하고 새 시스템 (작성중인 시스템)은 LAMP 스택으로 작성됩니다.
요르단

이전 앱이 VB로 작성된 것처럼 들리며 현재 웹 프론트 엔드를 만들고 있습니다.
GrandmasterB

답변:


56

1. UX : 메시지 박스는 대부분 악하다

UX 관점에서 경고 상자는 모든 경우에 좋지 않습니다. 데스크톱 앱에서. 웹 앱에서 알림 또는 인라인 JavaScript 메시지로. 어디에나.

이유를 알고 싶다면 Alan Cooper¹의 About Face 3을 읽을 수 있습니다. 이것은 어떻게 워크 플로를 방해하고 사용자를 성가 시게 하는지를 잘 설명 하고 현재 소프트웨어에 존재 하는 거의 모든 경고 상자가 얼마나 잘못되었는지를 설명 합니다. 542 페이지의 ""Wolf! "를 부르는 대화 상자는 경고 상자가 정기적으로 해제되어 모델이 완전히 손상되었다고 설명합니다. 이 책의 543 페이지에는 세 가지 주요 설계 원칙이 나와 있습니다.

  • 묻지 마십시오.
  • 모든 행동을 뒤집을 수있게하십시오.
  • 사용자가 실수를 피할 수 있도록 모덜리스 피드백을 제공하십시오.

그런 다음 저자는 올바른 설계 방식으로 경고 상자를 교체하는 방법을 알려줍니다.

프롬프트 메시지는 약간 다릅니다. 그럼에도 불구하고 그들은 앱의 사용자 경험을 깨뜨립니다. 사용자가 무언가를 입력하도록하려면 텍스트 상자 나 텍스트 영역을 사용하여 필요할 때 JavaScript로 장식하십시오. 게으르지 말고 RIA 및 AJAX 지원 앱 시대에 풍부한 인터페이스를 제공하십시오 . 모든 경우에 JavaScript가 비활성화되면 프롬프트가 표시되지 않습니다.

웹 페이지에서 경고 상자와 프롬프트는 모두 성가시다. 몇 가지 예 :

  1. 일부 포럼에서는 목록 항목을 무한정 프롬프트하여 목록을 작성할 수 있습니다. 이는 목록을 작성하는 동안 복사 붙여 넣기를 포함하여 페이지 자체를 사용할 수 없음을 의미합니다. 당신은 또한 하나의 작은 필드가 있습니다. 긴 텍스트는 어떻습니까? 굵은 이탤릭체는 어떻습니까?

  2. "계속하면 사진이 프로필에서 확실하게 제거됩니다. 계속 하시겠습니까?" . 물론입니다! 그렇지 않으면 "내 프로필에서 사진 제거"를 클릭합니까? 왜 당신의 웹 앱이 내가 바보라고 생각합니까? 실제로 Gmail과 같은 Google 애플리케이션은 올바른 접근 방식을 보여줍니다. 원하는 것을 제거, 삭제, 제거 할 수 있으며 그렇게하면 앱에 작은 "실행 취소"링크가 표시됩니다.

  3. "우리의 가장 큰 설문 조사를 원하십니까?" . 글쎄, 실제로 나는 당신의 웹 사이트를 방문하기 위해 거기에 있었지만, 당신은 당신의 성가신 메시지로 나를 귀찮게하기 때문에 오히려 다른 곳으로 갈 것입니다.

  4. "저작권이 보호 된 사진을 보호하기 위해이 웹 사이트에서 오른쪽 클릭을 사용할 수 없습니다 . " 글쎄, 실제로 내 의견을 보내기 전에 맞춤법 검사기의 언어를 변경하려면 마우스 오른쪽 버튼을 클릭했습니다. 물론 철자를 확인하지 않고 보내겠습니다.

결론 : 사용자 경험의 관점에서 응용 프로그램은 대부분 메시지 상자를 잘못 사용합니다.

하지만 기다려! 많은 저품질 웹 사이트는 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 메시지는 데스크톱 응용 프로그램의 메시지 상자와 같습니다. 반면, 브라우저의 경고 상자는 다른 데스크탑 응용 프로그램에 액세스하는 것을 차단하는 전체 화면 불투명 배경에서 아무 데나 표시되는 창과 같습니다. 내 컴퓨터에서 한 번 수행하기로 결정한 모든 앱은 즉시 영구적으로 제거됩니다.


1
질문은 무한 또는 스팸 팝업과 관련이 없으므로 여기에서 왜 언급하고 있습니까? 그리고 JS 팝업이 스타일을 지정할 수 없다는 것이 반드시 나쁜 것은 아닙니다. 제대로 사용하면 (사용자에게 뭔가 중요한 것을 알리기 위해) 사용자가 다른 어떤 일을하기 전에이를 해결하도록 강요합니다.
Graham

이것은 질문에 대답하지 않습니다.
CaffGeek

1
"경고 상자를 표시 할 때 사용자가 클릭 할 때까지 JavaScript가 실행을 중지합니다."- confirm()prompt(); 을 사용 alert()하면 동작이 브라우저에 따라 다릅니다 (alert ()가 표시 되어도 실행이 계속 될 수 있습니다. 이론적 근거는 "어쨌든 유일한 방법이 있습니다").
Piskvor

1
@ Graham : 당신은 무한한 팝업에 맞습니다; 나는이 시점에서 주제를 벗어났습니다. 나는 이것을 더 잘 개혁하려고 노력했다. 중요한 내용에 대한 경고에 대해서는 내 대답의 네 번째 요점을 참조하십시오. 예, 사용자가 작업을 확인하기 전에 모든 것을 중지하고 싶을 수도 있지만 다른 탭은 그렇지 않으므로 브라우저의 모든 탭을 차단할 수는 없습니다. 귀하의 웹 응용 프로그램에 속합니다.
Arseni Mourzenko

1
@BornToCode : 대안이 없습니다. 사용자 화면에 사진을 표시하자마자 사진이 복사되는 것을 막을 방법이 없습니다. 두 번째 질문은 더 구체적이어야합니다. ux.se를 시도 하십시오 .
Arseni Mourzenko

3

결론 : 기본 프롬프트, 확인 및 경고 대화 상자는 사이트 스타일이 아니라 브라우저 스타일과 일치합니다. 대부분의 UI 사용자는 모든 대화 상자가 사이트의 UI와 함께 흐르기를 원합니다. 이들은 모달 창을 사용하여 MSIE 또는 FF의 기본 회색 및 파랑이 아니라 사이트 UI와 동일한 글꼴 및 색상을 사용하여 메시지를 표시하고 데이터를 수집합니다.


2

다른 곳에서 멋진 대화 상자가 필요하지 않은 경우 오버 헤드를 추가하는 것입니다. 이 시점에서 기능이 브라우저의 일부로 사용되는지 또는 사용중인 프레임 워크의 일부로 포함되는지는 크게 다르지 않으며 모든 팝업을 일관되게 보이게 할 수 있습니다.

자바 스크립트를 사용하고 프레임 워크를 사용하지 않고도 많은 것을 할 수 있지만 프레임 워크를 사용할 수 있기 전에 자바 스크립트에서 개발하는 것과 같은 것이 무엇인지 기억합니다.


1

브라우저가 잘 처리하지 않기 때문 입니다. 알다시피, 일반적으로 모달 대화 상자이며 사용자가 브라우저를 이동하거나 크기를 조정할 수 없을뿐만 아니라 다른 탭에 액세스하지 못하게되어 매우 성가신 일입니다.

확인 및 변경과 같은 대화 상자의 경우 여전히 브라우저가 동작을 수행해야한다고 생각하며 최신 Firefox 브라우저의 경우 위에서 언급 한 문제를 수정했습니다. 현재 페이지로 범위가 지정된 페이지 경고에 사용됩니다.

따라서 모든 브라우저가 (적어도 경고를)보다 우아하게 처리 할 수 ​​있도록 경고 동작을 재정의하는 것이 좋습니다.

몇 가지 요약 된 이유 :

  • 이것은 표준 API이며 개발자가 수행하려는 작업을 파악할 수 있습니다.
  • 더 사용자 친화적이며 더 좋아 보입니다.
  • 플랫폼 지원, 모바일 사이트에는 기본 API가 필요할 수 있습니다.
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.