디자인 기본사항

첫 번째 섹션에서는 기본 양식을 만드는 방법을 배웠습니다. 이 섹션에서는 권장사항에 대해 설명합니다. 이 모듈에서는 사용자 환경 (UX), 잘 구현된 사용자 인터페이스 (UI)가 큰 차이를 가져올 수 있는 이유를 알아봅니다.

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

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

라벨

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

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

양식에 새 양식 컨트롤을 추가하시겠습니까? 먼저 새 필드에 대한 라벨을 추가합니다. 이렇게 하면 코드를 추가하는 것을 잊지 마세요.

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

라벨 문구

이메일 필드에 관해 설명한다고 가정해 보겠습니다. 다음과 같이 할 수 있습니다.

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

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

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

어떤 설명을 선택해야 할까요?

이 예에서 '이메일 주소'라는 단어는 선호하며 짧은 라벨은 더 쉽게 스캔할 수 있고, 시각적인 혼란을 줄이며, 사용자가 어떤 데이터가 더 빨리 필요한지 이해할 수 있도록 도와줍니다.

라벨 위치

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

리서치 프로그램 가장 좋은 방법은 양식 컨트롤 위에 라벨을 배치하고, 이렇게 하면 사용자가 양식을 빠르게 스캔하여 어떤 라벨이 어떤 양식 컨트롤에 속하는지 확인할 수 있습니다.

양식 디자인

좋은 양식 디자인은 양식 이탈률이 크게 감소합니다. 적절한 요소와 입력 유형을 사용하여 사용자의 데이터 입력 지원 다양한 양식 요소와 입력 유형이 표시됩니다. 최상의 UX를 제공하려면 사용 사례에 가장 적합한 요소와 입력 유형을 사용하세요. 사용자가 여러 줄의 텍스트를 입력해야 하는 경우 <textarea> 요소를 사용합니다. 사이트 이용약관에 동의해야 하는 경우 <input type="checkbox">를 사용합니다.

또한 여러 유형의 양식 컨트롤을 시각적으로 구별해야 합니다. 버튼은 버튼처럼 보여야 합니다. 입력과 같은 입력 사용자가 양식 컨트롤의 목적을 쉽게 알 수 있도록 합니다. 예를 들어 링크처럼 보이는 것을 클릭하면 새 페이지가 열리고 양식을 제출하지 마세요

사용자의 양식 탐색 지원

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

특히 연구 프로그램 단일 열만 사용하는 것이 가장 좋습니다. 사용자는 다음 양식 컨트롤이 있는 곳을 검색하는 데 시간을 소비하고 싶어 하지 않습니다. 열을 1개 사용하면 방향이 하나만 생깁니다.

사용자의 양식 상호작용 지원

의도하지 않은 탭과 클릭을 방지하려면 사용자가 양식과 상호작용할 수 있도록 하려면 버튼을 충분히 크게 만드세요. 권장 버튼의 탭 타겟 크기가 48픽셀 이상 또한 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 연구
• 생각하지 마세요