디자인
빠른 회원가입을 이끌어내는 웹 폼 디자인 가이드
8분
2021.01.08.4.9K
"웹 폼 디자인이 지루하다면, 사람들은 그 양식을 기입하는 걸 싫어하게 됩니다."
웹 폼(양식)은 모든 웹사이트에서 필수적인 요소입니다. 연락처 정보, 지불 수단, 아이디와 비밀번호, 이름 및 나이 등, 여러분의 제품을 사용하는 사람들은 어떤 형태로든 폼 양식과 마주할 수밖에 없습니다. 그래서 이번 시간에는 고객 경험을 높여 빠르고 편리한 회원가입을 도모할 수 있는 웹 폼 디자인 가이드를 소개해드리고자 합니다.짧게 만든다.
긴 양식을 좋아하는 사람은 없습니다. 디자인의 '범위 정하기(Define scope) 단계에서, 폼 양식의 각 필드를 사용자들이 꼭 기입해야 하는 것인지에 대해서 질문하는 시간을 가져 보세요. 시간이 조금 걸릴지라도 의미 있는 일이 될 겁니다. 사용자에게 부담이 덜 될수록, 더 많은 사용자들이 그 양식을 끝까지 기입할 것이기 때문입니다.
: 아소스(ASOS)의 가입하기 화면은 불필요하게 길고, 그중에서는 반복되는 요소들도 보입니다.
각 필드와 그 라벨(항목)을 가까이 둔다.
모든 라벨들은 그 기입 피드와 가까이 있어야 합니다. 특히 라벨이 다른 필드 위에 있는 경우에는 흰색 여백으로 둘 사이를 명확하게 구분시켜 주세요. 모든 라벨들은 다른 필드가 아닌 그 라벨에 해당하는 기입 필드와 언제나 더 가까이 있어야 합니다. 왜냐하면 사람들은 서로 가까이 있는 요소들끼리 더 관계가 있다고 생각하는 경향이 있기 때문입니다.(게슈탈트의 법칙)
: 아마존의 가입하기 화면을 보면, 각 필드들 사이에 흰색으로 충분히 여백을 두어서 쉽게 구분할 수 있게 되어 있습니다.
필수 항목을 분명하게 보여준다.
사용자들에게 여러 항목들 중에서 필수 항목이 무엇인지를 말해주세요. 회원가입 양식을 끝까지 기입했는데 나중에 에러 메시지가 뜨게 해서는 안 됩니다. 사용자가 에러 메시지를 보게 되면, 부정적인 경험이 강화되기 때문입니다. 어떻게 해야 잘 작성한 것인지에 대한 분명한 표시가 없다면, 사용자들은 확인하기를 눌렀을 때, 어떤 결과가 나올지를 예측할 수 없습니다. 특히나 '비밀번호' 항목에서 이 부분이 중요한데, 그 이유는 모든 서비스나 사이트들마다 비밀번호 설정에 요구되는 규칙이 다르기 때문입니다.
: 메일침프(Mailchimp)의 가입 화면을 보면 비밀번호 오류의 기능성을 줄여줄 뿐만 아니라, 사용자가 새로운 계정을 만드는 과정을 긍정적인 경험으로 만들어주고 있습니다.
플레이스홀더(입력예시) 문구를 필드 라벨로 사용하지 않는다.
입력 칸에 흐릿하게 표시되는 플레이스홀더(입력예시) 문구는 특정한 기입 필드에 입력해야 하는 정보에 대해서 힌트를 주는 용도로 사용되곤 합니다. 하지만 일부 디자이너들 중에서는 입력 칸 위에 라벨을 없애서 디자인을 심플하게 하고, 사용자의 혼란도 줄이기 위해서 플레이스홀더를 사용하는 이들도 있습니다. 플레이스홀더를 사용한 디자인 방식의 문제는 사용자가 입력 칸을 클릭하면 플레이스홀더가 사라진다는 점입니다. 그렇기 때문에 그 내용을 정확히 기억하지 못하는 사용자들은, 그 항목이 무엇이었는지를 다시 확인하기 위해서 입력 칸 밖을 클릭하기도 합니다.
: 구글에서는 디테일하고 스마트한 상호작용을 통해 이런 문제를 해결하고 있습니다. 사용자가 입력 필드를 클릭하면, 플레이스홀더의 텍스트가 사라지고 위쪽에 작은 미니 라벨로 변합니다.
자동 포커스(Auto-focus) 기능을 사용한다.
자동 포커스 기능이 잘 갖춰진 웹 폼 디자인은 어디서나 환영받는데요. 필요한 내용을 타이핑하고 나면 탭(Tab) 자판만 눌러서 다음에 입력해야 하는 필드로 넘어갈 수 있기 때문입니다. 이는 마우스를 클릭하는 수고를 덜어줄 뿐만 아니라, 그 사이트에 대한 전반적인 경험에 미묘한 차이를 줍니다. 자동 포커스를 적용하여 사용자들에게 어떤 필드가 활성화되어 있는지를 시각적으로 보여주세요. 활성화된 필드를 부각시켜서 보여준다.
활성화된 필드를 보여주기 위해서는 일반적으로 입력 칸의 테두리와 크기를 키워서 보다 시각적으로 강하게 표시를 해줍니다. 선택된 필드의 색상이 다른 필드들 보다 시각적으로 두드러져 보여야 하면, 그렇게 하면 사용자들은 무의식적으로 해당 활성화된 필드에 눈이 가게 됩니다. 에러가 발생했을 때에도 동일한 개념이 적용될 수 있는데, 에러가 발생한 필드를 붉은색으로 강조하는 방식이 일반적으로 사용됩니다.
: 활성화된 필드를 강조해서 집중하기 쉽게 만들어줍니다.
Caps Lock 키가 눌려 있다면 사용자에게 알려준다.
이건 매우 간단한 기능이지만, 이를 적용한 곳들은 많지 않습니다. 여러분도 Caps Lock 키가 눌린 줄도 모르고 계속해서 입력을 시도하다가 번번이 거부된 경험이 있을 겁니다. 더욱 당황스러운 것은 키보드의 Caps Lock 키가 눌려 있다고 알려주지도 않고, 그저 비밀번호가 틀렸다는 안내 글귀만 반복해서 나타나는 웹사이트가 있다는 건데요. 사용자 입장에서 굉장히 짜증 나는 상황이 아닐 수 없습니다.
: 맥 OS에서는 로그인 시에 Caps Lock 키가 눌려 있는지를 알려주는 기특한 기능이 있습니다.
필요한 조건을 시각적으로 보여준다.
필요한 사항을 시각적으로 보여주게 되면 사용자들에게 필수 항목에 대한 보다 자세한 정보를 줄 수 있습니다. 예를 들어서 '연도' 항목에 두 자릿수만 필요하다면, 그 내용을 시각적으로 표시해서 사용자들의 혼란을 줄여줄 수 있지요.
: 인비전(Invision)에서는 서로 다른 자릿수가 필요한 항목에 대해서는 필요한 자릿수를 시각적으로 다르게 보여주는 스마트한 방식을 채택하고 있습니다.
에러 메시지를 감추지 않는다.
어떤 페이지들을 보면 툴팁(Tooltip) 방식으로 에러 메시지를 전달하는 경우가 있습니다. 즉, 입력 칸 옆에 알림 표시를 나타내고, 그 위에 마우스 커서를 가져가면 에러 메시지를 보여주는데요. 이는 사용자들이 자신들의 실수를 바로잡기 위해서 보다 많은 시간을 들여야 하는 것이기에 매우 나쁜 UX라고 할 수 있습니다. 사용자들 중에서는 어떻게 해야 하는지를 모르는 경우도 있습니다. 에러 메시지를 보려면 마우스 커서를 그곳으로 가져가야 하는 것인지를 모르는 것이죠.
: 입력 칸 바로 아래에 에러 메시지를 보여주는 게 낫지 않을까요?
선택항목에 대해서도 분명하게 보여준다.
맨 처음에 말씀드린 가이드라인(폼 양식을 짧게 만든다)을 무시하고 선택 항목을 사용하기로 했다면, 이 항목은 선택에 의해서 건너뛸 수도 있다는 사실을 분명하게 보여줘야 합니다. 필수 항목을 별표(*)로 표시하는 것뿐만이 아니라, 선택 사항에 대해서는 입력 칸에 '선택'이라는 문구를 더 분명하게 보여주세요. 사용자들 중에서는 별표(*) 기호의 의미를 정확히 파악하지 못하는 사람도 있을 수 있습니다. 별표(*) 기호가 비밀번호 설정 칸 등에서도 사용되기 때문입니다.
: 별표(*)보다는 '선택'이라는 문구로 표시하는 것이 그 의미가 훨씬 더 잘 드러납니다.
이미지를 활용해서 더 많은 참여를 이끌어낸다.
여러 가지 옵션 가운데에서 하나를 골라야 하는 경우에는 이미지를 사용해서 사용자의 결정을 도울 수도 있습니다. 텍스트, 아이콘, 이미지를 활용해서 보다 더 효과적으로 설명할 수 있다면 이런 방법도 좋을 것입니다.
: 구글 애드(Google Ads)에서는 각각의 광고가 어떻게 보이는지에 대한 예시를 이미지로 설명해주고 있습니다.
가능하다면 언제나 자동완성 기능을 사용하도록 한다.
이 방식은 이미 존재하는 어떤 정보를 사용자가 입력해야 하는 경우에 사용하면 효과적인데, 대표적으로는 여행지 명칭이 있습니다. 사람들이 여행 가는 도시 전체의 이름을 전부 입력할 필요 없이, 몇 글자만 입력해서 찾을 수 있게 해주는 것입니다. 때로는 긴 도시의 이름을 다 입력하는 일이 상당히 성가신 과정으로 느껴집니다. 그리고 사용자들이 오타를 낼 수도 있기 때문에, 오히려 자동완성으로 보여주는 것이 실수할 확률을 줄여줄 수도 있습니다.
: 에어비앤비(Airbnb)에서는 자동완성 기능을 이용해서 사용자들이 원하는 목적지를 쉽게 찾을 수 있도록 하고 있습니다.
웹 폼을 디자인한다는 것은 어려운 과정일 수도 있습니다. 대부분의 사용자들은 회원가입 양식에 정보를 기입하는 걸 좋아하지 않기 때문입니다. 하지만 위에서 소개한 가이드라인을 지키고 UX 문구에도 약간의 유머를 더한다면, 사용자들의 경험을 향상시키고 호의적인 반응을 이끌어낼 수 있습니다. 그렇게만 된다면 사용자들이 양식을 끝까지 기입하는 비율이 높아질 것이며, 좋은 UX 디자인이 구현되는 것이죠.
로그인하고 자유롭게 의견을 남겨주세요.
