로그인 양식 권장사항

크로스 플랫폼 브라우저 기능을 사용하여 안전하고 액세스 가능하며 사용하기 쉬운 로그인 양식을 만드세요.

Sam Dutton

사용자가 사이트에 로그인해야 하는 경우 로그인 양식을 올바르게 디자인하는 것이 매우 중요합니다 특히 연결 상태가 좋지 않거나 모바일 기기 또는 서두르거나 스트레스를 받을 때입니다. 잘못 설계된 로그인 양식은 이탈률이 높습니다. 반송이 발생할 때마다 단순히 로그인 누락이 아닌 이탈하고 불만족한 사용자를 의미할 수 있습니다. 있습니다.

다음은 모든 권장사항을 보여주는 간단한 로그인 양식의 예입니다.

체크리스트

를 통해 개인정보처리방침을 정의할 수 있습니다.

의미 있는 HTML 사용

작업을 위해 빌드된 요소(<form>, <label>, <button>)를 사용합니다. 이를 통해 접근성을 개선하고 브라우저에 의미를 더해줍니다. 마크업

<form> 사용

<div>에서 입력을 래핑하고 입력 데이터를 처리하고 싶을 수 있습니다. 제출할 수 있습니다. 일반적으로는 이전 코드를 사용하여 <form> 드림 요소가 포함됩니다. 이렇게 하면 스크린 리더 및 기타 보조 장치가 사이트에 액세스할 수 있습니다. 다양한 내장 브라우저 기능을 사용할 수 있고, 빌드 작업을 더욱 간단하게 기본 기능 로그인을 사용할 수 있으며 JavaScript가 실패합니다.

<label> 사용

입력에 라벨을 지정하려면 <label>를 사용하세요.

<label for="email">Email</label>
<input id="email" …>

두 가지 이유:

  • 라벨을 탭하거나 클릭하면 포커스가 입력 항목으로 이동합니다. 라벨을 라벨의 for 속성을 입력의 name 또는 id와 함께 사용하여 입력을 시작합니다.
  • 라벨 또는 라벨의 입력이 입력되면 스크린 리더가 라벨 텍스트를 알려줍니다. 초점을 맞추고 있습니다.

자리표시자를 입력 라벨로 사용하지 마세요. 사람들은 데이터를 잊어버리고 입력은 텍스트를 입력하기 시작했을 때, 특히 주의가 산만함('이메일 주소, 전화번호 또는 계정을 ID?'). 자리표시자와 관련하여 다른 문제가 있을 수 있습니다. 자리표시자 사용 속성 및 양식 필드의 자리표시자는 다음과 같은 경우 유해 확신이 들지 않습니다.

라벨을 입력한 내용 위에 배치하는 것이 가장 좋습니다. 이를 통해 일관성 있는 모바일 및 데스크톱 전반에 걸쳐 원활하게 작동하도록 하며 Google AI에 따라 연구, 사용자가 더 빠르게 스캔할 수 있습니다. 전체 너비 라벨과 입력을 얻고 라벨 텍스트에 맞게 라벨과 입력 너비를 조정할 필요가 없습니다.

<ph type="x-smartling-placeholder">
</ph> 모바일에서 양식 입력 라벨 위치(입력 옆, 입력 위쪽)를 보여주는 스크린샷
라벨과 입력 너비가 모두 같은 줄에 있는 경우 라벨 및 입력 너비가 제한됩니다.

기기에서 label-position 글리치를 엽니다. 직접 확인할 수 있습니다.

<button> 사용

<button> 사용 버튼에! 버튼 요소가 액세스 가능한 동작과 기본 제공 양식을 제공함 스타일을 쉽게 지정할 수 있습니다. 아무 의미도 없다 <div> 또는 버튼인 것처럼 가장하는 다른 요소를 사용하는 경우

제출 버튼에 기능이 표시되는지 확인합니다. 예를 들어 계정 만들기 또는 제출 또는 시작이 아니라 로그인합니다.

양식 제출 성공 여부 확인

비밀번호 관리자가 양식이 제출되었음을 이해할 수 있도록 돕습니다. 두 가지 방법은 다음과 같습니다.

  • 다른 페이지로 이동합니다.
  • History.pushState() 또는 History.replaceState()를 사용하여 내비게이션 에뮬레이션 비밀번호 양식을 삭제하세요.

XMLHttpRequest 또는 fetch 요청을 사용하여 로그인이 성공했는지 확인합니다. 응답에 보고되고 DOM에서 양식을 가져와 처리됩니다. 사용자에게 성공을 나타내는 것으로 간주합니다.

사용자가 탭하거나 클릭한 후에는 로그인 버튼을 사용 중지하는 것이 좋습니다. 있습니다. 많은 사용자가 버튼을 여러 번 클릭합니다. 더 빠르고 반응이 좋은 사이트에서도 작동합니다. 이로 인해 상호작용 속도가 느려지고 서버 로드가 늘어남

반대로 사용자 입력을 기다리는 양식 제출을 사용 중지하지 마세요. 예를 들어 사용자가 고객을 입력하지 않은 경우 로그인 버튼을 사용 중지하지 마세요. PIN을 탭합니다. 사용자가 양식에서 무언가를 놓친 후 반복적으로 (사용 중지) 로그인 버튼을 누르면 로그인 버튼이 작동하지 않습니다. 적어도 양식 제출을 사용 중지한 다음, 사용자가 양식을 제출할 때 어떤 내용이 누락되었는지 설명해야 합니다. 사용 중지됨 버튼을 클릭합니다.

입력을 이중으로 입력하지 않음

일부 사이트에서는 사용자가 이메일이나 비밀번호를 두 번 입력하도록 하고 있습니다. 이로 인해 오류가 발생하지만 모든 사용자에게 추가 작업이 발생하며 이탈 요율을 참고하세요. 브라우저가 이메일 주소를 자동 완성하거나 안전한 비밀번호를 추천합니다. 사용자가 이메일을 확인하도록 지원하는 것이 좋습니다. 재설정하고 쉽게 재설정해야 합니다. 비밀번호를 재설정해야 합니다.

요소 속성을 최대한 활용

여기서 정말 놀라운 일이 벌어집니다. 브라우저에는 입력 요소 속성을 사용하는 여러 가지 유용한 기본 제공 기능이 있습니다.

비밀번호는 비공개로 유지하되 원하는 경우 사용자가 볼 수 있도록 설정

비밀번호 입력에는 비밀번호 텍스트를 숨기고type="password" 비밀번호 입력이라는 것을 이해하게 됩니다. (브라우저는 다양한 기법을 활용하여 입력 역할을 이해하고 비밀번호 저장 여부 확인 여부).

사용자가 비밀번호를 확인할 수 있도록 비밀번호 표시 전환 버튼을 추가해야 합니다. 비밀번호 찾기 링크를 추가해야 합니다. 자세한 내용은 비밀번호 표시를 사용 설정합니다.

<ph type="x-smartling-placeholder">
</ph> 비밀번호 표시 아이콘이 표시된 Google 로그인 양식
Google 로그인 양식에서 비밀번호 입력: 비밀번호 표시 아이콘 및 비밀번호 찾기 링크

모바일 사용자에게 적합한 키보드 제공

<input type="email">를 사용하여 모바일 사용자에게 적절한 키보드 제공 브라우저에서 기본 내장 이메일 주소 확인 활성화... JavaScript는 필요하지 않음 필수

이메일 주소 대신 전화번호를 사용해야 하는 경우 <input type="tel">에서 휴대기기의 전화 키패드를 사용 설정합니다. 또한 inputmode 속성(필요한 경우): inputmode="numeric"이(가) PIN에 적합합니다. 있습니다. 궁금했던 모든 정보를 확인해 보세요 inputmode 를 참조하세요.

모바일 키보드가 로그인 버튼을 가리지 않도록 방지

주의하지 않으면 모바일 키보드가 양식을 가릴 수 있습니다. 더 안 좋은 경우에는 로그인 버튼이 부분적으로 가려집니다. 사용자가 포기할 수 있음 무슨 일이 있었는지 깨닫게 되죠.

<ph type="x-smartling-placeholder">
</ph> Android 휴대전화의 로그인 양식 스크린샷 두 개. 하나는 휴대전화 키보드로 인해 제출 버튼이 가려지는지 보여줍니다.
로그인 버튼: 이제는 볼 수 없습니다.

가능한 경우 로그인 페이지 상단에 이메일/전화번호 및 비밀번호 입력과 로그인 버튼만 표시하여 이를 피하세요. 아래에 다른 콘텐츠를 배치하세요.

<ph type="x-smartling-placeholder">
</ph> Android 휴대전화의 로그인 양식 스크린샷: 로그인 버튼이 휴대전화 키보드로 가려지지 않습니다.
키보드가 로그인 버튼을 가리지 않습니다.

다양한 기기에서 테스트

다양한 기기에서 타겟 잠재고객을 테스트하고 변경할 수 있습니다 BrowserStack은 오픈소스 무료 테스트를 지원합니다. 다양한 실제 기기에서 프로젝트를 사용할 수 있습니다

<ph type="x-smartling-placeholder">
</ph> iPhone 7, 8, 11의 로그인 양식 스크린샷 iPhone 7 및 8에서 로그인 버튼이 휴대전화 키보드에 가려 보이지만 iPhone 11에서는 보이지 않습니다.
로그인 버튼: iPhone 7 및 8에서는 잘 보이지만 iPhone 11에서는 보이지 않습니다.

두 페이지를 사용해 보세요

일부 사이트 (Amazon 및 eBay 포함)는 이메일/전화번호 및 비밀번호 두 페이지에 표시되어 있습니다. 또한 이 접근 방식을 사용하면 사용자는 한 번에 한 가지 작업만 받습니다.

<ph type="x-smartling-placeholder">
</ph> Amazon 웹사이트의 로그인 양식 스크린샷: 두 개의 개별 &#39;페이지&#39;에 표시된 이메일/전화번호 및 비밀번호
2단계 로그인: 이메일 또는 전화에 이어 비밀번호를 사용합니다.

단일 <form>으로 구현하는 것이 이상적입니다. JavaScript 사용 처음에는 이메일 입력만 표시하고 숨기고 비밀번호 입력을 표시합니다. 사용자가 이메일을 입력하고 두 번째 페이지의 양식에는 이메일 값을 설정하여 비밀번호 관리자가 올바른 값을 저장할 수 있도록 합니다. 비밀번호 Chromium이 이해하는 양식 스타일 코드 예시를 제공합니다.

사용자가 데이터를 다시 입력하지 않도록 지원

브라우저가 데이터를 올바르게 저장하고 입력을 자동 완성하도록 도움을 줄 수 있으므로 이메일 및 비밀번호 값을 입력해야 합니다. 이것은 특히 이메일 입력에 필수적이며, 이탈률이 높은 이메일 입력에 중요합니다.

이 작업에는 두 가지 부분이 있습니다.

  1. autocomplete, name, id, type 속성은 브라우저가 나중에 자동 완성에 사용할 수 있는 데이터를 저장하기 위한 입력 역할을 설정합니다. 자동 완성을 위해 데이터를 저장하려면 최신 브라우저에서도 안정적인 name 또는 id 값이 있어야 합니다 (페이지를 로드할 때마다 무작위로 생성되지 않고 <form>을 사용해야 하며 submit 버튼을 사용합니다.

  2. autocomplete 속성은 브라우저가 저장할 수 있습니다

이메일 입력의 경우 username가 인식되므로 autocomplete="username"를 사용합니다. type="email"를 사용해야 하지만 최신 브라우저에서 비밀번호 관리자에 의해 id="email" 및 name="email"를 사용하는 것이 좋습니다.

비밀번호를 입력할 때 적절한 autocomplete 및 id 값을 사용하여 브라우저가 새 비밀번호와 현재 비밀번호를 구분합니다.

autocomplete="new-password" 및 id="new-password"를 사용하여 새 비밀번호 만들기

  • 가입 시 비밀번호를 입력할 때 autocomplete="new-password" 및 id="new-password" 사용 양식 또는 비밀번호 변경 형식의 새 비밀번호입니다.

기존 비밀번호에 autocomplete="current-password" 및 id="current-password" 사용

  • autocomplete="current-password" 및 id="current-password"를 사용하여 로그인 양식 또는 비밀번호 변경 양식에 사용자의 이전 비밀번호 입력이 포함됩니다. 이렇게 하면 사이트에 저장된 현재 비밀번호를 사용하도록 합니다.

가입 양식의 경우:

<input type="password" autocomplete="new-password" id="new-password" …>

로그인의 경우:

<input type="password" autocomplete="current-password" id="current-password" …>

비밀번호 관리자 지원

브라우저마다 이메일 자동 완성 및 비밀번호 추천이 다소 처리됨 효과는 거의 동일합니다 데스크톱의 Safari 11 이상에서 예를 들어 비밀번호 관리자가 표시된 다음 생체 인식이 디지털 인증(지문 또는 얼굴 인식)을 사용합니다(가능한 경우).

<ph type="x-smartling-placeholder">
</ph> 데스크톱용 Safari의 3단계 로그인 프로세스(비밀번호 관리자, 생체 인식 인증, 자동 완성)를 보여주는 스크린샷
자동 완성 기능을 사용하여 로그인(텍스트 입력 필요 없음)

데스크톱의 Chrome에 이메일 추천이 표시되고 비밀번호 관리자가 표시되며 비밀번호를 자동 완성합니다.

<ph type="x-smartling-placeholder">
</ph> 데스크톱용 Chrome의 4단계 로그인 프로세스(이메일 완성, 이메일 추천, 비밀번호 관리자, 선택 시 자동 완성)를 보여주는 스크린샷
Chrome 84의 로그인 과정 자동 완성

브라우저 비밀번호와 자동 완성 시스템은 간단하지 않습니다. 인코더-디코더 아키텍처를 값을 추측, 저장 및 표시하는 것은 표준화되지 않으며 제공합니다 예를 들어 Hidde de Vries: "Firefox의 암호 관리자는 www.fireeye.kr/orchestration으로 레시피 시스템'이라고 합니다.

자동 완성: 웹 개발자가 알아야 할 사항 피해야 할 사항 에서 name 및 autocomplete 사용에 대한 자세한 정보를 확인하세요. HTML 사양 59개의 가능한 값을 모두 나열합니다.

브라우저에서 안전한 비밀번호를 추천하도록 사용 설정

최신 브라우저는 휴리스틱을 사용하여 비밀번호 관리자 UI와 안전한 비밀번호를 추천합니다.

데스크톱의 Safari는 다음과 같습니다.

<ph type="x-smartling-placeholder">
</ph> 데스크톱의 Firefox 비밀번호 관리자 스크린샷
Safari의 비밀번호 추천 흐름

Safari 버전 12.0부터 강력한 고유 비밀번호 제안 기능을 사용할 수 있습니다.

브라우저 비밀번호 생성기가 내장되어 있어 사용자와 개발자는 '안전한 비밀번호'가 무엇인지 있습니다. 브라우저는 사용자가 안전하게 자동 완성 기능을 사용하면 사용자가 기억할 필요가 없습니다. 또는 비밀번호를 입력합니다. 사용자에게 기본 제공 브라우저를 활용하도록 권장 비밀번호 생성기를 사용하면 고유하고 강력한 비밀번호 가능성이 낮다고 판단되는 비밀번호를 다른 곳에서도 침해를 당할 수 있습니다.

실수로 인한 입력 누락을 방지하는 지원

이메일 및 비밀번호 입력란 모두에 required 속성을 추가합니다. 최신 브라우저는 자동으로 메시지를 표시하고 누락된 데이터에 대한 포커스를 설정합니다. JavaScript가 필요하지 않습니다.

<ph type="x-smartling-placeholder">
</ph> &#39;이 입력란을 작성하세요&#39;가 표시된 데스크톱 Firefox 및 Android용 Chrome의 스크린샷 프롬프트가 표시됩니다. <ph type="x-smartling-placeholder">
</ph> 데스크톱용 Firefox (버전 76)에서 누락된 데이터에 대한 메시지 표시 및 포커스 사용 및 Android용 Chrome (버전 83)

손가락과 엄지손가락에 최적화된 디자인

입력 요소와 관련된 거의 모든 요소의 기본 브라우저 크기 특히 모바일에서는 버튼이 너무 작습니다. 당연한 것 같지만 이는 여러 사이트에서 로그인 양식에 흔히 발생하는 문제입니다.

입력과 버튼이 충분히 큰지 확인

입력 및 버튼의 기본 크기와 패딩이 데스크톱에서는 너무 작고 모바일에서는 더 심합니다.

데스크톱용 Chrome 및 Android용 Chrome에서 스타일이 지정되지 않은 양식의 스크린샷

Android 접근성 지원 여부 안내 터치스크린 객체에 권장되는 영역 크기는 7~10mm입니다. Apple 인터페이스 가이드라인에서는 48x48픽셀을 권장하고 W3C에서는 44x44 이상의 CSS를 권장함 픽셀을 사용합니다. 이에 대해 기반으로 최소 15픽셀의 패딩을 데스크톱에서는 약 10픽셀 정도입니다 실제 모바일 기기에서 시도해 보고 도움이 될 수 있습니다 각 기기를 편안하게 탭할 수 있어야 합니다. 입력과 버튼을 사용합니다.

탭 타겟의 크기가 적절하지 않음 Lighthouse 감사는 입력 요소 감지 프로세스를 자동화하는 데 도움이 될 수 있습니다. 만들 수 있습니다.

손가락으로 사용하기 편리한 디자인

터치 영역을 검색하고 검지가 많은 사진을 볼 수 있습니다. 그러나 현실 세계에서는 엄지를 사용하여 휴대전화와 상호작용합니다. 엄지손가락이 다음보다 큼 손가락에 닿는 편이며 제어의 정확도가 떨어질 수 있습니다. 이 모든 것이 충분히 가능한 이유는 크기가 조정된 터치 영역

텍스트를 충분히 크게 만들기

크기 및 패딩과 마찬가지로 입력 요소의 기본 브라우저 글꼴 크기는 버튼이 너무 작습니다(특히 모바일에서).

<ph type="x-smartling-placeholder">
</ph> 데스크톱 및 Android의 Chrome에서 스타일이 지정되지 않은 양식의 스크린샷
데스크톱 및 모바일의 기본 스타일: 입력 텍스트가 너무 작아서 많은 사용자가 읽을 수 없습니다.

다른 플랫폼의 브라우저는 글꼴 크기를 다르게 조정하므로 특정 글꼴 크기를 지정할 수 있습니다. 간단한 설문조사 대상 인기 웹사이트는 데스크톱에 실제 크기와 일치하게 13~16픽셀로 표시합니다. 은 모바일의 텍스트에 적합합니다.

따라서 모바일에서는 더 큰 픽셀 크기(Chrome: 16px)를 사용해야 합니다. 데스크톱은 가독성은 높지만 시력이 좋더라도 읽기 어렵습니다. 16px Android용 Chrome의 텍스트입니다. 텍스트, 이미지, 오디오 등 표시 영역 크기 및 미디어 쿼리를 사용합니다. 20px은(는) 휴대기기에도 적합하지만, 친구나 동료와 함께 테스트해 보는 것이 좋습니다. 저시력 동료들도 있습니다

문서에서 읽기 쉬운 글꼴 크기를 사용하지 않습니다. Lighthouse 감사는 너무 많은 텍스트를 감지하는 프로세스를 자동화하는 데 있습니다.

입력 사이에 충분한 공간 제공

입력이 터치 영역처럼 잘 작동하도록 충분한 여백을 추가하세요. 다시 말해, 목표 약 손가락 너비의 여백입니다.

입력한 내용이 명확하게 표시되는지 확인하세요.

입력의 기본 테두리 스타일로 인해 찾기 어렵습니다. 거의 Android용 Chrome과 같은 일부 플랫폼에서는 볼 수 없습니다.

패딩뿐만 아니라 테두리도 추가합니다. 흰색 배경에서는 일반적으로 #ccc 또는 어둡게를 사용합니다.

<ph type="x-smartling-placeholder">
</ph> Android의 Chrome에서 스타일이 지정된 양식의 스크린샷
텍스트를 읽기 쉽고, 입력 테두리가 보이며, 패딩과 여백이 적절해야 합니다.

기본 제공되는 브라우저 기능을 사용하여 잘못된 입력 값 경고

브라우저에는 type 속성 잘못된 값이 포함된 양식을 제출하면 브라우저에서 문제가 있는 입력에 초점을 맞추세요.

<ph type="x-smartling-placeholder">
</ph> 브라우저 메시지와 잘못된 이메일 값에 초점을 맞춘 내용이 표시된 데스크톱의 Chrome 로그인 양식 스크린샷
브라우저의 기본 제공 유효성 검사

:invalid CSS 선택자를 사용하여 잘못된 데이터를 강조 표시할 수 있습니다. 사용 :not(:placeholder-shown): 콘텐츠가 없는 입력을 선택하지 않습니다.

input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

잘못된 값이 있는 입력을 강조 표시하는 다양한 방법을 시도해 보세요.

필요한 경우 JavaScript 사용

비밀번호 표시 전환

사용자가 비밀번호를 확인할 수 있도록 비밀번호 표시 전환 버튼을 추가해야 합니다. 확인할 수 있습니다. 사용성 문제가 발생하는 경우 표시되지 않습니다. 현재로서는 이를 위한 기본 제공 방법이 없습니다. 다만 이를 위해 더 많은 잠재고객을 확보할 수 있는 구현을 참조하세요. 사용자는 대신 자바스크립트를 사용해야 합니다.

<ph type="x-smartling-placeholder">
</ph> 비밀번호 표시 전환 버튼과 비밀번호 찾기 링크가 표시된 Google 로그인 양식
Google 로그인 양식: 비밀번호 표시 전환 및 비밀번호 찾기 링크를 사용합니다.

다음 코드는 텍스트 버튼을 사용하여 Show password 기능을 추가합니다.

HTML:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

다음은 버튼을 일반 텍스트처럼 보이게 하는 CSS입니다.

button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  /* Media query isn't shown here. */
  font-size: var(--mobile-font-size);
  font-weight: 300;
  padding: 0;
  /* Display at the top right of the container */
  position: absolute;
  top: 0;
  right: 0;
}

비밀번호를 표시하기 위한 JavaScript는 다음과 같습니다.

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

최종 결과는 다음과 같습니다.

<ph type="x-smartling-placeholder">
</ph> Mac의 Safari와 iPhone 7에서 비밀번호 텍스트 &#39;button&#39;이 표시된 로그인 양식의 스크린샷
Mac 및 iPhone 7의 Safari에서 비밀번호 표시 텍스트 'button'이 포함된 로그인 양식

접근성 높은 비밀번호 입력

aria-describedby를 사용하여 요소를 정의합니다. 스크린 리더는 라벨 텍스트, 입력 유형 (비밀번호)과 설명을 차례로 입력합니다.

<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>

비밀번호 표시 기능을 추가할 때는 비밀번호가 표시될 것이라고 경고하는 aria-label 그렇지 않으면 사용자가 비밀번호를 유출하는 것을 방지할 수 있습니다.

<button id="toggle-password"
        aria-label="Show password as plain text.
                    Warning: this will display your password on the screen.">
  Show password
</button>

다음 글리치에서 두 ARIA 기능이 작동하는 것을 확인할 수 있습니다.

접근성 기능을 갖춘 양식 만들기에서 양식의 접근성을 높이는 데 도움이 되는 더 많은 도움말을 확인하세요.

제출 전 실시간 검증

HTML 양식 요소 및 속성에는 기본 유효성 검사를 위한 기능이 내장되어 있으며, 사용자는 JavaScript를 사용하여 보다 강력한 유효성 검사를 해야 합니다. 사용자가 양식을 제출하려고 할 때 발생합니다.

로그인 양식 5단계 Codelab은 제약조건 유효성 검사 사용 API (즉, 널리 지원됨) 포커스를 설정하고 프롬프트를 표시하기 위해 기본 제공 브라우저 UI를 사용하여 커스텀 검증을 수행합니다.

자세히 알아보기: 보다 복잡한 실시간 작업에 JavaScript 사용 유효성 검사에 대해 자세히 알아보세요.

분석 및 RUM

"측정할 수 없는 것은 향상할 수 없다" 고객이 Google에 가입하는 경우 로그인 양식을 사용할 수 있습니다. 목표를 설정하고, 성공을 측정하고, 사이트를 개선해야 합니다. 반복해 봅시다.

사용성 할인 테스트는 변경사항을 시험하는 데는 유용하지만 실제로 사용자가 가입 및 로그인 양식을 어떻게 사용하는지 파악하세요.

  • 페이지 분석: 가입 및 로그인 페이지 조회수, 이탈률, 이탈합니다.
  • 상호작용 분석: 목표 유입경로에 대해 사용자가 여러분의 로그인 또는 로그인 과정을 포기하는지 여부) 및 이벤트 (양식과 상호작용할 때 사용자가 취하는 액션)
  • 웹사이트 실적: 사용자 중심 측정항목 (가입 및 로그인 측정항목)이 어떤 이유에서든 속도가 느려집니다. 만약 그렇다면 그 원인은 무엇인가?).

A/B 테스트를 구현하여 가입 및 로그인에 대한 다양한 접근 방식, 단계적 출시로 모든 사용자에게 변경사항을 적용하기 전에 일부 사용자에 대한 변경사항을 적용해야 합니다.

일반 가이드라인

UI와 UX를 잘 디자인하면 로그인 양식 이탈을 줄일 수 있습니다.

  • 사용자가 로그인을 찾지 않아도 됩니다. 상단에 로그인 양식 링크 삽입 로그인, 계정 만들기와 같이 잘 알려진 표현을 사용하여 페이지의 내용을 확인합니다. 또는 등록을 클릭합니다.
  • 집중력을 유지하세요. 가입 양식은 사용자의 주의를 산만하게 하는 곳이 아닙니다. 제품 및 기타 사이트 기능을 활용할 수 있습니다.
  • 가입 절차의 복잡성을 최소화하세요. 다른 사용자 데이터 (예: 주소, (신용카드 세부정보)를 제공하는 것이 명확한 혜택을 제공하는 경우에만 데이터입니다.
  • 사용자가 가입 양식을 시작하기 전에 제품의 가치를 명확히 밝히세요. 있습니다. 로그인하면 어떤 이점이 있나요? 사용자에게 구체적인 정보 제공 인센티브를 제공합니다.
  • 가능한 경우 사용자가 휴대전화 번호로 본인을 식별할 수 있도록 합니다. 일부 사용자는 이메일을 사용하지 않을 수 있기 때문입니다.
  • 사용자가 손쉽게 비밀번호를 재설정할 수 있도록 하고 비밀번호를 잊으셨나요? 링크를 쉽게 찾을 수 있습니다.
  • 서비스 약관 및 개인정보처리방침 문서 링크: 사용자의 데이터를 보호하는 방법을 고려해야 합니다
  • 가입 시 회사 또는 조직의 로고와 이름을 포함합니다. 언어, 글꼴, 스타일이 나머지 부분과 일치하는지 확인할 수 있습니다. 일부 양식이 다른 양식과 같은 사이트에 속한 것 같지 않습니다. 특히 URL이 상당히 다른 경우 더욱 그렇습니다.

계속 학습하기

사진: 메건 쉬어렉(Unsplash 제공)