양식 입력을 통해 사용자는 디지털 제품, 브랜드 및 기타 사용자와 교류할 수 있습니다. 적절한 입력 필드와 구조를 선택하는 것은 사용자가 작업을 효율적으로 완료할 수 있도록 좋은 양식 UX 를 디자인하는 데 중요합니다. 이 기사에서는 개별 입력 요소, 이 요소가 해결하는 문제 및 UX 팀이 이를 사용하는 방법을 살펴봅니다. 또한 사용성 또는 접근성 문제를 일으킬 수 있는 양식 입력 및 일반적인 실수 디자인에 대한 팁을 제공합니다. UXPin을 사용하여 완벽하게 작동하는 양식 입력 필드로 프로토타이핑 속도와 테스트 기능을 높입니다. 대화형 구성 요소를 UXPin으로 가져오고 해당 요소를 디자이너와 엔지니어 간의 단일 정보 소스로 사용하여 프로토타입을 조립합니다. 디자인과 코드 사이의 패리티를 달성하십시오. UXPin 병합을 살펴보십시오 . 새로운 차원의 프로토타입 제작 팀의 디자인 시스템에서 가져온 대화형 구성 요소를 사용하여 디자인합니다. UXPin 병합 알아보기 양식 입력이란 무엇입니까? 양식 입력(양식 필드)은 사용자 피드백 및 데이터를 캡처하기 위한 UI 요소입니다. 입력 유형 또는 양식 컨트롤에는 확인란, 날짜 선택기, 라디오 버튼, 텍스트 입력, 토글 및 선택/드롭다운이 포함됩니다. 또한 양식에는 제출 버튼, 링크 또는 키보드 작업(Enter)과 같은 제출 방법이 있어야 합니다. 양식 입력 속성이란 무엇입니까? 양식 입력 속성은 사용자를 위한 규칙과 컨텍스트를 생성합니다. 또한 이러한 속성은 전화 번호 필드에 대해 모바일 장치에 숫자 키패드를 표시하는 것과 같은 적절한 컨트롤을 제공합니다. UX 디자이너가 주의를 기울여야 하는 다섯 가지 필수 HTML 양식 입력 속성: 필수: 사용자가 양식을 제출하기 위해 입력을 완료해야 함을 의미합니다. 비활성화됨: 일반적으로 다른 작업을 수행하거나 "읽기 전용" 입력을 수행할 때까지 사용자가 변경할 수 없도록 하는 입력 상태 유형 속성: 형식을 정의하는 입력 유형입니다. 예를 들어 비밀번호 유형은 문자를 숨기는 반면 이메일 유형에는 @ 기호와 도메인 확장자(.com, .co.uk 등)가 필요합니다. 레이블: 암호, 이름, 이메일 등의 입력 내용을 사용자에게 알려줍니다. 도우미 텍스트: 컨텍스트 및 액세스 가능성에 대한 추가 레이블을 제공합니다. 양식 입력 유형 다음은 몇 가지 일반적인 양식 입력과 디자이너가 이를 사용하는 방법입니다. 텍스트 입력 텍스트 입력(또는 텍스트 입력 필드)을 통해 디자이너는 광범위한 정보, 특히 이름, 이메일, 비밀번호, 주소 및 기타 텍스트 기반 사용자 데이터를 캡처할 수 있습니다. 사용자가 한 문장보다 긴 정보를 입력해야 하는 경우 텍스트 필드 위에 텍스트 영역을 사용하는 것이 좋습니다. 텍스트 영역이 더 크고 연락처 양식의 메시지 섹션과 같이 더 많은 텍스트를 허용합니다. 날짜 선택기 날짜 선택기는 사용자가 일, 월, 연도를 쉽게 선택할 수 있는 형식을 제공합니다. 또한 사용자가 쉼표, 백슬래시 및 대시와 같은 올바른 구분 기호를 사용하도록 합니다. UX 디자이너는 여러 날짜 선택기 UI 옵션과 구성을 가지고 있습니다. 올바른 선택은 사용자, 장치 및 운영 체제(iOS, Android, Windows)에 따라 다릅니다. 이 문서에서는 완벽한 날짜 선택 도구를 디자인하는 데 유용한 팁을 제공합니다 . 선택/드롭다운 선택 또는 드롭다운을 통해 디자이너는 사용자에게 선택 항목 모음을 제공할 수 있습니다. 드롭다운은 국가 목록이나 티셔츠 크기와 같은 고정된 변형이나 옵션에 가장 적합합니다. 국가나 주와 같은 긴 목록의 경우 검색 필드를 제공하면 사용자가 원하는 항목을 더 빨리 찾을 수 있습니다. 이러한 드롭다운은 사용자에게 선택권을 제공하는 동시에 정확한 답변을 제공하도록 합니다. 예를 들어 국가나 주를 잘못 입력하면 전자상거래 주문이 고객에게 도달하지 못할 수 있습니다. 체크박스 확인란은 두 가지 기본 기능을 수행합니다. 사용자가 둘 이상의 선택을 할 수 있습니다. 약관 동의 또는 이메일 뉴스레터 수신 동의와 같은 법적 요구 사항을 확인하는 방법을 제공합니다. 라디오 버튼 라디오 버튼은 체크박스와 유사한 기능을 수행하지만 다중 선택 대신 하나의 선택만 허용합니다. 예를 들어 배송 옵션을 선택하거나 예/아니요 질문에 답합니다. 토글 토글 또는 토글 스위치는 기본 켜기/끄기(부울) 형식 입력입니다. 스위치는 사용자에게 예/아니오, 켜기/끄기 결정을 내리는 빠른 방법을 제공합니다. 예를 찾고 있다면 Android 및 iOS 모바일 장치 모두 설정에서 토글 스위치를 사용합니다. 파일 입력 파일 입력을 통해 사용자는 이미지와 문서를 업로드할 수 있습니다. UX 디자이너는 파일 입력이 허용할 형식(예: PNG, JPG, PDF 등)을 사용자에게 알려주기 위해 도우미 텍스트를 사용해야 합니다. 양식 입력 상태 이해 디자인 프로토타이핑 협업 상호 작용 입력 상태를 통해 UX 디자이너는 색상 및 메시지를 통해 사용자와 통신할 수 있습니다. Material Design Form의 아래 예 는 디자이너가 컨텍스트 및 지침을 위해 상태를 사용하는 방법을 보여줍니다. 비활성: 사용자가 정보를 입력한 입력 집중: 강조 표시되어 사용자의 현재 선택을 표시합니다 . 활성화됨: 완료된 입력 Hover: 데스크톱 사용자가 커서를 그 위로 이동할 때 대화형 입력임을 표시합니다. 오류: 사용자에게 문제(예: 불완전한 필드 또는 잘못된 정보)를 경고합니다. 비활성화됨: 사용자에게 입력과 상호 작용할 수 없음을 알려줍니다. 모든 입력 요소는 사용자가 양식을 탐색하고 완료하는 데 도움이 되도록 유사한 상태 변형을 제공합니다. 양식 입력 접두사 및 접미사 사용 접두사와 접미사는 사용자가 올바른 정보와 형식을 입력하는 데 도움이 됩니다. 예를 들어, 무언가의 무게가 필요한 경우 lbs 또는 kg 접미사를 추가하면 올바른 숫자를 입력하기 위한 명시적인 지침을 사용자에게 알려줍니다. UX 디자이너는 접두사 및 접미사에 드롭다운을 사용하여 사용자가 친숙한 형식으로 데이터를 입력할 수도 있습니다. 예를 들어, 미국 사용자는 lbs 및 Canadians kg을 선택할 수 있습니다. 접두사는 올바른 전화 번호를 캡처하기 위해 카운티 코드 선택에 가장 일반적으로 사용됩니다. Good Form UX가 중요한 이유는 무엇입니까? 사용자 행동 프로토타입 상호작용 테스트 양식은 상당한 비즈니스 기회를 제공하지만 잘못된 디자인이나 너무 많은 양식 입력은 사용자 경험을 방해하여 전환에 부정적인 영향을 줄 수 있습니다. 좋은 UX의 첫 번째 규칙은 사용자가 작업을 완료하는 데 필요한 정보만 요청하는 것입니다. 예를 들어, 전자 상거래 체크아웃 양식에는 고객의 전체 이름, 배송 주소, 이메일, 연락처 및 지불 세부 정보(배송 주소가 다른 경우 청구서 수신 주소 포함)가 필요합니다. 고객의 연령과 성별을 캡처하는 것이 마케팅 목적으로 유용할 수 있지만 이 추가 양식 데이터는 완료 시간을 추가하고 방해가 되며 사람들이 완료하지 못하게 할 수 있습니다. 모든 양식에 동일한 규칙이 적용됩니다. 새 계정을 만들려면 사용자 이름이 필요합니까, 아니면 확인용 이메일로 충분합니까? UX 디자이너는 양식 입력을 줄이고 관련 없는 데이터를 좋은 양식 사용자 경험의 기초로 캡처하지 않아야 합니다. 훌륭한 양식 입력을 디자인하는 방법 1. 짧고 설명적인 입력 레이블 사용 입력 레이블은 짧고 설명적이며 완전히 볼 수 있어야 합니다. Material Design의 이 예는 레이블이 사용자를 얼마나 오래 혼란스럽게 할 수 있는지 보여줍니다. 2. 적절한 색상 대비를 사용하십시오. 양식 입력은 브랜딩이나 창의적인 색 구성표를 위한 장소가 아닙니다. 자리 표시자 및 입력 텍스트와 잘 대조되는 배경색을 선택합니다. 3. 입력 요구 사항 전달 UX 디자이너가 사용자에게 필드의 요구 사항을 알려주지 않으면 여권은 혼란과 좌절을 유발할 수 있습니다. UX 디자이너 Salim Ansari 는 명시적인 지침으로 비밀번호 입력 필드를 디자인하는 방법을 보여줍니다. "표시" 버튼을 추가하면 사용자가 모든 항목을 올바르게 입력했는지 다시 확인할 수 있어 잠재적인 시간 낭비 오류를 방지할 수 있습니다. 4. 필수와 선택의 구별 사용자에게 필수 필드와 선택 필드를 알려주면 오류를 줄이는 동시에 사람들이 공유할 항목을 선택할 수 있습니다. 표준 관행은 필수 필드에 별표(*)를 추가하는 것이지만 많은 디자이너는 더 명확하고 접근성을 돕기 위해 양식 레이블 옆에 대괄호(필수)를 표시합니다. UX 디자이너는 선택적 필드가 인지 부하 및 전환 에 미치는 영향도 고려해야 합니다 . 양식 필드가 선택 사항인 경우 전혀 포함해야 합니까? 5. 자리 표시자 텍스트 삽입 자리 표시자와 그 사용법에 대해 약간의 논쟁이 있습니다. UX 디자이너 Andrew Coyle(구 Google, Flexport, Intuit) 는 이 기사 에서 자리 표시자 텍스트의 해야 할 일과 하지 말아야 할 일에 대한 몇 가지 시나리오를 설명합니다. “복잡한 양식에 대한 텍스트 도움말을 제공하거나 미학을 개선하기 위해 입력 레이블을 생략하고 싶은 유혹이 있습니다. 그러나 이를 위해 자리 표시자 텍스트를 사용하면 많은 사용성 문제가 발생합니다.” – 링크된 기사에 Andrew Coyle이 썼습니다. Andrew의 기사에서 일부 하이라이트: 레이블 대신 자리 표시자 또는 인라인 레이블을 사용하지 마십시오. 도우미 텍스트 대신 자리 표시자를 사용하지 마십시오. 입력한 텍스트와 구별하기 위해 자리 표시자 텍스트에 밝은 색상 음영을 사용합니다. 사용자가 입력 필드 내부를 클릭할 때 자리 표시자가 사라지지 않아야 합니다. 첫 번째 문자를 입력한 후에만 6. 생각을 줄이기 위해 입력 구조화 구조화된 입력은 사용자에게 원하는 데이터와 형식을 정확히 알려줍니다. 또한 양식을 더 빨리 완성하기 위해 생각을 줄여줍니다. Andrew Coyle의 이 예 는 미국 형식의 일반적인 전화 번호 입력 필드에 지역 코드와 두 부분으로 된 번호를 보여줍니다. 7. 자동 완성 활성화 자동 완성(자동 완성)을 사용하면 특히 Google Maps API를 사용하여 주소를 찾는 것과 같이 주소의 경우 양식을 훨씬 빠르게 완성할 수 있습니다. 사용자에게 계정이 있는 경우 이 데이터를 사용하여 양식을 자동 완성하면 상당한 시간을 절약하고 긍정적인 사용자 경험을 만드는 동시에 전환을 증가시킵니다. 8. 기본값을 주의해서 사용하십시오. 기본값은 자동 완성과 유사한 이점을 제공하므로 사용자가 양식을 더 빨리 완성할 수 있습니다. 그러나 기본값은 오류나 혼란을 초래할 수 있습니다. 예를 들어 사용자가 집에 있지 않거나 VPN을 사용하는 경우 사용자 국가의 기본값을 설정하기 위한 위치 추적이 올바르지 않을 수 있습니다. 9. 모바일 친화적인 입력 필드 디자인 모바일 친화적이거나 반응형 디자인 은 좋은 형태의 UX를 위해 매우 중요합니다. 디자이너는 1열 레이아웃을 사용하고 터치/탭 상호 작용을 위해 모든 양식 요소를 최적화해야 합니다. UXPin에서 완벽하게 작동하는 양식 입력 설계 디자인 도구를 사용하여 입력 필드의 프로토타입을 만들 때의 문제는 코드와 동일한 충실도와 기능을 제공하지 않아 디자이너가 디자인 프로세스 중에 테스트할 수 있는 항목이 제한된다는 것입니다. UXPin을 사용하면 텍스트 입력을 포함한 입력 필드가 최종 제품에서와 같이 작동합니다. UXPin은 대부분의 디자인 도구와 같은 정적 이미지를 렌더링하는 대신 HTML, CSS 및 Javascript를 렌더링하여 디자이너에게 한 줄도 작성하지 않고도 강력한 코드를 제공합니다! 이러한 초능력을 통해 설계 팀은 사용성 연구 및 이해 관계자로부터 정확하고 의미 있는 피드백을 위해 코드에서 식별할 수 없는 양식 프로토타입을 구축할 수 있습니다. 변수 를 통해 디자이너는 사용자 입력 데이터를 캡처하고 환영 메시지를 개인화하거나 사용자 계정 프로필을 채우는 것과 같이 프로토타입의 다른 곳에서 사용할 수 있습니다. UXPin에서 생성된 이 가입 양식의 예 는 디자이너가 양식 제출 후 확인 화면을 개인화하기 위해 이메일 변수를 사용하는 방법을 보여줍니다. 디자인 팀은 Expressions 를 사용하여 양식 입력 테스트를 한 단계 더 높일 수 있습니다 . 동일한 예에서 사용자가 양식을 올바르게 작성하지 않은 경우 동적 오류 메시지가 표시됩니다. 또한 양식 유효성 검사, 계산 구성 요소 및 일치하는 암호 기준에 표현식을 사용하여 현실적인 프로토타입 경험을 만들 수 있습니다. UXPin 병합 사용 및 UI 구성 요소 가져오기 양식 입력을 처음부터 디자인하지 마십시오. Material Design 양식과 같은 기성 구성 요소를 찾고 UXPin Merge 덕분에 완전한 상호 작용과 기능을 즐기십시오. 디자이너와 개발자 간에 단일 소스를 공유할 수 있는 기술이므로 양식 및 기타 UI 디자인 요소를 넣는 작업이 두 팀에서 중복되지 않습니다. 자세히 알아보려면 병합 페이지를 방문하세요.