가입절차를 효율적으로 하는 UI/UX디자인 5가지 방법

 

1. 단순하게 유지하세요.

가입 양식은 필수 정보만 요청해야 합니다. 제품에 이메일과 비밀번호 외에 추가 정보가 필요한 경우 가입 절차를 여러 단계로 나누세요.

 

한 번에 너무 많은 정보를 요구하는 가입 양식의 나쁜 예입니다.

 

 

위의 가입 양식은 한 번에 너무 많은 정보를 요구합니다. 잠재적 사용자는 복잡한 등록 양식을 작성하는 데 시간을 할애할 동기가 없습니다.

 

 

가입 절차는 두 단계로 나뉩니다.

 

 

이 예에서는 계정을 만들려면 이메일과 비밀번호 외에 추가 정보가 필요합니다. 따라서 가입 절차는 두 단계로 나뉩니다. 이 접근 방식은 첫 번째 단계를 완료한 사용자에게 완료감을 주어 다음 단계를 완료하도록 동기를 부여합니다.

 

 

가입 양식 및 사용자 흐름.

 

 

이 가입 양식은 간단합니다. 이메일과 비밀번호만 입력하면 됩니다. 계정 생성에 필요하지 않은 다른 정보는 가입이 완료된 후 향후 온보딩 단계에서 요청할 수 있습니다.

 

 

예시

Airbnb의 가입 절차.

 

Jira의 가입 절차.

 

 

2. 소셜 로그인 방법 제공

소셜 로그인 방법을 사용하면 가입 프로세스가 더 빠르고 쉬워집니다. 사용자가 소셜 로그인을 사용하여 가입하면 이름 및 이메일과 같은 기타 필수 정보를 자동으로 검색할 수 있습니다. 또한 사용자는 비밀번호를 만들 필요가 없습니다.

 

소셜 로그인 방법이 있는 가입 양식과 없는 가입 양식.

 

 

예시

가입 양식에서 소셜 로그인 방법을 제공하는 제품의 예입니다.

 

 

 

3. 비밀번호 필드에 대한 지침 제공

비밀번호 입력 필드 근처에 지침을 표시하여 사용자가 비밀번호를 만드는 데 도움을 주고, 사용자가 입력할 때 즉각적인 피드백을 제공합니다. 이렇게 하면 비밀번호 생성 및 전반적인 가입 절차가 더 쉬워집니다.

 

지침이 없는 비밀번호 필드.

 

 

사용자가 입력할 때 지침과 즉각적인 피드백을 제공하는 비밀번호 필드입니다.

 

 

예시

Airbnb의 비밀번호 필드.

 

 

Spotify의 비밀번호 필드.

 

 

4. 사용자가 비밀번호를 볼 수 있도록 허용

입력한 비밀번호를 표시하는 옵션을 제공하면 사용자가 자신의 입력을 확인할 수 있어 입력 오류의 가능성을 줄일 수 있습니다.

 

비밀번호 표시 기능이 있는 비밀번호 필드와 없는 비밀번호 필드.

 

 

Google 및 LinkedIn의 비밀번호 필드.

 

 

5. 명확하고 구체적인 오류 메시지 제공

사용자가 입력 필드에 잘못 입력하거나 필수 입력란을 누락한 경우 오류 메시지에 오류가 발생한 위치와 해결 방법이 표시되어야 합니다. 그렇지 않으면 사용자가 어떤 정보를 잘못 입력했는지, 왜 잘못 입력했는지 추측해야 합니다.

 

가입 양식의 오류 상태의 나쁜 예와 좋은 예입니다.

 

 

Dropbox 및 Shopify 가입 양식의 오류 상태.

 

출처:

https://medium.com/prototypr/5-best-practices-for-the-sign-up-flow-with-examples-f55832edc8a3