더 나은 로그인 페이지를 만드는 팁 10가지

Jan 18. 2020

*본 글은 디자인 뉴스레터 디독에서 발행한 글입니다.

해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv

https://page.stibee.com/subscriptions/31254

로그인 페이지 디자인은 웹사이트의 UX여정에 있어 중요한 부분이다. 잘 된 로그인 페이지 디자인은 방문자를 웹사이트로 안내하고, 새로운 방문자를 신규회원으로 전환하는 데 도움되는 것은 물론, 다시 돌아오는 사용자에게 쉽게 로그인할 수 있는 방법을 제공한다.

우리는 로그인 페이지가 매끄럽게 진행되고, 매력적이며, 사용하기에 간단하기를 원한다.

우리가 도와줄테니, 잘 된 로그인 페이지 디자인을 만들기 위한, 그리고 영감을 줄 훌륭한 사례와 팁을 함께 살펴보자.

10가지 로그인 페이지 디자인 팁과 사례

로그인 페이지 디자인에 관해서 여러분이 해야 할 일과 하지 말아야 할 일을 모두 적어보았다.

모든 팁과 사례가 웹사이트에 적용되는 것은 아니다. 요령껏 자신들에게 맞는 것을 선택하도록.

팁 1. 명확하게 하기

우리는 사용자가 로그인 페이지를 찾아 헤매기를 원치 않는다. 로그인 페이지를 찾느라 이리저리 돌아다니면 돌아다닐수록 사용자는 좌절할 것이고 좌절감이 높을수록, 결국 로그인할 가능성은 낮아진다.

좋은 사례로 Gmail 로그인 페이지를 들 수 있다.

Gmail 로그인 페이지

모든 것이 전면 중앙에 있다. 로그인해야 할 곳과 필드에 무엇을 넣어야 하는지 정확하게 보여주고 있으며, G메일 계정이 없다면 “계정 만들기"를 클릭해 쉽게 계정을 생성할 수 있다.

로그인 영역을 명확하게 노출하여 사용자가 가능한 쉽게 로그인할 수 있도록 한다.

팁 2. 소셜 로그인 사용하기

소셜 로그인은 최근 많이 사용되고 있는 로그인 방법이다.실제로 사용자의 88%는 소셜 로그인을 사용하고 있고 그 중 86%가 웹사이트에 새로운 계정을 만들어야 하는 것에 대해 귀찮음을 느낀 적이 있다고 답했다.

그럴 만한 이유가 있는 것이, 여러 웹사이트에 여러 개의 (각기 새로운) 계정을 만드는 것이 꽤 시간이 소요될 뿐 아니라 혼란스럽기 때문이다. 여러 개의 암호와 아이디를 기억하기 어려운 것이다.

소셜 로그인은 사용자가 소셜 미디어 계정 중 하나의 정보를 연동해 계정을 만들 수 있게 함으로써 이러한 모든 불편함을 줄여준다.

여기 Medium에 좋은 사례가 있다. 이 블로그 플랫폼은 사용자들이 Twitter, Facebook, Google을 이용해 서비스에 로그인할 수 있도록 돕는다.

Medium 로그인 페이지

일부 DM’s Guild와 같이 하나의 소셜 플랫폼만을 제공하는 경우도 있다.

DM's Guild 로그인 페이지

소셜 미디어 사이트도 소셜 로그인을 사용할 수 있다.

Pinterest 로그인 페이지

소셜 로그인은 사용자에게 쉽고 직관적인 로그인 페이지 디자인을 제공한다.

팁 3. 간단하게 하기

로그인 페이지는 간단하고, 직관적이어야 한다.

사례로 Instagram의 로그인 페이지 디자인을 확인해보자.

Instagram 로그인 페이지

Facebook으로 로그인하는 옵션과 함께 두 개의 입력 필드. 이 간단하고 효과적인 디자인이 사용자들에게 훌륭한 경험을 제공한다.

그렇기 때문에 로그인 페이지를 디자인할 땐 ‘간단하게’.

팁 4. 가입과 로그인을 구분하기

사용자가 웹사이트에 가입하려고 들어오거나, 로그인하려고 되돌아갈 경우, 어디로 가야 하는지 명확하게 알려주어야 한다.

로그인 필드를 가입 필드와 구분하여 사용자에게 제공하자.

좋은 디자인 사례로 Facebook이 있다.

Facebook 로그인 페이지

가입 필드가 전면, 가운데에 어떻게 노출되어 있는지 보자. 새로운 사용자는 해당 페이지를 통해 바로 가입할 수 있으며, 이미 가입한 회원은 바로 상단 섹션을 통해 로그인할 수 있다. ‘로그인' 섹션이 (하단 가입 필드) 페이지와 완전히 분리되어 진한 파란색 영역으로 표시되어 있는 것을 보자.

다른 색상, 레이아웃 및 복사를 사용하면 가입 필드와 구별되면서 로그인 필드를 쉽게 만들 수 있다. 복잡할 필요가 없다.

여기 모든 차이를 만들어 내는 간단한 변화의 Dribbble 사례를 살펴보자.

dribbble 로그인페이지

다시 한번 말하지만, 테두리 사용(영역)은 미세하지만 구별에 도움되는 차이를 만든다.

팁 5. 사용자 이름을 건너뛰기

사용자는 매번 해당 웹사이트의 사용자 이름을 생각해 내고, 또 기억해야 하는 번거로움을 덜어주자. 대신 그들이 이메일 주소나 전화번호를 사용하여 등록할 수 있게 해라.

사용자들은 정말 (해당 웹사이트에) 사용자 이름을 만들기 원할까? 아니면 단지 웹사이트에 가입하고 로그인하기 위한 여정 중 주어지는 또 다른 일일까?

LinkdIn은 사용자에게 전화번호나 이메일 주소로 로그인할 수 있도록 제공하고 있다.

Linkedin 로그인 페이지

여기서 사용자들은 웹사이트에 로그인을 위한 이메일 주소를 잊어버릴 수 있기 때문에, 이들에게 전화번호를 추가로 쓸 수 있는 선택권을 제공하면 보다 더 쉽게 로그인할 수 있다.

팁 6. 사용자에게 비밀번호 보여주기

사용자가 비밀번호를 입력할 때 이를 볼 수 있는 옵션을 제공하는 것은 (실수로) 여러 번 입력하는 대신 첫 번째 시도로 쉽게 웹사이트에 로그인할 수 있도록 도와준다.

WordPress는 사용자가 자신의 비밀번호를 입력할 때 확인할 수 있게 해 주는데, 모든 사용자는 비밀번호 필드의 눈 아이콘을 클릭하면 타이핑한 암호를 확인할 수 있다.

WordPress 로그인 페이지

또한 Sony PlayStation 로그인 페이지 디자인에서도 같은 기능을 제공하고 있다.

Sony PlayStation 로그인 페이지

또 다른 추가 대안으로, ‘비밀번호 표시' 확인 체크박스기 있다.

출처 : FourthBottle

팁 7. 사용자를 기억하기

이전에 로그인한 사이트로 돌아가 다시 로그인해야 한다는 것을 알게 되는 것보다 더 좌절스러운 일이 있을까?

사용자가 웹사이트로 돌아가면 사용자가 이미 로그인했는지 또는 쉽게 로그인할 수 있도록 특정 필드가 미리 채워져 있는지 확인하자.

구글은 이 일을 아주 잘하고 있는데, 사용자가 YouTube, Gmail, Google Drive 또는 다른 구글 서비스에 다시 진입할 때마다 쉽게 로그인할 수 있도록 사용자 정보를 기억하고 있다.

Gmail '계정 선택' 확인

Ally Bank는 사용자가 웹사이트에 도착하자마자 웹사이트가 사용자 이름을 채우도록 허용하는 ‘사용자 이름 저장' 체크박스를 확인할 수 있도록 한다. 이는 사용자 정보를 기억하는 또 다른 좋은 방법이다.

Ally Bank 로그인 페이지

팁 8. 불편없는 비밀번호 찾기 만들기

때때로 사용자는 로그인 정보를 잊어버리는데, 이때 비밀번호를 찾는 과정에 불편함이 없도록 만들자.

Chase Bank는 사용자가 사용자 이름과 비밀번호를 잊어버린 경우를 대비해 맨 아래에 이런 버튼을 배치했다.

Chase Bank 로그인 페이지

Illinois Tollway의 I-Pass 웹사이트에는 사용자가 사용자 이름이나 비밀번호를 잊어버리는 경우, 별도로 두 개의 링크를 보여주고 있다.

Illinois Tollway의 I-Pass 로그인 화면

Evernote는 얼마나 오래전에 비밀번호를 변경했는지 사용자에게 알려준다.

Evernote 로그인 화면

이 작은 기능은 사용자들의 기억을 되살리고 자신들의 비밀번호가 무엇인지 기억하는데 도움을 줄 수 있다.

사용자가 로그인 정보를 잊어버린 경우, 어디로 가야 하는지 명확하게 알려주자. 이로써 사용자는 좌절감을 덜 느끼게 되고, 서비스를 더욱 사랑하게 될 것이다.

팁 9. 사용자들에게 캡 락이 켜져 있음을 알리자

우린 모두 경험이 있지 않는가? 어렵게 비밀번호를 입력하고 또 입력하는데 아무 소용이 없을 때, 그제야 입력 내내 캡 락이 걸려 있다는 것을 알게 된다.

사용자들에게 캡 락이 걸려있을 때 경고를 띄우게 되면, 이런 상황이 발생하는 것을 방지할 수 있다.

이런 사례는 WordPress에서 볼 수 있는데, 빨간색 에러 툴팁은 사용자에게 캡 락이 걸려있을 때 나타난다.

WordPress는 로그인을 시도하는 동안에 캡 락이 걸려있는지 알려준다.

출처 : Jaspreet Chahal

또한, Microsoft의 Edge 브라우저 또한 사용자들에게 타이핑하는 동안 캡 락이 걸려있는지 알림을 켜는 것에 대한 선택권을 제공하고 있다.

출처 : Discouse.wicg.io

팁 10. 비밀번호가 없는 로그인

모바일 사용자의 비밀번호를 (자체적으로) 기억하거나, 사용자가 입력하지 않아도 로그인할 수 있는 기회를 제공한다.

가령, Charles Schwab Bank는 사용자가 전화에 지문 스캐너를 사용해 로그인할 수 있도록 지원하고 있다.

Charles Schwab Bank 로그인 페이지 : Charles Schwab

Ally Bank도 마찬가지로 IOS 사용자가 자신의 페이스 ID를 사용하여 계정에 로그인할 수 있도록 지원하고 있다.

Ally Bank 로그인 페이지 : IOS App Store

저자 : Maciej Lipiec
원문 링크: https://uxdesign.cc/beyond-the-double-diamond-thinking-about-a-better-design-process-model-de4fdb902cf