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ễ tiếp cận và dễ sử dụng.

Sam Dutton

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

Sau đây là ví dụ về một biểu mẫu đăng nhập đơn giản minh hoạ 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 cho mỗi 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 các tính năng tích hợp sẵn của trình duyệt: type, name, autocomplete, required.
• Cung cấp các giá trị ổn định không thay đổi giữa các lần tải trang hoặc triển khai trang web cho các thuộc tính đầu vào name và id.
• Đặt tính năng đăng nhập trong phần tử <form> riêng.
• Đảm bảo gửi biểu mẫu thành công.
• Dùng autocomplete="new-password" và id="new-password" để nhập mật khẩu vào biểu mẫu đăng ký và cho 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 để nhập mật khẩu.
• Không sử dụng nhiều đầu vào.
• Thiết kế biểu mẫu để bàn phím di động không che khuất các mục nhập hoặc nút.
• Đảm bảo người dùng có thể sử dụng biểu mẫu trên thiết bị di động: sử dụng văn bản dễ đọc và đảm bảo các mục nhập và nút đủ lớn để hoạt động như mục tiêu 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.
• Kiểm thử trong thực tế cũng như trong phòng thí nghiệm: tích hợp số liệu phân tích trang, số liệu phân tích lượt tương tác và đo lường hiệu suất lấy người dùng làm trung tâm vào quy trình đăng ký và đăng nhập.
• Kiểm thử trên nhiều trình duyệt và thiết bị: hành vi của biểu mẫu thay đổi đá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>. Các thuộc tính này cho phép chức năng trình duyệt tích hợp, cải thiện khả năng hỗ trợ tiếp cận và thêm ý nghĩa vào thẻ đánh dấu.

Sử dụng <form>

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

Sử dụng <label>

Để gắn nhãn cho dữ liệu đầu vào, 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 dữ liệu đầu vào của nhãn đó. Liên kết nhãn với dữ liệu đầ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 dữ liệu đầu vào.
• Trình đọc màn hình sẽ thông báo văn bản nhãn khi nhãn hoặc nội dung đầu vào của nhãn được lấy tiêu điểm.

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

Tốt nhất là bạn nên đặt nhãn phía trên dữ liệu đầu vào. Điều này giúp mang lại thiết kế nhất quán trên thiết bị di động và máy tính. Theo nghiên cứu về AI của Google, người dùng có thể 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 đủ và 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 nhãn.

Hãy mở phần label-location (vị trí nhãn) trên thiết bị di động để tự 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 hỗ trợ tiếp cận và chức năng gửi biểu mẫu tích hợp sẵn, đồng thời bạn có thể dễ dàng tạo kiểu cho các phần tử này. Việc sử dụng <div> hoặc một số phần tử khác giả vờ là một nút thì không có ý nghĩa.

Đảm bảo rằng nút gửi cho biết chức năng của nút đó. Ví dụ: Tạo tài khoản hoặc Đăng nhập, chứ 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 trình quản lý mật khẩu hiểu rằng một biểu mẫu đã được gửi. Có hai cách để thực hiện 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 việc đă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 lấy biểu mẫu ra khỏi DOM cũng như cho người dùng biết là thành công.

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

Ngược lại, đừng tắt tính năng gửi biểu mẫu khi chờ người dùng nhập dữ liệu. Ví dụ: đừng tắt nút Đăng nhập nếu người dùng chưa nhập mã PIN của khách hàng. Người dùng có thể bỏ lỡ một mục nào đó trong biểu mẫu, sau đó thử nhấn nhiều lần vào nút Đăng nhập (đã tắt) 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, hãy giải thích cho người dùng những gì còn thiếu khi họ nhấp vào nút bị tắt.

Không nhập dữ liệu hai lần

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 cho một số người dùng, nhưng gây thêm công việc cho tất cả người dùng và tăng tỷ lệ bỏ ngang. Việc hỏi hai lần cũng không có ý nghĩa khi trình duyệt tự động điền địa chỉ email hoặc đề xuất mật khẩu mạnh. Bạn nên cho phép người dùng xác nhận địa chỉ email của họ (bạn vẫn cần phải làm việc đó) 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 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

Trường nhập mật khẩu 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 trường nhập này là dành cho mật khẩu. (Xin lưu ý rằng trình duyệt sử dụng nhiều kỹ thuật để hiểu vai trò của dữ liệu đầ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 mật khẩu để cho phép người dùng kiểm tra văn bản họ đã nhập. Đừng quên thêm đường liên kết Quên mật khẩu. Xem phần 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 một bàn phím phù hợp và bật tính năng xác thực địa chỉ email tích hợp cơ bản của trình duyệt… không yêu cầu JavaScript!

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" rất lý tưởng cho số PIN. Mọi điều bạn muốn biết về inputmode có thêm thông tin chi tiết.

Ngăn bàn phím trên thiết bị 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 trên thiết bị di động có thể che khuất biểu mẫu của bạn hoặc xấu hơn là che khuất một phần nút Đăng nhập. Người dùng có thể bỏ cuộc trước khi nhận ra điều gì đã xảy ra.

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

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

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

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/số đ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ỉ được giao một việc tại một thời điểm.

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

Giúp người dùng tránh 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 dữ liệu đầu vào, nhờ đó, người dùng không phải ghi nhớ để nhập giá trị email và mật khẩu. Điều này đặc biệt quan trọng trên thiết bị di động và rất quan trọng đối với các mục nhập email, vốn 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 vai trò của dữ liệu đầu vào để lưu trữ dữ liệu có thể được dùng để tự động điền sau này. Để 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 yêu cầu dữ liệu đầu vào có giá trị name hoặc id ổn định (không được tạo ngẫu nhiên trên mỗi lần tải trang hoặc triển khai trang web) và nằm trong <form> có nút submit.

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

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

Đối với dữ liệu nhập mật khẩu, hãy sử 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 trong biểu mẫu đăng ký hoặc mật khẩu mới trong 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 nhập mật khẩu cũ của người dùng trong biểu mẫu thay đổi mật khẩu. Thao tác này cho trình duyệt biết rằng bạn muốn trình duyệt sử dụng mật khẩu hiện tại mà trình duyệt đã lưu trữ cho trang web.

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

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

Để đă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ý tính năng tự động điền email và đề xuất mật khẩu có phần khác nhau, nhưng hiệu quả thì giống nhau. Ví dụ: Trên Safari 11 trở lên trên máy tính, trình quản lý mật khẩu sẽ xuất hiện, sau đó sử dụng phương thức xác thực sinh trắc học (vân tay hoặc nhận dạng khuôn mặt) nếu có.

Chrome trên máy tính hiển thị các đề xuất email, 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 của trình duyệt không đơn giản. Các thuật toán để đoán, lưu trữ và hiển thị giá trị không được chuẩn hoá và khác nhau giữa các nền tảng. Ví dụ: như Hidde de Vries đã chỉ ra: "Trình quản lý mật khẩu của Firefox bổ sung cho phương pháp phỏng đoán bằng một hệ thống công thức".

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

Bật 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à đề xuất mật khẩu mạnh.

Dưới đâ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 và duy nhất đã có trong Safari kể từ phiên bản 12.0.)

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

Giúp người dùng tránh vô tình bỏ lỡ dữ liệu đầ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 tiêu điểm cho dữ liệu bị 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 hầu hết mọi thứ liên quan đến các thành phần nhập và 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 đây là vấn đề phổ biến với biểu mẫu đăng nhập trên nhiều trang web.

Đảm bảo các mục nhập và nút đủ 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à thậm chí còn tệ hơn trên thiết bị di động.

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

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

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

Tìm kiếm touch target (mục tiêu chạm) và bạn sẽ thấy nhiều hình ảnh ngón trỏ. Tuy nhiên, trong thực tế, nhiều người dùng ngón tay cái để tương tác với điện thoại. Ngón cái lớn hơn ngón trỏ và khả năng điều khiển kém chính xác hơn. Toàn bộ lý do khiến đích chạm có kích thước phù hợp.

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

Cũng như kích thước và khoảng đệm, kích thước phông chữ mặc định của trình duyệt cho các thành phần nhập và 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, vì vậy, rất khó để chỉ định một kích thước phông chữ cụ thể hoạt động tốt ở mọi nơi. Một cuộc khảo sát nhanh về các trang web phổ biến cho thấy kích thước từ 13 đến 16 pixel trên máy tính: kích thước thực tế phù hợp với kích thước tối thiểu phù hợp 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 dành cho máy tính khá dễ đọc, nhưng ngay cả khi có thị lực tốt thì bạn vẫn khó đọc được văn bản 16px trên Chrome dành cho Android. Bạn có thể đặt nhiều kích thước pixel phông chữ cho các kích thước khung nhìn khác nhau bằng cách sử dụng truy vấn nội dung đa phương tiện. 20px hiện đã có trên thiết bị di động, nhưng bạn nên thử nghiệm tính năng này cho bạn bè hoặc đồng nghiệp có thị lực kém.

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

Cung cấp đủ khoảng trống giữa các mục nhập

Thêm đủ khoảng đệm để các mục nhập hoạt động tốt dưới dạng mục tiêu chạm. Nói cách khác, hãy nhắm đến chiều rộng của lề bằng ngón tay.

Đảm bảo dữ liệu đầu vào của bạn 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. Các nút này gần như 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, hãy thêm đường viền: trên nền trắng, quy tắc chung là sử dụng #ccc hoặc tối hơn.

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ề các giá trị nhập không hợp lệ

Trình duyệt có các tính năng tích hợp để xác thực biểu mẫu cơ bản cho dữ liệu đầu vào có thuộc tính type. Trình duyệt sẽ cảnh báo khi bạn gửi một biểu mẫu có giá trị không hợp lệ và đặt tiêu điểm vào dữ liệu đầ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 dữ liệu đầu vào không có nội dung.

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

Thử nhiều cách làm nổi bật dữ liệu đầ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 mật khẩu để cho phép người dùng kiểm tra văn bản họ đã nhập. Khả năng hữu dụng khi người dùng không thể xem văn bản họ đã nhập. Hiện tại, chưa có cách tích hợp sẵn nào để thực hiện việc này, mặc dù chúng tôi đã có kế hoạch triển khai. Thay vào đó, bạn sẽ cần sử dụng JavaScript.

Mã sau đây sử dụng nút văn bản để thêm chức năng Hiển thị 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à mã 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 thị 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 để nêu ra các quy tắc về mật khẩu bằng cách cung cấp mã nhận dạng của phần tử 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 nội dung 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 mật khẩu, hãy nhớ thêm aria-label để cảnh báo rằng mật khẩu sẽ xuất hiện. Nếu không, người dùng có thể vô tình tiết 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ể thấy cả hai tính năng ARIA đang hoạt động trong Glitch sau:

Bài viết Tạo biểu mẫu hỗ trợ tiếp cận có thêm các mẹo giúp tạo biểu mẫu hỗ trợ tiếp cận.

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

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

Bước 5 của lớp học lập trình về biểu mẫu đăng nhập sử dụng API Xác thực quy tắc ràng buộc (được hỗ trợ rộng rãi) để thêm tính năng 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 để đặt tiêu điểm và hiển thị lời nhắc.

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

Analytics và RUM

Câu nói "Chỉ khi đo lường được thì bạn mới có thể cải thiện được" đặc biệt đúng đối với biểu mẫu đăng ký và đă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 và lặp lại quy trình này.

Thử nghiệm giảm giá về khả năng hữu dụng có thể hữu ích khi thử nghiệm các thay đổi, nhưng bạn sẽ cần dữ liệu thực tế để thực sự hiểu được trải nghiệm của người dùng khi sử dụng biểu mẫu đăng ký và đăng nhập:

• Số liệu phân tích trang: số lượt xem trang đăng ký và đăng nhập, tỷ lệ thoát và số lượt thoát.
• Số liệu phân tích tương tác: phễu mục tiêu (nơi người dùng bỏ qua quy trình đăng nhập hoặc đăng nhập của bạn ở đâu?) 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 trang web: các chỉ số tập trung vào người dùng (biểu mẫu đăng ký và đăng nhập của bạn có chậm vì lý do nào đó không? Nếu có thì lý do là gì?).

Bạn cũng nên cân nhắc triển khai thử nghiệm A/B để thử nhiều phương pháp đăng ký và đăng nhập, cũng như triển khai 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 các 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ế tốt có thể giảm tỷ lệ bỏ ngang 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 ở đầu trang, sử dụng cách diễn đạt dễ hiểu như Đăng nhập, Tạo tài khoản hoặc Đăng ký.
• Hãy tập trung vào việc này! Biểu mẫu đăng ký không phải là nơi để mọi người bị phân tâm về các ưu đãi và các tính năng khác của trang web.
• Giảm thiểu độ phức tạp của quy trình đăng ký. Chỉ thu thập dữ liệu khác của người dùng (chẳng hạn như địa chỉ hoặc thông tin thẻ tín dụng) khi người dùng thấy được lợi ích rõ ràng từ việc cung cấp dữ liệu đó.
• Trước khi người dùng bắt đầu điền vào biểu mẫu đăng ký, hãy nêu rõ đề xuất giá trị. Họ sẽ được hưởng lợi gì khi đăng nhập? Đưa ra cho người dùng những động lực cụ thể để hoàn tất việc đăng ký.
• Nếu có thể, hãy cho phép người dùng xác định danh tính bằng số điện thoại di động thay vì địa chỉ email, vì một số người dùng có thể không sử dụng email.
• Giúp người dùng dễ dàng đặt lại mật khẩu và làm nổi bật đường liên kết Quên mật khẩu?.
• Đưa ra đường liên kết đến tài liệu về điều khoản dịch vụ và chính sách quyền riêng tư: ngay từ đầu, hãy cho người dùng biết rõ cách bạn bảo vệ dữ liệu của họ.
• Thêm biểu trưng và tên công ty hoặc tổ chức của bạn vào trang đăng ký và trang đăng nhập, đồng thời đảm bảo rằng ngôn ngữ, phông chữ và kiểu chữ khớp với phần còn lại của trang web. Một số biểu mẫu có vẻ như không thuộc cùng một trang web với nội dung khác, đặc biệt là khi có URL khác biệt đáng kể.

Tiếp tục học hỏi

• Tạo 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
• Các thành phần điều khiển biểu mẫu có nhiều chức năng 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.