brunch

매거진 UX 디자인의 모든 것

라이킷 43 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Sep 13. 2016

폼(Foums) UX 4원칙

UX 디자인 배우기 #35

Today UX 아티클

UX Booth에 게재된 Mike Madaio의 글 The New Rules o fForm Design을 소개하고자 합니다.

이글에서는 효과적인 필드를 디자인할 때 고려해야 할 4가지 룰을 제시하고 있습니다.

스캐너빌리티(Scannability)를 우선순위로 삼는다

제이콥 닐슨이 오래전에 ‘유저는 웹 페이지를 읽지 않고 스캔한다’고 말했다고 합니다. 양식을 입력할 때도 마찬가지라고 합니다. 오류를 최소화하고 빈칸이 없게 만들기 위해서는 효율적이고 효과적인 스캐닝을 할 수 있게 해주는 것이 매우 중요하다고 합니다. 특히 한 사람당 한 번씩 작성하는 양식(이커머스 주소 입력 양식, 회원가입 양식 등)은 더 그렇다고 합니다.

레이블 위치

양식 디자인 분야의 저명한 Luke Wroblewski에 따르면 입력란 위에 레이블을 적은 경우 완료 시간이 가장 짧았다고 합니다. 그 다음으로는 우측 정렬된 레이블이 그 다음으로 빨랐는데 페이지 길이에 제약이 있는 경우에 활용하면 된다고 합니다.

힌트

플레이스 홀더 텍스트(placeholdertext) 혹은 힌트 텍스트는 입력란에 텍스트가 적혀있는 것인데, 일반적으로 별로 도움이 안 되는 것으로 여긴다고 합니다. 입력란을 누르면 유저가 더 이상 문구를 볼 수 없기 때문입니다.

레이블은 분리해서 보여준다고 해도, 힌트 텍스트가 입력란에 들어있으면, 문제가 된다고 합니다. NN Group의 아이트래킹 연구결과에 따르면 빈칸이 텍스트가 입력된 칸보다 더 눈길을 끌고 플레이스홀더텍스트가 있는 입력란은 쉽게 지나친다고 합니다.

좋음: 입력란이 비어있음

나쁨: 입력란에 도움말이 들어있음

어떤 경우에는 플레이스홀더 텍스트를 더 옅은 색으로 입력하여 이슈를 완화해준다고 합니다. 하지만 이렇게 하얀 마탕에 옅은 회색을 쓰는 것은 널리 인정되고 있는 웹 접근성 가이드라인에 위배된다고 합니다. 게다가 W3C에 따르면 플레이스홀더 텍스트는 보조기기에서 지원하지 않는 경우가 많아 그런 유저들이 양식을 정확히 입력하는 데 어려움을 겪게 만든다고 합니다.

플로팅 레이블(Floating lable)

좀 더 새로운 인터랙션 디자인 스타일도 있다고 합니다. 바로 플로팅(혹은 어댑티브) 레이블로, 빠르게 인기를 얻어가고 있다고 합니다. 레이블이 플레이스 홀더 텍스트로 들어가 있다가 유저가 타이핑을 시작하면 입력란 위로 옮겨진다고 합니다.

물론 이렇게 하면 페이지 길이를 줄일 수 있어 특히 모바일에서 도움이 되지만, 앞서 언급한 ‘입력란이 이미 채워져 있으면 생기는 이슈’를 해결하지는 못한다고 합니다. NN Group에서는 이와 관련해 페이지 길이가 가장 큰 고민이 아니라면 레이블을 입력란 위에 쓰는 것이 좋다고 얘기했다고 합니다.

어렵지 않게 작성할 수 있도록 만든다

입력 마스크(Input Masks)

유저가 양식에 텍스트를 입력하도록 도와주는 입력란 마스킹(field masking)과 플레이스 홀더 텍스트(placeholdertext)는 비슷하게 생겼지만 다르다고 합니다. 첫째, 마스크는 유저가 입력란을 눌렀을 때만 나타나며 앞서 언급한 스캐닝 문제를 방지해준다고 합니다. 둘째, 마스크는 텍스트 형식을 자동으로 만들어준다고 합니다. 아래 사례처럼 전화번호를 입력하면 괄호, 입력 공간, 대시(-)가 자동으로 적용된다고 합니다.

이런 간단한 테크닉으로 전화번호, 카드 번호, 금액 등을 입력할 때 시간과 노력을 절약할 수 있다고 합니다.

입력란 관련 HTML 속성

이젠 많은 디자이너들이 언제 어떤 모바일 키패드를 제공해야 하는지 잘 알고 있지만, 여전히 헷갈리는 부분이 있는 것 같다고 합니다.

예를 들어 숫자 입력 시에는 숫자가 작게 보이는 ‘키보드’ 모양과 ‘전화번호 키패드’ 중 하나를 보여준다고 합니다. 숫자만 입력하면 되는 우편번호, 카드번호 등에는 전화번호 키패드를 보여주면 된다고 합니다. 반면 키보드 모양의 키패드는 숫자로 시작하는 주소 등을 입력할 때 보여주면 된다고 합니다.

이 외에도 입력 오류를 제거해주는 HTML 속성으로는 AutoComplete, AutoCorrect, AutoCapitalize,SpellCheck 등이 있다고 합니다.

타이핑을 줄인다

작은 모바일 스크린을 이용하는 사람들이 점점 많아지고 있어, 불필요한 타이핑을 없애주는 모든 것은 유저의 만족도를 높여주고 오류 발생률을 줄여줄 수 있다고 합니다.

주소 미리 입력(pre-fills)

주소 입력은 보통 온라인 회원가입 양식에서 가장 성가신 부분이라고 합니다. 이를 한 칸으로 줄이면 유저가 키패드에 머물 수 있게 해주면서도 엄청난 양의 타이핑을 줄여준다고 합니다.

아래 사례처럼 구글 본사 주소도 본래 키보드를 50번 넘게 두드릴 것을 10번 안에 완성할 수 있다고 합니다.

위의 구글 API 솔루션은 대부분의 경우에 적절하지만, 빌딩이나 아파트 주소 데이터는 제공이 어려울 수도 있다고 합니다.

이메일 미리 입력

타이핑을 줄여주는 또 다른 방법은 흔하게 이용되는 도메인 이름을 이메일 입력란 내에서 제공하는 것이라고 합니다. Staples는 유저가 @ 버튼을 누르면 미리 입력된 솔루션을 보여주어 타이핑을 줄여준다고 합니다.

위치 정보를 가져온다

특히 타이핑이 성가신 터치 스크린에서는 위치 인식을 기반으로 미리 입력된 정보는 귀중한 시간을 절약해주고 전환율을 개선해준다고 합니다.

이 기술을 잘 쓰고 있는 사례는 Nordstrom’s의 제품 디테일 화면으로, 양식 입력 경험을 완전히 건너뛸 수 있다고 합니다. 유저에게 우편번호를 묻는 대신, 제품 디테일 페이지에서 위치를 감지하여 자동으로 가장 가까운 매장에 해당 제품의 제고가 있는지 알려준다고 합니다. 시간 절약과 더불어 유저는 아무런 노력을 들이지 않고도 유용한 정보를 얻을 수 있다고 합니다.

전체 주소를 미리 입력해주는 것도 가능하긴 하지만 정확성의 문제가 있을 수 있다고 합니다. 구글의 Place API에서는 두 마리 토끼를 모두 잡으려고 지리적 위치와 주소 미리 입력 기능을 모두 이용해, 유저의 정확한 위치를 기반으로 정확한 제안을 한다고 합니다.

부정확성의 문제 때문에 자동 입력된 데이터를 편집할 수 있게 해줘야 한다고 합니다.

정리하며

간단히 말해 다음과 같이만 하면 유저를 행복하게 만들어주는 양식을 만들 수 있다고 합니다.

읽기 쉬운 레이블을 디자인하고 훑어보는 사람을 헷갈리게 만드는 관련 없는 콘텐츠는 피하여 스캐너빌리티(scannability)를우선순위로 삼습니다.

각 입력 유형에 맞는 인풋 마스크와 적절한 키패드를 제공하여 어렵지 않게 작성할 수 있게 합니다.

미리 입력(pre-fills)하여 타이핑을 줄여 줍니다.

추가 클릭 없이 위치정보를 가져옵니다.

감사합니다.