개발자를 위한 폼 디자인 제1부분

등록 과정에서 퇴학하거나 인터넷 리스트를 작성할 때 낙담한 적이 있습니까?표를 작성할 때 사용자의 전문 지식이 좋지 않기 때문일 가능성이 높다.
표는 인터넷 곳곳에서 볼 수 있는데 다음은 표의 디자인 기교로 더욱 좋은 사용자 체험을 얻을 수 있다.

1. HTML 입력 유형 활용
HTML 입력 필드는 예상되는 데이터 유형을 지정하는 다양한 유형의 컬렉션을 제공합니다.우리는 그것을 이용하여 더욱 좋은 사용자 체험을 제공할 수 있을 뿐만 아니라 간단한 오류 처리도 클라이언트 브라우저에 의뢰할 수 있다.
입력 유형:
1> type = "이메일"에서 입력한 형식이 전자 우편 주소여야 합니다.

<input type="email" id="email" name="email">

찬성 의견:

사용자가 잘못된 id를 입력할 때 대부분의 현대 브라우저는 해당하는 오류 메시지를 표시합니다.

이동전화에서 대부분의 키보드에'@'기호를 표시하여 접근을 편리하게 하고 사용자 체험을 개선한다.

속임수:
한계 때문에, 유효한 전자메일 id로 받아들일 것이며, 서버 측의 검증이 필요합니다.
2> type="number"에서 입력한 형식이 숫자여야 함을 지정합니다.

<input type="number" id="plotNumber" name="plotnumber">

이것은 숫자만 입력할 수 있고 의외의 알파벳을 입력할 수 있으며 사용자의 오류를 방지한다.
휴대전화에는 사용자가 빠르게 숫자를 입력할 수 있도록 숫자 키보드가 켜져 있다.
3> type="tel"은 전화 번호의 입력 유형을 지정합니다.

<input type="tel" id="phoneNumber" name="phonenumber">

데스크톱에서는 일반 입력과 유사하지만 이동전화에서는 특수 문자나 알파벳을 입력할 수 있는 숫자 키보드를 열어 사용자가 숫자를 빠르게 입력할 수 있고 비숫자 문자를 자유롭게 입력할 수 있게 한다.
[email protected]
2. 자동 채우기를 사용합니다.
브라우저에 저장된 양식을 자동으로 작성할 수 있습니다.사용자는 이름, 이메일 등 일반적인 필드를 자동으로 작성하여 폼을 신속하게 작성하고 더욱 중요한 입력 작업에 전념할 수 있다.
구글은 자동 충전을 정확하게 사용함으로써 사용자가 표를 작성하는 속도가 30% 높아진 것을 발견했다.자세히 보기:

<input type="tel" name="phone" id="phoneNumber" placeholder="+91-45345345435" autocomplete="tel">

Google Developers
3. 드롭다운 리스트는 마지막 선택이어야 한다.
드롭다운 리스트는 스위스 군도처럼 입력을 표준화하고 예측성을 제공할 수 있으며 매우 유연하지만 가용성 연구에 따르면 리스트를 작성할 때 드롭다운 리스트를 사용하면 사용자의 업무량을 증가시킬 수 있다.
여기서 자세히 보기:
TLDR:

더 어렵고 양식 작성에 더 오래 걸린다

사용자가 자신의 선택을 자주 수정

사용 가능한 옵션 숨기기

사용자가 놓칠 때가 있다

사용자 속도, 특히 모바일 사용자를 낮출 수 있습니다.

솔루션?
바이너리 입력에 대해서는 스위치 스위치를 사용합니다.
여는 방법: Blog
다른 방법은 7개 미만의 옵션만 있는 라디오 버튼이 있는 목록 상자를 사용하는 것이다.
자세히 보기: w3schools
NN group
4. 드롭다운 검색을 사용합니다.
사용자가 국가를 선택해야 할 때, 밑에 있는 목록이 가장 좋은 선택일 수도 있다. 왜냐하면 매우 치밀하기 때문이다. 그러나 사용자는 150여 개국의 목록을 검색해야 한다.
좋은 사용자 체험을 제공하는 방법 중 하나는 사용자가 수동으로 검색 조회를 입력하고 사용 가능한 옵션 목록을 동적으로 선별할 수 있도록 하는 것이다.
HTML에는 데이터리스트 태그가 있어 입력 태그와 결합하여 사용할 때 강력한 드롭다운 + 검색 기능을 제공합니다

<form action="/action_page.php" method="get">
  <label for="browser">Choose your country from the list:</label>
  <input list="browsers" name="browser" id="browser">
  <datalist id="browsers">
    <option value="Japan">
    <option value="India">
    <option value="Singapore">
    <option value="Thailand">
    <option value="United States">
  </datalist>
  <input type="submit">
</form>

자세히 보기:
w3school
5. 예방이 교정보다 많다
표를 작성하는 것만큼 우울한 것은 없다. 신호등처럼 보이는 인증코드 이미지 제목을 클릭하고 제출을 클릭하면 입력 오류 중 하나가 발견된다.
체험해 보시겠어요?
공을 드리블하러 가다.com(한 디자이너가 그들의 작품을 공유하는 곳) 및 등록을 시도합니다.

등록 과정에서 실망스러운 부분은 사용자가 등록 과정에서 '사용자 이름' 을 사용할 수 있는지 없는지를 알 수 없다는 것이다.사용자 이름을 사용할 수 없는 경우 커밋한 후 오류로 표시되므로 새 사용자 이름을 추측하는 과정을 다시 거쳐야 합니다. 사용할 수 있도록 하려면 인증번호 이미지를 다시 클릭하고 기도해야 합니다.
그들이 할 수 있는 일은 사용자 로그인을 개선하여 사용자가 전자 우편으로만 등록할 수 있도록 하는 것이다. 사용자가 로그인하면 사용자가 사용자 이름을 찾는 과정을 완성할 수 있다.
다음은hashnode가 어떻게 비슷한 작업을 더 매끄럽게 완성할 수 있는지입니다.

'실수는 인지상정' 은 우리에게 있어서 중요한 것은 실수 발생을 방지하는 방법을 찾아내는 것이지 사용자가 지루한 작성 과정을 마친 후에 잘못을 바로잡는 것이 아니다.
만약 당신이 여기에 올 수 있다면, 당신의 독서에 감사 드립니다.
이것은 폼 디자인 안내서의 첫 번째 부분으로 디자인과 개발과 관련된 더 많은 블로그가 곧 발표될 것이다.