모바일 터치 디자인하기(2)_폼 디자인

많은 사용자들이 PC보다 손쉽게 접속할 수 있는 모바일로 회원가입을 하고 정보를 제출하기 위해 모바일의 폼 디자인을 사용하고 있습니다. PC와는 다른 모바일 폼 디자인에 관련해 살펴보고자 합니다. 

폼 필드

입력 필드 최소화

PC 디자인과 동일하게 모바일에서 폼 필드를 제공할 경우 많은 입력 폼에 지친 사용자의 페이지를 이탈할 가능성이 높아집니다. PC에서는 필요한 정보 이외에 선택적인 정보도 요구하지만 모바일에서는 꼭 필요한 정보만 입력하도록 만들어야 합니다. 또한 입력 필드를 최소화하고 구간을 나누지 않는 편이 좋습니다. 예를 들어 핸드폰 번호를 입력할 경우 필드 구간을 나누어 놓으면 사용자는 숫자를 누른 후 다음 입력 필드를 터치 후 다시 입력하는 행동을 여러번 거쳐야하기 때문에 특별한 사유 없이는 구간을 나누지 않아야 합니다. 

[번호 입력 디자인]

레이블 디자인

레이블은 통일감 있고 이해하기 쉬운 단어를 사용하는 것이 좋습니다. 대게 PC에서는 왼쪽에 위치하지만 모바일에서는 가로 길이 특성상 상단에 많이 위치시킵니다. 그리고 레이블을 텍스트 필드 안에 위치시키는 인라인 레이블을 사용하는 경우가 있습니다. 이는 사용자가 텍스트 필드 클릭 시 레이블이 사라지게 하는 패턴을 말하는데 사용자에게 혼란을 야기할 수 있음으로 가능하면 사용하지 않거나 꼭 사용하여야 한다면 입력 시 레이블이 사라지는 대신 상단에 표시하는 플로팅 레이블 디자인 또는 명확한 아이콘 사용을 권장합니다. 

[레이블 디자인]

키보드

상황에 맞는 키보드 제공

만약 숫자와 관련된 입력 폼을 작성할 경우 기본 키보드를 제공하는 것보다 숫자 키보드를 제공함으로써 사용자들의 편의성을 높입니다. 약간의 강제성을 띠지만 불필요한 자판을 제공하지 않아 실수할 확률을 낮출 수 있습니다. 모바일에서는 상황에 맞는 키보드를 제공하는 것이 사용자에게 원활하게 입력 필드를 채울 수 있게 도와줄 수 있습니다. 

[키보드 디자인]

피드백 디자인

팝업 사용 줄이기

폼 필드를 작성하다보면 해당 내용에 관련하여 맞는 정보를 입력하지 않았다는 피드백을 사용자에게 제공해야하는 경우가 있는데 PC 사이트의 상당수가 피드백 메시지를 팝업으로 제공하고 있습니다. 하지만 모바일에서는 팝업을 사용할 경우 해당 정보를 가리는 경우가 많아 사용자들의 이해도를 저해시킬 수 있습니다. 메시지 팝업 대신 입력 필드 하단에 피드백을 실시간으로 제공하여 사용자가 잘못된 정보를 바로 수정할 수 있는 환경을 만들어 주어야 합니다. 

[피드백 디자인]

사용자들이 폼 작성을 주저하게 만드는 요소들을 줄이고 가능한 프로세스를 쉽게 만들어야 합니다. 입력하는 과정이 길어지고 복잡해지면 원하는 정보를 보기도 전에 지쳐 그 페이지를 떠날 수도 있기 때문입니다. 모바일에서 모바일 폼을 사용할 경우 최소한으로 정보를 요구해야하며 사용자들의 편의성을 높일 수 있는 폼 디자인이 제공되어야 합니다. 앞으로는 위에 내용을 참고하여 사용자들에게 조금 더 나은 모바일 페이지를 제공할 수 있게 되면 좋겠습니다. 

※ 참고문헌, URL

- 터치를 위한 디자인하기(조시 클라크)

- 모바일을 위한 웹디자인(스매싱 매거진)

- 제이콥 닐슨의 모바일 사용성 컨설팅 보고서(제이콥 닐슨, 라루카 부듀)

- http://babich.biz/text-fields-in-mobile-app/

- https://uxplanet.org/float-label-pattern-in-ux-form-design-7ab5e33010ab