Bật tính năng đăng nhập nhanh: Mẫu trải nghiệm người dùng ở chế độ giao diện người dùng tức thì

Eiji Kitamura

Xuất bản: Ngày 30 tháng 9 năm 2026

Tổng quan

Chế độ giao diện người dùng tức thì giải quyết tình trạng mất ngữ cảnh và người dùng bỏ ngang do chuyển đến một trang đăng nhập chuyên dụng. API này cho phép đăng nhập nhanh, giúp người dùng hoàn tất quá trình đăng nhập bằng khoá truy cập hoặc mật khẩu đã lưu ngay trên trang mà họ đang xem hoặc đang làm việc mà không cần rời khỏi bối cảnh của họ.

Không giống như Giao diện người dùng có điều kiện (hiển thị các đề xuất tự động điền khi người dùng tập trung vào một trường nhập dữ liệu), chế độ Giao diện người dùng tức thì sẽ gọi ngay hộp thoại xác thực của trình duyệt để phản hồi một lượt nhấp vào nút hoặc đường liên kết (Hiện tại, uiMode chỉ chấp nhận "immediate" nhưng có thể thay đổi trong tương lai).

Ba đặc điểm cốt lõi giúp chế độ Giao diện người dùng tức thì có hiệu quả đặc biệt đối với việc đăng nhập nhanh:

  • Bỏ qua mã QR trên nhiều thiết bị: Nếu có khoá truy cập hoặc mật khẩu đã lưu ngay lập tức trên thiết bị, trình duyệt sẽ hiển thị ngay hộp thoại xác thực. Nếu không có, ứng dụng sẽ thoát ngay lập tức mà không hiển thị màn hình mã QR trên nhiều thiết bị cho điện thoại thông minh. Điều này cho phép trang web của bạn chuyển đổi một cách tự nhiên sang chế độ điều hướng dự phòng thông thường (chẳng hạn như chuyển đến trang đăng nhập).
  • Giao diện người dùng chọn tài khoản trực quan: Thay vì liệt kê riêng các loại thông tin xác thực hỗn hợp, giao diện này sẽ ẩn những điểm khác biệt cơ bản giữa khoá truy cập và mật khẩu để trình bày một bộ chọn tài khoản trực quan tập trung vào tài khoản mà người dùng muốn đăng nhập.
  • Cải tiến tăng dần an toàn: Mặc dù chỉ được hỗ trợ trong trình duyệt Google Chrome và Chromium, nhưng việc sử dụng tính năng phát hiện cho phép bạn cung cấp tính năng đăng nhập nhanh cho người dùng trong các môi trường được hỗ trợ mà không làm gián đoạn quy trình đăng nhập hiện có cho người dùng trên các trình duyệt không được hỗ trợ (chẳng hạn như Safari hoặc Firefox) hoặc ở Chế độ ẩn danh.

Để biết thông tin chi tiết về cách API hoạt động và cách triển khai tính năng phát hiện, hãy tham khảo bài viết Chế độ giao diện người dùng tức thì để đăng nhập. Trong tài liệu này, chúng ta sẽ khám phá các mẫu trải nghiệm người dùng được đề xuất giúp tăng lượt chuyển đổi bằng chế độ Giao diện người dùng ngay lập tức, cùng với các mẫu thiết kế cần tránh.

Vị trí hiệu quả nhất để sử dụng chế độ Giao diện người dùng tức thì là chặn ngay trước khi điều hướng trang. Bất cứ khi nào người dùng chưa xác thực (hoặc phiên đã hết hạn) nhấp vào một đường liên kết hoặc nút hành động mà thông thường sẽ chuyển họ đến một trang đăng nhập, việc gọi chế độ Giao diện người dùng tức thì tại thời điểm đó sẽ tạo ra một trải nghiệm người dùng liền mạch, không bao giờ làm gián đoạn quy trình làm việc của họ.

Hầu hết các trang web đều đặt đường liên kết "Đăng nhập" trong tiêu đề chung ở đầu màn hình để chuyển đến trang đăng nhập chuyên dụng. Khi người dùng nhấp vào đường liên kết này trên trang mà họ đang duyệt xem, việc tạm dừng thao tác điều hướng và gọi chế độ Giao diện người dùng tức thì sẽ cho phép trình duyệt trình bày hộp thoại lựa chọn tài khoản ngay trên trang hiện tại nếu có thông tin đăng nhập trên thiết bị.

Sau khi người dùng chọn tài khoản và hoàn tất quy trình xác thực, tiêu đề sẽ cập nhật sang trạng thái đã đăng nhập mà không cần điều hướng trang, cho phép họ tiếp tục duyệt web mà không cần rời khỏi trang mà họ đang xem. Ngược lại, nếu không có thông tin đăng nhập trên thiết bị, thì sẽ không có giao diện người dùng trình duyệt nào xuất hiện và người dùng sẽ chuyển đến trang đăng nhập một cách suôn sẻ như dự định ban đầu.

Đăng nhập linh động ở bước thanh toán (thương mại điện tử)

Trên các trang web thương mại điện tử, việc chuyển đổi từ giỏ hàng sang quy trình thanh toán là một trong những điểm phổ biến nhất khiến người dùng bỏ dở giỏ hàng do gặp trở ngại khi điều hướng trang. Bằng cách gọi chế độ Giao diện người dùng tức thì ngay khi người mua sắm chưa xác thực nhấp vào nút Chuyển đến trang thanh toán trên màn hình giỏ hàng, một hộp thoại chọn tài khoản sẽ xuất hiện ngay tại vị trí người dùng nhấp vào nút, hoàn tất quá trình xác thực chỉ bằng một lần nhấn.

Khi xác thực thành công, người mua sắm sẽ hoàn toàn bỏ qua trang đăng nhập và chuyển thẳng đến màn hình xác nhận cuối cùng về thông tin vận chuyển và thanh toán (trang Thanh toán), giúp giảm đáng kể số bước cần thiết để hoàn tất giao dịch mua. Nếu không có thông tin đăng nhập, người mua sắm sẽ chuyển sang màn hình lựa chọn đăng nhập thông thường hoặc thanh toán với tư cách khách. Bạn có thể thiết kế trang web để cho phép khách thanh toán hoặc yêu cầu đăng nhập theo yêu cầu của doanh nghiệp. Chế độ giao diện người dùng tức thì giúp loại bỏ các rào cản trong quy trình thanh toán đối với khách hàng cũ.

Đăng nhập cùng dòng cho các thao tác nhỏ (Thích, đánh dấu trang, lưu)

Khi khách truy cập duyệt xem các nguồn cấp dữ liệu trên mạng xã hội, trang web cộng đồng hoặc danh mục sản phẩm thương mại điện tử, việc buộc chuyển hướng toàn bộ trang đến trang đăng nhập mỗi khi họ cố gắng "Thích" một bài đăng hoặc "Đánh dấu" một mặt hàng có thể khiến một số người dùng bỏ dở hành động.

Khi khách truy cập chưa đăng nhập nhấp vào một nút hành động như Thích, Đánh dấu hoặc Lưu, việc trình bày hộp thoại ở chế độ Giao diện người dùng tức thì ngay tại chỗ sẽ cho phép hoàn tất quy trình xác minh danh tính và kích hoạt ngay bản ghi hành động cũng như ảnh động trên giao diện người dùng (chẳng hạn như biểu tượng trái tim chuyển sang màu đỏ). Vị trí cuộn không di chuyển theo một điểm ảnh duy nhất, hoàn toàn giữ nguyên trải nghiệm duyệt web sống động. Nếu không có thông tin đăng nhập, thay vì chuyển hướng ngay lập tức, bạn có thể hiển thị một phương thức đăng nhập nội tuyến đơn giản trên màn hình hiện tại hoặc hướng dẫn người dùng đến trang đăng nhập theo cách đưa họ trở lại vị trí ban đầu sau khi đăng nhập.

Xác thực lại từng bước cho các thao tác nhạy cảm

Ngay cả khi người dùng đã đăng nhập, các phương pháp hay nhất về bảo mật vẫn yêu cầu xác thực lại từng bước khi thực hiện các thao tác nhạy cảm (chẳng hạn như thay đổi mật khẩu, cập nhật địa chỉ giao hàng, chỉnh sửa phương thức thanh toán đã lưu hoặc thêm khoá truy cập mới) sau một khoảng thời gian nhất định kể từ lần xác thực gần đây nhất. Việc gọi chế độ Giao diện người dùng tức thì khi người dùng nhấp vào một đường liên kết hoặc nút dẫn đến một chế độ cài đặt nhạy cảm trên trang tổng quan Tài khoản của tôi sẽ hoàn tất quy trình xác minh danh tính ngay trên trang tổng quan mà không cần rời khỏi trang. Điều này cho phép người dùng chuyển trực tiếp đến trang chỉnh sửa chế độ cài đặt mục tiêu (hoặc thực hiện ngay thao tác nhạy cảm) mà không cần phải thông qua màn hình đăng nhập lại trung gian. Nếu không có thông tin đăng nhập, hãy chuyển người dùng đến màn hình xác thực lại tiêu chuẩn (chẳng hạn như màn hình nhập lại mật khẩu hoặc màn hình xác minh mật khẩu một lần).

Mặc dù tính năng đăng nhập nhanh tiêu chuẩn từ trạng thái chưa xác thực không chỉ định thông tin đăng nhập mục tiêu, nhưng bạn phải chỉ định thông tin đăng nhập mục tiêu cho trường hợp sử dụng xác thực lại này. Đặt allowCredentials trong yêu cầu để chỉ những thông tin đăng nhập thuộc về người dùng đã đăng nhập mới được trình bày.

Mở khoá tường phí trên trang web của nhà xuất bản

Các nền tảng nội dung và truyền thông tin tức áp dụng rộng rãi một mô hình trong đó các đoạn mở đầu của một bài viết có thể truy cập miễn phí, trong khi tường phí mềm hoặc hiệu ứng làm mờ chỉ dành cho thành viên xuất hiện ở giữa khi độc giả cuộn.

Khi người đọc cuộn xuống một bài viết, chạm đến tường phí và nhấp vào nút Tiếp tục đọc bằng tài khoản của bạn, việc gọi chế độ Giao diện người dùng tức thì sẽ hiển thị hộp thoại xác thực ngay trên vị trí cuộn chính xác mà người đọc đã tạm dừng. Ngay khi quá trình xác thực hoàn tất, hiệu ứng làm mờ bài viết sẽ biến mất mà không cần tải lại trang, cho phép người đọc tiếp tục đọc mà không bị mất dòng văn bản họ đang xem. Nếu không có thông tin đăng nhập, hãy mở rộng biểu mẫu đăng ký hoặc đăng nhập nội tuyến trong phần tường phí.

Các mẫu hành vi cần tránh

Mặc dù chế độ Giao diện người dùng tức thì mang lại giá trị to lớn khi được dùng trước thao tác điều hướng trang, nhưng việc đặt chế độ này ở vị trí không phù hợp sẽ gây hại cho trải nghiệm đăng nhập của người dùng.

Tránh chế độ Giao diện người dùng ngay lập tức trên các nút đăng nhập trên các trang đăng nhập chuyên dụng

Vì chế độ Giao diện người dùng tức thì xử lý cả khoá truy cập và mật khẩu trong một hộp thoại duy nhất, nên bạn có thể muốn sử dụng chế độ này trên nút "Đăng nhập" được đặt trên trang đăng nhập chuyên dụng. Tuy nhiên, bạn nên tránh sử dụng thuộc tính này ở đây. Trước tiên, chế độ Giao diện người dùng tức thì yêu cầu nghiêm ngặt người dùng kích hoạt (chẳng hạn như nhấp hoặc nhấn), điều này gây khó chịu trên trang đăng nhập khi người dùng có thể mong đợi các phương thức đăng nhập có sẵn ngay khi thời gian tải trang. Thứ hai, trang đăng nhập là đích đến cuối cùng mà người dùng truy cập khi họ không có thông tin đăng nhập cục bộ trên thiết bị của mình, hoặc khi người dùng muốn đăng nhập bằng khoá truy cập trên thiết bị di động (xác thực trên nhiều thiết bị) hoặc khoá bảo mật vật lý bằng cách nhấp vào "Đăng nhập bằng khoá truy cập". Nếu bạn sử dụng chế độ Giao diện người dùng tức thì tại đây, trình duyệt sẽ chặn mã QR trên nhiều thiết bị và các phương án dự phòng cho khoá bảo mật, đồng thời chấm dứt ngay khi không tìm thấy thông tin đăng nhập cục bộ trên thiết bị – khiến người dùng bị mắc kẹt trong một ngõ cụt, nơi việc nhấp vào nút không có tác dụng gì trên trang không có đích đến nào khác.

Trên trang đăng nhập mà mọi phương thức xác thực đều phải hoạt động một cách đáng tin cậy, cách hay nhất là định cấu hình Giao diện người dùng có điều kiện (tích hợp tính năng tự động điền) trên các trường nhập để đảm bảo sự thuận tiện cho khoá truy cập cục bộ, đồng thời ghép nối các nút "Đăng nhập bằng khoá truy cập" rõ ràng với các phương thức gọi tiêu chuẩn hiển thị một cách đáng tin cậy mã QR trên nhiều thiết bị và các lựa chọn về khoá bảo mật.

Kết luận

Chế độ giao diện người dùng tức thì là một công cụ mạnh mẽ giúp loại bỏ những đường vòng không cần thiết đến các trang đăng nhập và đạt được tốc độ đăng nhập nhanh chóng, hoàn tất quá trình đăng nhập trong khi vẫn giữ nguyên bối cảnh. Bằng cách chặn các thời điểm người dùng có ý định rõ ràng (chẳng hạn như đường liên kết đăng nhập ở tiêu đề, nút thanh toán, hành động vi mô, xác thực lại từng bước cho các thao tác nhạy cảm (có allowCredentials được chỉ định) và tường phí bài viết) ngay trước khi điều hướng trang diễn ra, bạn có thể ngăn chặn tình trạng bỏ dở và mang lại trải nghiệm liền mạch cho người dùng.

Đồng thời, hãy nhớ rằng chế độ Giao diện người dùng tức thì chỉ là một tính năng nâng cao tăng dần trước khi điều hướng trang; tránh áp dụng chế độ này cho các nút trên trang đăng nhập đích cuối cùng để thiết kế của bạn vẫn mở và người dùng trên nhiều thiết bị (mã QR) có thể truy cập.

Để biết thêm thông tin chi tiết về cách triển khai khoá truy cập và các tính năng mới nhất của Web Identity, hãy khám phá các tài nguyên sau: