등록 및 로그인 양식 디자인 팁

1. 가치 제안 정의

가입은 사용자가 가장 마지막으로 하고 싶어하는 일입니다. 일반적으로 사용자는 가입을 통해 얻을 수 있는 가치를 확인하기 전까지는 가입을 원하지 않습니다. 양식 작성의 가치 제안을 명확하게 정의하세요. 메시지를 선명하고 명확하게 전달하세요. 링크드인이 이에 대한 좋은 예입니다. 링크드인은 가치 제안을 정의하는 메시지를 변경하고 있습니다.

 

 

 

2. 로그인할 위치를 명확하게 표시

사용자가 웹사이트에 도착하면 등록 또는 로그인할 위치를 명확하게 표시하세요. 특히 로그인이 주요 클릭 유도 문안인 경우 더욱 그렇습니다.

 

 

 

3. 입력 필드 표시

웹사이트에서 로그인이 우선적인 작업이어야 하는 경우 Facebook이나 Twitter처럼 로그인 또는 가입 링크만 표시하는 대신 로그인 섹션을 앞에 표시하세요.

 

 

 

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

모든 사람이 로그인과 가입의 차이점을 빠르게 파악할 수 있는 것은 아닙니다.

버튼 스타일, 명확하게 정의된 헤더 및 작업 설명에 시각적 차이를 제공함으로써 이를 약간 다르게 처리합니다.

 

5. 소셜 로그인 허용

소셜 로그인을 사용하면 사용자가 Facebook이나 트위터와 같은 기존 소셜 계정으로 웹사이트나 앱에 쉽게 로그인할 수 있습니다. 이 기능을 사용하면 다른 비밀번호를 기억할 필요가 없으므로 사용자들의 관심을 끌 수 있습니다.

 

 

 

6. 사용자 아이디 대신 이메일 또는 휴대폰 번호

꼭 필요한 경우가 아니면 사용자에게 사용자 아이디를 만들도록 요청하지 마세요. 기본적으로 이메일 아이디나 휴대폰 번호를 사용자 아이디로 사용하세요. 사용자는 다른 이름을 떠올리고 싶지 않을 것입니다. 이메일 아이디와 휴대폰 번호는 다른 새 이름보다 기억하기 쉽습니다.

 

 

7. 모바일 로그인을 통한 ISD 코드

모바일 등록 또는 로그인 시 지리적 위치 또는 쿠키 정보를 기반으로 ISD 코드를 미리 입력합니다. 또한 필요한 경우 사용자가 ISD 코드를 변경할 수 있는 옵션을 제공합니다.

 

 

 

8. 로그인 및 가입 옵션

계정 만들기 페이지에 로그인 옵션을 제공하고 기존 사용자 페이지에 가입 링크를 제공하여 사용자가 실수로 해당 섹션에 도달한 경우 페이지를 넘길 수 있도록 합니다.

 

9. 첫 번째 필드에 초점 맞추기

양식의 첫 번째 입력 필드에 자동으로 초점을 맞춥니다. 이 기능은 데스크톱에서만 가능합니다. 이렇게 하면 사용자가 입력 필드를 클릭하는 시간과 노력을 절약할 수 있습니다. 입력 필드를 강조 표시합니다.

 

 

 

10. 사용자 로그인 유지

사용자가 개인 디바이스에서 더 쉽고 빠르게 로그인할 수 있도록 로그인 상태를 유지할 수 있는 옵션을 제공하세요.

 

 

11. 재방문 사용자 기억하기

사용자를 기억하고 정보를 미리 입력합니다.

 

 

12. 레이블(Lables)

정렬된 레이블을 사용합니다. 머티리얼 디자인에서는 짧고 명확한 플로팅 레이블을 사용합니다. 레이블에는 문장 대소문자 또는 제목 대소문자를 사용하되 일관된 언어를 유지합니다.

13. 플레이스홀더(Placeholders)

플레이스홀더를 레이블로 사용하지 마세요. 플레이스홀더는 입력 형식이나 입력에 대한 설명과 같은 의미 있는 대화를 전달해야 합니다.

 

 

14. 사용자에게 비밀번호 표시

원하는 경우 사용자가 비밀번호를 볼 수 있도록 허용합니다. 이렇게 하면 사용자가 비밀번호를 잘못 입력하는 것을 수정하는 데 도움이 됩니다. 기본적으로 비밀번호 ID가 마스킹 처리되어 있는지 확인하세요. 사용자가 원하는 경우 확인란을 제공하거나 토글하여 비밀번호를 표시할 수 있습니다.

 

 

 

15. 캡스 잠금이 켜져 있는 경우 알림

비밀번호를 입력하는 동안 캡션 잠금(CapsLock)이 켜져 있는지 사용자에게 알립니다.

 

 

16. 비밀번호 강도

복잡한 비밀번호는 해킹하기 어렵습니다. 비밀번호 강도를 표시하여 사용자가 입력한 비밀번호의 복잡도를 파악하고 원하는 수준의 복잡도에 따라 비밀번호를 변경할 수 있도록 합니다. 사용자가 처음에 올바른 비밀번호를 만들 수 있도록 비밀번호 정책을 적절한 위치에 표시합니다.

 

 

17. 오류 메시지

적절하고 명확하게 정의된 오류 메시지를 표시하세요. 사용자가 추측해야하는 일반적인 오류 메시지를 사용하지 마세요.

 

 

 

18. 비밀번호 복구를 위한 인증

사용자는 비밀번호를 잊어버리는 경우가 많습니다. 사용자가 비밀번호를 복구할 수 있도록 '비밀번호 찾기' 링크를 제공해야 합니다. 비밀번호 재설정을 허용하기 전에 사용자가 인증을 받았는지 확인하세요. 일반적인 인증 방법으로는 등록된 이메일 아이디 또는 휴대폰 번호로 이메일 또는 OTP를 전송하는 방법, 복구 질문 및 등록된 휴대폰 번호로 전화를 걸어 인증하는 방법이 있습니다.

 

---

출처:

https://uxplanet.org/18-ux-design-tips-for-registration-and-login-forms-f897557358ba