UX 가이드: 암호 재설정 사용자 흐름 (UX Guide: Password Reset User Flow)

이 글은 Masha SUX Guide: Password Reset User Flow글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다

또는 향상된 기능이 하나의 즐거운 사용자 환경에 얼마나 더해질 수 있는지 확인하십시오.

presentation
사용자는 암호를 잊어버립니다.
이런 일이 일어나는 것을 막을 방법은 없지만, 디자이너로서 우리는 그 뒤에 오는 것을 통제할 수 있습니다. 패스워드를 가능한 한 빠르고 부드럽게 재설정할 수 있는 것은 우리 힘입니다. 게다가, 그 과정을 즐거운 것으로 바꾸는 것은 우리의 힘입니다.
하지만, 암호를 재설정하는 것은 사진을 게시하거나 레스토랑을 예약하거나 온라인으로 쇼핑하는 것과 다릅니다. 이것은 어떤 애플리케이션의 핵심 기능도 아니며 또한 흥미로운 기능도 아닙니다. 따라서 적절한 구현은 쉽게 간과되거나 무시될 수 있습니다.
암호를 재설정하는 것이 빠르고 원활하게 이루어져야 함에도 불구하고, 왜 굳이 그것을 즐기려고 합니까?
우선 암호 복구 페이지에 있는 사용자는 이 페이지에 있는 것을 원하지 않는다고 가정해도 무방합니다. 더 악화되지는 않더라도 그들이 약간 짜증을 낼 가능성도 있습니다.
물론 모범 사례를 따라 사용자가 추가 문제 없이 새 암호를 만들 수 있습니다. 하지만, 그 동안 재미를 좀 만들고 그들의 기분을 밝게 하는 것은 어떨까요?
npm을 위해 내 암호를 재설정할 때까지 암호 복구가 즐거움에 가까울 것이라고는 생각해 본 적이 없었습니다. 이 프로세스는 제가 본 것 중 최고이며 암호 재설정을 위한 사용자 흐름을 설계하는 모든 사용자를 위한 참조 자료로 사용되어야 합니다. 한번 살펴보죠.

1단계: 암호 복구 페이지

presentation
첫 번째 단계는 암호 복구 페이지입니다. 이 페이지는 "npm 잊어버린 암호(npm forgot password)" 또는 유사한 암호를 쿼리할 때 첫 번째 검색 결과로 나타납니다.
이 제품에는 다음과 같은 모든 기능이 있습니다.
  • 제목 지우기(Clear title) - 암호를 복구(Recover Password)
  • 버튼의 특정 작업 텍스트 — 모호한 제출, 전송 등이 아닌 복구 링크를 이메일로 보냅니다.
  • 이메일 또는 사용자 이름을 사용하여 암호를 복구하는 여러 가지 옵션입니다.
  • 마지막으로 제목 아래 멋진 설명이 있습니다.
Don’t worry, happens to the best of us. (걱정하지 마세요, 우리 중 가장 좋은 사람에게 일어납니다.)
이 라인은 멋진 인간의 손길을 더해주며, 화면상에 추가적인 혼란을 일으키지 않고 공감을 보여줍니다.
좋은 사용자 환경을 만드는 데는 설명이 필요하지 않지만, 페이지가 없으면 개인 정보도 줄어들 것입니다.
presentation
제가 처음 설명을 읽었을 때, 그것은 저를 웃게 했어요. 비밀번호를 재설정하는 동안 미소를 지었던 적이 없었던 것 같아요. :)

2단계: 이메일

이메일 또는 암호를 제출하면 재설정 링크가 전송되었는지 확인할 수 있습니다.
presentation
지침은 명확하지만 확인 텍스트를 개선할 수 있습니다. "이메일이 발송되었습니다" 대신 "계정이 존재하면 추가 지침이 포함된 이메일이 전송됩니다."와 같은 단어를 사용하는 것이 좋습니다.
이메일 전송을 약속하지 않고 이메일/사용자 이름이 데이터베이스에 존재하는지 여부를 공개하지 않음으로써 1) 사용자의 자격 증명을 두 번 확인하도록 권장하고 2) 피싱 공격을 방지합니다.
다음은 실제 이메일입니다.
presentation
나도 사랑해요, npm

3단계: 임시 암호 링크

이메일의 링크를 클릭하면 다음 페이지가 열립니다.
presentation
여기서 제가 가장 좋아하는 부분은 임시 비밀번호를 복사하는 지름길입니다. 문자열 위로 마우스를 가져가면 문자열이 강조 표시되고 바로 클릭하면 문자열이 클립보드에 복사됩니다.
presentation

마우스를 가리키고 클릭하세요! 처음부터 끝까지 선택하고 복사할 컨텍스트 메뉴를 열 필요가 없습니다.
사소한 개선 사항으로 보일 수도 있지만, 사용자가 급해하고 프로세스를 끝내기를 원하는 경우 달라질 수 있습니다. 문자열을 처음부터 끝까지 수동으로 강조 표시하고 상황에 맞는 메뉴에서 "복사" 옵션을 선택하면 시간이 다소 걸릴 수 있으며 사용자를 더욱 짜증나게 할 수 있습니다.
로그인(Alex Zlatkus)을 클릭한 후 로그인해야 합니까? 🤔) Password Reset(암호 재설정) 페이지에 일반 로그인 페이지가 표시됩니다.
presentation
이 작은 친구는 얼마나 귀여워요? 미소를 짓는 또 다른 이유 :)

4단계: 새 암호를 만듭니다.

임시 암호로 로그인하면 암호 변경 페이지에 도착하여 새 암호를 생성할 수 있습니다.
presentation
이 페이지는 작업 버튼에 대한 제목과 텍스트가 명확할 뿐만 아니라 강력한 암호를 만들 수 있는 좋은 방법을 제공합니다. 다행히도 오늘날 대부분의 애플리케이션은 강력한 암호 요구 사항을 가지고 있지만 많은 애플리케이션들이 이를 사용자에게 제대로 전달하지 못합니다. 이 방법은 더 많은 불만을 일으킬 수 있는 보장된 방법이기 때문에 사용자에게 어떤 암호 조합이 허용 가능한지, 어떤 조합이 허용되지 않는지 즉시 알려주는 것이 중요합니다.
그러나 세부 지침을 제공하더라도 사용자가 부적격 암호를 만들려는 경우가 있습니다. 그렇다면 정확히 무엇이 잘못되었는지, 암호를 더 강하게 만들기 위해 무엇을 해야 하는지 알려야 합니다. Npm은 사용자가 새 암호를 저장하려고 시도하기 전이나 암호 변경을 클릭한 후 오류 알림에서 특정 정보를 제공하여 이 문제를 해결합니다.
암호가 너무 짧으면 npm이 필드 아래에 오류 메시지를 던지고 입력 테두리를 빨간색으로 표시하여 즉시 알려줍니다.
presentation
오류 메시지: "7자 이상의 올바른 암호를 입력하세요."
암호가 너무 일반적이거나 손상된 경우 npm이 이를 알려줍니다.
presentation
오류 알림: "입력한 암호가 알려진 손상된 암호의 공개 목록에서 탐지되었습니다. 다른 비밀번호를 입력해 주세요"
presentation
오류 알림 : "제공된 암호가 너무 일반적입니다. 좀 더 독특한 비밀번호를 선택해 주세요"라고 말했습니다.
또한 Npm은 두 목록에 대한 링크를 제공하므로 암호 조합이 안전한지 신속하게 확인할 수 있습니다.
암호를 변경하면 npm이 즉시 로그인하므로 다시 인증하고 자격 증명을 다시 입력할 필요가 없습니다. 이것은 npm이 사용자를 배려하고 가능한 한 신속하게 업무에 복귀하기를 원한다는 것을 보여주는 또 다른 작은 개선 사항입니다.

요약

그리고 그게 다예요! 중요한 요점을 요약해 보겠습니다.
  1. 페이지에는 암호 복구 또는 암호 변경과 같이 시각적으로 명확한 제목이 있어야 합니다.
  2. 버튼에는 복구 링크 또는 암호 변경과 같은 특정 작업 텍스트가 있어야 합니다.
  3. 임시 암호를 제공하는 경우 복사하기 위한 바로 가기를 만듭니다.
  4. 암호 만들기에 대한 자세한 지침을 제공합니다.
  5. 사용자가 부적격 암호를 생성하려고 할 경우 수정해야 할 암호를 알려줍니다.
  6. 새 암호를 생성한 후 바로 로그인합니다.
마지막으로 사용자가 공허한 상태에서는 애플리케이션을 사용하지 않는다는 점을 기억할 필요가 있습니다. 그들은 생각하고 걱정해야 할 다른 것들이 있고 그들의 기분은 수십 가지 다른 요인에 의해 영향을 받을 수 있습니다. 예를 들어 npm 비밀번호를 잊어버린 날은 그다지 좋지 않았습니다. 모든 것이 잘못되어 가는 날들 중 하나였습니다.
npm에 로그인하려고 여러 번 시도하다가 결국 포기하고 비밀번호를 재설정하기로 결정했을 때, 또 다른 성가신 일이 될 것으로 예상했습니다. 하지만, 그것은 결국 제 기분을 풀어주고 남은 하루를 긍정적인 방향으로 설정해 주기까지 했습니다.
왜냐하면 여러분이 웃을 때 화내는 것은 너무 힘들기 때문이에요. 🙃

이 글은 번역 글입니다. 원본 링크입니다.


안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2LxR0Bz