자동 완성을 활용하도록 양식을 최적화하는 방법

놀라다! 자동 완성 기능을 사용하면 사용자가 온라인으로 제품을 더 쉽게 구매할 수 있습니다.

당신의 운이 좋은 날이어야 합니다. 아니면 몇 년?

자동 완성은 새로운 것은 아니지만 시간이 지남에 따라 개선되고 있습니다. 그러나 사용자가 웹 양식을 작성하도록 권장하는 환상적인 방법입니다. 사용자가 귀하에게 연락하거나 지불 정보를 입력하여 크고 아름다운 구매 버튼을 누를 수 있도록 하는 것입니다.

자동 양식 채우기를 사용하면 지루하고 시간이 많이 걸리며 변환을 가로막는 장벽이 될 수 있는 웹 양식에서 모든 노력을 기울일 수 있습니다. 사용자를 위한 양식 데이터를 자동으로 채우면 사용자의 시간을 절약하고 오류 가능성(예: 오타)을 줄여 더 나은 사용자 인터페이스와 사용자 경험(UX)을 제공할 수 있습니다.

또한 사용자가 너무 많은 생각을 하거나 더 나쁜 경우에는 소파에서 일어나 지갑까지 두려운 거리를 걸어야 하는 상황을 피할 수 있습니다.

당신은 우리가 극적이라고 생각할 수도 있지만, 때로는 긴 하루 일과 후에 당신의 리드가 너무 지쳐서 일어나지 못할 때가 있습니다. 아니면 5분 쉬는 시간에 급하게 사야겠다고 생각하다가 갑자기 시간이 없는 바쁜 엄마들.

한 연구에서 Google은 자동화된 양식 작성이 활성화된 사용자가 양식을 30% 더 빨리 완성한다는 것을 발견했습니다. 이 속도는 자동 완성의 단순한 편의성과 결합되어 양식 제출 비율과 전환율을 높이는 동시에 사용자를 만족스럽게 만듭니다. 그리고 행복한 사용자는 재방문 사용자입니다.

이것이 자동 기능이 양식 디자인 모범 사례 목록에 있는 이유입니다.

그렇다면 웹 양식에서 자동 완성 기능을 사용하려면 어떻게 해야 할까요?

모든 것은 웹 개발자가 사용자의 브라우저와 작동하도록 양식을 최적화하여 양식 필드가 무엇인지 인식할 수 있도록 하는 것으로 시작됩니다.

자동 완성은 어떻게 작동합니까?

여기서 시작하는 것은 어떻습니까? 처음에 자동 완성이란 무엇입니까?

자동 완성은 대부분의 브라우저에서 사용자를 위해 제공하는 멋진 도구입니다. 사용자가 자동 ​​채우기를 활성화하면 브라우저는 저장된 해당 사용자 데이터로 양식을 자동으로 채웁니다. 결과적으로 사용자는 손으로 각 필드를 채울 필요가 없습니다.

브라우저마다 저장하는 사용자 데이터가 약간 다르지만 전반적으로 비슷합니다.

참고: "주소"에는 전화번호, 이메일 주소 및 배송 주소가 포함됩니다.

이제 자동 완성은 마법을 어떻게 수행합니까?

아주 간단합니다. 브라우저는 사용자가 다른 사람의 웹사이트 또는 귀하의 웹사이트에서 과거 양식에 입력한 정보를 수집합니다. 일부 사용자는 브라우저의 자동 완성 설정에서 자동 완성을 설정하고 삶을 더 쉽게 만들기 위해 정보를 직접 제공할 수도 있습니다. 이 경우 브라우저는 인증 절차를 통해 결제 수단과 같은 민감한 정보를 저장할 수 있습니다.

사용자는 자동 완성 설정을 통해 자동 완성 기본 설정을 제어하고 활성화 또는 비활성화하도록 선택할 수 있습니다.

활성화되어 있는 한 브라우저는 여러 경험적 방법을 사용하여 사용자 권한에 따라 자동 완성할 수 있는 양식 필드를 결정합니다.

웹 양식에 자동 양식 채우기를 추가하는 방법

좋은 소식을 받을 준비가 되셨나요?

양식 모범 사례를 사용하여 웹 양식을 작성하는 한 기본 기능이 사용자의 브라우저 또는 장치에 구워지기 때문에 일반적으로 자동 완성이 제공됩니다. 따라서 코딩 표준을 충족하는 양식 개발에만 집중하면 됩니다. 이를 관리하면 모바일 및 데스크톱 양식에서 자동 완성이 작동합니다.

그렇지 않은 경우 Google은 자동 완성이 사용자에게 작동하지 않을 수 있는 두 가지 이유를 제시합니다.

1. 1. 웹사이트가 Chrome에서 사용자 데이터를 제공하기에 충분히 안전하지 않을 수 있습니다.
   2. 웹사이트가 안전한 경우 Chrome에서 양식 필드를 감지하지 못할 수 있습니다.

웹 양식에서 이러한 문제를 방지하려면 웹 사이트가 브라우저 표준을 충족할 만큼 충분히 안전한지 확인하십시오. 보안 지침을 설정하고, 웹사이트와 소프트웨어를 최신 상태로 유지하고, 방화벽과 VPN을 사용하고, 데이터 사일로를 방지하십시오.

웹 사이트가 안전하고 자동 완성이 자체적으로 작동하지 않는 경우 양식이 다음 양식 코드 모범 사례를 따르는지 확인하십시오.

자동 완성 작업을 보장하기 위한 모범 사례 형성

브라우저가 사용자의 삶을 더 쉽게 만들기 위해 마법을 부리는 동안 사용자를 도울 수 있는 방법이 있습니다. 브라우저에 올바른 힌트를 제공하는 웹 양식을 개발하면 브라우저가 사용자를 위해 양식 데이터를 자동으로 채울 수 있음을 보장할 수 있습니다.

브라우저가 양식 필드를 채워야 하는 데이터의 종류에 대한 힌트를 제공하여 시작하면 브라우저가 양식을 읽고 작업을 수행하기가 더 쉽습니다.

이렇게 하려면 올바른 입력 유형과 해당 입력 레이블을 사용해야 합니다. 또한 각 입력 요소에 대해 name 속성과 autocomplete 속성을 제공하고 싶을 것입니다. 아래 이미지는 필요할 수 있는 HTML 표준에 따른 일반 이름 및 자동 완성 속성을 보여줍니다.

Google 개발자의 사진.

표준 HTML 양식 관행을 준수하기 위해 귀하 또는 귀하의 웹사이트 개발자는 자동 완성을 활성화하기 위해 입력 요소가 <form> 태그에 래핑되어 있는지 확인해야 합니다. Google 크롬 웹 브라우저에서는 양식 필드가 HTML 양식 태그에 있어야 합니다. 그렇지 않으면 제안만 제공하고 양식 데이터를 자동 완성하지 않습니다.

하지 말아야 할 일: 자동 완성을 방지하는 방법

일부 방법은 브라우저가 양식 데이터를 자동 완성하는 데 도움이 되지만 다른 방법은 방해가 됩니다. 양식을 만들 때 다음을 확인하십시오.

• • 클라이언트 측 유효성 검사와 같은 필드 유효성 검사 함정 피하기
  • 직접 생성하는 대신 표준 입력 필드 사용
  • 가짜 자리 표시자 대신 입력 필드에 자리 표시자 속성 사용
  • 청구서 수신 주소에 배송 주소를 복사하지 마십시오.
  • 양식이 암호 관리자와 작동하는지 확인
  • 자동화된 양식 작성과 관련하여 브라우저 데이터만 도움이 되는 것은 아닙니다.

사용자는 백만 개의 암호를 추적하는 데 지쳤고 그들을 비난할 수 있습니까? 계정이 잠길 때까지 암호를 추측하거나 현재 암호를 사용할 수 없다는 말을 듣고 암호를 포기하고 재설정하는 것보다 더 나쁜 것은 없습니다. (이미 시도하지 않았습니까?!)

결과적으로 한 곳에서 모든 사용자 이름과 비밀번호를 추적하는 비밀번호 관리자의 인기가 높아졌습니다. LastPass 및 1Password와 같은 이러한 관리자 중 최고는 로그인 양식에서 암호를 자동으로 채우는 기능과 함께 제공됩니다.

웹 사이트 소유자의 경우 이는 로그인 양식이 비밀번호 자동 완성 앱과 작동하는지 확인하는 것을 의미합니다.

다행히도 암호 관리자는 브라우저와 마찬가지로 자체적으로 올바르게 구축된 양식에 연결합니다. 위의 양식 팁을 따르면 양식이 LastPass 및 1Password와 원활하게 작동해야 합니다.

그러나 브라우저와 마찬가지로 비밀번호 관리자가 양식을 읽고 기능을 보장하도록 도울 수 있는 방법이 있습니다.

• • 필드를 동적으로 추가하거나 제거하는 로그인 양식을 사용하지 마십시오.
  • 웹 페이지의 첫 번째 렌더링에 양식 표시
  • 의도한 대로 자리 표시자 속성 사용
  • 가능하면 다중 페이지 로그인 양식을 사용하지 마십시오.

자동 완성 방법: 기타 팁

UX를 ​​구성할 때 사용자의 기대에 부응하는 것이 최소한의 요구 사항이며 기대를 뛰어 넘는 것이 목표입니다. 때때로 이것은 사용자 기대의 차이에 적응하기 위해 양식 레이아웃 유연성을 구현하는 것을 의미합니다.

자동 완성 기능의 경우 전 세계 사람들이 주소를 다르게 쓰기 때문에 여러 국가에서 비즈니스를 하거나 소비자에게 서비스를 제공하는 비즈니스에 유연한 양식 레이아웃을 만드는 것이 중요할 수 있습니다. 이러한 사용자의 기대와 브라우저를 수용하려면 그에 따라 주소 필드를 조정하는 유연한 양식을 제공하는 것이 좋습니다.

앱용 자동 완성 양식 설정

사용자가 Apple 기기에서 액세스할 앱을 생성할 때 앱이 Apple의 암호 자동 완성 기능을 지원하는지 확인하고 다음 지침에 따라 앱의 관련 도메인을 설정하세요.

iOS 자동 완성 요구 사항

Android 기기의 앱의 경우 앱이 표준 보기를 사용하는 한 Android 자동 완성 프레임워크는 자동으로 양식을 채웁니다. 여기에 설명된 대로 자동 완성 워크플로를 완료하고, 관련 도메인을 설정하고, 필드를 중요 필드로 표시하고, android:autofillHints 속성을 사용하여 프레임워크 내에서 앱이 작동하는 방식을 최적화할 수 있습니다.

Android 자동 완성 작업 및 지침

전환에 대한 감사를 받으십시오

양식이 브라우저 및 암호 관리자의 자동 완성 기능과 잘 작동하는지 확인하는 것은 양식 UX를 향상하고 양식 제출과 관련된 마찰을 줄이는 가장 좋은 방법 중 하나입니다. 노력의 절반(또는 그 이하!)으로 동일한 결과를 얻는 것을 좋아하지 않는 사람이 있습니까?

자동 완성은 양식을 더 빠르고 간단하게 작성하여 사용자의 삶을 더 쉽게 만들어 줍니다. 즉, 사용자가 원하는 것을 얻고 더 많은 전환을 얻을 수 있습니다.

또한 사용자가 감사를 표할 수 있는 가장 좋은 방법은 전환이라고 생각합니다.

(빠르고, 화려하고, 사용자 친화적이고 자동 채우기 양식 데이터에 최적화된) 양식을 만드는 데 관심이 있으십니까? 우리 팀은 이 모든 것에 열정적이며 이야기하는 것을 좋아합니다. 손을 내밀어.