더 나은 Form UI 디자인을 위해
폼 디자인을 할때 디자이너들이 자주하는 실수와 그 실수들을 고치는 방법
(출처 : https://uxdesign.cc/design-better-forms-96fadca0f49c#.iij0516eu의 기사를 번역 및 가공한 컨텐츠 입니다.)
유저의 회원가입을 이끌어내는 플로우, 여러 가지 화면을 볼 수 있는 UI의 사용, 단순 데이터 입력 인터페이스까지 폼 디자인이란 프로덕트의 가장 중요한 요소 중 하나입니다.
이 기사에서는 폼을 디자인할 때 어떻게 디자인을 해야 하고, 하지 말아야 할지를 다룹니다.
(해당 내용은 일반적인 가이드라인입니다. 예외 상황이 있을 수도 있습니다.)
1. 세로 방향의 한 줄로 디자인하기
좌우로 분할되어 있는 폼은 유저가 수직 방향으로 빠르게 처리할 수 있는 액션을 방해합니다.
2. 레이블을 필드 상단에 위치시키기
유저는 상단정렬 레이블 폼을 좌측으로 좌측정렬 레이블보다 더 빠른 속도로 작성합니다.
이렇게 상단에 위치한 레이블들은 모바일에서도 쉽게 읽힙니다.
(*레이블을 좌측으로 정렬하기 좋은 컨텐츠 : 변수가 있는 대용량의 데이터들을 입력할 때 좋습니다. 좌측 정렬 레이블은 전체적으로 폼의 높이를 줄이고, 레이블들을 쉽게 스캔 할 수 있으며 레이블의 의미에 대해 더 많이 고민하게 만들 수 있기 때문입니다.)
3. 레이블과 인풋필드를 시각적으로 묶기
유저에게 혼동이 일어나지 않도록 레이블과 인풋필드는 가깝게 디자인하고,
다음 레이블과 인풋필드의 높이가 충분한지 확인해야 합니다.
4. 대문자는 피하기
대문자는 소리 지르는 듯한 느낌을 줘서 더 공격적으로 보일 뿐 아니라 읽고 스캔하기가 더 어렵습니다.
5. 옵션이 6개 미만일 경우, 모든 옵션을 표시하기
드롭다운 형식의 UI에 옵션을 넣는다면 유저는 드롭다운을 열고, 항목을 선택하기까지 두 번 클릭을 해야 합니다.
옵션이 5개 이상인 경우만 드롭다운 형식을 사용하고, 25개 이상의 옵션이 있다면 드롭다운 내에도 상황별로 검색 될 수 있는 검색 기능을 제공하는 게 좋습니다.
6. 플레이스 홀더 텍스트를 레이블로 사용하지 않기
플레이스 홀더를 레이블로 사용하면서 공간을 최소화하려하는 것은 많은 사용성이슈를 발생시킵니다.
(이슈참고 : https://www.nngroup.com/articles/form-design-placeholders/)
7. 항목에 대한 스캔이 쉽도록 체크박스나 라디오박스를 세로로 배치하기
체크박스를 세로로 배치하면 항목들에 대해 쉽게 스캔이 가능합니다.
8. 콜투액션(CTA)은 최대한 쉽게 풀어서 표시하기
콜투액션(CTA)은 의도를 충분히 설명해야 합니다.
9. 에러를 한줄로 정렬하고 에러에 대해 구체적으로 알려주기
유저에게 오류가 발생한 위치를 알려주고 에러에 대한 이유를 제공해 주어야 합니다.
10. (인풋필드를 작성하는 프로세스에 도움이 되지 않는 한) 유저가 인풋필드를 다 채운 뒤에 유효성 검사하기
(인풋필드를 작성하는 프로세스에 도움이 되지 않는 한) 유저가 타이핑하는 동안 문자 수를 카운팅 하는 등의 유효성 검사를 실시하지 않는 게 좋습니다.
11. 도움이 되는 가이드 텍스트를 숨기지 않기
가능하면 가이드 텍스트를 숨기지 않아야 합니다.
예를 들어, 복잡한 가이드 텍스트의 경우, 인풋필드가 선택된 상태에서만이라도 옆에 가이드 텍스트가 출력되는 방식을 고려해보는 것도 좋습니다.
12. 메인액션과 보조액션을 구분하기
메인액션에 강조를 두어 보조액션보다 더 강하게 유도합니다.
13. 인풋필드의 길이를 어포던스(특정한 행동을 하게끔 유도하거나 특정 행동을 쉽게 하게 하는 성질)로 이용하기
필드길이는 대답의 길이를 유추할 수 있게 설계합니다.
전화번호, 우편번호 같이 문자 수가 정의된 필드에 이 값을 사용하면 좋습니다.
14. 필수항목(*)을 버리고 선택입력 항목을 알려주기
유저는 필수 입력항목(*)을 모두 알 수 없습니다.
필수 입력항목이 더 많다면 선택적으로 입력할 수 있는 항목만 나타내는 것이 좋습니다.
15. 비슷한 항목끼리의 그룹으로 묶기
유저는 정보를 그룹화하는 사고에 익숙하고, 그룹화하지 않고 길게 단순나열해 있는 폼들에서는 쉽게 피로감을 느낍니다. 항목을 묶음으로서 유저에게 폼의 양식과 구조를 훨씬 빨리 이해시킬 수 있습니다.
왜 굳이 유저에게 질문을 해야 할까?
유저에게 폼을 작성하라고 하는 대신에 묻지 않고도 답을 얻어낼 수 있는 다른 방법이 있는지 고민해봐야 합니다.
데이터의 입력은 점점 자동화되고 있습니다. 모바일 및 웨어러블 기기는 이미 유저의 많은 데이터를 수집하고 있고 소셜미디어, 대화식 UI, SMS, 이메일, 음성, OCR, 위치, 지문, 생체 인식 등을 활용할 수 있는 방법도 있습니다.
재미있게 만들기!
인생은 짧습니다. 아무도 지루하게 양식을 작성하고 싶지 않아합니다.
디자이너의 역할은 기쁨이나 감동 등 감정적인 반응을 이끌어내기 위해 회사의 브랜드를 표현하는 것입니다. 재밌게 만들고, 대화가능하게 만드세요. 만약 위 항목대로 제대로 폼을 만들었다면 유저의 완료율이 높아질것입니다.
