사용자 친화적 인 웹 양식 만들기위한 10 가지 규칙

Feb 2, 2026

어떻게

Illustration of web forms on an iMac and tablet

인간 컴퓨터 상호 작용의 진화에도 불구하고 양식은 여전히 사용자에게 가장 중요한 유형의 상호 작용 중 하나를 남아 있습니다. 귀하의 신청서 또는 웹 사이트를 사용하는 사람들은 특정 목표를 가지고 있으며 종종 사용자와 목표 사이에 서있는 한 가지는 형식입니다. 매일 우리는 우리의 필수 활동을 위해 그들을 사용하여 구매를 완료하고, 사회 네트워크에 가입하여 우리가 구입 한 제품에 대한 피드백을 제공하기 위해 더 많이 있습니다. 사용자 경험 ...에

결과적으로 온라인 양식을 신속하고 혼란없이 완료 할 수있는 것은 매우 중요합니다. 우리가 보내야하는 노력이 적을수록 행복합니다. 디자이너와 개발자로서 우리는 사용자에게 더 빠르고 쉽고 생산적인 양식적인 경험을 생산하기 위해 노력해야합니다.

더 나은 양식을 만드는 방법을 탐구하는 두 가지 기사의 두 번째 기사에서 ( 여기 첫 번째 것을 찾으십시오 ), 여기에 사용자 친화적 인 양식을 디자인하는 10 가지 팁이 있습니다. 당신이 찾고있는 것이 아니라는 것이 아닙니까? 우리 가이드가 맨 위에가 필요할 수 있습니다 웹 사이트 빌더 또는 클라우드 스토리지 서비스.

01. 필요한 것만 묻습니다

필요한 정보의 양을 절단하면 양식이 쉽게 작용할 수 있습니다. 귀하는 귀하가 요청한 정보가 왜 사용되고 있는지 그리고 어떻게되는지 항상 질문해야합니다. 양식에 추가 한 모든 필드가 전환율에 영향을 미치기 때문에 가능한 한 많은 필드 수를 최소화하십시오. 질문 및 필드의 수를 제한하면 사용자가 많은 정보를 요청할 때 양식이 적어졌습니다.

02. 필드를 논리적으로 주문하십시오

Screenshot compares two forms - one with fields in an odd order, one with headings explaining field groupings, ordered logically — 당신의 양식을 대화처럼 생각하십시오. 사용자에게 의미가있는 순서로 필드를 그룹화하고 주문하려고합니다.

양식을 대화와 유사한 것으로 생각하는 것이 도움이됩니다. 정상적인 대화와 마찬가지로 두 당사자 간의 논리적 통신으로 표현되어야합니다 : 사람과 앱. 세부 정보는 응용 프로그램 또는 데이터베이스가 아닌 사용자의 관점에서 논리적 인 순서대로 요청해야합니다. 예를 들어, 이름 앞에 누군가의 주소를 물어 보는 것은 드문 일입니다.

블록에서 관련 질문을 그룹화하는 것도 매우 중요하므로 한 세트의 질문 집합의 흐름이 대화와 비슷합니다. 또한 관련 필드를 그룹화하면 사용자가 작성 해야하는 정보를 이해할 수 있습니다.

위의 그림은 두 개의 등록 양식의 예입니다. 긴 형태는 관련 필드를 그룹화하지 않으면 압도적으로 느낄 수 있습니다 - 왼쪽의 양식을 오른쪽의 향상된 버전과 비교하십시오.

그룹화는 시각적으로뿐만 아니라 코드에서 수행해야합니다. 예를 들어,이를 사용할 수 있습니다 & lt; fieldset & gt; 과 & lt; 전설 & gt; 관련 양식 컨트롤을 연결하는 요소 :

& lt; fieldset & gt; & lt; 개인 정보 : & lt; / logend & gt; & lt; div & gt; & lt; label for = "first_name"& gt; 이름 & lt; / label & gt; & lt; 입력 유형 = "text"name = "first_name"id = "first_name"& gt; & lt; / div & gt; & lt; div & gt; & lt; label for = "last_name"& gt; 성 & lt; / label & gt; & lt; 입력 유형 = "text"name = "last_name"id = "last_name"& gt; & lt; / div & gt; & lt; = "성별"& gt; 직업 & lt; / label & gt; & lt; 입력 유형 = "텍스트"이름 = "직업"ID = "직업"& gt; & lt; / div & gt; & lt; / fieldset & gt;

03. 레이블을 짧게 유지하십시오

필드 레이블은 해당 입력 필드가 무엇을 의미하는지 사용자에게 알려줍니다. 클리어 라벨 텍스트는 UI를보다 액세스 할 수있게하는 기본 방법 중 하나입니다. 레이블은 사용자에게 필드의 목적을 알려줍니다. 그러나 그들은 도움말 텍스트가 아닙니다. 따라서 쉽게 스캔을 쉽게 쉽게 검사 할 수 있습니다. 간결하고 짧고 설명적인 레이블을 설계해야합니다 (단어 또는 2 개로 유지하십시오).

04. 필드를 복제하지 마십시오

Screenshot compares bad and good forms - the bad asks users to retype their email and retype their password — 사용자가 정보를 두 번 입력하게하지 마십시오. 시간을 낭비하여 좌절 할 것입니다.

이 문제는 특히 등록 양식에 공통적입니다. 거의 모든 사람이 이메일 주소 나 암호를 두 번 입력 해야하는 양식을 통해 제공됩니다. 역사적으로 이것은 잘못 입력 오류를 방지하도록 설계되었습니다. 그러나 대부분의 사용자는 앱이 허용 할 때마다 필요한 필드를 복사합니다. 원래 필드의 데이터가 오류가 포함되어 있으면 복제되었습니다.

05. 선택적 필드를 강조 표시합니다

이상적으로는 선택적 필드가없는 것이 가장 좋습니다. 규칙 번호 1과 일치하면 정보가 필요하지 않은 경우 사용자의 시간 낭비가 없습니다. 그러나 당신이 그들을 사용하는 경우 어떤 입력 필드를 공백으로 남겨 둘 수 없는지 명확하게 구별해야합니다. 일반적으로 별표 (*) 또는 '선택적'레이블과 같은 작은 표시가 충분합니다.

06. 기본값으로 조심하십시오

사용자의 상당 부분 (예 : 90 %)이 필요한 필드 인 경우 특히 그 값을 선택하지 않는 한 정전기 기본값을 포함하지 마십시오. 왜? 이 접근 방식을 사용하면 사람들이 온라인으로 신속하게 양식을 검사하기 때문에 오류를 도입 할 가능성이 큽니다. 그들이 모든 선택을 통해 구문 분석 할 시간이들 것으로 가정하지 마십시오. 그들은 이미 가치가있는 무언가에 의해 건너 뛸 수 있습니다.

이 포인트의 유일한 예외는 사용자의 국가를보다 빠르고 정확하게 양식을 완성 할 수있는 사용자의 국가를 미리 선택하는 것과 같습니다. 그러나 사용자가 미리 선택된 필드를 그대로 남겨 두는 경향이 있기 때문에 이들을주의 깊게 사용해야합니다.

07. 타이핑의 필요성을 최소화하십시오

타이핑은 느리고 오류가 발생하기 쉬운 프로세스이며 사용자가 제한된 스크린 부동산의 제약 조건에 직면하는 모바일에서 특히 고통 스럽습니다. 그리고 작은 화면을 사용하는 사람들이 점점 더 많은 사람들이 불필요한 타이핑을 방지하기 위해 수행 할 수있는 모든 것이 사용자 경험을 향상시킵니다. 적절한 경우 데이터는 데이터를 자동 완성 및 프리 쿼리와 같은 기능을 사용할 수 있으므로 사용자는 최소한의 정보를 맨만에 입력해야합니다.

귀하의 주소 정보를 작성하는 것은 여러 필드, 긴 이름 등에 따르면 온라인 등록 양식의 가장 번거로운 부분입니다. 사용자 가이 필드에 미치지 않는 프리 쿼리를 구현하여 전체 주소를 입력하지 않아도됩니다. Google지도와 같은 라이브러리 간단한 JavaScript API를 제공하십시오 이것을 달성하기 위해서. 당신은 할 수 있습니다 여기에서 작동 해결책을 찾으십시오 ...에

08. 실시간 유효성 검사를 사용하십시오

Illustration shows two fields filled with green ticks beside them, one field filled but with a red x beside it — 오류가 발생하면 즉시 사용자에게 알리십시오. 전체 양식을 완료 할 때까지 기다리지 마십시오.

이상적인 세계에서 사용자는 필요한 정보가있는 양식을 작성하고 성공적으로 일을 끝내지 만, 실제 세계에서는 종종 실수를합니다. 전체 양식을 작성하는 과정을 통해서만 오류가 발생한 제출 시점에서 알아내는 과정을 살펴 봅니다.

누군가에게 정보를 제출 한 직후에 누군가를 알리는 적절한시기는 정보를 제출 한 직후에 있습니다. 이것은 실시간 검증이 재생되는 곳입니다. 사용자가 곧바로 실수로 경고하고 '제출'버튼을 누를 때까지 기다릴 필요없이 더 빠르게 정정 할 수 있습니다.

유효성 검사는 사용자에게 그들이 무엇이 잘못되었는지 사용자에게 알려주지 않아야합니다. 그것은 또한 그들이 옳은 일을 그들에게 말해야합니다. 이를 통해 사용자는 양식을 통해 이동할 수 있습니다.

파슬리 탁월한 JavaScript 양식 유효성 검사 라이브러리입니다. 오픈 소스 및 UX-Focused이므로 정확한 요구에 맞게 거의 모든 기본 동작을 무시할 수 있습니다. 다음 코드는 '메시지'필드에 대한 간단한 파 슬 리 유효성 검사 예입니다. 필드는 적어도 20 자 이상이어야하지만 100 자 이하 여야합니다.

& lt; = "메시지"& gt; 메시지 (20 chars min, 100 max) : & lt; / label & gt; & lt; textarea id = "message"class = "form-control"name = "message"data-parsley-trigger = "keyup"data-parsley-minlength = "20"데이터 - 파슬리 - maxlength = "100"데이터 - 파슬리 -minlength-message = "On! 적어도 20 개의 문자 코멘트를 입력해야합니다." 데이터 - 파 슬 리 - 유효성 검사 - 임계 값 = "10"& gt; & lt; / textarea & gt;

당신은 할 수 있습니다 여기에서 전체 코드 샘플을 찾으십시오 ...에

09. 고정 입력 형식을 피하십시오

고정 된 형식을 강요하는 가장 일반적인 이유는 유효성 검사 스크립트 제한입니다 (백엔드는 필요한 형식을 결정할 수 없음). 대부분의 경우 구현 문제가 발생합니다. 사용자 입력 중에 전화 번호와 같은 형식을 강요하는 대신 사용자가 표시하거나 저장하려는 형식으로 들어가는 모든 것을 변환 할 수 있어야합니다.

10. 재설정 버튼을 사용하지 마십시오

Illustration shows Reset button next to a Save button below a form, with a red cross through it — 제출 옵션 옆에있는 재설정 버튼을 포함하여 조금은 좋은 것입니다.

리셋 버튼은 거의 사용자를 돕지 않습니다. 누군가가 모든 작업을 취소하는 버튼을 원할 것을 상상하기가 어렵습니다. 사실상 모든 재설정 버튼이 제거되면 웹은 더 행복 할 것입니다.

사용자가 웹 사이트에 어떻게 응답하는지 알고 싶습니까? 괜찮은 웹 호스팅 서비스가 필요한 분석을 제공합니다.

이 기사는 원래 나타났습니다 그물 , 전문 웹 디자이너 및 개발자를위한 잡지. 여기 Net을 구독하십시오 ...에

관련 기사:

29 워크 플로우 속도를 높이는 웹 디자인 도구
41 최고의 무료 웹 글꼴
13 개의 사용자 테스트 소프트웨어의 최고의 조각

사용자 친화적 인 웹 양식 만들기위한 10 가지 규칙

01. 필요한 것만 묻습니다

02. 필드를 논리적으로 주문하십시오

03. 레이블을 짧게 유지하십시오

04. 필드를 복제하지 마십시오

05. 선택적 필드를 강조 표시합니다

06. 기본값으로 조심하십시오

07. 타이핑의 필요성을 최소화하십시오

08. 실시간 유효성 검사를 사용하십시오

09. 고정 입력 형식을 피하십시오

10. 재설정 버튼을 사용하지 마십시오

어떻게 - 가장 인기있는 기사

레이어로 할 수있는 10 가지 놀라운 일

슬라이드 아웃 메뉴 만들기

5 분 이내에 그림을 그립니다

VR 창조물을 개선하기위한 5 가지 팁

디지털 도구를 사용하여 손으로 그린 모양을 만드는 방법

사용자 행동에 영향을 미치는 7 개의 킬러 방법

영화를위한 세계를 만드는 방법

아직도 인생 그림 기술을 선명하게합니다

카테고리