10장 사용자에게 입력값 받기 - 사용자를 끌어들이는 UX/UI의 비밀

2022 우아한스터디 - UX 패턴파인더 스터디

 

사용자가 Form 작성을 완료하기 어려워하는 경우를 어렵지 않게 발견할 수 있다. 이번 장에서는 이러한 경우에 활용할 수 있는 디자인 패턴을 알아본다.

 

Form은 '일련의 질문과 답변 세트'라고 간단하게 표현할 수 있다. 소프트웨어에서 사용자 정보를 수집해야하는 상황에 흔히 활용된다.

다행인 점은 사용자는 '텍스트 입력란', '체크박스' 와 같은 기본적인 폼 요소에 익숙하다.

대부분의 모던 인터페이스 툴킷에서는 나름대로 정형화된 Form 요소와 Form 컨트롤을 제공해서 바로 가져다 쓸 수 있기도 하다.

 

 

 

목적을 확실히 전달하자.

제목, 맥락, 용어를 통해 왜 이 Form을 작성하도록 요청하고 있는지 명확하게 표현해야 한다. 

더불어 해당 문항이 필수 문항인지, 부가적인 문항인지를 정확하게 반드시 전달해야 한다. 필수항목에 표시를 할지, 선택항목에 표시를 할지는 앱 전체의 기준을 따라서 통일성있게 구성하자.

완성 후에 사용자는 어떤 것을 얻을 수 있는지도 드러내자. 사용자가 작성을 마친 경우, 이 사실을 반드시 알려주자.

 

소요시간, 입력횟수를 최소화하자.

사용자가 Form을 전부 입력하는데 얼마나 많은 시간이 드는지 체크해보자. 그리고 이를 줄일 수 있는 방법은 없을지 고민해보자.

각 문항에 적절한 레이블을 사용해서 접근성을 높이자. 작성 예시를 충분하게 보여주는 것도 도움이 된다.

기본값을 지정해 입력횟수를 줄여주거나, 자동완성 기능으로 입력할 양을 줄여줄 수 있다.

이미 입력한 정보에서 필요한 정보를 알아서 추출해낼 수도 있다. 예를 들어, 사용자가 우편번호를 입력한다면 시, 구, 동 등의 정보는 자동으로 추출할 수도 있을 것이다. 이 경우 사용자에게 시, 구, 동 등의 정보를 다시 입력하게 하는 것은 불필요하다. 또, 신용카드의 경우 카드번호 맨 앞의 2자리로 카드종류를 알아낼 수 있다는 점도 활용할 수 있다.

사용자의 입력값이 틀렸다면 즉각적으로 피드백을 제공하자. 우리의 목표는 사용자가 최대한 빠른 시간 내에 태스크 수행을 완수하는 것이다. Form 전체를 제출하기 전에 개별 항목에 대해 에러 메세지를 제공하는 것이 도움이 된다.

• 어떤 필드에서 무엇이 어떻게 잘못되었는지 충분히 설명한다.
• 컴퓨터 용어가 아닌 일상어로 설명한다.
  • 자바스크립트 에러 693 (X)
  • 숫자 검증 오류 (X)
  • 이 폼에 데이터가 없음 (X)
  • 우편번호에 글자가 들어가있나요? (O)
  • 죄송하지만 오류가 있습니다. '확인'을 다시 클릭하세요 (O)

 

Form이 길어진다면 구조화하자.

성격이 같은 문항끼리 섹션으로 구분해서 내용을 함축적으로 담은 제목을 붙여보자. 부연설명을 위해 부제목을 붙여볼 수도 있다. 

요청할 질문의 수가 많은데, 이를 한번에 모두 보여주면 사용자가 피로감을 느낄 수 있고, 일부 작성을 누락할 가능성도 높아진다. 이 경우 섹션별로 순서대로 표시하는 방법을 활용할 수 있다.

 

시각적 혼란을 최소화하자.

화려한 시각적 요소를 넣는 것은 오히려 사용자를 혼란스럽게 한다. 최대한 간결하고, 깔끔하고, 집중할 수 있게 디자인한다.

Form의 흐름을 수직으로 디자인하는 것이 도움이 된다. 문항은 좌측정렬로 하고 위에서 아래로 진행되도록 한다. 문항 간 간격은 동일하게 유지하고, 시선의 이동은 너무 길지 않게 자연스럽게 이어지도록 디자인한다. 모바일에서는 레이블이 입력란 좌측이 아니라, 위에 배치하는 것이 레이아웃이 깨질 확률을 낮추는 방법이다.

입력란의 너비로 사용자가 입력할 길이를 가늠할 수 있게 하는 것도 좋다. 숫자 3개를 받는다면 3개의 작은 칸으로 구성할 수 있다.

플레이스홀더에 텍스트를 너무 많이 넣는 것도 지양하자. 사용자는 이미 작성한 칸이라고 착각할 수 있다.

 

 

내용출처: 사용자를 끌어들이는 UX/UI의 비밀(제니퍼 티드웰, 찰스 브루어, 아인 발렌시아 저)