제출하기 전에 웹 양식에서 필수 필드를 강조 표시하는 가장 좋은 방법은 무엇입니까?

이 작업을 수행하는 가장 좋은 방법은 실제로 입력 필드 뒤에 "필수"라는 단어를 입력하는 것입니다. 이 의견은 Luke Wroblewski의 Web Form Design에도 반영되어 있습니다. http://www.lukew.com/ff/entry.asp?725

예제 링크가 필수 필드 대신 선택적 필드에 대해 이야기하지만 교장은 동일하게 유지됩니다. 사용자는 시각적 표시기를 포함하는 대신 필드를 작성하는 것을 선호합니다.

또한 살펴볼 내용이 필요한 필드 대신 옵션 인 필드를 나타낼 수 있습니다. 나에게, 예외는 둘 중 주목해야 할 예외입니다. 예를 들어, 10 개의 필드가 있고 8 개의 필드가 필요한 경우 8 개의 필드에 "필수"를 쓰지 않고 2 개의 예외에 대해 "선택"을 쓰십시오. 그러나 2 개만 필요한 경우 예외이기 때문에 2 개만으로 "필수"라고 쓰십시오.

이 질문은 처음 생각했던 것보다 더 문제가 될 수 있습니다.

예를 들어, 일부 포스터는 별표를 사용하여 "필수"를 의미한다고 제안했습니다. 이것의 문제는 일부 웹 사이트는 실제로 반전을 사용하고 선택적인 필드 옆에 별표를 두는 것입니다. 사용자는 별표가 "필수"필드인지 또는 글래스 (옵션) 필드인지 여부를 명시 적으로 알지 못하며, 추가 조사를 통해 흐름을 깨뜨리고 양식 프로세스에 대해 실망 시키며 경우에 따라 모든 양식을 포기할 수 있습니다. 함께.

RussellUresti는 "웹 폼 디자인"에 대한 Luke Wroblewski의 연구를 필수 필드 옆에 단순히 "필수"라고 쓰라는 연구를 되풀이하여 회신했습니다 (10 년의 경험에서).

양식 필드가 선택적인 경우 관련 사항 및 고려해야 할 사항이 있으면 로직을 사용하여 사용자에게 묻지 않고 답변을 얻을 수 있습니까?

예를 들어, 사용자가 남성인지 여성인지 알아야하는 경우, 경우에 따라 자신의 이름으로 선택한 제목 (미스, 부인 등이 여성을 암시 함)으로 답변을 추론하고 사용자로부터 질문을 제거 할 수 있습니다.

고려해야 할 또 다른 사항은 주소 필드와 같은 것입니다. 우편 번호를 요청하고 우편 번호 조회를 수행 할 수있는 경우 사용자가 수동으로 주소를 입력하도록 선택한 경우 또는 우편 번호 조회에 실패한 경우 주소 필드 만 표시하여 많은 선택적 데이터를 피할 수 있습니다 폼이 실제보다 길어 보이고 사용자가 떠날 수 있습니다.

필자의 경험에 따르면 필드가 선택적인 경우 필드를 완전히 제거하는 경우가 많습니다. 분명히 이것은 항상 실용적이지는 않지만 어떤 경우에는 어떤 접근법을 선택하든 시각적 혼란을 줄이는 데 도움이 될 수 있습니다.

또 다른 해결책은 양식을 두 섹션으로 나누고 필요한 필드를 모두 모은 다음 전체 섹션에 "필수"레이블을 지정하는 것입니다.

내가 찾은 가장 좋은 방법은 별표를 안쪽과 오른쪽에 맞추는 것입니다.

이것은 반드시 이것을 게시하기에 잘못된 장소이지만 "필수"에 대한 확장 된 정의를 간과하지 마십시오. 즉, 요소의 요구가 다른 요소의 사용 (선택, 채우기 등)의 조건부 인 경우.

예를 들어, 필드 A는 선택 사항입니다. 그러나 필드 A가 실제로 최종 사용자에 의해 채워지면 필드 B가 필요합니다.

요소 필드에 주석을 달거나 그룹화하여이를 나타내는 방법은 무엇입니까?해야합니까?

추신. 색상만으로는 정보를 전달하기에 신뢰할 수없는 채널이라는 것을 기억하십시오. 우리 중 일부는 빨강과 초록을 쉽게 구분할 수 없으며 빨강은 다른 문화를 가진 사람들에게 다른 것을 전달할 수 있습니다.

빨간색 별표는 종종 필요에 따라 사용되므로 고객이 실제로 잘못하지 않습니다. 오렌지색이나 사이트 디자인에 맞는 다른 색상을 선택하면 괜찮습니다.

나는 간단한 별표 철학의 일부입니다.

탄젠트 관련 메모에서 필자가 작성하고 작성하지 않은 필드에 대한 사용자 정의 오류 마커를 작성하는 예제와 함께 필자가 작성한 게시물이 있습니다. 기술에 따라 다르지만 (Rails, Formtastic, jQuery)이 개념은 쉽게 적용 할 수 있습니다.

http://thestrake.com/post/459205965/show-n-tell-friday-custom-form-error-markers

첫째, UX 전문가라고 가정 할 때 고객이 UX 문제를 해결하는 방법을 알려주지 말고 해결해야 할 문제가 아니라 해결해야 할 문제를 해결해야합니다.

사용자의 입장에서 생각하면 별표의 의미를 사용자가 알고 있다고 가정 할 수 없습니다. 확실치 않은 경우, 서면 언어를 사용하여 가능한 한 명확하게 철자를 쓰십시오. 웹에서 별표가 점점 적게 사용되는 것을 보았으며 일반적으로 사용되면 페이지 하단에 설명이 이어집니다. 더 간단한 설명은 '필수'를 사용하는 것입니다. 스크린 리더도이를 선택하여 사이트를보다 쉽게 ​​이용할 수있게합니다.

이 시나리오에서 점진적 공개 원칙을 적용하는 것에 대해 생각해 보셨습니까? 필요하지 않은 필드가 화면에도 표시되어야합니까? 나중에 숨겨 지거나 사용자에게 표시 할 수 있습니까? 이런 식으로 정보 과부하가 적고 필요한 모든 필드가 표시되므로 '필수'가 필요하지 않습니다. 이 설명의 심리학에 대한 자세한 내용은 다음과 같습니다. https://www.nngroup.com/articles/progressive-disclosure/

텍스트 (optional)로 표시되지 않는 한 모든 필드가 필요하다는 것을 의미하는 사용성 표준을 보았습니다. Sumbit을 시도한 후에 필수 필드를 채우지 않으면 잘못된 것을 설명하는 텍스트가 표시되어야합니다.

대부분의 유용성 항목과 마찬가지로 실제로 양식에 포함되는 필드 수와 양식에 필요한 필드 빈도에 따라 다릅니다.

나는 보통 각 필수 필드에 인접한 간단한 빨간색 별표를 선호하고 각주 "*-필수 필드"를 선호합니다.

또한 onBlur() 이벤트 후에 필드가 비어 있거나 유효하지 않은 경우 필드 테두리를 빨간색으로 강조 표시하고 싶습니다. 사용자가 모든 필수 필드를 채우지 않고 양식을 제출하려고하면 동일한 강조 표시가됩니다. 자바 스크립트 onFocus() 이벤트에서 테두리 강조가 사라집니다.