Trải nghiệm người dùng của nút Đăng nhập bằng Google

Trang này mô tả trải nghiệm người dùng (UX) của nút Đăng nhập bằng Google.

Kết xuất nút

Một nút được cá nhân hoá sẽ hiển thị thông tin hồ sơ cho phiên Google đầu tiên duyệt xem trang web của bạn. Một phiên Google được phê duyệt có một tài khoản tương ứng trên trang web của bạn, tài khoản này đã đăng nhập bằng tính năng Đăng nhập bằng Google trước đây.

Nếu nút được cá nhân hoá xuất hiện, người dùng sẽ biết những thông tin sau:

  • Có ít nhất một phiên Google đang hoạt động.
  • Có một tài khoản tương ứng trên trang web của bạn.

Nút được cá nhân hoá cho người dùng biết nhanh trạng thái phiên, cả ở phía Google và trên trang web của bạn, trước khi họ nhấp vào nút đó. Điều này đặc biệt hữu ích cho người dùng cuối chỉ thỉnh thoảng truy cập vào trang web của bạn. Họ có thể quên việc đã tạo tài khoản hay chưa và bằng cách nào. Một nút được cá nhân hoá sẽ nhắc họ rằng họ đã từng sử dụng tính năng Đăng nhập bằng Google. Do đó, việc này giúp ngăn chặn việc tạo tài khoản trùng lặp không cần thiết trên trang web của bạn.

Để cho biết trạng thái phiên, nút được cá nhân hoá sẽ hiển thị theo các cách sau:

  • Một phiên: Chỉ có một phiên ở phía Google. Phiên đó sẽ phê duyệt ứng dụng và có một tài khoản tương ứng trên trang web của bạn.

    Nút được cá nhân hoá hiển thị tên của một Tài khoản Google.

  • Nhiều phiên: Có nhiều phiên hoạt động ở phía Google. Các phiên đó sẽ phê duyệt ứng dụng. Việc phê duyệt được biểu thị bằng mũi tên danh sách bên cạnh tài khoản hiển thị. Ít nhất một phiên có tài khoản tương ứng trên trang web của bạn.

    Một nút được cá nhân hoá có mũi tên danh sách.

  • Không có phiên: Không có phiên nào ở phía Google hoặc chưa có phiên nào phê duyệt ứng dụng.

    Nút có nội dung "Đăng nhập bằng Google" mà không có thông tin được cá nhân hoá.

Nút được cá nhân hoá sẽ tự động hiển thị khi trạng thái phiên phù hợp, trừ phi chế độ cài đặt nút không cho phép hiển thị nút được cá nhân hoá. Nút được cá nhân hoá sẽ không xuất hiện nếu:

  • Thuộc tính data-typeicon.
  • Thuộc tính data-size được đặt thành medium hoặc small.
  • Thuộc tính data-width được đặt thành một số nhỏ hơn 200px.

Tên hoặc địa chỉ email sẽ được viết theo dạng elip khi quá dài để hiển thị bên trong nút.

Một nút được cá nhân hoá có tên và email được viết theo dạng dấu ba chấm.

Hành trình chính của người dùng

Hành trình của người dùng sẽ khác nhau tuỳ theo các trạng thái sau.

  • Trạng thái phiên trên các trang web của Google. Các thuật ngữ sau đây được dùng để cho biết các trạng thái phiên trên Google khi hành trình của người dùng bắt đầu.

    • Has-Google-session: Có ít nhất một phiên hoạt động trên các trang web của Google.
    • No-Google-session: Không có phiên hoạt động nào trên các trang web của Google.
  • Liệu Tài khoản Google đã chọn có phê duyệt trang web của bạn khi hành trình của người dùng bắt đầu hay không. Các thuật ngữ sau đây được dùng để cho biết trạng thái phê duyệt.

    • Người dùng mới: Tài khoản đã chọn chưa phê duyệt trang web của bạn.
    • Người dùng cũ: Tài khoản bạn chọn đã phê duyệt trang web của bạn trước đây.

Hành trình của người dùng mới có phiên trên Google

  1. Nút Đăng nhập bằng Google.

    Nút có nội dung "Đăng nhập bằng Google" mà không có thông tin được cá nhân hoá.

  2. Trang bộ chọn tài khoản.

    Trang Trình chọn tài khoản có phiên đầu tiên.

  3. Trang mới về sự đồng ý của người dùng.

    Đồng ý và đăng nhập bằng nút Đăng nhập bằng Google.

  4. Sau khi người dùng xác nhận, mã thông báo nhận dạng sẽ được chia sẻ với trang web của bạn.

Người dùng có thể thêm một phiên Google mới bằng cách nhấp vào nút Sử dụng một tài khoản khác, hãy tham khảo hành trình của người dùng Không có phiên Google ở bên dưới.

Hành trình của người dùng cũ có phiên trên Google

  1. Nút Đăng nhập bằng Google.

    Nút được cá nhân hoá hiển thị tên của một Tài khoản Google.

  2. Trang bộ chọn tài khoản.

    Trình chọn Tài khoản Google

  3. Sau khi người dùng chọn một tài khoản cũ, mã thông báo nhận dạng sẽ được chia sẻ với trang web của bạn.

Người dùng có thể thêm một phiên Google mới bằng cách nhấp vào nút Sử dụng một tài khoản khác, hãy tham khảo hành trình của người dùng "Không có phiên Google" ở bên dưới.

Hành trình của người dùng mới không có phiên trên Google

  1. Nút Đăng nhập bằng Google.

    Nút có nội dung "Đăng nhập bằng Google" mà không có thông tin được cá nhân hoá.

  2. Trang đầu tiên để thêm phiên Google mới.

    Email Tài khoản Google

  3. Trang thứ hai để thêm một phiên Google mới.

    Đăng nhập bằng Tài khoản Google

  4. Trang mới về sự đồng ý của người dùng.

    Đồng ý và đăng nhập bằng nút Đăng nhập bằng Google.

  5. Sau khi người dùng xác nhận, mã thông báo nhận dạng sẽ được chia sẻ với trang web của bạn.

Hành trình của người dùng cũ không có phiên trên Google

  1. Nút Đăng nhập bằng Google.

    Nút có nội dung "Đăng nhập bằng Google" mà không có thông tin được cá nhân hoá.

  2. Trang đầu tiên để thêm phiên Google mới.

    Email Tài khoản Google

  3. Trang thứ hai để thêm một phiên Google mới.

    Đăng nhập bằng Tài khoản Google

  4. Sau khi người dùng nhấp vào nút Tiếp theo, mã thông báo nhận dạng sẽ được chia sẻ với trang web của bạn.

Các hành trình chính chung của người dùng trong phần trước vẫn áp dụng. Nội dung sau đây cho thấy quy trình bổ sung sẽ được trình bày cho Tài khoản Google của trẻ khi đăng nhập.

Không có phiên trên Google

  1. Nút Đăng nhập bằng Google.

    Nút có nội dung "Đăng nhập bằng Google" mà không có thông tin được cá nhân hoá.

  2. Trang đầu tiên để thêm phiên Google mới của trẻ (email Tài khoản Google của trẻ).

    Email của Tài khoản Google của trẻ

  3. Trang thứ hai để thêm phiên Google mới của trẻ (mật khẩu Tài khoản Google của trẻ).

    Mật khẩu Tài khoản Google của trẻ

  4. Trang đầu tiên để yêu cầu tài khoản mẹ phê duyệt việc thêm phiên Google con mới.

    Trang chọn sự phê duyệt của cha mẹ

  5. Trang thứ hai để cha mẹ phê duyệt việc thêm phiên Google mới cho trẻ.

    Trang mật khẩu phê duyệt của cha mẹ

  6. Trang thứ ba để xin cha mẹ phê duyệt việc thêm phiên Google mới cho trẻ.

    Trang phê duyệt của cha mẹ

  7. Trang đầu tiên để cha mẹ phê duyệt việc đăng nhập Tài khoản Google của trẻ vào ứng dụng.

    Yêu cầu cha mẹ phê duyệt trang đăng nhập

  8. Trang thứ hai để cha mẹ phê duyệt việc đăng nhập Tài khoản Google của trẻ vào ứng dụng.

    Chọn cha mẹ để phê duyệt trang đăng nhập

  9. Trang thứ ba để cha mẹ phê duyệt việc đăng nhập Tài khoản Google của trẻ vào ứng dụng.

    Mật khẩu của Tài khoản Google của cha mẹ để phê duyệt trang đăng nhập

  10. Trang cuối cùng để cha mẹ phê duyệt việc đăng nhập Tài khoản Google của trẻ vào ứng dụng.

    Trang phê duyệt của cha mẹ để trẻ đăng nhập

  11. Sau khi cha mẹ nhấp vào nút Tiếp tục, một mã thông báo nhận dạng sẽ được chia sẻ với trang web của bạn.

Has-Google-session

  1. Nút Đăng nhập bằng Google.

    Nút có nội dung "Đăng nhập bằng Google" mà không có thông tin được cá nhân hoá.

  2. Trang bộ chọn tài khoản.

    Chọn trang tài khoản của trẻ.

  3. Trang đầu tiên để cha mẹ phê duyệt việc đăng nhập Tài khoản Google của trẻ vào ứng dụng.

    Yêu cầu cha mẹ phê duyệt trang đăng nhập

  4. Trang thứ hai để cha mẹ phê duyệt việc đăng nhập Tài khoản Google của trẻ vào ứng dụng.

    Chọn cha mẹ để phê duyệt trang đăng nhập

  5. Trang thứ ba để cha mẹ phê duyệt việc đăng nhập Tài khoản Google của trẻ vào ứng dụng.

    Mật khẩu của Tài khoản Google của cha mẹ để phê duyệt trang đăng nhập

  6. Trang cuối cùng để cha mẹ phê duyệt việc đăng nhập Tài khoản Google của trẻ vào ứng dụng.

    Trang phê duyệt của cha mẹ để trẻ đăng nhập

  7. Sau khi cha mẹ nhấp vào nút Tiếp tục, một mã thông báo nhận dạng sẽ được chia sẻ với trang web của bạn.