web-development-kb-ko.site

필수 필드 검증

필요한 현장 검증은 어떻게 시각적으로 처리되어야합니까?

: 별표가 빨간색이라고 가정

*Name:[_______________]

또는

Name:*[_______________]

또는

Name: [_______________]*

또는

Name: [____red bg____  ]

또는

Name(<- font color red): [_______________]

또는

더 나은 방법을 말해줘!

16
rick schott

이러한 유형의 질문에 대한 옳고 그름의 대답은 없으며 사용자의 개인 (엔지니어 대 고급 사용자 대 컴퓨터를 사용하지 않은 앨리스 이모)과 상황에 따라 다릅니다.

일반적인 규칙은

label [input   ] [validation       ] 

빨간색 별표에 대한 유효성 검사 영역을 사용하여 양식을 확인한 후 필수 필드 또는 오류 메시지를 나타냅니다 (또는 둘 다).

Simply Accessible 웹 사이트에는 필수 양식 필드에 대한 간결한 글이 있습니다. http://simplyaccessible.com/article/required-form-fields

11
Bil Simser

다양한 요인에 따라 다릅니다.

  1. 일반적으로 : 텍스트 표시 (별표) 및 시각적 표시가 있어야합니다. 예를 들어 양식을 1 초만 살펴보면 어떤 필드가 필요한지 이해할 수 있어야합니다. 예를 들어 레이블 측면에 별표를 추가하고 (레이블 자체와 약간 다르게 서식을 지정하는 경우 더 낫습니다) 필수 필드에 더 강렬한 테두리를 추가 할 수 있습니다.
  2. 두 번째 일반적인 규칙으로 양식을 simplify 할 수 있는지 확인하기 위해 매우 열심히 노력하십시오. 경우에 따라 양식을 최소화하고 모든 선택적 필드를 피하는 방법이 있습니다. 예를 들어, 미니멀리스트 등록 양식은 이메일 만 요청할 수 있으며 "프로필이 90 % 완료되었습니다"와 같은 후속 조치 및 위젯에 다른 모든 항목을 남겨 둘 수 있습니다.
  3. 모든 웹 사이트에서 consistent이어야합니다. 매번 사용자가 배우도록 강요하지 않기 때문에 정말 중요합니다.
  4. 별표가 aligned 같은 열에 함께 있으면 약간 더 좋습니다 (그러나 약간, 일반적으로 양식을 더 좋게 만드는 것은 피하고 Nice 양식은 나쁜 것보다 성능이 우수합니다).
  5. 양식의 대부분의 요소가 필수 요소 인 경우 선택 사항 항목을 표시하는 것이 좋습니다.

잡았다 :

  1. 색상에만 의존하지 마십시오 (색상을 잘 읽을 수없는 경우 번거 롭습니다).
  2. 별표에만 의존하지 마십시오 (사용자는 강제적 인 것과 그렇지 않은 것을 생각하게합니다).
  3. 양식을 산산조각 내리지 마십시오.이 질문의 범위를 벗어나는 것처럼 보이지만, 명확한 레이블이있는 세련되고 수직으로 정렬 된 양식은 필수 필드를 이해하는 데 도움이됩니다. 단일 수직 스캔이 더 쉬우므로 더 쉽습니다. 필수 필드를 감지하십시오.
6
Folletto

Baymards 최신 연구에 관심이 있다고 생각했습니다. http://baymard.com/blog/required-optional-form-fields

요약은 다음과 같습니다.

  • 상위 100 개 미국 체크 아웃 프로세스를 벤치마킹 할 때 사이트의 9 %만이 명시 적으로 두 필드 유형을 모두 표시했습니다.
  • 선택 필드와 필수 필드를 명시 적으로 표시함으로써 사용자는 아무것도 추론 할 필요가 없으며, 입력하는 필드에만 집중할 수 있으며, 결과적으로 필드별로 필드 전체에서 매끄럽게 진행할 수 있습니다. 이전 필드 스캔.
  • 전자 상거래 상위 100 대 결제 중 63 %가 저지른 가장 일반적인 실수는 다음 중 하나만 나타내는 것입니다.
  • 모바일 체크 아웃을 테스트 할 때 테스트 대상의 75 %가 필수 및 선택적 필드를 모두 명확하게 표시하지 못한 사이트에서 심각한 양식 사용성 문제를 경험했습니다.

그리고 그들의 추천 :

enter image description here

2
DLM

별표를 유지하는 것은 단순히 색상 기반 표시기 (접근성에 +1)보다 유용 할 수 있습니다. 별표에 제목 속성도 넣습니다 (예 : <span title = "필수 필드"> * </ span>

어쨌든 적절하게 스타일을 지정하는 데 필요할 것입니다.

별표 위치가 중요하다고 생각하지 않습니다. 일관성을 유지하십시오!

0
cbosco

나는 한 지점에서 다른 모든 일을했다고 생각합니다. 내가 최근에 빠진 것은 더 많은 작업이 필요하지만 사용자에게는 더 나은 것입니다. 기본적으로, 해당 필드를 가리키는 짧은 화살표가있는 작은 빨간색 팝 오버 상자를 제공하여 필수 필드임을 알려줍니다. 필드 위에 밝은 색상으로 표시하면 내용이 삽입되거나 굵은 텍스트가있는 나머지 문서의 흐름을 변경하지 않고도 포인트를 잘 얻을 수 있다고 생각합니다.

여러 팝 오버를 표시하는 지점에 여러 개의 오류가 있으면 복잡해지기 때문에 첫 번째 오류 만 표시하거나 한 번에 하나의 오류 만 표시하기로 결정하고 충돌 중 하나가 해결되면 다음 오류를 표시합니다. .

0
user306