디자인 기본사항

첫 번째 섹션에서는 기본 양식을 만드는 방법을 배웠습니다. 이 섹션에서는 권장사항을 다룹니다. 이 모듈에서는 사용자 경험 (UX)과 잘 구현된 사용자 인터페이스 (UI)가 큰 차이를 만드는 이유를 알아봅니다.

사용자 친화적인 인터페이스 만들기

양식 작성은 시간이 오래 걸리고 답답할 수 있지만 반드시 그럴 필요는 없습니다. 우수한 사용자 환경을 구축하려면 인터페이스가 직관적이어야 합니다. 최적의 양식 구조와 그래픽 디자인 (레이아웃, 간격, 글꼴 크기 및 색상), 논리적 UI (예: 라벨 문구 및 적절한 입력 유형)를 제공해야 합니다. 자세를 개선하고 더 쉽게 사용할 수 있는 방법을 알아보세요.

라벨

<label> 요소가 무엇에 사용되는지 기억하나요? 라벨은 양식 컨트롤을 설명합니다. 잘 작성된 라벨이 표시되면 사용자가 양식 컨트롤의 목적을 이해하는 데 도움이 됩니다.

모든 양식 컨트롤에 라벨 사용

양식에 새 양식 컨트롤을 추가하시겠습니까? 먼저 새 필드의 라벨을 추가합니다. 이렇게 하면 잊지 않고 추가할 수 있습니다.

먼저 라벨을 추가하면 양식의 목표(여기에서 어떤 데이터가 필요한가?)에 집중하는 데도 도움이 됩니다. 이 점을 명확히 한 후에는 사용자가 데이터를 입력하고 양식을 작성하도록 지원하는 데 집중할 수 있습니다.

라벨 문구

이메일 필드를 설명하고 싶다고 말합니다. 다음과 같이 할 수 있습니다.

<label for="email">Enter your email address</label>

또는 다음과 같이 설명할 수도 있습니다.

<label for="email">Email address</label>

어떤 설명을 선택하시겠어요?

이 예에서는 짧은 라벨이 더 쉽게 스캔되고, 시각적 혼란을 줄이며, 사용자가 필요한 데이터를 더 빠르게 이해하는 데 도움이 되므로 '이메일 주소'라는 문구가 더 적합합니다.

라벨 위치

CSS를 사용하면 양식 컨트롤의 상단, 하단, 왼쪽, 오른쪽에 라벨을 배치할 수 있습니다. 어디에 배치하나요?

연구에 따르면 사용자가 양식을 빠르게 스캔하고 어떤 라벨이 어떤 양식 컨트롤에 속하는지 확인할 수 있도록 양식 컨트롤 위에 라벨을 배치하는 것이 가장 좋습니다.

양식 디자인

양식 디자인을 잘하면 양식 포기율을 크게 줄일 수 있습니다. 적절한 요소와 입력 유형을 사용하여 사용자가 데이터를 입력하도록 지원 다양한 양식 요소와 입력 유형 중에서 선택할 수 있습니다. 최상의 UX를 제공하려면 사용 사례에 가장 적합한 요소와 입력 유형을 사용하세요. 사용자가 여러 줄의 텍스트를 입력해야 하는 경우 <textarea> 요소를 사용합니다. 사이트의 이용약관에 동의해야 하는 경우 <input type="checkbox">를 사용하세요.

또한 다양한 유형의 양식 컨트롤을 시각적으로 구분해야 합니다. 버튼은 버튼처럼 보여야 합니다. 입력과 같은 입력입니다. 사용자가 양식 컨트롤의 목적을 더 쉽게 인식할 수 있도록 합니다. 예를 들어 링크처럼 보이는 항목을 클릭하면 새 페이지가 열려야 하며 양식이 제출되어서는 안 됩니다.

사용자가 양식을 탐색하도록 지원

화려한 레이아웃은 재미있을 수 있지만 양식을 작성하는 데 방해가 될 수 있습니다.

특히 연구에 따르면 열을 하나만 사용하는 것이 가장 좋습니다. 사용자는 다음 양식 컨트롤이 어디에 있는지 검색하는 데 시간을 낭비하고 싶어하지 않습니다. 열 하나를 사용하면 따라야 할 방향이 하나뿐입니다.

사용자가 양식과 상호작용하도록 지원

실수로 탭하거나 클릭하는 것을 방지하고 사용자가 양식과 상호작용할 수 있도록 버튼을 충분히 크게 만드세요. 버튼의 권장 탭 타겟 크기는 최소 48px입니다. 또한 실수로 인한 상호작용을 방지하기 위해 margin CSS 속성을 사용하여 양식 컨트롤 사이에 충분한 간격을 추가해야 합니다.

양식 컨트롤의 기본 크기가 너무 작아 실제로 사용하기 어렵습니다. padding를 사용하고 기본 font-size을 변경하여 크기를 늘려야 합니다.

pointer CSS 미디어 기능을 사용하여 마우스와 같은 다양한 포인팅 기기의 크기를 정의할 수 있습니다.

// pointer device, for example, a mouse
@media (pointer: fine) {
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
  }
}

// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
  }
}

pointer CSS 미디어 기능에 대해 자세히 알아보세요.

오류가 발생한 위치에 표시

사용자가 주의해야 하는 양식 컨트롤을 쉽게 찾을 수 있도록 오류 메시지를 참조하는 양식 컨트롤 옆에 표시하세요. 양식 제출 시 오류를 표시할 때는 첫 번째 잘못된 양식 컨트롤로 이동해야 합니다.

사용자가 입력해야 하는 데이터를 명확하게 표시

사용자가 유효한 데이터를 입력하는 방법을 이해해야 합니다. 비밀번호를 8자 이상 입력해야 하나요? 알려 줘.

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>

사용자에게 필수 입력란을 명확하게 표시

<label for="name">Name (required)</label>
<input name="name" id="name" required>

필드가 필수인 경우 명확하게 표시하세요. 접근성 있는 양식의 구조에서는 필수 입력란을 나타내는 대안을 설명합니다. 양식의 대부분의 필드가 필수인 경우 선택사항 필드를 표시하는 것이 좋습니다.

오류 메시지를 양식 컨트롤에 연결하여 스크린 리더에서 액세스할 수 있도록 하려면 어떻게 해야 하나요? 접근성 모듈에서 자세히 알아볼 수 있습니다.

이해도 확인

양식 디자인에 대한 지식 테스트

리소스

• 유용한 양식 만들기
• 모바일 양식 디자인 권장사항
• Baymard Institute: 전자상거래 UX 연구
• Don't Make Me Think