brunch

You can make anything
by writing

C.S.Lewis

by 김예린 Sep 12. 2023

비밀번호 디자인에 관한 8가지 UI/UX 팁

마찰이 적을수록 전환율이 높아진다는 것을 기억하세요.


*다음 아티클을 번역한 내용입니다.


지난 몇 년 동안 SaaS가 증가하고 각 서비스에 대해 동일한 비밀번호를 사용한다는 사실과 관련된 보안 문제로 인해 저는 비밀번호 찾기 페이지를 이전보다 훨씬 더 자주 사용하고 있습니다.


만약 1Password 또는 LastPass와 같은 비밀번호 관리 솔루션 덕분에 사전에 해결할 수 있다면, 슬랙이나 소셜 로그인과 같은 도구로 구현된 "비밀번호 없음" 방법을 사용하여 로그인 페이지와 비밀번호 찾기 페이지 디자인에 적용할 수 있는 몇 가지 UI/UX 팁이 있습니다.


로그인을 시도하거나 새 비밀번호를 생성하거나 비밀번호를 재설정하려는 사용자는 영원히 감사할 것입니다.






1. 비밀번호 필드에 입력한 문자를 볼 수 있는 장치를 추가하세요.

실수하지 않기 위해 가장 먼저 해야 할 일은 사용자가 비밀번호 필드에 입력한 문자를 볼 수 있게 하는 것입니다. 이 기능은 필드 오른쪽에 '눈' 아이콘으로 표시되는 경우가 많습니다.


브라우저 콘솔을 아는 사람들은 간단히 비밀번호 필드의 type= »password »를 type= »text »로 변경하고 작성한 내용을 확인할 수 있습니다. 이는 사용성에 좋을 뿐만 아니라 안도감도 향상시킵니다. 더 길고 복잡한 암호 문구를 입력할 수 있으며 이를 정확하게 재입력할 수 있다는 확신을 가질 수 있습니다.






2. Caps Lock 키가 켜져 있는지 표시하세요.

사용자가 암호를 입력할 때 Caps Lock 키가 활성화되어 있는지 알려주세요.


그렇지 않을 때는 걱정하지 마세요. "Caps Lock is Off"라는 텍스트는 표시할 필요가 없습니다. 메시지를 보고 그에 따라 행동하는 사용자는 거의 없습니다.





3. Num Lock 키가 켜져 있는지 표시하세요.

Num Lock 키를 사용하여 동일한 UI/UX 디자인을 적용할 수 있습니다.





4. 비밀번호 생성 시 조건을 제한하고 표시하세요.

비밀번호를 생성할 때 정확한 설명을 표시하세요. 사용자가 오류를 범했을 때만 표시되도록 툴팁에 설명을 숨기지 마세요. 그에게 시간과 좌절감을 덜어주세요. 실시간 검증도 큰 플러스 요인입니다.





5. 로그인 화면에서 비밀번호 생성 시 요구되었던 조건들을 표시하세요.

기억하세요. 6개월 전, 비밀번호를 생성하기 위해 사용자에게 다음을 추가하도록 요청했습니다.  

대문자 1개 이상

숫자 1개 이상

8 자 이상

그리고 그 사람 신용카드 마지막 3자리 (잠깐, 뭐야? 그걸 진짜로 물어봤어?)

보안 조치는 경쟁자가 똑같은 일을 하고 있기 때문에 모방하는 것입니까, 아니면 쓸데없는 시간 낭비입니까? 그것은 중요하지 않습니다. 당신은 보안 조치를 실행습니다. 그리고 오늘의 사용자는 당신이 부여한 이러한 조치를 기억하지 못합니다. 따라서 로그인하는 동안 실수를 했다면 그의 삶을 더 쉽게 만들고 그에게 상기시켜 주십시오. 며칠, 몇 주, 몇 달 또는 몇 년 전에 요구되었던 조건을 그에게 상기시켜 주시면 그에게 도움이 될 것이라고 약속합니다.





6. 비밀번호 확인란을 삭제하세요.

이전 단계, 특히 사용자가 자신이 작성한 내용을 볼 수 있는 단계를 따르면, 오류를 방지하기 위한 안전 기능이었던 비밀번호 확인 필드는 더 이상 사용되지 않습니다. 비밀번호를 한 번 입력하는 것은 이미 고통스럽습니다. 두 번 입력하게 하지 마세요.





7. 비밀번호 찾기 페이지에서 이메일 필드를 채우세요.

사용자가 비밀번호를 잊어버렸다는 사실을 알게 되는 과정은 다음과 같습니다.  


로그인 페이지로 옵니다

자격 증명을 입력합니다.

오류 메시지를 받습니다

자신의 로그인 정보가 기억나지 않는다는 사실을 깨닫습니다.

"비밀번호를 잊으셨나요?" 링크를 클릭합니다.


이 시점이 마법이 일어나는 곳입니다. 이미 사용자가 자신의 이메일 주소를 알고 있기 때문입니다. 네. 그들은 방금 몇 초 전에 그것을 입력했습니다. 당신이 해야 할 일은 현재 페이지(비밀번호 찾기 페이지)에 내용을 채워 동일한 내용을 반복해서 작성할 필요가 없도록 하는 것입니다. 디자인에서 매 순간 저장되는 것들을 기억하세요.




8. 새 비밀번호를 자동으로 생성하는 대신 새 비밀번호를 직접 생성하도록 제안하세요.

길고 복잡한 기계 생성 비밀번호를 누가 기억하겠습니까? 아무도 없습니다. 보안상의 이유든 사용자가 자신의 비밀번호 관리자를 사용하도록 허용하든, 사용자가 무작위로 생성된 비밀번호를 이메일로 받는 것보다 새 비밀번호를 직접 생성하도록 하는 것이 더 좋습니다.








TLDR:

로그인 및 비밀번호 찾기 페이지에서 사용자의 삶을 더 쉽게 만들어 주는 8가지 UI 팁은 다음과 같습니다. 마찰이 적을수록 전환율이 높아진다는 점을 기억하세요. 당신은 나쁜 인터페이스와 싸우느라 시간을 낭비하고 싶지 않으며, 당신의 사용자도 마찬가지입니다.


1. 비밀번호 필드에 입력한 문자를 볼 수 있는 장치를 추가하세요.


2. Caps Lock 키가 켜져 있는지 표시하세요.


3. Num Lock 키가 켜져 있는지 표시하세요.


4. 비밀번호 생성 시 조건을 제한하고 표시하세요.


5. 로그인 화면에서 비밀번호 생성 시 요구되었던 조건들을 표시하세요.


6. 비밀번호 확인란을 삭제하세요.


7. 비밀번호 찾기 페이지에서 이메일 필드를 채우세요.


8. 새 비밀번호를 자동으로 생성하는 대신 새 비밀번호를 직접 생성하도록 제안하세요.







읽어주셔서 감사합니다.

작가의 이전글 아이콘 디자인의 7가지 원칙
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari