Các phương pháp hay nhất về biểu mẫu đăng nhập

Sử dụng các tính năng của trình duyệt trên nhiều nền tảng để tạo biểu mẫu đăng nhập an toàn, dễ truy cập và dễ sử dụng.

Sam Dutton

Nếu người dùng cần phải đăng nhập vào trang web của bạn thì bạn nên thiết kế biểu mẫu đăng nhập cực kỳ quan trọng. Điều này đặc biệt đúng với những người có kết nối kém, trên thiết bị di động, ở sự vội vàng hoặc đang bị căng thẳng. Biểu mẫu đăng nhập được thiết kế kém có tỷ lệ thoát cao. Mỗi lượt thoát có thể có nghĩa là một người dùng lạc lối và bất bình, chứ không chỉ là một lần đăng nhập bị bỏ lỡ cơ hội.

Sau đây là ví dụ về biểu mẫu đăng nhập đơn giản thể hiện tất cả các phương pháp hay nhất:

Danh sách kiểm tra

• Sử dụng các phần tử HTML có ý nghĩa: <form>, <input>, <label> và <button>.
• Gắn nhãn từng dữ liệu đầu vào bằng <label>.
• Sử dụng các thuộc tính phần tử để truy cập vào trình duyệt tích hợp sẵn tính năng: type, name, autocomplete, required.
• Cung cấp các giá trị ổn định không thay đổi cho các thuộc tính name và id đầu vào giữa các lần tải trang hoặc triển khai trang web.
• Đặt thông tin đăng nhập vào <biểu mẫu> riêng phần tử.
• Đảm bảo gửi biểu mẫu thành công.
• Sử dụng autocomplete="new-password" và id="new-password" cho thông tin nhập mật khẩu trong biểu mẫu đăng ký và mật khẩu mới trong biểu mẫu đặt lại mật khẩu.
• Sử dụng autocomplete="current-password" và id="current-password" để nhập mật khẩu đăng nhập.
• Cung cấp chức năng Hiện mật khẩu.
• Sử dụng aria-label và aria-describedby cho mật khẩu.
• Đừng nhập dữ liệu 2 lần.
• Hãy thiết kế biểu mẫu sao cho bàn phím di động không che khuất mục nhập hoặc các nút.
• Đảm bảo biểu mẫu có thể sử dụng được trên thiết bị di động: sử dụng văn bản dễ đọc, đồng thời đảm bảo các nút và thao tác đầu vào đủ lớn để hoạt động như đích chạm.
• Duy trì thương hiệu và phong cách trên trang đăng ký và trang đăng nhập của bạn.
• Thử nghiệm tại hiện trường cũng như trong phòng thí nghiệm: phân tích trang tạo, số liệu phân tích tương tác và đo lường hiệu suất tập trung vào người dùng vào đăng ký.
• Thử nghiệm trên nhiều trình duyệt và thiết bị: cách hoạt động của biểu mẫu sẽ khác nhau đáng kể trên các nền tảng.

Sử dụng HTML có ý nghĩa

Sử dụng các phần tử được tạo cho công việc: <form>, <label> và <button>. Những chiến dịch này cho phép chức năng trình duyệt tích hợp sẵn, cải thiện khả năng tiếp cận và thêm ý nghĩa cho mã đánh dấu.

Sử dụng <form>

Bạn có thể muốn gói dữ liệu đầu vào trong một <div> và xử lý dữ liệu đầu vào gửi bằng JavaScript. Thông thường, bạn nên sử dụng phiên bản cũ <form> . Điều này giúp trình đọc màn hình và các công cụ hỗ trợ khác có thể truy cập vào trang web của bạn trên thiết bị, hỗ trợ hàng loạt tính năng tích hợp sẵn của trình duyệt, giúp quá trình tạo chức năng cơ bản đăng nhập dành cho các trình duyệt cũ hơn và vẫn có thể hoạt động ngay cả khi JavaScript không thành công.

Sử dụng <label>

Để gắn nhãn cho một mục nhập, hãy sử dụng <label>!

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

Có hai lý do:

• Thao tác nhấn hoặc nhấp vào một nhãn sẽ di chuyển tiêu điểm đến mục nhập của nhãn đó. Liên kết nhãn với đầu vào bằng cách sử dụng thuộc tính for của nhãn với name hoặc id của đầu vào.
• Trình đọc màn hình sẽ thông báo văn bản của nhãn khi nhãn hoặc thông tin đầu vào của nhãn được nhận tập trung.

Đừng dùng phần giữ chỗ làm nhãn đầu vào. Mọi người có trách nhiệm quên những gì đầu vào là cho sau khi họ bắt đầu nhập văn bản, đặc biệt là khi họ nhận được phân tâm ("Tôi đã nhập địa chỉ email, số điện thoại hay tài khoản mã nhận dạng?"). Có rất nhiều vấn đề có thể xảy ra khác với phần giữ chỗ: xem Không nên Sử dụng Trình giữ chỗ Thuộc tính và Phần giữ chỗ trong Trường Biểu mẫu Có hại nếu bạn không tin tưởng.

Tốt nhất là bạn nên đặt nhãn phía trên thông tin đầu vào. Điều này cho phép nhất quán trên thiết bị di động và máy tính, cũng như theo AI của Google nghiên cứu, cho phép người dùng quét nhanh hơn. Bạn sẽ nhận được thông tin đầu vào và nhãn có chiều rộng đầy đủ, đồng thời bạn bạn không cần điều chỉnh nhãn và chiều rộng đầu vào cho vừa với văn bản của nhãn.

Mở chỗ nhiễu label-location trên thiết bị di động để tự mình xem.

Sử dụng <button>

Sử dụng <button> cho các nút! Các phần tử nút cung cấp hành vi có thể truy cập và dạng tích hợp sẵn và chúng có thể dễ dàng được tạo kiểu. Không có lý do gì bằng cách sử dụng <div> hoặc phần tử nào đó khác giả vờ là một nút.

Hãy đảm bảo rằng nút gửi thể hiện chức năng của nút này. Ví dụ như Tạo tài khoản hoặc Đăng nhập, không phải Gửi hoặc Bắt đầu.

Đảm bảo gửi biểu mẫu thành công

Giúp người quản lý mật khẩu biết được biểu mẫu đã được gửi. Có hai cách để làm việc đó:

• Chuyển đến một trang khác.
• Mô phỏng thao tác điều hướng bằng History.pushState() hoặc History.replaceState(), và xoá biểu mẫu mật khẩu.

Với yêu cầu XMLHttpRequest hoặc fetch, hãy đảm bảo rằng lượt đăng nhập thành công được báo cáo trong phản hồi và được xử lý bằng cách đưa biểu mẫu ra khỏi DOM là thể hiện sự thành công đối với người dùng.

Cân nhắc tắt nút Đăng nhập sau khi người dùng nhấn hoặc nhấp nó. Nhiều người dùng nhấp vào nút nhiều lần ngay cả trên các trang web nhanh và phản hồi nhanh. Điều này làm chậm quá trình tương tác, thêm vào tải của máy chủ.

Ngược lại, không tắt tính năng gửi biểu mẫu đang chờ người dùng nhập. Ví dụ: không tắt nút Đăng nhập nếu người dùng chưa nhập khách hàng của họ Mã PIN. Người dùng có thể bỏ lỡ thông tin nào đó trong biểu mẫu, sau đó thử nhấn liên tục vào (đã tắt) Nút Đăng nhập và cho rằng nút này không hoạt động. Ít nhất, nếu bạn phải tắt tính năng gửi biểu mẫu, giải thích cho người dùng biết những điều họ cần làm khi họ hãy nhấp vào nút đã tắt.

Không tăng gấp đôi thông tin đầu vào

Một số trang web buộc người dùng nhập email hoặc mật khẩu hai lần. Điều đó có thể làm giảm lỗi đối với một số người dùng, nhưng lại làm phát sinh thêm công việc cho tất cả người dùng, đồng thời tăng lên bỏ ngang . Việc hỏi hai lần cũng sẽ không hợp lý khi trình duyệt tự động điền địa chỉ email hoặc đề xuất mật khẩu mạnh. Nên cho phép người dùng xác nhận email của họ địa chỉ email của bạn (vẫn phải làm như vậy) và giúp họ dễ dàng đặt lại mật khẩu nếu cần.

Khai thác tối đa các thuộc tính phần tử

Đây là nơi điều kỳ diệu thực sự xảy ra! Các trình duyệt có nhiều tính năng hữu ích được tích hợp sẵn sử dụng các thuộc tính của phần tử đầu vào.

Đảm bảo mật khẩu ở chế độ riêng tư, nhưng vẫn cho phép người dùng xem nếu họ muốn

Mật khẩu phải nhập vào phải có type="password" để ẩn văn bản mật khẩu và giúp trình duyệt hiểu rằng thông tin đầu vào là dành cho mật khẩu. (Xin lưu ý rằng các trình duyệt sử dụng nhiều kỹ thuật để nắm được vai trò đầu vào và quyết định có đề xuất lưu mật khẩu hay không).

Bạn nên thêm nút bật/tắt Hiển thị mật khẩu để cho phép người dùng kiểm tra nội dung mà họ đã nhập—và đừng quên thêm liên kết Quên mật khẩu. Xem Bật tính năng hiển thị mật khẩu.

Cung cấp cho người dùng thiết bị di động bàn phím phù hợp

Sử dụng <input type="email"> để cung cấp cho người dùng thiết bị di động bàn phím và bật tính năng xác thực địa chỉ email tích hợp sẵn cơ bản bởi trình duyệt... không có JavaScript là bắt buộc!

Nếu bạn cần sử dụng số điện thoại thay vì địa chỉ email, <input type="tel"> sẽ bật bàn phím điện thoại trên thiết bị di động. Bạn cũng có thể sử dụng Thuộc tính inputmode khi cần: inputmode="numeric" là lựa chọn lý tưởng để dùng mã PIN số. Mọi điều bạn muốn biết inputmode có nhiều chi tiết hơn.

Không cho bàn phím di động che khuất nút Đăng nhập

Rất tiếc, nếu bạn không cẩn thận, bàn phím di động có thể che biểu mẫu của bạn hoặc, tệ hơn, che khuất một phần nút Đăng nhập. Người dùng có thể bỏ cuộc trước nhận ra điều gì đã xảy ra.

Nếu có thể, hãy tránh điều này bằng cách chỉ hiển thị thông tin nhập email/số điện thoại và mật khẩu, cũng như nút Đăng nhập ở đầu trang đăng nhập của bạn. Đặt nội dung khác bên dưới.

Kiểm thử trên nhiều loại thiết bị

Bạn sẽ cần thử nghiệm trên nhiều loại thiết bị cho đối tượng mục tiêu của mình và điều chỉnh cho phù hợp. BrowserStack bật kiểm thử miễn phí cho nguồn mở dự án trên hàng loạt thiết bị thực và trình duyệt của bạn.

Cân nhắc sử dụng hai trang

Một số trang web (bao gồm cả Amazon và eBay) tránh vấn đề này bằng cách yêu cầu email/điện thoại và mật khẩu trên hai trang. Phương pháp này cũng đơn giản hoá trải nghiệm: người dùng chỉ phải thực hiện một việc tại một thời điểm.

Tốt nhất là bạn nên triển khai việc này bằng một <form> duy nhất. Sử dụng JavaScript để ban đầu chỉ hiển thị địa chỉ email đã nhập, sau đó ẩn email và hiện mật khẩu đã nhập. Nếu bạn phải buộc người dùng chuyển đến một trang mới giữa thời điểm nhập email của họ và mật khẩu, biểu mẫu trên trang thứ hai phải có yếu tố nhập ẩn cùng với email, để giúp cho phép trình quản lý mật khẩu lưu trữ đúng giá trị. Mật khẩu Các kiểu biểu mẫu mà Chromium hiểu được cung cấp ví dụ về mã.

Giúp người dùng tránh phải nhập lại dữ liệu

Bạn có thể giúp trình duyệt lưu trữ dữ liệu chính xác và tự động điền thông tin đầu vào để người dùng phải nhớ nhập email và mật khẩu. Điều này đặc biệt quan trọng trên thiết bị di động và quan trọng đối với đầu vào email vì có tỷ lệ bỏ ngang cao.

Có hai phần:

1. Các thuộc tính autocomplete, name, id và type giúp trình duyệt hiểu được vai trò của dữ liệu đầu vào để lưu trữ dữ liệu sau này dùng cho tính năng tự động điền. Để cho phép lưu trữ dữ liệu cho tính năng tự động điền, các trình duyệt hiện đại cũng cần nhập dữ liệu vào để có giá trị name hoặc id ổn định (không được tạo ngẫu nhiên mỗi lần tải trang hoặc triển khai trang web) và ở dạng <biểu mẫu> bằng nút submit.

2. Thuộc tính autocomplete giúp trình duyệt tự động điền chính xác thông tin đầu vào bằng cách sử dụng dữ liệu đã lưu trữ.

Để nhập email, hãy sử dụng autocomplete="username", vì username được nhận dạng bằng trình quản lý mật khẩu trong các trình duyệt hiện đại, mặc dù bạn nên dùng type="email" và bạn nên dùng id="email" và name="email".

Đối với nhập mật khẩu, hãy dùng các giá trị autocomplete và id thích hợp để giúp trình duyệt phân biệt giữa mật khẩu mới và mật khẩu hiện tại.

Sử dụng autocomplete="new-password" và id="new-password" để tạo mật khẩu mới

• Sử dụng autocomplete="new-password" và id="new-password" để nhập mật khẩu khi đăng ký hoặc mật khẩu mới ở dạng biểu mẫu thay đổi mật khẩu.

Sử dụng autocomplete="current-password" và id="current-password" cho mật khẩu hiện có

• Sử dụng autocomplete="current-password" và id="current-password" để nhập mật khẩu trong biểu mẫu đăng nhập hoặc thông tin nhập mật khẩu cũ của người dùng ở dạng thay đổi mật khẩu. Điều này cho biết mà bạn muốn công cụ này sử dụng mật khẩu hiện tại mà công cụ đã lưu trữ cho trang web.

Đối với biểu mẫu đăng ký:

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

Đối với việc đăng nhập:

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

Hỗ trợ trình quản lý mật khẩu

Các trình duyệt khác nhau xử lý phần nào tính năng tự động điền email và đề xuất mật khẩu khác nhau, nhưng hiệu quả thì rất giống nhau. Trên Safari 11 trở lên trên máy tính, ví dụ: trình quản lý mật khẩu sẽ xuất hiện, sau đó là hệ thống nhận dạng sinh trắc học xác thực (vân tay hoặc nhận dạng khuôn mặt) sẽ được sử dụng nếu có.

Chrome trên máy tính hiển thị các email đề xuất, trình quản lý mật khẩu và tự động điền mật khẩu.

Hệ thống tự động điền và mật khẩu trình duyệt không hề đơn giản. Các thuật toán cho đoán, lưu trữ và hiển thị các giá trị không được chuẩn hoá và thay đổi từ nền tảng này sang nền tảng khác. Ví dụ: như Hidde de đã chỉ ra Khác nhau: "Trình quản lý mật khẩu của Firefox bổ sung cho các suy đoán bằng hệ thống công thức".

Tự động điền: Những điều nhà phát triển web nên biết, nhưng không nên có nhiều thông tin hơn về cách sử dụng name và autocomplete. Thẻ HTML quy cách liệt kê tất cả 59 giá trị có thể có.

Cho phép trình duyệt đề xuất mật khẩu mạnh

Các trình duyệt hiện đại sử dụng phương pháp phỏng đoán để quyết định thời điểm hiển thị giao diện người dùng của trình quản lý mật khẩu và gợi ý một mật khẩu mạnh.

Sau đây là cách Safari thực hiện việc này trên máy tính.

(Tính năng đề xuất mật khẩu mạnh duy nhất đã có trong Safari kể từ phiên bản 12.0.)

Trình tạo mật khẩu cho trình duyệt tích hợp sẵn giúp người dùng và nhà phát triển không cần để tìm ra "mật khẩu mạnh" của chúng tôi. Vì trình duyệt có thể lưu trữ an toàn mật khẩu và tự động điền mật khẩu nếu cần, người dùng không cần phải nhớ hoặc nhập mật khẩu. Khuyến khích người dùng tận dụng trình duyệt tích hợp sẵn cũng có nghĩa là chúng thường sẽ sử dụng một trình tạo mật khẩu mạnh, duy nhất mật khẩu trên trang web của bạn và ít có khả năng sử dụng lại mật khẩu mà có thể bị xâm phạm ở nơi khác.

Giúp người dùng tránh trường hợp vô tình bỏ lỡ thông tin đầu vào

Thêm thuộc tính required vào cả trường email và mật khẩu. Các trình duyệt hiện đại tự động nhắc và đặt trọng tâm cho dữ liệu còn thiếu. Không cần JavaScript!

Thiết kế cho ngón tay và ngón cái

Kích thước trình duyệt mặc định cho mọi thứ liên quan đến phần tử đầu vào và các nút quá nhỏ, đặc biệt là trên thiết bị di động. Điều này có vẻ hiển nhiên, nhưng có thể sự cố thường gặp với biểu mẫu đăng nhập trên nhiều trang web.

Đảm bảo các nút và nút đầu vào đủ lớn

Kích thước và khoảng đệm mặc định cho các mục nhập và nút quá nhỏ trên máy tính và trên thiết bị di động.

Theo Trợ năng của Android hướng dẫn kích thước mục tiêu nên dùng cho các đối tượng trên màn hình cảm ứng là 7 – 10 mm. Giao diện Apple nguyên tắc đề xuất kích thước 48x48 px còn W3C đề xuất CSS có kích thước tối thiểu là 44x44 điểm ảnh. Tới đó thêm (ít nhất) khoảng 15 px khoảng đệm vào các thành phần đầu vào và nút để thiết bị di động và khoảng 10 px trên máy tính. Hãy thử tính năng này trên một thiết bị di động thực và ngón tay cái hoặc ngón cái thật. Bạn sẽ có thể thoải mái nhấn vào từng đầu vào và nút.

Mục tiêu nhấn có kích thước không phù hợp Quy trình kiểm tra Lighthouse có thể giúp bạn tự động hoá quy trình phát hiện các phần tử đầu vào quá nhỏ.

Thiết kế cho ngón cái

Tìm đích đến cảm ứng và bạn sẽ thấy nhiều hình ảnh ngón trỏ. Tuy nhiên, trong thế giới thực, rất nhiều người dùng sử dụng ngón cái để tương tác với điện thoại. Nút Thích lớn hơn ngón trỏ, và độ điều khiển kém chính xác hơn. Tất cả những lý do khác để bạn hiểu rõ đích chạm có kích cỡ.

Tạo văn bản đủ lớn

Tương tự như với kích thước và khoảng đệm, cỡ chữ mặc định của trình duyệt cho các phần tử đầu vào và các nút quá nhỏ, đặc biệt là trên thiết bị di động.

Các trình duyệt trên các nền tảng khác nhau có kích thước phông chữ khác nhau, nên khó có thể chỉ định một kích thước phông chữ cụ thể để sử dụng hiệu quả ở mọi nơi. Một bản khảo sát nhanh về các trang web phổ biến hiển thị kích thước từ 13–16 pixel trên máy tính: phù hợp với kích thước vật lý đó là mức tối thiểu tốt cho văn bản trên thiết bị di động.

Điều này có nghĩa là bạn cần sử dụng kích thước pixel lớn hơn trên thiết bị di động: 16px trên Chrome cho máy tính khá dễ đọc, nhưng ngay cả khi thị lực tốt thì vẫn khó đọc 16px trên Chrome dành cho Android. Bạn có thể đặt các kích thước pixel phông chữ khác nhau cho kích thước khung nhìn bằng cách sử dụng nội dung nghe nhìn . 20px sắp có trên thiết bị di động, nhưng bạn nên thử nghiệm này với bạn bè hoặc những đồng nghiệp có thị lực kém.

Tài liệu không dùng cỡ chữ dễ đọc Tính năng kiểm tra Lighthouse có thể giúp bạn tự động hoá quy trình phát hiện văn bản nhỏ.

Cung cấp đủ khoảng cách giữa các giá trị đầu vào

Thêm đủ lề để dữ liệu đầu vào hoạt động hiệu quả như đích chạm. Nói cách khác, nhắm đến cho chiều rộng khoảng bằng ngón tay.

Đảm bảo thông tin bạn nhập hiển thị rõ ràng

Kiểu đường viền mặc định cho nội dung đầu vào khiến chúng khó nhìn thấy được. Sắp hoàn tất không hiển thị trên một số nền tảng như Chrome dành cho Android.

Cũng như khoảng đệm, thêm đường viền: trên nền trắng, quy tắc chung là để sử dụng #ccc trở xuống.

Sử dụng các tính năng tích hợp sẵn của trình duyệt để cảnh báo về giá trị đầu vào không hợp lệ

Trình duyệt có các tính năng tích hợp để thực hiện xác thực biểu mẫu cơ bản cho thông tin đầu vào có Thuộc tính type. Trình duyệt cảnh báo khi bạn gửi biểu mẫu có giá trị không hợp lệ, và đặt trọng tâm vào đầu vào có vấn đề.

Bạn có thể sử dụng bộ chọn CSS :invalid để làm nổi bật dữ liệu không hợp lệ. Sử dụng :not(:placeholder-shown) để tránh chọn đầu vào không có nội dung.

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

Hãy thử nhiều cách để đánh dấu thông tin đầu vào có giá trị không hợp lệ.

Sử dụng JavaScript khi cần

Bật/tắt chế độ hiển thị mật khẩu

Bạn nên thêm nút bật/tắt Hiển thị mật khẩu để cho phép người dùng kiểm tra mà họ đã nhập. Khả năng hữu dụng gặp phải khi người dùng không thể xem nội dung họ vừa nhập. Hiện chưa có cách tích hợp sẵn nào để thực hiện điều này, mặc dù chúng tôi có kế hoạch cho triển khai. Bạn sẽ cần phải sử dụng JavaScript.

Mã sau đây sử dụng nút văn bản để thêm chức năng Hiện mật khẩu.

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>

Dưới đây là CSS để làm cho nút trông giống như văn bản thuần tuý:

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;
}

Và JavaScript để hiện mật khẩu:

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.');
  }
}

Sau đây là kết quả cuối cùng:

Cho phép người dùng nhập mật khẩu

Sử dụng aria-describedby để phác thảo các quy tắc mật khẩu bằng cách cung cấp cho nó mã nhận dạng của mô tả các quy tắc ràng buộc. Trình đọc màn hình cung cấp văn bản nhãn, loại dữ liệu đầu vào (mật khẩu) rồi đến mô tả.

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

Khi bạn thêm chức năng Hiển thị mật khẩu, hãy nhớ cung cấp aria-label để cảnh báo rằng mật khẩu sẽ hiển thị. Nếu không, người dùng có thể vô tình làm lộ mật khẩu.

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

Bạn có thể xem cả hai tính năng ARIA trong thực tế trong hình ảnh nhiễu sau đây:

Phần Tạo Biểu mẫu dễ tiếp cận có các mẹo khác giúp bạn dễ dàng truy cập vào biểu mẫu.

Xác thực theo thời gian thực trước khi gửi

Các thuộc tính và phần tử biểu mẫu HTML có tích hợp sẵn các tính năng xác thực cơ bản, nhưng bạn cũng nên sử dụng JavaScript để xác thực hiệu quả hơn trong khi người dùng nhập dữ liệu và thời điểm họ cố gắng gửi biểu mẫu.

Bước 5 trong biểu mẫu đăng nhập lớp học lập trình này sử dụng Xác thực ràng buộc API (tức là được hỗ trợ rộng rãi) để thêm xác thực tuỳ chỉnh bằng cách sử dụng giao diện người dùng trình duyệt tích hợp sẵn để đặt tiêu điểm và hiển thị lời nhắc.

Tìm hiểu thêm: Sử dụng JavaScript để tạo báo cáo theo thời gian thực phức tạp hơn xác thực.

Số liệu phân tích và phiên bản rum

"Những điều bạn không thể đo lường, bạn không thể cải thiện" đặc biệt đúng với hoạt động đăng ký và biểu mẫu đăng nhập. Bạn cần đặt mục tiêu, đo lường mức độ thành công, cải thiện trang web của mình và lặp lại.

Khả năng sử dụng ưu đãi giảm giá thử nghiệm có thể là hữu ích cho việc thử các thay đổi, nhưng bạn sẽ cần dữ liệu thực tế để tìm hiểu cách người dùng trải nghiệm biểu mẫu đăng ký và biểu mẫu đăng nhập:

• Phân tích trang: số lượt xem trang đăng ký và đăng nhập, tỷ lệ thoát, và thoát.
• Số liệu phân tích tương tác: mục tiêu kênh (trong đó người dùng bỏ ngang quy trình đăng nhập hoặc đăng nhập của bạn?) và sự kiện (người dùng thực hiện hành động nào khi tương tác với biểu mẫu của bạn?)
• Hiệu suất của trang web: lấy người dùng làm trung tâm các chỉ số (như lượt đăng ký và lượt đăng nhập) chậm vì lý do nào đó và nếu có thì nguyên nhân là gì?).

Bạn cũng có thể muốn cân nhắc việc triển khai thử nghiệm A/B để thử các phương pháp khác nhau để đăng ký và đăng nhập, cũng như phát hành theo giai đoạn để xác thực các thay đổi trên một nhóm nhỏ người dùng trước khi phát hành thay đổi cho tất cả người dùng.

Nguyên tắc chung

Giao diện người dùng và trải nghiệm người dùng được thiết kế hợp lý có thể giảm tỷ lệ bỏ qua biểu mẫu đăng nhập:

• Đừng bắt người dùng phải tìm cách đăng nhập! Đặt đường liên kết đến biểu mẫu đăng nhập ở trên cùng của trang, bằng cách sử dụng từ ngữ dễ hiểu như Đăng nhập, Tạo tài khoản hoặc Đăng ký.
• Đảm bảo tập trung! Biểu mẫu đăng ký không phải là nơi để mọi người bị sao lãng ưu đãi và các tính năng khác của trang web.
• Giảm thiểu tính phức tạp của quy trình đăng ký. Thu thập dữ liệu khác của người dùng (chẳng hạn như địa chỉ hoặc thẻ tín dụng) chỉ khi người dùng thấy rõ lợi ích từ việc cung cấp .
• Trước khi người dùng bắt đầu điền vào biểu mẫu đăng ký, hãy trình bày rõ giá trị tuyên bố là gì. Họ nhận được lợi ích gì khi đăng nhập? Giúp người dùng thấy được điều cụ thể phần thưởng để hoàn tất việc đăng ký.
• Nếu có thể, hãy cho phép người dùng nhận dạng bản thân bằng số điện thoại di động thay cho địa chỉ email, vì một số người dùng không thể sử dụng email.
• Giúp người dùng dễ dàng đặt lại mật khẩu của họ và tạo điều kiện để bạn quên mật khẩu đăng nhập .
• Đường liên kết đến các tài liệu về điều khoản dịch vụ và chính sách quyền riêng tư của bạn: hãy giải thích rõ cho người dùng ngay từ đầu về cách bạn bảo vệ dữ liệu của họ.
• Bao gồm biểu trưng và tên của công ty hoặc tổ chức bạn khi đăng ký và trang đăng nhập và đảm bảo rằng ngôn ngữ, phông chữ và kiểu khớp với phần còn lại của trang web của bạn. Một số biểu mẫu không giống như chúng thuộc về cùng một trang web như các biểu mẫu khác nội dung của bạn, đặc biệt nếu chúng có URL khác biệt đáng kể.

Không ngừng tìm hiểu

• Tạo các biểu mẫu tuyệt vời
• Các phương pháp hay nhất để thiết kế biểu mẫu trên thiết bị di động
• Kiểm soát biểu mẫu hiệu quả hơn
• Tạo biểu mẫu dễ tiếp cận
• Đơn giản hoá quy trình đăng nhập bằng API Quản lý thông tin xác thực
• Xác minh số điện thoại trên web bằng API WebOTP

Ảnh của Meghan Schiereck trên Unsplash.