비밀번호 관련 UI/UX 팁 8가지
로그인페이지, 비밀번호 변경, 비밀번호 재설정에 관하여
(C)unsplash.com
지난 몇 년간 SaaS형태의 서비스가 증가했습니다. 사용자는 각 서비스에 대해 동일한 비밀번호를 사용하는 게 보안상 위험하다고 인지하게 되면서 사이트(서비스)별 각기 다른 비밀번호를 사용하곤 하는데요.
하지만 그만큼 수많은 사이트의 비밀번호를 기억하지 못해 비밀번호찾기 페이지를 이전보다 훨씬 더 자주 사용하게 됩니다.
만약 1Password 또는 LastPass와 같은 비밀번호 관리 솔루션을 이용해서 도움을 받을 수 있다면 좋겠지만,
그렇지 않다면 "비밀번호 재설정" 또는 "비밀번호 변경"등의 방법이 필요하게 될텐데요.
여기 로그인 페이지와 비밀번호 찾기 페이지의 디자인에 적용할 수 있는 몇 가지 UI/UX 팁이 있습니다.
1. 사용자가 비밀번호 필드에 입력한 내용을 볼 수 있는 기능을 추가합니다.
비밀번호 입력 중 사용자의 실수를 방지하기 위해 필요한 기능은 비밀번호 입력 필드에 입력한 내용을 확인할 수 있게 해주는 겁니다. 보통은 입력 필드 오른쪽에 '눈'아이콘형태의 토글 버튼으로 표시하는데요.
이는 사용성에도 좋고 심리적 안도감을 줍니다. 사용자가 마스킹되지 않은 상태의 암호를 문자 그대로 확인하면서 길고 복잡한 암호를 실수 없이 입력할 수 있게되기 때문입니다.
2. Caps Lock 키가 켜져 있는지 표시하세요.
사용자가 암호를 입력할 때 Caps Lock 키가 활성화되어 있는지 알려줍니다.
다만, "Caps Lock is Off"라는 텍스트는 표시할 필요가 없습니다. 이 가이드는 사용자에게 시각적 힌트를 주기 위함이지 읽고 메시지대로 행동하라는 건 아니기 때문입니다.
3. Num Lock 키가 켜져 있지 않은지 표시하세요.
'Num Lock'키 활성상태여부도 'Caps Lock'과 같이 동일한 UI/UX 디자인을 적용하는 것이 가능합니다.
4. 비밀번호 생성 시 조건을 제한하고 표시하세요.
비밀번호를 생성할 때 정확한 가이드를 보여줍니다. 사용자가 잘못 입력했을 경우 표시되도록 툴팁에 설명을 보여주도록 합니다. 사용자가 실수하지 않도록 입력중 실시간 유효성 검증을 통해 메세지를 표시하는 것도 좋은 방법입니다.
5. 사용자가 처음 비밀번호를 만들 때 요구했던 조건들을 표시해줍니다.
오래전 만들어 둔 암호의 경우 사용자는 비밀번호 규칙을 기억하기 어렵습니다. 예를 들어
대문자 1개 이상
숫자 1개 이상
8 자 이상
그리고 특수문자 포함 등등등
보안에 관한 조치는 간과할 수 없지만, 사용자는 어려운 보안 규칙을 기억하고 싶어하지 않습니다.
당장 오늘의 사용자는 우리가 부여한 이러한 규칙을 전혀 기억하지 못합니다.
로그인하는 동안 실수없이 더 쉽게 진행할 수 있도록 며칠, 몇 주, 몇 달 또는 몇 년 전에 요구되었던 조건을 사용자에게 상기시켜주도록 합니다.
6. 비밀번호 확인란을 삭제하세요.
로그인 시 이전 단계에서 사용자의 오류를 막을 수 있는 장치가 충분하다면(사용자가 자신이 작성한 내용을 볼 수 있는 단계를 따르면), 오류를 방지하기 위한 안전 기능이었던 비밀번호 확인 필드는 더 이상 필요 없습니다.
7. 비밀번호 찾기 페이지에서 이메일 필드를 채우세요.
사용자가 비밀번호를 잊어버렸다는 사실을 알게 되는 과정은 다음과 같은데요.
로그인 페이지 진입
자격 증명 입력(아이디/패스워드)
오류 메시지 확인
자신의 로그인 정보가 틀렸거나 기억나지 않는다는 사실 깨닫기
"비밀번호를 잊으셨나요?"링크 클릭
자, 이 시점에서 사용자는 이미 사용자가 자신의 이메일 주소를 알고 있습니다. 방금 몇 초 전에 그것을 입력했으니까요. (아이디가 이메일 주소인 경우 해당)
UI에서는 현재 페이지(비밀번호 찾기 페이지)에 동일한 내용을 반복해서 입력하지 않도록 입력값을 기억해주세요.
8. 비밀번호를 재설정할 경우, 새 비밀번호를 자동으로 생성하지 말고 직접 작성하도록 제안하세요.
길고 복잡한 기계 생성 비밀번호를 기억할 수 있는 사람은 없습니다.
보안상의 이유일수도 있고 사용자가 자신의 비밀번호관리자 기능을 사용하도록 허용하든,
무작위로 생성된 비밀번호를 이메일로 받는 것보다는 사용자가 새로운 비밀번호를 본인이 기억할 수 있는 맥락으로 직접 작성하도록 하는 것이 더 좋습니다.
요약
로그인 및 비밀번호 찾기 페이지에서 사용자의 삶을 더 쉽게 만들어 주는 8가지 UI 팁은 다음과 같습니다.
마찰이 적을수록 전환율이 높아진다는 점을 기억하고, 나쁜 인터페이스와 싸우느라 시간을 낭비하지 않도록 해주세요.
1. 비밀번호 필드에 입력한 문자를 볼 수 있는 장치를 추가하세요.(비밀번호 보기/숨기기 아이콘)
2. Caps Lock 키가 켜져 있는지 표시해주세요.
3. Num Lock 키가 켜져 있는지 표시해주세요.
4. 비밀번호 생성 시 제한 규칙을 표시해주세요.
5. 로그인 화면에서 비밀번호 생성 시에 요구되었던 조건들을 동일하게 표시하세요.
6. 비밀번호 재입력 필드는 삭제하세요.
7. 비밀번호 찾기 페이지에서 이미 입력한 이메일 필드는 채워두세요.
8. 새 비밀번호는 자동 생성 대신 사용자가 직접 작성 하도록 제안하세요.
* 원본 자료의 글을 번역 및 가공한 글입니다. 일부 표현은 수정된 내용이 있을 수 있습니다.
