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

Giúp người dùng của bạn đăng ký, đăng nhập và quản lý chi tiết tài khoản của họ một cách dễ 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 ký hợp lý là rấ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, đang sử dụng thiết bị di động, đang vội hoặc bị căng thẳng. Biểu mẫu đăng ký được thiết kế kém chất lượng thường có tỷ lệ thoát cao. Mỗi lần thoát có thể khiến người dùng bỏ lỡ và bất ổn, không chỉ là cơ hội đăng ký bị bỏ lỡ.

Dưới đây là ví dụ về một biểu mẫu đăng ký rất đơn giản minh hoạ tất cả các phương pháp hay nhất:

Danh sách kiểm tra

Tránh đăng nhập nếu có thể

Trước khi bạn triển khai biểu mẫu đăng ký và yêu cầu người dùng tạo tài khoản trên trang web của bạn, hãy cân nhắc xem bạn có thực sự cần thiết hay không. Bất cứ khi nào có thể, bạn nên tránh sử dụng các tính năng kiểm soát yêu cầu đăng nhập.

Biểu mẫu đăng ký tốt nhất không phải là biểu mẫu đăng ký!

Bằng việc yêu cầu người dùng tạo tài khoản, bạn sẽ xen kẽ giữa họ và mục tiêu họ đang cố gắng đạt được. Bạn đang yêu cầu một ưu ái và đề nghị người dùng tin tưởng giao phó dữ liệu cá nhân cho bạn. Mọi mật khẩu và mục dữ liệu mà bạn lưu trữ đều có "khoản nợ dữ liệu" về quyền riêng tư và bảo mật, trở thành chi phí và trách nhiệm pháp lý cho trang web của bạn.

Nếu lý do chính mà bạn yêu cầu người dùng tạo tài khoản là để lưu thông tin giữa các thao tác điều hướng hoặc phiên duyệt web, hãy xem xét sử dụng bộ nhớ phía máy khách. Đối với các trang web mua sắm, việc buộc người dùng tạo tài khoản để mua hàng được cho là lý do chính khiến họ bỏ ngang giỏ hàng. Bạn nên đặt chế độ thanh toán không cần đăng nhập làm chế độ mặc định.

Nêu rõ việc đăng nhập

Trình bày rõ ràng cách tạo tài khoản trên trang web, ví dụ như bằng nút Đăng nhập hoặc Đăng nhập ở trên cùng bên phải của trang. Tránh sử dụng biểu tượng không rõ ràng hoặc từ ngữ không rõ ràng ("Hãy lên tàu!", "Tham gia với chúng tôi") và không ẩn thông tin đăng nhập trong trình đơn điều hướng. Chuyên gia về khả năng sử dụng Steve Krug đã tóm tắt phương pháp kiểm tra khả năng hữu dụng của trang web sau đây: Đừng làm tôi cảm thấy như vậy! Nếu bạn cần thuyết phục những người khác trong nhóm web của mình, hãy sử dụng số liệu phân tích để thể hiện tác động của các lựa chọn khác nhau.

Hai ảnh chụp màn hình mô phỏng trang web thương mại điện tử được xem trên điện thoại Android. Liên kết bên trái sử dụng biểu tượng cho đường liên kết đăng nhập không rõ ràng; biểu tượng bên phải chỉ đơn giản là "Đăng nhập"
Trình bày rõ ràng việc đăng nhập. Một biểu tượng có thể không rõ ràng nhưng rõ ràng là nút hoặc đường liên kết Đăng nhập.
Ảnh chụp màn hình trang đăng nhập cho Gmail: một trang, hiển thị nút Đăng nhập, khi được nhấp vào sẽ dẫn đến một biểu mẫu cũng có đường liên kết Tạo tài khoản.
Trang đăng nhập Gmail có một đường liên kết để tạo tài khoản.
Ở các kích thước cửa sổ lớn hơn hình minh hoạ ở đây, Gmail sẽ hiển thị đường liên kết Sign in (Đăng nhập) và nút Create an account (Tạo tài khoản).

Hãy nhớ liên kết các tài khoản cho những người dùng đăng ký thông qua nhà cung cấp danh tính như Google cũng như những người dùng cũng đăng ký bằng email và mật khẩu. Quá trình này rất dễ thực hiện nếu bạn có thể truy cập vào địa chỉ email của người dùng trong dữ liệu hồ sơ của nhà cung cấp danh tính và so khớp 2 tài khoản này với nhau. Mã dưới đây cho biết cách truy cập vào dữ liệu email cho người dùng Đăng nhập bằng Google.

// auth2 is initialized with gapi.auth2.init()
if (auth2.isSignedIn.get()) {
  var profile = auth2.currentUser.get().getBasicProfile();
  console.log(`Email: ${profile.getEmail()}`);
}

Nêu rõ cách truy cập thông tin tài khoản

Sau khi người dùng đăng nhập, hãy nêu rõ cách truy cập thông tin tài khoản. Cụ thể, hãy hướng dẫn rõ cách thay đổi hoặc đặt lại mật khẩu.

Cắt sự lộn xộn của biểu mẫu

Trong quy trình đăng ký, việc của bạn là giảm thiểu độ phức tạp và giúp người dùng tập trung vào đó. Giảm sự lộn xộn. Đây không phải là lúc để bạn phân tâm và cám dỗ!

Đừng làm người dùng mất tập trung khi hoàn tất quy trình đăng ký.

Khi đăng ký, hãy yêu cầu càng ít càng tốt. Chỉ thu thập thêm dữ liệu người dùng (chẳng hạn như tên và địa chỉ) khi cần và khi người dùng thấy lợi ích rõ ràng từ việc cung cấp dữ liệu đó. Xin lưu ý rằng mọi mục dữ liệu mà bạn giao tiếp và lưu trữ đều phải chịu chi phí và trách nhiệm pháp lý.

Đừng nhập thông tin lên gấp đôi chỉ để đảm bảo người dùng nhập đúng thông tin liên hệ. Việc này làm chậm quá trình hoàn thành biểu mẫu và không hợp lý nếu các trường biểu mẫu được tự động điền. Thay vào đó, hãy gửi mã xác nhận cho người dùng sau khi họ đã nhập thông tin liên hệ, rồi tiếp tục tạo tài khoản sau khi họ phản hồi. Đây là một hình thức đăng ký phổ biến: người dùng đã quen với hình thức này.

Bạn nên cân nhắc việc đăng nhập không cần mật khẩu bằng cách gửi cho người dùng một mã mỗi khi họ đăng nhập trên một thiết bị hoặc trình duyệt mới. Các trang web như Slack và Medium sử dụng một phiên bản của công nghệ này.

Đăng nhập không cần mật khẩu trên medium.com.

Tương tự như với đăng nhập liên kết, tính năng này bổ sung một lợi ích là bạn không phải quản lý mật khẩu người dùng.

Cân nhắc thời lượng phiên

Dù bạn thực hiện phương pháp tiếp cận nào đối với danh tính người dùng, bạn đều cần phải đưa ra quyết định cẩn thận về thời lượng phiên: khoảng thời gian người dùng duy trì trạng thái đăng nhập và điều gì có thể khiến bạn đăng xuất.

Hãy cân nhắc xem người dùng của bạn đang dùng thiết bị di động hay máy tính, và họ đang chia sẻ trên máy tính hay thiết bị chia sẻ.

Giúp trình quản lý mật khẩu đề xuất và lưu trữ mật khẩu một cách an toàn

Bạn có thể giúp các trình quản lý mật khẩu của bên thứ ba và trình duyệt tích hợp sẵn đề xuất và lưu trữ mật khẩu để người dùng không cần phải tự chọn, ghi nhớ hoặc nhập mật khẩu. Trình quản lý mật khẩu hoạt động tốt trong các trình duyệt hiện đại, đồng bộ hoá tài khoản trên nhiều thiết bị, các ứng dụng web và ứng dụng dành riêng cho nền tảng, cũng như cho các thiết bị mới.

Điều này cực kỳ quan trọng đối với việc viết mã biểu mẫu đăng ký đúng cách, đặc biệt là sử dụng đúng giá trị tự động hoàn thành. Đối với biểu mẫu đăng ký, hãy sử dụng autocomplete="new-password" cho mật khẩu mới và thêm giá trị tự động hoàn thành chính xác vào các trường khác của biểu mẫu bất cứ khi nào có thể, chẳng hạn như autocomplete="email" và autocomplete="tel". Bạn cũng có thể giúp người quản lý mật khẩu bằng cách sử dụng các giá trị name và id khác nhau trong biểu mẫu đăng ký và đăng nhập, cho chính phần tử form, cũng như mọi phần tử input, select và textarea.

Bạn cũng nên sử dụng thuộc tính type thích hợp để cung cấp bàn phím phù hợp trên thiết bị di động và cho phép trình duyệt xác thực tích hợp cơ bản. Bạn có thể tìm hiểu thêm trong bài viết Các phương pháp hay nhất về biểu mẫu thanh toán và biểu mẫu địa chỉ.

Đảm bảo người dùng nhập mật khẩu an toàn

Việc cho phép trình quản lý mật khẩu đề xuất mật khẩu là lựa chọn tốt nhất và bạn nên khuyến khích người dùng chấp nhận mật khẩu mạnh do các trình duyệt và trình quản lý trình duyệt của bên thứ ba đề xuất.

Tuy nhiên, nhiều người dùng muốn nhập mật khẩu của riêng họ, vì vậy, bạn cần triển khai các quy tắc về độ mạnh của mật khẩu. Viện Tiêu chuẩn và Công nghệ Quốc gia Hoa Kỳ giải thích về cách tránh mật khẩu không an toàn.

Không cho phép mật khẩu bị lộ

Bất kể bạn chọn quy tắc nào cho mật khẩu, bạn tuyệt đối không được cho phép những mật khẩu bị lộ trong sự cố vi phạm bảo mật.

Sau khi người dùng nhập mật khẩu, bạn cần kiểm tra để đảm bảo rằng đó không phải là mật khẩu đã bị xâm phạm. Trang web Have I Been Pwned cung cấp một API để kiểm tra mật khẩu hoặc bạn có thể tự chạy API này dưới dạng một dịch vụ.

Trình quản lý mật khẩu của Google cũng giúp bạn kiểm tra xem có mật khẩu hiện tại nào của bạn đã bị xâm phạm hay không.

Nếu bạn từ chối mật khẩu mà người dùng đề xuất, hãy cho họ biết cụ thể lý do mật khẩu đó bị từ chối. Hiển thị các vấn đề cùng dòng và giải thích cách khắc phục, ngay khi người dùng nhập một giá trị (chứ không phải sau khi họ gửi biểu mẫu đăng ký và phải chờ phản hồi từ máy chủ của bạn).

Nêu rõ lý do mật khẩu bị từ chối.

Không cấm dán mật khẩu

Một số trang web không cho phép dán văn bản vào mục nhập mật khẩu.

Việc không cho phép dán mật khẩu sẽ làm phiền người dùng, khuyến khích mật khẩu dễ nhớ (và vì vậy có thể dễ bị xâm phạm hơn) và theo các tổ chức như Trung tâm An ninh mạng Quốc gia Vương quốc Anh, thực tế có thể làm giảm tính bảo mật. Người dùng chỉ biết rằng không được phép dán sau khi họ cố dán mật khẩu của mình. Vì vậy, việc không cho phép dán mật khẩu không tránh được các lỗ hổng bảo mật vào bảng nhớ tạm.

Không bao giờ lưu trữ hoặc truyền mật khẩu dưới dạng văn bản thuần tuý

Hãy nhớ muối và băm mật khẩu và đừng cố bịa ra thuật toán băm!

Không buộc cập nhật mật khẩu

Không được buộc người dùng tự cập nhật mật khẩu.

Việc buộc cập nhật mật khẩu có thể gây tốn kém cho bộ phận CNTT, gây khó chịu cho người dùng và không có nhiều tác động đến tính bảo mật. Loại hình này cũng có thể khuyến khích mọi người sử dụng mật khẩu dễ nhớ không an toàn hoặc lưu giữ hồ sơ thực về mật khẩu.

Thay vì buộc phải cập nhật mật khẩu, bạn nên giám sát các hoạt động bất thường trong tài khoản và cảnh báo người dùng. Nếu có thể, bạn cũng nên theo dõi để phát hiện những mật khẩu bị lộ do rò rỉ dữ liệu.

Bạn cũng nên cung cấp cho người dùng quyền truy cập vào nhật ký đăng nhập tài khoản, cho họ biết vị trí và thời điểm đăng nhập.

Trang hoạt động của tài khoản Gmail
Trang hoạt động của tài khoản Gmail.

Giúp việc thay đổi hoặc đặt lại mật khẩu trở nên đơn giản

Thông báo rõ ràng cho người dùng về vị trí và cách cập nhật mật khẩu tài khoản của họ. Trên một số trang web, việc này thật khó khăn.

Tất nhiên, bạn cũng nên giúp người dùng dễ dàng đặt lại mật khẩu của họ nếu họ quên mật khẩu. Dự án bảo mật ứng dụng web mở cung cấp hướng dẫn chi tiết về cách xử lý mật khẩu bị mất.

Để đảm bảo an toàn cho doanh nghiệp và người dùng của bạn, điều đặc biệt quan trọng là giúp người dùng thay đổi mật khẩu của họ nếu họ phát hiện mật khẩu đã bị xâm phạm. Để làm việc này dễ dàng hơn, bạn nên thêm một URL /.well-known/change-password vào trang web của mình. URL này sẽ chuyển hướng đến trang quản lý mật khẩu của bạn. Việc này cho phép trình quản lý mật khẩu chuyển trực tiếp người dùng đến trang họ có thể thay đổi mật khẩu cho trang web của bạn. Tính năng này hiện đã được triển khai trong Safari, Chrome và sắp có trong các trình duyệt khác. Giúp người dùng dễ dàng thay đổi mật khẩu bằng cách thêm một URL phổ biến để thay đổi mật khẩu giải thích cách triển khai việc này.

Bạn cũng nên giúp người dùng dễ dàng xoá tài khoản của họ nếu đó là điều họ muốn.

Cho phép đăng nhập thông qua nhà cung cấp danh tính bên thứ ba

Nhiều người dùng thích đăng nhập vào các trang web bằng biểu mẫu đăng ký địa chỉ email và mật khẩu. Tuy nhiên, bạn cũng nên cho phép người dùng đăng nhập thông qua nhà cung cấp danh tính bên thứ ba, còn gọi là đăng nhập liên kết.

Trang đăng nhập WordPress
Trang đăng nhập WordPress, có các lựa chọn đăng nhập bằng Google và Apple.

Phương pháp này có một số ưu điểm. Đối với người dùng tạo tài khoản bằng phương thức đăng nhập liên kết, bạn không cần yêu cầu, giao tiếp hoặc lưu trữ mật khẩu.

Bạn cũng có thể truy cập thêm thông tin hồ sơ đã xác minh qua quy trình đăng nhập liên kết, chẳng hạn như địa chỉ email – có nghĩa là người dùng không phải nhập dữ liệu đó và bạn không cần tự xác minh. Tính năng đăng nhập liên kết cũng có thể giúp người dùng dễ dàng hơn khi chuyển sang thiết bị mới.

Tích hợp tính năng Đăng nhập bằng Google vào ứng dụng web sẽ giải thích cách thêm thông tin đăng nhập liên kết vào các lựa chọn đăng ký của bạn. Nhiều nền tảng nhận dạng khác có sẵn.

Giúp việc chuyển đổi tài khoản trở nên đơn giản

Nhiều người dùng dùng chung thiết bị và chuyển đổi giữa các tài khoản bằng cùng một trình duyệt. Cho dù người dùng có truy cập thông tin đăng nhập liên kết hay không, bạn nên thực hiện việc chuyển đổi tài khoản đơn giản.

Gmail, hiển thị quá trình chuyển đổi tài khoản
Chuyển đổi tài khoản trên Gmail.

Cân nhắc việc cung cấp cơ chế xác thực đa yếu tố

Xác thực đa yếu tố nghĩa là đảm bảo rằng người dùng xác thực theo nhiều cách. Ví dụ: ngoài việc yêu cầu người dùng đặt mật khẩu, bạn cũng có thể thực thi quy trình xác minh bằng mật mã một lần được gửi qua email hoặc tin nhắn văn bản SMS hay bằng cách sử dụng mã một lần dựa trên ứng dụng, khoá bảo mật hoặc cảm biến vân tay. Các phương pháp hay nhất về SMS OTP và Bật phương thức xác thực mạnh bằng WebAuthn giải thích cách triển khai phương thức xác thực đa yếu tố.

Chắc chắn là bạn nên cung cấp (hoặc thực thi) tính năng xác thực đa yếu tố nếu trang web của bạn xử lý thông tin cá nhân hoặc thông tin nhạy cảm.

Thận trọng với tên người dùng

Đừng nhất định yêu cầu tên người dùng trừ khi (hoặc cho đến khi) bạn cần một tên người dùng. Cho phép người dùng đăng ký và đăng nhập chỉ bằng địa chỉ email (hoặc số điện thoại) và mật khẩu hoặc đăng nhập liên kết nếu muốn. Đừng buộc trẻ chọn và nhớ tên người dùng.

Nếu trang web của bạn yêu cầu tên người dùng, đừng áp đặt các quy tắc không hợp lý cho các tên đó và đừng ngăn người dùng cập nhật tên người dùng của họ. Trên phần phụ trợ, bạn nên tạo một mã nhận dạng duy nhất cho mọi tài khoản người dùng, chứ không phải giá trị nhận dạng dựa trên dữ liệu cá nhân như tên người dùng.

Đồng thời, hãy nhớ sử dụng autocomplete="username" cho tên người dùng.

Kiểm thử trên nhiều thiết bị, nền tảng, trình duyệt và phiên bản

Kiểm thử biểu mẫu đăng ký trên các nền tảng phổ biến nhất mà người dùng của bạn sử dụng. Chức năng của phần tử biểu mẫu có thể thay đổi và sự khác biệt về kích thước khung nhìn có thể gây ra sự cố về bố cục. browserStack cho phép kiểm thử miễn phí cho các dự án nguồn mở trên nhiều thiết bị và trình duyệt.

Triển khai tính năng phân tích và giám sát người dùng thực

Bạn cần có dữ liệu thực tế cũng như dữ liệu phòng thí nghiệm để hiểu cách người dùng trải nghiệm biểu mẫu đăng ký của bạn. Số liệu phân tích và tính năng Giám sát người dùng thực (rum) cung cấp dữ liệu về trải nghiệm thực tế của người dùng, chẳng hạn như thời gian tải các trang đăng ký, thành phần giao diện người dùng mà người dùng tương tác (hoặc không tương tác) và khoảng thời gian người dùng hoàn tất quy trình đăng ký.

Các thay đổi nhỏ có thể tạo ra sự khác biệt lớn đối với tỷ lệ hoàn thành biểu mẫu đăng ký. Analytics và rum giúp bạn tối ưu hoá và sắp xếp mức độ ưu tiên cho các thay đổi, đồng thời theo dõi trang web để phát hiện các vấn đề không xảy ra khi kiểm thử cục bộ.

Tiếp tục học

Ảnh của @ecowarriorprin đòi trên Unsplash.