[UI/UX 원칙#9]폼(Forms) 디자인 14가지
UX Planet에 게재된 Andrew Coyle의 글 Design Better Forms를 소개하고자 합니다.
폼(Forms) 디자인 14가지 원칙
(요약문)
폼 디자인의 원칙은 사용자 경험을 개선하고, 입력 과정을 원활하게 하기 위해 중요합니다. 사용자에게 혼란을 주지 않도록 체계적이고 직관적인 방식으로 정보를 배치하는 것이 핵심입니다.
1. 한 열로 구성
여러 열을 사용하면 정보의 흐름이 복잡해져 사용자가 혼란을 느낄 수 있습니다. 따라서 폼은 한 열로 설계하여 가독성을 높여야 합니다.
2. 레이블 상단 정렬
사용자는 레이블이 상단에 정렬된 폼을 선호하며, 이는 모바일 환경에서도 효과적입니다. 많은 옵션이 필요할 경우에는 왼쪽 정렬을 고려하여 효율성을 높일 수 있습니다.
3. 레이블과 입력란 묶기
레이블과 입력란을 가까이 배치하면 사용자가 각 입력란의 목적을 쉽게 이해하게 됩니다. 적절한 간격을 두어 시각적 혼란을 줄이는 것도 중요합니다.
4. 대문자 사용 자제
레이블을 전부 대문자로 작성하면 가독성이 떨어집니다. 대문자는 강조를 위해 사용되지만, 과도한 사용은 오히려 혼란을 초래할 수 있습니다.
5. 옵션 개수에 따라 표시 방식 조정
옵션이 6개 이하일 경우 모든 옵션을 표시하고, 6개 이상일 경우 드롭다운을 사용해 공간을 절약합니다. 25개를 넘으면 검색 기능을 추가하여 사용자의 편의를 도모해야 합니다.
6. 플레이스홀더 텍스트 사용 금지
플레이스홀더를 레이블로 사용하면 사용자가 입력 필드의 목적을 이해하기 어려워질 수 있습니다.
7. 체크박스와 라디오 버튼 세로 배치
세로 배열은 사용자가 항목을 쉽게 비교하고 선택할 수 있게 도와줍니다.
8. 명확한 행동 유도 버튼 레이블
버튼의 기능을 명확히 전달해야 사용자가 혼란 없이 클릭할 수 있습니다.
9. 오류 인라인 표시
오류 발생 위치와 원인을 명확히 설명해 사용자가 문제를 이해하고 해결할 수 있도록 도와야 합니다.
10. 입력란 유효성 검사 시점
입력이 완료된 후에 유효성을 검사하는 것이 좋으며, 실시간 오류 메시지는 사용자의 집중을 방해할 수 있습니다.
11. 기본 도움말 노출
기본적인 도움말을 숨기지 않아야 하며, 이는 사용자의 입력 정확성을 높이고 혼란을 줄이는 데 기여합니다.
12. 주요 및 부가적 액션 구분
사용자가 중요한 작업에 집중할 수 있도록 주요 액션과 부가적 액션을 명확히 구분해야 합니다.
13. 입력란 길이 유도
입력란의 길이는 사용자가 예상되는 입력 길이를 이해하는 데 도움을 줍니다.
14. 정보 그룹화
관련 정보를 묶어 인지적 효율성을 높이고, 사용자가 폼을 쉽게 이해하도록 도와야 합니다.
위글은 요약문입니다.
이 글에 대한 전체 번역 원문은 아래 링크를 클릭해주세요~
https://maily.so/uiux/posts/d6e2a457
