brunch

매거진 UX 디자인의 모든 것

라이킷 168 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Aug 11. 2016

회원 가입을 유도하는 UX 전략 10가지

UX 디자인 배우기 #02

Today UX 아티클

Medium에 게재된 Nick Babich 의 글 How to Craft Effective Registration를 소개하고자 합니다.

회원가입은 매우 흔하지만 디자인하기 가장 까다로운 부분이라고 합니다. 필자는 회원가입 페이지가 유저에게 장애물이 되지 않게 해야 한다고 하면서 다음 9가지 팁을 제시합니다.

1) ‘Sign In’과 ‘Sign Up’을 같이 쓰지 않는다.

나쁨: ‘Sign In’과 ‘Sign Up’을 같이 썼다.

Sign In은 우리가 쓰는 용어로 치자면 로그인을 뜻하고, Sign Up은 회원가입을 뜻하는 말입니다. 같은 동사를 사용하면서 버튼이 너무 비슷하게 생기면 유저는 쉽게 헷갈려한다고 합니다. 유저는 스크린을 빠르게 훑어보고 첫 번째로 이목을 끄는 버튼이 옳은 버튼이라고 생각하기 때문에 실수하기 쉽고, 실수하지 않는다 하더라도 두 버튼을 구분하느라 시간을 보내게 되기 때문에 좋지 않다는 겁니다. 대신 아래처럼 다른 동사를 사용하고, 버튼의 색상과 스타일이 둘을 명확히 구분할 수 있도록 만들라고 합니다.

좋음: ‘Login’과 ‘Register’로 쓰는 것이 더 분명하다.

2) 최대한 많은 입력 칸을 제거한다

새로운 유저가 가입할 때는 시작할 때 최소한으로 필요한 것만 물어보라고 합니다. 정보를 적게 물어볼수록 유저가 가입 중에 덜 이탈하게 된다는 겁니다. 예를 들어 비밀번호나 이메일을 한 번 더 입력하는 칸을 지우라고 합니다. 오타는 다른 방법으로 잡을 수 있기 때문입니다(4번 팁 참조). 또한 UX관점에서 ‘선택’ 입력 칸은 없는 것이 낫고, 넣어야 할 때는 반드시 ‘선택(optional)’이라는 말을 넣어줘야 한다고 합니다.

‘How old are you?’에 선택이라고 적혀 있다.

3) 로그인 양식과 회원가입 양식을 구분한다.

많은 곳에서 로그인 와 회원가입에 같은 수의 입력 칸을 사용하고 있고, 아래와 같이 나란히 보여주고 있다고 합니다. 필자는 등록 양식을 로그인 양식과 명확히 구분해 유저가 등록 양식으로 로그인하려는 실수를 최소화해야 한다고 합니다.

나쁨: 두 양식이 나란히 놓여있다

예를 들어 트위터는 로그인 및 등록 양식을 다르게 디자인했을 뿐만 아니라 버튼도 다른 색으로 만들었고 적절한 도움말(New to Twitter? Sign up)을 활용하고 있다고 합니다.

좋음: 트위터의 로그인 및 회원가입 양식

4) 유저가 패스워드를 볼 수 있게 해준다.

로그인과 회원가입을 하다 보면 흔히 하게 되는 실수가 패스워드를 잘못 입력하는 것인데 보안상의 문제로 문자를 가려 보이지 않기 때문이라고 합니다. 필자는 두 번 입력하게 하지 말고 ‘비밀번호 보기(Show password)’옵션을 체크박스 또는 아이콘으로 주는 것이 더 좋다고 얘기합니다.

5) 가이드를 준다.

입력 내용에 오류가 있으면 명확하게 설명해줘야 한다고 합니다. ‘어떤’ 칸에 오류가 났는지, 문제를 해결하려면 ‘어떻게’ 해야 하는지 명확히 설명해야 된다는 겁니다.

유저 친화적 묘사적인 오류 메시지

“보안상의 문제로 패스워드는 6자 이상, 10자 이하여야 하며 대문자, 숫자, 기호가 최소한 하나씩 들어가야 합니다”는 문구는 전형적인 패스워드 요구사항이지만 유저가 모든 요구사항을 하나씩 고려하게 만드는 것은 적절하지 않다고 합니다. 필자는 아래 그림처럼 단서를 바로바로 제공하는 것을 제안합니다.

현재, 패스워드는 하나의 특수 문자와 하나의 숫자가 더 들어가야 하며 최소한 8자여야 한다

실시간 데이터 확인

내용을 입력했을 때 틀렸는지 바로 알 수 있다면 빠르게 고칠 수 있을 겁니다. 필자는 잘못 썼을 때뿐만 아니라 잘 썼을 때도 확인하는 표시를 해줘야 한다고 말합니다.

(gif임) 밝은 색으로 오류를 보여줘 눈에 잘 띄게 하여, 실수를 찾아내느라 전체 양식을 다시 읽어보지 않아도 되게끔 만든다.

실시간 확인은 특히나 중복되지 않은 유저 네임이나 패스워드 강도 확인에 좋은데 트위터가 좋은 사례라고 합니다. 아래 사례를 보시면 트위터는 이미 사용 중인 이메일이라는 정보와 함께 다른 선택사항(로그인을 할 것인지 비밀번호를 찾을 것인지)을 제시해줍니다.

6) 유저 네임보다는 이메일이나 전화번호를 활용한다

유저 네임을 입력하게 하면 두 가지 문제가 발생한다고 합니다. 하나는 유저 네임은 중복되면 안 되기 때문에 적절한 이름을 찾아내느라 시간을 들여야 하고, 둘째 결국 유저는 중복되지 않는 새로운 유저 네임을 만들어내게 되어 나중에 기억하지 못할 거라는 겁니다. 필자는 전화번호 또는 이메일로 로그인할 수 있게 해줘야 한다고 합니다.

좋음: 회원 가입 중에 전화번호나 이메일을 유저네임 대신에 사용할 수 있다.

7) 페이스북, 트위터, 구글+를 통해 로그인할 수 있게 해준다

일반적인 회원가입에 비해 페이스북, 트위터, 구글+ 등의 계정으로 가입할 수 있게 했을 때의 장점과 단점이 있다고 합니다.

장점:

가입 양식을 작성하지 않아도 되고, 다른 유저네임과 패스워드를 만들고 이메일 검증까지 하지 않아도 되고, 10분 대신 10초 안에 가입할 수 있다고 합니다. 그리고 가장 중요한 점은 유저가 새로운 유저네임과 패스워드를 기억하지 않아도 된다는 점이라고 합니다.

단점:

유저에 대한 정보가 자동으로 옮겨올 것이기 때문에 엄청난 프라이버시에 대한 걱정이 일어날 수 있고 모든 사람이 프로필 데이터 공유하기를 좋아하는 것도 아니라고 합니다. 이런 경우엔 전통적인 로그인 시스템도 함께 운영해야 한다고 합니다.

좋음: 페이스북/구글+/트위터로 로그인하거나 전통적인 회원가입을 이용할 수 있다

8) 등록하면 로그인 상태를 유지하게 해준다

등록 직후에 유저에게 로그인하라고 하는 것은 흔히 볼 수 있는 문제라고 합니다. 필자는 은행처럼 보안이 정말 문제가 되지 않는 경우에는 가입 직후에 로그인 상태가 유지되어 있게 만들어야 한다고 말합니다.

나쁨: 계정을 만든 후에 로그인을 하라고 요청하고 있다

9) 패스워드 복구는 어렵지 않게 만든다.

유저는 패스워드를 잃어버리게 될 것이기 때문에 복구 과정을 쉽게 만드는 것이 매우 중요하다고 합니다. 다시 설정하기 쉽게 만들고, 언제나 “패스워드를 잊어버리셨습니까?”라고 쓴 링크를 패스워드를 틀렸을 때만 보여주지 말고 로그인 양식 근처에 항상 보여줘야 한다고 합니다.

좋음: Mailchimp의 로그인 양식에 있는 “패스워드를 잊어버리셨습니까?”

보너스) ‘구매 전 이용’ 전략을 따른다.

85% 이상의 유저는 너무 일찍 가입을 강요하면 이탈해버린다고 합니다. ‘구매 전 이용(Try before you buy)’ 전략은 제품을 경험해볼 수 있게 해주어 개인적으로 가입에 관심을 가지게 유도하는 전략입니다. 사람들은 제품에 대해 좀 더 알고 그들이 경험하게 될 것을 미리 알았을 때 더 가입하려는 경향이 있다고 합니다. 그렇다고 계정을 만들라는 요청을 하지 말라는 게 아닙니다. 유저에게 가치를 보여준 후에 요청하라는 겁니다. 가령 유튜브는 유저가 원하는 만큼 콘텐츠를 살펴볼 수 있게 해 주고, 댓글을 달거나 비디오를 올리고 싶어 할 때만 가입하게 합니다.