[번역] 더 나은 폼 디자인하기

부제: 디자이너들이 종종 하는 실수들, 그리고 이 실수들을 바로잡는 법

이 글은 Andrew ColyeDesign Better Forms를 번역 및 참조(이미지)한 글입니다.

회원가입, 여러 단계로 이루어진 폼, 단조로운 데이터 수집 인터페이스 등 어떤 형태의 폼이든 디지털 환경에서의 제품 디자인에서 가장 중요한 요소 중 하나이다. 이 글에서는 폼 디자인에서 유의해야 할 부분들을 살펴볼 예정이다. 다만, 일반적인 가이드일 뿐 언제나 예외적인 경우도 있다는 것을 유의하면서 읽으면 좋겠다.


폼은 1단(Column)으로

여러 단으로 이루어진 폼은 사용자들이 세로로 읽어나가는데 방해만 될 뿐이다.

레이블은 상단에 위치시키기

통계적으로 사용자들은 상단에 레이블이 위치(이하 상단 레이블)한 경우 레이블이 좌측에 위치한 경우(이하 좌측 레이블)보다 훨씬 높은 비율로 폼을 완료하는 것을 볼 수 있다. 상단 레이블은 모바일 환경에서 훨씬 깔끔한 모습을 보여주는 장점도 있다. 다만, 하나의 폼에서 많은 양의 데이터를 입력받는 경우 좌측 레이블이 유리하다. 한번에 어떤 데이터를 입력해야하는 지 사용자가 판단하기 편하며 전체 높이가 상단 레이블보다 훨씬 낮아지는 장점이 있다.

레이블과 입력창은 모아서 보여주기

레이블과 그에 해당하는 입력창은 가까이 위치시키고 서로 다른 입력창끼리는 거리를 충분히 두어 사용자가 헷갈리지 않도록 하는게 좋다.

전체 대문자는 피하기

모든 문자가 대문자인 경우 읽고 파악하기 어렵다.

선택지가 6개 미만인 경우 한번에 보여주기

드랍-다운 형태의 입력창을 선택한 경우 사용자는 반드시 두번 이상의 클릭을 해야하며 기본적으로 선택지들이 숨겨져 있다. 따라서 6개 미만의 선택지만 필요로 하는 경우 기본 입력창을 선택지로 사용하는게 좋다. 특히, 선택지가 25개 정도가 넘어가면 문자열 검색창도 함께 제공하는 것이 좋다.

플레이스홀더를 레이블로 사용하지 않기

플레이스홀더를 레이블로 사용하는 것은 공간을 아끼기 위한 좋은 방법처럼 보인다. 하지만 이는 여러 면에서 사용성을 떨어뜨리는 요인으로 작용한다. 이에 대해서는 Katie Sherwin이 요약한 글(https://www.nngroup.com/articles/form-design-placeholders/)을 참조.

체크박스(라디오 버튼)는 세로로 나열하기

세로로 나열된 선택지들이 훨씬 한번에 파악하기 쉽다.

CTA(Call to Action, 액션명)은 직관적으로 표기하기

액션명은 목적에 맞게 적어야 한다.

에러는 정확한 곳에 구체적으로 표기하기

사용자들이 에러가 어디서, 왜 발생했는지 알 수 있도록 보여주어야 한다.

사용자가 입력을 마치고 난 뒤에 인라인 유효성 검사를 하기(입력 도중에 보여주는 것이 반드시 도움이 되는 것이 아니라면)

꼭 도움이 되는 경우가 아니라면 입력 도중에 인라인 유효성 검사를 해서는 안된다. 사용자 이름, 비밀번호를 작성하거나 문자 개수를 세는 경우가 이에 해당한다.

도움말은 숨겨놓지 않기

가능하다면 기본적인 도움말은 숨기지 말고 노출시켜야 한다. 도움말이 복잡한 경우라면, 입력창에 커서가 위치한 동안 입력창 근처에 보여주는 것을 고려하면 좋다.

주액션과 보조액션을 차별화 시키기

이 부분에 대해서는 현재에도 많은 논쟁이 있다.

입력창 길이를 유연하게 만들기

입력창 길이는 입력받을 값의 길이와 일치시켜야 한다. 전화번호, 우편번호 등과 같이 문자열 길이가 고정적인 경우 활용하면 좋다.

* 를 쓰지말고 선택적인 입력창을 표기하기

모든 사용자들이 언제나 (*) 기호의 의미를 알아차리는 것은 아니다. 대신에, 선택적인 입력창을 표기해주는 것이 좋다.

관련있는 정보는 묶어서 보여주기

사용자들은 정보들을 묶음 단위로 생각하기 때문에 폼이 긴 경우 받아들이기 힘들어 한다. 정보를 분류하여 그룹을 지어놓으면 사용자들은 훨씬 빠르고 쉽게 이해한다.

굳이 물어야 하는지 생각해보기

선택적으로 입력을 받아도 되는 입력창은 빼버려도 좋다. 대신 원하는 데이터를 얻을 수 있는 다른 방법을 생각해보라. 폼을 작성할 때는 언제나 이 질문을 꼭 해야하는지 스스로에게 되물어보아라.

재밌게 만들기

인생을 짧다. 폼을 다 채우는 일을 즐기는 사람은 없다. 대화하듯이, 재밌게 만들어야 한다. 점차 사용자가 빠져들게 만들어야 한다. 예상하지 못하는 것을 만들어라. 이것이 디자이너의 역할이다. 여러분이 다니는 회사의 브랜드를 보고 감성적인 반응을 이끌어 낼 수 있도록 만들어라. 이것을 성공적으로 수행하고 나면, 폼 완료율이 크게 늘어날 것이다. 위에 언급한 내용들을 어기지 않는 것을 꼭 유념하라!

Like what you read? Give the6thm0nth a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.