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 để xây dựng các biểu mẫu đăng nhập an toàn, dễ truy cập và dễ sử dụng.

Nếu người dùng cần đăng nhập vào trang web của bạn, thì bạn cần thiết kế biểu mẫu đăng nhập hợp lệ. Đ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, lúc vội vàng hoặc bị căng thẳng. Biểu mẫu đăng nhập được thiết kế kém thường có tỷ lệ thoát cao. Mỗi lần thoát có thể đồng nghĩa với việc một người dùng bị mất phương tiện và không hài lòng chứ không chỉ là 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 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 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 giá trị ổn định cho thuộc tính name và id đầu vào và không thay đổi giữa các lần tải trang hoặc khi triển khai trang web.
• Đặt tính năng đăng nhập trong phần tử <form> riêng.
• Đảm bảo khách hàng gửi biểu mẫu thành công.
• Sử dụng autocomplete="new-password" và id="new-password" để nhập mật khẩu trong 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 thị mật khẩu.
• Sử dụng aria-label và aria-describedby cho các mục nhập mật khẩu.
• Đừng nhập hai thông tin.
• Thiết kế các biểu mẫu sao cho bàn phím trên thiết bị di động không che khuất đầu vào hoặc nút.
• Đảm bảo dùng được biểu mẫu trên thiết bị di động: sử dụng văn bản dễ đọc, đồng thời đảm bảo dữ liệu nhập và nút đủ 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.
• Kiểm thử tại thực địa cũng như phòng thí nghiệm: tích hợp số liệu phân tích trang, số liệu phân tích tương tác và giải pháp đo lường hiệu suất tập trung vào người dùng vào quy trình đăng ký và đăng nhập.
• Kiểm thử trên các 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>. Những trình duyệt này kích hoạt chức năng tích hợp sẵn của trình duyệt, cải thiện khả năng tiếp cận và bổ sung ý nghĩa cho mã đánh dấu của bạn.

Sử dụng <form>

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

Sử dụng <label>

Để gắn nhãn cho một dữ liệu đầu vào, hãy dùng <label>!

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

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 nhãn được nhập. Liên kết một nhãn với một 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 nhập 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 gì sau khi nhập văn bản, đặc biệt là khi 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ó nhiều vấn đề tiềm ẩn khác với phần giữ chỗ: hãy xem phần Đừng sử dụng thuộc tính phần giữ chỗ và Phần giữ chỗ trong các trường biểu mẫu có hại nếu bạn không tin.

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 thiết kế thống nhất trên cả thiết bị di động và máy tính, đồng thời theo nghiên cứu về AI của Google, người dùng có thể quét nhanh hơn. Bạn có nhãn và thông tin đầu vào có chiều rộng đầy đủ và không cần điều chỉnh nhãn và chiều rộng dữ liệu đầu vào để vừa với văn bản của nhãn.

Hãy mở Nhiễu label-position 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 dễ tiếp cận và chức năng gửi biểu mẫu tích hợp sẵn, đồng thời có thể dễ dàng tạo kiểu. Chẳng có lý do gì khi sử dụng <div> hoặc một số phần tử khác giả vờ là một nút.

Đảm bảo rằng nút gửi cho biết chức năng của tính năng này. 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 người quản lý mật khẩu hiểu rằng biểu mẫu đã được gửi. Có hai cách để thực hiện điều đó:

• Chuyển đến một trang khác.
• Mô phỏng hoạt động đ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 việc đăng nhập thành công được báo cáo trong phản hồi và xử lý bằng cách lấy biểu mẫu ra khỏi DOM cũng như cho biết người dùng đã đăng nhập thành công.

Hãy 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 nút nhiều lần ngay cả trên những trang web có tốc độ nhanh và thích ứng. Điều này làm chậm khả năng tương tác và làm tăng thêm mức 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ụ: đừ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ỡ nội dung nào đó trong biểu mẫu, sau đó thử liên tục nhấn vào nút Đăng nhập (đã tắt) và cho rằng nút đó 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 về nội dung bị thiếu khi họ nhấp vào nút bị tắt.

Không nhân đôi giá trị nhập

Một số trang web buộc người dùng phải nhập email hoặc mật khẩu 2 lần. Điều đó có thể làm giảm lỗi cho một số người dùng, nhưng làm tốn thêm công sức cho tất cả người dùng và làm tăng tỷ lệ bỏ qua. 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. Tốt hơn là cho phép người dùng xác nhận địa chỉ email của họ (vẫn phải làm điều đó) 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 của 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ó tích hợp sẵn nhiều tính năng hữu ích sử dụng các thuộc tính phần tử đầu vào.

Giữ mật khẩu ở chế độ riêng tư nhưng cho phép người dùng xem mật khẩu nếu họ muốn

Mục 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 mục nhập đó 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 để hiểu vai trò đầu vào và quyết định có nên đề 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 văn bản họ đã nhập và đừ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 bàn phím phù hợp cho người dùng thiết bị di động

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 cơ bản tích hợp sẵn của trình duyệt... mà không cần 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 nếu cần: inputmode="numeric" là lựa chọn lý tưởng cho số mã PIN. Mọi thứ bạn muốn biết về chế độ nhập sẽ có thêm thông tin chi tiết.

Ngăn bàn phím di động cản trở nút Đăng nhập

Rất tiếc, nếu bạn không cẩn thận, bàn phím thiết bị di động có thể che mất biểu mẫu hoặc tệ 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 điều này bằng cách chỉ hiển thị các mục nhập email/điện thoại và mật khẩu và 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 thiết bị

Bạn sẽ cần thử nghiệm trên nhiều 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 cho phép kiểm thử miễn phí 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 được 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 giúp đơn giản hoá trải nghiệm: người dùng chỉ được thực hiện một thao tá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>. Sử dụng JavaScript để ban đầu chỉ hiển thị nội dung nhập của email, sau đó ẩn nội dung đó 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 sau khi nhập địa chỉ email và mật khẩu, thì biểu mẫu trên trang thứ hai nên có một thành phần nhập ẩn kèm theo giá trị email, để giú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 để người dùng không phải 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 dữ liệu nhập email có tỷ lệ bỏ ngang cao.

Có hai phần trong quy trình này:

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 có thể dùng để tự động điền sau này. Nhằm cho phép lưu trữ dữ liệu nhằm 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 trong mỗi lần tải trang hoặc triển khai trang web) và ở dạng <form> có nút submit.

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

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

Đối với việc 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 tại

• 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 dữ liệu nhập cho mật khẩu cũ của người dùng trong biểu mẫu thay đổi mật khẩu. URL 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 đã lưu trữ cho trang web.

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

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

Dành cho bướ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ý tính năng tự động điền email và đề xuất mật khẩu theo cách 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ẽ hiển thị, sau đó hệ thống sẽ 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 cho thấy 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 của trình duyệt không đơn giản. Các thuật toán cho việc đoán, lưu trữ và hiển thị giá trị không được chuẩn hoá và khác nhau tuỳ theo 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".

Tự động điền: Những điều các nhà phát triển web nên biết, nhưng không có nhiều thông tin hơn về cách sử dụng name và autocomplete. Thông số kỹ thuật HTML 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 thông tin 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 mật khẩu mạnh.

Dưới đây là cách Safari thực hiện trên máy tính để bàn.

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

Trình tạo mật khẩu tích hợp 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 ra "mật khẩu mạnh". Vì các 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 thiết, nên người dùng không cần phải ghi nhớ hay nhập mật khẩu. Việc khuyến khích người dùng tận dụng các trình tạo mật khẩu tích hợp trong trình duyệt cũng đồng nghĩa với việc họ có nhiều khả năng sẽ sử dụng mật khẩu mạnh, duy nhất trên trang web của bạn và giảm khả năng sử dụng lại mật khẩu 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ị thiếu 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 sẽ tự động nhắc và đặt tiêu điểm cho những 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 nút và phần tử đầu vào là 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 xảy ra với các biểu mẫu đăng nhập trên nhiều trang web.

Đảm bảo các nút nhập và nút đủ lớn

Kích thước và khoảng đệm mặc định cho dữ liệu đầu vào 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 hỗ trợ tiếp cận của Android, kích thước mục tiêu đề xuất cho đối tượng màn hình cảm ứng là 7–10 mm. Nguyên tắc giao diện của Apple đề xuất 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 phần tử và nút cho 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 bằng một thiết bị di động thực và ngón tay hoặc ngón cái thực. Bạn có thể nhấn vào từng phương thức nhập và nút một cách thoải mái.

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

Thiết kế cho hình thu nhỏ

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

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

Tương tự như với 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 phần tử đầu vào 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 khó có thể chỉ định một cỡ chữ cụ thể hoạt động tốt ở mọi nơi. Một 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: phù hợp với kích thước thực tế đó là điều kiện 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 cho máy tính khá dễ đọc, nhưng ngay cả khi có thị lực tốt thì rất khó để đọc văn bản 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 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 có chức năng phù hợp trên thiết bị di động, nhưng bạn nên thử nghiệm tính năng này với bạn bè hoặc đồng nghiệp có thị lực kém.

Tài liệu không sử dụng kích thước phông chữ dễ đọc Kiểm tra Lighthouse có thể giúp bạn tự động hóa quá trình phát hiện văn bản quá nhỏ.

Cung cấp đủ không gian giữa các đầu vào

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

Hãy đảm bảo dữ liệu nhập của bạn hiển thị rõ ràng

Kiểu đường viền mặc định cho dữ liệu đầu vào khiến chúng khó nhìn thấy. Thông báo gần như ẩn trên một số nền tảng, chẳng hạn 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, nguyên 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ệ

Các trình duyệt có các tính năng tích hợp sẵn để xác thực biểu mẫu cơ bản cho dữ liệu đầu vào có thuộc tính type. Các 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ập trung vào thông tin đầu vào có vấn đề.

Bạn có thể 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ử các 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 thiết

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

Bạn nên thêm nút bật/tắt Show password (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 để thực hiện việc này, mặc dù đã có kế hoạch triển khai. Thay vào đó, bạn cần sử dụng JavaScript.

Mã sau 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à 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:

Giúp mọi người dễ 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 cấp cho mã này 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) và 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 Show password (Hiển thị mật khẩu), hãy nhớ bao gồm 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 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 của Ứng dụng Internet phong phú dễ dùng (ARIA) hoạt động trong Video trục trặc sau đây:

Tạo biểu mẫu có thể truy cập có nhiều mẹo khác để giúp mọi người dễ dàng tiếp cận các biểu mẫu.

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

Các thuộc tính và phần tử biểu mẫu HTML đã tích hợp sẵn các tính năng để xác thực cơ bản. Tuy nhiên, 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 đang 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 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 giao diện người dùng trình duyệt tích hợp sẵn nhằm đặ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.

Số liệu phân tích và Mức độ phổ biến của quảng cáo ( đều)

"Những gì bạn không thể đo lường, bạn không thể cải thiện" đặc biệt đúng đối với các 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 điều đó.

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

• Phân tích trang: số lượt xem trang đăng ký và đăng nhập, tỷ lệ thoát và số lần thoát.
• Phân tích lượt tương tác: phễu mục tiêu (người dùng bỏ ngang quy trình đăng nhập hoặc đăng nhập ở đâu?) và sự kiện (người dùng thực hiện những 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ì một lý do nào đó không và nếu có thì nguyên nhân 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ư 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ình trạng 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 một đường liên kết đến biểu mẫu đăng nhập ở đầu trang, bằng cách 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 ghi nhớ trọng tâm! Biểu mẫu đăng ký không phải là nơi để mọi người phân tán bằng các ưu đãi và tính năng khác của trang web.
• Giảm thiểu độ phức tạp trong 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 việc cung cấp dữ liệu đó mang lại lợi ích rõ ràng.
• Trước khi người dùng bắt đầu điền thông tin vào biểu mẫu đăng ký, hãy làm rõ những tuyên bố giá trị. Họ sẽ nhận được lợi ích gì từ việc đăng nhập? Khuyến khích người dùng hoàn tất bước đăng ký.
• Nếu có thể, hãy cho phép người dùng tự xác đị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à hiển thị rõ ràng đường liên kết Quên mật khẩu?.
• Đườ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ư của bạn: giúp người dùng hiểu rõ ngay cách bạn bảo vệ dữ liệu của họ.
• Đưa biểu trưng và tên của 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 khớp với phần còn lại của trang web. Một số biểu mẫu không mang lại cảm giác thuộc cùng một trang web với nội dung khác, đặc biệt nếu chúng có URL khác biệt đáng kể.

Tiếp tục 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
• Nhiều tuỳ chọn kiểm soát biểu mẫu hơn
• Tạo biểu mẫu hỗ trợ tiếp cận
• Tinh giản 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.