[회원가입/로그인 UX를 향상시키는 12가지 | 커리어리

[회원가입/로그인 UX를 향상시키는 12가지 방법] 🏷Vivian's Curating 회원가입과 로그인은 간편해야 한다. 조금만 절차가 복잡해져도 쉽게 이탈할 수 있기 때문이다. 기본적으로 디자이너가 참고하고 알아야 할 회원가입/로그인 ux에 대해 간단하게 정리해보았다. 원글로 들어가보면 더 자세한 내용을 참고할 수 있다. ✍️요약 1. 이용자가 얻을 수 있는 회원가입의 이점을 설명하라 2. 소셜을 이용한 간편회원가입&간편로그인을 제공하라 3. 최소한의 정보만 요구하라 4. 같은 텍스트 작성을 반복시키지 마라 (ex. 비밀번호 작성을 2번 반복시키지 마라) 5. 이메일로 확인 절차를 거치지 마라 6. 비밀번호에 너무 많은 보안 규칙을 적용하지 마라 7. '비밀번호 보기'와 '비밀번호 숨기기' 기능을 제공하라 8. 비밀번호 생성 시 보안 강도를 안내하라 (약함, 보통, 강함) 9. 비밀번호 생성 시 작성한 비밀번호에 보안 규칙이 얼마나 적용됐는지 실시간으로 표시하라 10. 지문 인증을 이용해 로그인할 수 있도록 하라 11. 로그인 항목에는 '비밀번호를 잊으셨나요?' 링크를 넣어라 12. 비밀번호 없이 로그인하도록 하라 #UX #회원가입 #로그인

01화 회원가입을 쉽게 만드는 UI/UX 디자인은?

brunch

2021년 4월 20일 오전 2:33

댓글 10

함께 보면 더 좋은

[모바일 UI 디자인 기본 요소 - 텍스트필드] 🏷Vivian's Curating 모바일에서 텍스트필드는 매우 중요한 요소이다. 정보를 얼마나 입력하기 쉽고 간편하게 디자인 하느냐에 따라서 더 나은 이용자 경험을 제공할 수 있다. 요약은 매우 간단한 구조와 기능 정도만 정리하였고, 자세한 내용은 링크된 아티클을 보기를 권장한다. ✍️요약 1. 레이블 기능을 하는 아이콘은 왼쪽 정렬을 권장한다. 2. 텍스트필드의 레이블은 이용자가 입력한 정보보다 더 크거나 강조되지 않아야 한다. 3. 한 유형의 정보를 요청하는 텍스트필드의 입력 필드를 나누지 않아야 한다. 4. 오류 메시지는 필드의 하단에 있어야 한다. ✅ 텍스트필드의 구조 1. 레이블 Label : 입력 필드에 입력할 정보가 무엇인지 사용자에게 설명한다, 2. 입력 필드 Input Field : 레이블 아래에 표시되는 텍스트를 입력할 위치. 3. 플레이스홀더 텍스트 Placeholder Text : 필드 내에 있는 부가적인 내용을 설명하는 짧은 텍스트. 4. 커서 Cursor : 필드 내의 현재 입력 위치를 나타냄. 5. 입력 텍스트 Input Text : 이용자가 입력한 텍스트. 플레이스홀더보다 어두운 색이어야 함. 6. 클리어 버튼 Clear Button : 필드에 입력한 정보를 한꺼번에 삭제할 수 있다. 7. 도움말 텍스트 Helper Text : 정보 입력 중 필드 하단에 입력 정보에 대한 검증 결과 노출. ✅ 필드의 상태 States 1. 디폴트 Default : 텍스트 필드 활성화 상태에서 이용자가 정보 입력하기 전 상태. 2. 호버 Hover : 이용자가 필드 위에 마우스나 손가락을 올렸을 때 상태 변화. 3. 포커스 Focus : 이용자가 입력을 위해 필드를 눌렀을 때의 상태. 4. 타입 Type : 이용자가 키보드를 통해 정보를 입력 중일 때의 상태. 5. 입력됨 Filled : 이용자가 요청한 정보를 입력 완료한 상태. 6. 오류 Error : 이용자가 입력한 정보가 요청한 형식이 아닐 때의 상태. 7. 비활성화 Disabled : 정보 입력을 할 수 없는 상태. 8.성공 Success : 입력한 정보가 요청한 형식에 맞을 때 입력이 성공적으로 완료된 것을 알리기 위한 상태. ✅ 입력 유형과 키보드 유형 1. 기본 키보드 : 문자 입력에 최적화된 형태. 2. 검색 키보드 : 기본 키보드에서 [엔터]키가 [검색]으로 변경. 3. 이메일 키보드 : 기본 키보드에서 [@]과 [.]이 추가되고 [음성입력]키가 빠짐. 4. URL 키보드 : 기본 키보드에서 [.] , [/] , [.com]이 추가되고 [스페이스]키가 빠짐. 5. 숫자 키보드 : 문자는 입력할 수 없고 왼쪽 특수문자 키보드를 통해 특수 문자 입력 가능. 통화 키패드는 여기서 제외됨. ✅ 입력 오류 방지 1. 선택 컨트롤 사용 : 데이트피커, 슬라이더 같은 입력 컨트롤을 사용해 부적절한 값을 입력할 가능성 차단. 2. 입력 거부 : 문자만 요청하는 필드의 경우 숫자 입력 시 입력이 되지 않게 한다. 3. 최적화된 키보드 제공 #UI #디자인 #UI요소 #텍스트필드 #Input

모바일 UI 디자인 기본 요소 - 텍스트 필드

brunch

추천 프로필

현직자에게 업계 주요 소식을 받아보세요.

현직자들의 '진짜 인사이트'가 담긴 업계 주요 소식을 받아보세요.

커리어리 | 일잘러들의 커리어 SNS