Design Better Forms 훔친 남의 글 - 밥줄

폼 디자인을 할때 조심해야할, 알아두면 좋을 몇가지.


======================================================================================================================

Design Better Forms

흔히 저지르는 실수와 바로잡는 법

Andrew Coyle

Product Design Lead @Flexport | Find more of my workat http://andrewcoyle.com/

 

회원가입 프로세스든 단순한 데이터 입력 인터페이스든 간에디지털상품 디자인에 있어서폼은 매우 중요한 요소중 하나이다이글은 폼 디자인을 하는데 있어서 상식적인 '할것들과 '하지말아야할 것'들에 대해 초점을 맞추었다이것은 일반적인가이드라인일 뿐이다예외는 항상 어디나 있다는것을 명심해라.


폼은 세로로 한 줄이어야한다.

2열 이상으로 나열된 경우 사용자는 혼란스러울 수 있다.


입력폼의 레이블은 레이블위에 정렬한다.

폼의 왼쪽에 레이블이있는 것 보다 위에 위치한 경우에 완성률이 더 높다.  

레이블이 위에 있으면모바일 환경에서 이해하기도 훨씬 쉽다

왼쪽에 레이블이 있는경우는 보통 다양한 옵션이 있는 큰 데이터셋 입력에 많이 쓰는데 훑어 읽어내기 쉽고 전체 폼의 높이를 줄일 수가 있기때문이다.



입력폼과 레이블명을 그루핑해라.

입력폼과 레이블을 가깝게배치하고입력폼과폼 사이의 간격이 충분히 벌어지도록 해야 서용자가 혼란스럽지 않다.



모든 레이블을 대문자로사용하지 말아라.

레이블명이 모두 대문자인 경우 읽거나 스캔하기 어려워진다.



옵션이 6가지 이하인 경우 모든 옵션을 한꺼번에 보여줘라.

드롭다은 리스트를 사용하는것은 두번 터치가 필요하며옵션이 감춰져 있다는 것이다.

5개 이상의 옵션이 있다면인풋셀렉터를 사용해라. 25개 이상의 옵션이 있는 경우 드롭다운 내 검색이 가능하도록 구현해라.



입력폼 내의 안내 문구를레이블로 사용하지 말아라.

플레이스홀더를 레이블 대신 사용함으로써 공간을 최대한 활용하고 싶겠지만 이것은 많은 유용성 이슈를야기한다.



체크박스(또는 라디오버튼)은 가독성을 높이기 위해 세로로 배치하는 것이 좋다.

각각의 체크박스와 항목을 세로로 정렬하면 가독성을 높일 수 있다.



CTAs은 이해할 수 있는 레이블을 달아라.

콜투액션은 그 의도가명확하게 표현되어야 한다.



오류안내는 즉시 설명한다.

사용자에게 무엇이 왜 잘못되었는지를 바로 보여줘라.



사용자가 입력폼을 채운 후에 유효성 체크를 해라

비밀번호 생성하기나사용자이름글자수가 정해진 메시지 입력 등은사용자가 타이핑을 하고 있는 중에 유효성 체크를 하지 말아라



기본 안내문구는 감추지말아라.

기본적인 안내 문구는가능한한 노출시켜라

안내 문구는 입력중인폼 가까운 곳에 위치하는 것이 좋다.



주요버튼을 구분해라.

심지어 요즘은 보조버튼이 굳이 필요한지에대한 철학적 논쟁까지도 벌어지고 있다.



입력글자수에 맞는 길이의필드를 사용한다.

필드의 길이는 입력 글자수에 맞도록 한다



*를 버리고 선택 필드를표시해라.

사용자 항상 *이 무엇을 뜻하는 지 알지 못한다대신 선택 필드가어떤 것인지를 표시하는 것이 좋다.



관련된 정보는 그루핑해라.

긴 폼은 사용자가 압박을느낄 수 있다.

논리적인 그룹핑은 사용자가훨신 빠르게 폼을 이해하는데 도움을 준다.



Why ask?

선택 항목을 제거하고데이터를 수집할 다른 방법을 생각해봐라질문이 추측가능한지차선인지완전히불가능하진 않은지 항상 자문해라.

데이터 입력은 점점 자동화되어가고 있다예를 들어모바일과 웨어러블기기들은 사용자가 인지하지 못하는 순간에도 많은 양의 데이터를 수집한다소셜이나 대화형 UI, SMS, 이메일음성지원문자인식(OCR), 위치지문생체인식 등 활용할 수 있는 수단에 대해생각해볼 필요가있다.

 

재미있게 만들어라.

인생은 짧다누구도입력폼을 다 채우고 싶어하지 않는다구어체를 사용하고 재미있게 표현해라점진적으로주의를 끌어라예측 불가능한 것을 해라감정적인반응을 이끌어내기 위해 회사의 상품을 표현하는 것은 디자이너의 몫이다모든 것을 올바르게했다면 완성률 또한 높아질 것이다위에 언급된규칙을 어기지 않도록 항상 명심해라.

 

 


덧글

  • 뇌빠는사람 2016/12/14 11:53 #


    하하.. 개발하면서 정말 공감되는 이야기 투성이인데 오히려 기획자와 디자이너가 일부러 저러나 싶을 만큼 철저히 무시하더군요.
  • Lunarian 2016/12/19 13:02 #

    헙....기획자로서 괜히 미안하네요..ㅋㅋㅋㅋㅋㅋ
※ 로그인 사용자만 덧글을 남길 수 있습니다.