간소한 회원가입과 로그인을 위한 방법

다양한 방식으로 디자인 된 회원가입과 로그인 양식들을 찾아볼 수 있지만, 대다수의 디자이너들은 친숙한 방식을 택하려고 하죠. 그러나 혁신적인 테크닉을 잘 이해하고 사용한다면 더욱 효과적이고 심플하게 만들 수 있습니다. 아래 아이디어들이 회원가입과 로그인 과정을 디자인 하는데에 도움이 될 것입니다. 하지만 무작정 사용하는 것이 아닌, 자신의 디자인에 맞는 것이 무엇인지 숙고하고 적용하는 것이 중요합니다.

1. 간소한 회원가입

사용자를 위한 모든 회원가입 양식의 목적은 성공적으로 작성을 하고 전송하는 겁니다. 그러나 그 양식이 너무 길거나 복잡하면, 사용자는 시작부터 짜증이 밀려올 것입니다. 아래 제시된 테크닉으로 회원가입을 쉽고 빠르게 작성하는데 도움이 될 것입니다.

회원가입을 끝낸 후, 가입자의 이름 물어보기

웹사이트 회원가입 양식에서 이름을 작성하도록 하는 것은 흔히 있는 일입니다. 그러나 그것은 사용자의 시간을 빼았습니다. 사용자를 귀찮게 하는 대신에, 이름 작성하는 것을 나중에 물어보는 것이 나을지도 모릅니다. 이럴 경우, 짜증이 나서 회원가입을 관둘지도 모르는 사용자를 붙잡을 수 있겠죠. 그 뿐만 아니라, 사용자가 당장에 로 빨리 끝내려고 아무거나 이름을 지어내고 나중에 잊어버리는 일을 방지할 수도 있습니다. 

비밀번호는 한 번만 기입하기

많은 가입양식이 비밀번호 만들 때 확인차 재입력하도록 합니다. 그 이유는 이해가 갑니다. 보안상 입력한 비밀번호가 보이지 않도록 마스킹해서, 다른 사람이 알지 못하도록 합니다. 그리고 비밀번호를 재입력해서 처음 입력한 것에 오타는 없는지 확인할 기회를 줍니다. 

하지만 현실은 이런한 상황이 더 큰 오류를 만들어낸다는 겁니다. 왜냐하면 이것이 사용자로 하여금 비밀번호를 더 치게 만들기 때문이죠. 사용자는 자신이 친 비밀번호를 볼 수가 없어서, 매 번 비밀번호를 제대로 쳤는지 알기 힘듭니다.

더 효율적인 방법은 비밀번호를 한 번만 작성하게 하는 것입니다. 거기에 마스킹 된 비밀번호를 볼 수 있도록 하는 체크박스를 하나 달아줍니다. 이 옵션기능으로 텍스트 필드의 수를 줄여 사용자의 부담을 줄일 수 있습니다. 

사용자의 우편번호를 가지고 자동으로 도시와 지역 찾기

만약 사용자의 주소정보가 필요하다면, 우편번호를 가지고 자동으로 도시와 지역을 찾아주는 기능을 생각해 보세요. 이 기능으로 사용자는 힘들여서 드롭다운 리스트에서 도시와 지역을 찾을 필요가 없어지기 때문입니다. 

국가 자동완성 필드

사용자가 특정 국가를 찾는 일반적인 방식은 드롭다운 리스트 입니다. 여기서 더 효과적인 방법은 자동완성 필드를 사용하는 겁니다. 이것은 특정 국가의 첫,두글자만 치면 자동으로 해당 캐릭터를 가지고 있는 국가 리스트가 나옵니다. 사용자는 단순히 그 리스트에서 자신이 원하던 국가를 선택하기만 하면 되는거죠. 

고객의 거주지를 배송지에도 자동으로 입력할 수 있게 하기

고객이 상품을 구매할 떄, 보통 고객이 입력한 주소와 배송지가 비슷할 겁니다. 그래서 링크를 하나 두어 고객이 입력한 주소지와 같으면 그 링크를 클릭해서 자동으로 고객 주소지가 배송지에도 입력되게 해주세요. 이렇게 하면 고객이 그 지긋한 주소 입력을 한 번 더 하지 않아도 되거든요. 

뉴스레터 구독란을 기본으로 체크해 놓지 않고, 대신 미리보기 링크를 넣어주기

웹사이트들 중에 간혹 뉴스레터 구독자를 늘리기 위한 목적으로 구독 체크박스가 미리 체크되어 있게 해놓습니다. 그게 먹혀들긴 할겁니다만, 만약 이미 구독한 사용자라면 오해할 요지가 있죠. 또한 관심이 없는 사용자라면 곧바로 구독취소를 할 겁니다. 강제적으로 구독을 하게 만드는 것은 충성고객을 만드는데는 전혀 도움이 되지 않으며, 되려 등을 돌릴 위험도 있습니다. 

효과적인 접근법은 뉴스레터 미리보기 링크나 발췌를 통해 사용자가 구독하고 싶게끔 만드는 것입니다. 이럴 경우, 사용자는 이 뉴스레터를 구독하지 않으면 무엇을 잃을 것인지 알게 됩니다. 그리고 대부분의 구독자들이 진정으로 관심을 보이고 있는 사용자임을 알 수 있습니다. 

2. 간단명료한 로그인

모든 로그인 양식의 목적은 자신의 계정으로 접속하는 것입니다. 이번에는 로그인 양식을 구성하는데에 효과적인 테크닉들을 소개해 드립니다.

이메일 주소로 로그인할 수 있게 하기

아이디 입력시 사용자 이름보다 이메일 주소를 기억하기가 더 쉽습니다. 사용자 이름은 길고 거추장스러울 수 있으며, 사람들은 이메일 주소를 매일 사용하기 때문에 잘 기억합니다. 그러니 이메일 주소로 로그인할 수 있게 하는 것이 더 좋으며, “아이디 기억하기“ 기능을 추가해서 아이디를 잊어버릴 수도 있는 만일의 경우를 대비하는 것도 중요합니다. 

현재 머물러 있는 페이지 유지하기

로그인 하는 것은 공통된 일이며, 사용자는 웹사이트의 어느 페이지에서든 로그인을 하고 싶어할 겁니다. 그래서 로그인을 하는 순간, 자신이 머물러 있던 페이지로 다시 돌아가게 해야합니다. 여기에는 두 가지 방법이 있는데요: 드롭다운 박스와 모달 윈도우 입니다. 

드롭다운 박스는 현재 머물러 있는 페이지를 벗어나지 않고 열립니다. 페이지의 작은 부분만을 차지하며, 진행이 빠르고 가볍습니다. 

모달 윈도우 역시 현재 페이지를 유지하지만, 브라우저의 가운데를 중심으로 대부분의 영역을 차지하며, 로그인에 더 집중하도록 합니다. 또한 부가적인 정보를 추가할 수 있는 폼입니다. 

첫 번째 텍스트 필드로 자동 포커스 되게 하기

사용자가 로그인 폼을 보게 되면, 바로 로그인을 할 겁니다. 이 때 자동으로 첫 번째 필드에 포커스가 가지게 함으로써 사용자가 더 편리하게 로그인을 시작할 수 있습니다. 마우스를 필드에 호버하고 클릭할 시간과 수고를 덜어주죠. 사용자는 계속 키보드에 손을 놓고 있기만 하면 됩니다. 또한 텍스트 필드에 하이라이트를 줘서 곧바로 타이핑을 할 수 있음을 알려주는게 좋습니다. 

로그인 버튼을 텍스트 필드만큼 넓게 하기

로그인 버튼은 단순히 액션을 취하기 위한게 아닙니다. 이것은 사용자가 어떤 액션을 취하게 될 것인지 알게 해주는 것이기도 합니다. 작은 로그인 버튼은 어포던스가 약하고, 로그인 한다는 기분이 불확실하게 느껴집니다. 

넓직한 버튼은 사용자에게 확고함을 줄 뿐만 아니라, 절대 놓칠 일도 없죠. 버튼의 레이블도 더 눈에 띄어서 사용자가 취할 액션에 관해 더 확실해지게 되죠. 

SNS 계정을 통해 로그인 할 수 있게 하기

대부분이 페이스북이나 트위터 계정을 가지고 있을 겁니다. 그리고 그 계정을 가지고 로그인을 하도록 하면 더욱 좋겠죠. 회원가입 과정을 거치지 않고 웹사이트를 일시적으로 사용하게 하는 겁니다. 그리고 사용자는 다른 아이와 패스워드를 만들고 외워야 할 필요도 없어지죠. 

원문: Innovative techniques to simplify sign-ups and log-ins

Refresh Studio

해외 최신 웹/모바일/UX 디자인 글과 동향을 소개해 드립니다.