로그인 플로우든, 멀티뷰 , 전체 인터페이스에서 단일 데이터를 보여주는 것이든, 폼form은 디지털 프로덕트 디자인에서 가장 중요한 요소 중 하나이다. 이 글은 폼 디자인의 일반적인 do&don’t에 초점을 맞추었다. 하단의 전반적인 가이드라인과, 모든 규칙에는 예외가 있다는 점을 명심하길 바란다.
1.한 칼럼으로 구성하기
다중 칼럼은 유저가 수직으로 읽을 때 붙는 가속도를 저해한다.
2.상단 정렬 라벨
유저는 좌측 정렬되어있는 라벨보다 상단 정렬되어있는 라벨을 더 높은 확률로 빠르게 인지한다. 또한, 상단 정렬 라벨은 모바일로 전환하기도 용이하다. 그러나, 다양한 옵션이 있는 커다란 데이터 셋을 디자인할 때는 좌측 정렬을 고려해보는 것도 좋다. 그렇게 하면 한 번에 스캔하기가 쉽고, 높이를 줄일 수 있으며 즉각적으로 각각의 데이터를 비교할 수 있기 때문이다.
3.내용에 따라 라벨 그룹 짓기
라벨과 내용을 가까이 두자. 그리고 각 필드 사이에는 충분한 여유 공간을 둬서 유저가 헷갈리지 않도록 하자.
4.전체 대문자 피하기
전체 대문자는 가독성을 떨어뜨린다.
5.6개 미만인 옵션의 경우 한 번에 보여주기
옵션을 드롭 다운 형식은 두 번 클릭하게 만들고, 옵션을 가려지게 만든다.이 경우는 옵션이 5개를 초과할 때만 사용하도록 하자. 25개 이상의 옵션이 있는 경우, 드롭 다운 내에 상황별 검색 기능을 추가하자.
6.라벨을 쓸 때는 텍스트로 쓰기
라벨을 텍스트로 사용하여 공간을 최적화하는 것이 좋다. 이는 닐슨 노먼 그룹의 Katie Sherwindl이 요약한 많은 사용성 이슈와 연관되어져 있다.
7.체크박스(라디오 버튼)의 경우 리스트 형식으로 배열하기
세로로 배열하는 것이 한 번에 스캔하기 용이하다.
8.CTA 설명하기
CTA(Call To Action)은 반드시 의도를 설명해주어야 한다.
9.에러 구체적으로 명시하기
에러가 어디서 발생했는지 적절한 이유를 제공해주어야 한다.
10.입력을 완료했을 때 에러창 띄우기
유저가 비밀번호, 유저명, 메시지 혹은 숫자 등을 타이핑 중일 때 에러창을 띄우지 말자.
11.기본적인 설명은 숨기지 않기
가능한 기본 설명은 노출하자. 복잡한 설명문은 입력칸 옆에 배치하는 것을 고려해보자.
12.주 액션과 보조 액션 구분하기
2차 선택권을 제공해야 하냐는 철학적인 논쟁이 있는 부분이다.
13.행동과 연관된 필드 길이 설정하기
필드의 길이는 답변의 길이를 유도한다. 전화번호, 우편번호 등과 같이 문자 수가 정의된 필드의 경우 짧게 설정하자.
14.옵션 문항 *로 표시하지 않기
유저들은 종종 *가 무슨 뜻을 의미하는지 모를 때가 많다. 그 대신에, ‘옵션 문항'이라고 정확하게 명시해주는 것이 좋다.
15.그룹별로 정보 제공하기
아무런 구분도 없는 길다란 폼을 보면, 유저는 압도 당하는 느낌을 받는다. 유저가 빠르게 폼을 이해할 수 있도록, 비슷한 내용들은 묶어서 제공하자.
