Wulin.com의 기사 소개 (www.vevb.com) : 일일 웹 디자인의 양식 디자인에 대한 간단한 토론.
입력 상자 (입력)는 뇌가 넓은 영역 사이의 관계를 잘 처리 할 수 있도록 논리적으로 그룹으로 나누어야합니다. - "권위있는 HTML 가이드"
웹 응용 프로그램은 항상 양식을 사용하여 데이터 입력 및 구성을 처리하지만 모든 양식이 일관되지는 않습니다. 입력 영역, 각 레이블, 작동 방법 및 주변 시각적 요소의 정렬은 사용자의 동작에 어느 정도 영향을 미칩니다.
형태 레이아웃
사용자가 가능한 한 짧게 양식을 작성해야하고 수집 된 데이터가 사용자에게 친숙하다는 점 (이름, 주소, 유료 정보 등)이 수직으로 정렬 된 레이블 및 입력 상자가 가장 좋다고 말할 수 있습니다. 각 태그와 입력 상자의 각 쌍은 수직으로 정렬되어 둘 다에 가까워지고 일관된 왼쪽 정렬은 눈 움직임과 처리 시간을 줄입니다. 사용자는 한 방향으로 만 이동하면됩니다.
이 레이아웃에서는 대담한 레이블을 권장하여 시각적 무게를 높이고 염증을 증가시킬 수 있습니다. 대담하지 않으면 사용자의 관점에서 태그와 입력 상자의 텍스트가 거의 동일합니다.
양식의 데이터가 익숙하거나 논리적으로 그룹화되지 않은 경우 (예 : 주소의 여러 구성 요소) 왼쪽 정렬 태그는 양식의 정보를 쉽게 읽을 수 있습니다. 사용자는 입력 상자에 의한 생각을 방해하지 않고 왼쪽 열의 레이블을 위아래로 바라 보면됩니다. 그러나 이런 식으로 라벨과 해당 입력 상자 사이의 거리는 일반적으로 더 긴 레이블로 길어 지므로 양식을 작성하는 시간에 영향을 줄 수 있습니다. 사용자는 두 개의 해당 태그와 입력 상자를 찾으려면 앞뒤로 점프해야합니다.
이것은 태그의 대체 솔루션, 오른쪽 정렬 레이아웃을 생성하여 태그와 입력 상자 사이의 연결을 더 가깝게 만듭니다. 그러나 그 결과 왼쪽의 고르지 않은 빈 공백과 레이블은 사용자가 양식을 작성 해야하는 것을 신속하게 검색하기가 어렵습니다. 서구 국가에서는 사람들이 왼쪽에서 오른쪽으로 글쓰기에 익숙해 져서 오른쪽에 정렬 된 레이아웃은 사용자에게 이독증을 유발합니다.
시각적 요소의 도움으로
레이블의 왼쪽 정렬 레이아웃 (수직 높이를 검색하고 감소시키기 쉽음)의 장점으로 인해 주요 단점 (레이블의 분리 및 입력 상자)을 수정하려는 유혹이 있습니다.
한 가지 해결책은 배경색과 분할 라인을 추가하는 것입니다. 배경이 다르면 세로 레이블의 열과 수직 입력 상자 열이 생성됩니다. 각 레이블 및 입력 상자 세트는 투명한 수평선으로 분리됩니다. 이것은 좋지만 여전히 문제가 있습니다.
이전 형식 (사용자의 주관적인 시각적 구별)을 비교하면 중간 라인, 배경색 셀 및 수평선의 15 가지 시각적 요소가 추가됩니다. 이러한 요소는 사용자의 관심을 돌리고 사용자가 태그 및 입력 상자와 같은 중요한 요소에 집중하기 어렵게 만듭니다. Edward Tufte가 지적했듯이 : 정보 자체에는 차이가있어 필연적으로 감각적 차이로 이어집니다. 다시 말해, 레이아웃에 쓸모없는 시각적 요소는 레이아웃을 지속적으로 방해합니다. 왼쪽의 태그를 탐색하려고하면 시력이 항상 중단된다는 것을 알게됩니다. 수평선, 셀 및 배경색에 대해 생각해보십시오.
물론 이것이 배경색과 선을 포기하는 것은 아닙니다. 그것들은 여전히 관련 영역 정보를 나누는 데 매우 효과적입니다. 예를 들어, 얇은 수평선 또는 가벼운 배경색은 관련 데이터와 시각적으로 결합 될 수 있습니다. 배경색과 선은 특히 양식을 구별하는 기본 작동 버튼에 효과적입니다.
1 차 및 보조 작업
양식 (일반적으로 제출 또는 절약)의 주요 작동에는 비교적 강한 시각적 무게가 필요합니다 (위의 예, 밝은 색조, 대담한 글꼴, 배경색 등). 이것은 사용자에게 프롬프트를 제공하는 것과 같습니다. 양식을 작성하려고합니다.
양식에 계속 및 반환과 같은 여러 작업이 있으면 보조 작업의 시각적 가중치를 줄여야합니다. 이는 사용자의 잠재적 운영 오류의 위험을 최소화합니다.
위의 컨텐츠를 사용하면 형태를 더 잘 설계 할 수 있지만 레이아웃, 시각적 요소 및 콘텐츠에는 여전히 사용자 테스트 및 데이터 분석 (완료 평가, 오류보고 등)이 필요합니다.