폼(Forms) 디자인 15가지 원칙
UX 디자인 배우기 #19
Today UX 아티클
UX Planet에 게재된 Andrew Coyle의 글 Design Better Forms를 소개하고자 합니다.
회원가입 플로우 혹은 멀티뷰 스테퍼 혹은 단조로운 입력 인터페이스 등 폼(forms)은 디지털 프로덕트 디자인의 가장 중요한 구성요소 중 하나라고 합니다.
이 글은 폼을 디자인할 때 공통적으로 해야 할 것과 하지 말아야 할 것을 중점적으로 다룹니다. 전반적인 가이드라인이기 때문에 예외도 있을 수 있음을 염두에 두라고 합니다.
한 열로 만들어야 한다.
여러 열을 쓰면 세로로 읽던 유저가 헷갈려할 수 있다고 합니다.
레이블을 위쪽으로 정렬한다.
유저는 레이블이 왼쪽 정렬된 폼보다 위쪽 정렬된 양식을 훨씬 더 많이 완성한다고 합니다. 또한 레이블이 위쪽 정렬된 폼은 모바일과 호환이 잘 된다고 합니다. 하지만 다양한 옵션과 함께 입력할 데이터가 많은 경우에는 왼쪽 정렬된 레이블을 이용하는 것을 고려해야 한다고 합니다. 이런 경우엔 왼쪽 정렬된 레이블이 위쪽 정렬보다 훑어보기 더 쉽고 길이를 줄여주기 때문이라고 합니다.
입력란과 레이블을 묶는다.
레이블과 입력란을 가까이 위치시키고, 입력란 사이의 충분한 거리를 확보하여 유저가 헷갈리지 않게 해줘야 한다고 합니다.
전체를 대문자로 표시하지 않는다.
레이블을 전부 대문자로 쓰면 읽거나 훑어보기 어렵다고 합니다.
옵션 개수가 6개 이하라면 옵션을 전부 보여준다.
드롭다운으로 옵션을 보여주면 두 번 클릭을 해야 하고 옵션을 숨겨둬야 한다고 합니다. 때문에 옵션이 5개가 넘을 때 드롭다운을 이용하고, 25개가 넘을 때는 드롭다운 내 검색 기능을 부여하라고 합니다.
플레이스홀더 텍스트로 레이블을 쓰지 않는다.
공간을 최적화하기 위해 플레이스홀더 텍스트를 사용해 레이블을 쓰고 싶은 유혹이 들 수 있다고 합니다. 이렇게 하면 많은 사용성 이슈가 생기기 때문에 피해야 한다고 합니다. (닐슨 노먼 그룹에서 쓴 관련 글 링크 http://goo.gl/A3GFn4)
체크박스 및 라디오 버튼은 스캔 가능성(scannability)을 위해 세로로 배치한다.
체크박스를 세로로 배치하면 훑어보기 쉽다고 합니다.
행동을 유도하는 버튼에는 행동을 레이블로 써준다.
행동 유도 버튼은 그 의도를 명확히 보여줘야 한다고 합니다.
오류가 발생한 곳은 인라인(inline)으로 표시한다.
어디서 오류가 발생하였는지 유저에게 보여주고 그 이유를 알려줘야 한다고 합니다.
유저가 입력란을 다 채운 후에 유효한지 확인해주는 인라인(inline)을 사용한다.
유저가 타이핑하는 중에는 (딱히 도움이 안 된다면) 유효성을 확인해주는 인라인을 쓰지 말라고 합니다. 예를 들면 패스워드, 유저 네임, 메시지 입력 중에 글자 수가 부족한 경우라고 합니다.
기본적인 도움말을 숨기자 않는다.
가능하다면 기본적인 도움말은 노출시키라고 합니다. 예를 들어 도움말이 있다면 해당 칸에 내용을 입력 중일 때 보여주는 것을 고려해보라고 합니다.
주요 액션과 부차적인 액션을 구분한다.
심지어 부차적인 옵션을 굳이 넣을 필요가 있는가에 대한 광범위한 철학적 토론도 있다고 합니다.
입력란의 길이를 어포던스로 활용한다.
입력란의 길이는 입력해야 하는 답의 길이를 암시한다고 합니다. 전화번호나 우편번호 등 정해진 글자 수만 입력해야 하는 칸에 이 원칙을 적용해보라고 합니다.
*을 빼고 선택 입력란을 표시한다.
유저가 필수 입력란임을 표시하는 *의 의미를 모를 수도 있다고 합니다. 그 대신 선택 입력란에 표시를 해주는 것이 더 낫다고 합니다.
관련된 정보끼리 묶는다.
유저는 묶음으로 생각하기도 하고, 지나치게 긴 폼은 당황스러울 수 있다고 합니다. 논리적 그룹을 만들어서 유저가 폼을 훨씬 바르게 이해할 수 있도록 도와 주라 고합니다.
12,000명 브런치 구독자를 위한 특별한 혜택!!!!!
라이브 클래스 PM VOD 패키지(리서치/분석/기획/전략/설계) 추천
300시간 이상 UX 강좌, PM을 위한 180여개 UX 강좌 묵음 패키지
브런치 구독자에 한해 정가 대비 90% 할인 쿠폰 증정합니다.
쿠폰 코드: 20241231
상세 정보 확인하기
