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

Giúp người dùng đăng ký, đăng nhập và quản lý thông tin tài khoản một cách đơn giản.

Sam Dutton

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

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

Danh sách kiểm tra

Đừng đăng nhập nếu có thể

Trước khi 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 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 kiểm soát các tính năng 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ý!

Khi yêu cầu người dùng tạo tài khoản, bạn đang xen vào họ với mục tiêu mà họ đang cố gắng đạt được. Bạn đang nhờ người khác và yêu cầu người dùng tin tưởng cung cấp dữ liệu cá nhân cho bạn. Mọi mật khẩu và mục dữ liệu bạn lưu trữ sẽ dẫn đến "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ý trang web của bạn.

Nếu lý do chính khiến 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 lần điều hướng hoặc duyệt xem, hãy cân nhắc dùng bộ nhớ phía máy khách. Để mua sắm các trang web buộc người dùng tạo tài khoản để thực hiện mua hàng được trích dẫn như một lý do chính để mua sắm bỏ dở giỏ hàng. Bạn nên đặt tính năng thanh toán không cần đăng nhập làm chế độ mặc định.

Hiển thị thông tin đăng nhập rõ ràng

Nêu rõ cách tạo tài khoản trên trang web của bạn, ví dụ bằng cách Đăng nhập hoặc Đăng nhập ở góc 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 ("Lên tàu!", "Tham gia cùng chúng tôi") và không ẩn thông tin đăng nhập trong một trình đơn điều hướng. Steve Krug, chuyên gia về khả năng sử dụng, đã tổng kết phương pháp tiếp cận khả năng sử dụng trang web sau: Đừng khiến tôi phải suy nghĩ! Nếu bạn cần thuyết phục những người khác trong nhóm phụ trách web của bạn, hãy sử dụng số liệu phân tích để cho thấy tác động của các kiểu .

Hai ảnh chụp màn hình của một bản minh hoạ trang web thương mại điện tử trên điện thoại Android. Nút ở bên trái sử dụng biểu tượng của đường liên kết đăng nhập có phần không rõ ràng; màn hình bên phải chỉ cần nói "Đăng nhập"
Hiển thị thông tin đăng nhập một cách rõ ràng. Biểu tượng có thể không rõ ràng, nhưng là Dấu hiệu in hoặc đường liên kết đều rõ ràng.
Ảnh chụp màn hình quá trình đăng nhập cho Gmail: một trang, hiển thị nút Đăng nhập, khi người dùng nhấp vào biểu mẫu này, người dùng sẽ được đưa đến biểu mẫu cũng có đường liên kết Tạo tài khoản.
Trang đăng nhập Gmail có đường liên kết để tạo tài khoản.
Ở kích thước cửa sổ lớn hơn hiển thị ở đây, Gmail hiển thị liên kết Đăng nhập và Tạo tài khoản.

Đảm bảo liên kết tài khoản cho những người dùng đăng ký thông qua một nhà cung cấp danh tính như Google cũng như đăng ký bằng email và mật khẩu. Việc 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 từ dữ liệu hồ sơ từ nhà cung cấp danh tính và so khớp hai tài khoản với nhau. Mã bên dưới cho biết cách truy cập dữ liệu email của một 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 trình bày rõ cách truy cập vào thông tin tài khoản. Cụ thể, hãy đảm bảo hướng dẫn cách thay đổi hoặc đặt lại mật khẩu.

Cắt biểu mẫu lộn xộn

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

Đừng khiến người dùng mất tập trung khỏi việc hoàn tất quy trình đăng ký.

Khi đăng ký, hãy yêu cầu ít nhất có thể. Thu thập thêm dữ liệu người dùng (chẳng hạn như tên và địa chỉ) chỉ khi bạn cần và khi người dùng thấy rõ lợi ích từ việc cung cấp dữ liệu đó. Lưu ý 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ân đôi thông tin bạn nhập chỉ để đảm bảo người dùng có được thông tin liên hệ chính xác. Làm chậm đi khi hoàn thành biểu mẫu và sẽ không hợp lý nếu các trường trong biểu mẫu được tự động điền. Thay vào đó, hãy gửi xác nhận mã cho người dùng khi họ đã nhập thông tin liên hệ, sau đó tiếp tục tạo tài khoản sau khi họ phản hồi. Đây là một mẫu đăng ký phổ biến: người dùng đã quen thuộc với mẫu này.

Có thể bạn muố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 vào 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 cụ này.

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

Giống như việc đăng nhập liên kết, phương pháp này có thêm 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ù chọn phương pháp nhận dạng người dùng nào, bạn cũng cần đưa ra quyết định cẩn thận về phiên dài: khoảng thời gian người dùng duy trì đăng nhập và điều gì có thể khiến bạn đăng xuất họ.

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

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 trình quản lý mật khẩu của bên thứ ba và trình quản lý mật khẩu tích hợp sẵn trên trình duyệt đề xuất và lưu trữ mật khẩu để người dùng không cần 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 hiệu quả trong trình duyệt hiện đại, đồng bộ hoá tài khoản trên nhiều thiết bị, trên các ứng dụng web và ứng dụng dành riêng cho nền tảng—và cho các thiết bị mới.

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

Bạn cũng nên 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à bật tính năng xác thực cơ bản được tích hợp sẵn của trình duyệt. 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ề hình thức thanh toán và đị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à phương á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 cho mật khẩu sức mạnh. Viện Tiêu chuẩn và Công nghệ Quốc gia Hoa Kỳ giải thích cách tránh mật khẩu không an toàn.

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

Dù chọn quy tắc nào cho mật khẩu, bạn cũng không bao giờ được để mật khẩu đã bị lộ trong 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 đã từng bị xâm nhập. Trang web Have I Been Pwned cung cấp API cho mật khẩu kiểm tra hoặc bạn có thể tự chạy chương trình 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 nào trong số các mật khẩu hiện tại của bạn bị bị xâm phạm.

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. Chỉ ra 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ị (không phải sau khi họ đã gửi biểu mẫu đăng ký và phải đợi 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 nội dung nhập mật khẩu.

Không cho phép dán mật khẩu sẽ gây khó chịu cho người dùng, khuyến khích người dùng sử dụng mật khẩu dễ nhớ (và do đó) có thể dễ bị xâm phạm hơn) và theo các tổ chức như Cyber Security Centre (Trung tâm an ninh mạng) có thể thực sự 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. Vì vậy, việc không cho phép dán mật khẩu sẽ không tránh được lỗ hổng trong 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ý

Đừng quên thêm muối và băm mật khẩu, đồng thời đừng cố tự tạo ra thuật toán băm của riêng bạn!

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

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

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 ảnh hưởng đến tính bảo mật. Nội dung đó cũng có khả năng khuyến khích mọi người để sử dụng những mật khẩu dễ nhớ, không an toàn hoặc để lưu hồ sơ mật khẩu.

Thay vì buộc cập nhật mật khẩu, bạn nên theo dõi hoạt động tài khoản bất thường 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 cầ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 của họ, cho họ biết nơi 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 thay đổi hoặc đặt lại mật khẩu một cách đơn giản

Hãy cho người dùng biết 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, khó một cách đáng ngạc nhiê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 nếu họ quên. 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ý trường hợp bị mất mật khẩu.

Để giữ 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 nếu họ phát hiện ra rằng mật khẩu đã bị xâm phạm. Để thực hiện việc này dễ dàng hơn, bạn nên thêm /.well-known/change-password URL đến 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 thao tác người dùng của bạn trực tiếp tới trang nơi 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 triển khai cho các trình duyệt khác. Giúp người 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. Trang này sẽ giải thích cách hãy triển khai việc này.

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

Cung cấp thông tin đă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 trang web bằng biểu mẫu đăng ký bằng đị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 của bên thứ ba, còn được gọi là đăng nhập liên kết.

Trang đăng nhập WordPress
Trang đăng nhập WordPress, với các lựa chọn đăng nhập của 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 thông tin đă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 vào thông tin hồ sơ đã được xác minh bổ sung từ thông tin đăng nhập liên kết, chẳng hạn như làm đị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 thực hiện tự xác minh. Việc đăng nhập liên kết cũng có thể giúp người dùng dễ dàng hơn khi họ 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 giải thích cách thêm thông tin đăng nhập liên kết vào tuỳ chọn đăng ký của bạn. Nhiều nền tảng nhận dạng khác được cung cấp.

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. Người dùng có truy cập hay không đăng nhập liên kết hay không, bạn nên làm cho việc chuyển đổi tài khoản trở nê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 tính năng xác thực đa yếu tố

Xác thực đa yếu tố có nghĩa là đảm bảo người dùng cung cấp dịch vụ 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 sử dụng mật mã một lần gửi qua email hoặc tin nhắn văn bản SMS hoặc bằng cách sử dụng khoá truy cập một lần dựa trên ứng dụng mã, khoá bảo mật hoặc cảm biến vân tay. Các phương pháp hay nhất về OTP qua SMS và Bật chế độ xác thực ở mức độ mạnh bằng WebAuthn giải thích cách triển khai xác thực đa yếu tố.

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

Chú ý đến tên người dùng

Đừng nhấn mạnh tên người dùng trừ khi (hoặc cho đến khi) bạn cần tên người dùng. Cho phép người dùng đăng ký và đăng nhập chỉ địa chỉ email (hoặc số điện thoại) và mật khẩu — hoặc thông tin đăng nhập liên kết nếu họ muốn. Đừng bắt trẻ phải chọn và ghi 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 bất hợp lý đối với tên người dùng đó và đừng ngăn chặn người dùng cập nhật tên người dùng của mình. 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, không phải là 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.

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

Thử nghiệm biểu mẫu đăng ký trên các nền tảng phổ biến nhất cho người dùng của bạn. 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 vấn đề về bố cục. BrowserStack bật kiểm thử miễn phí cho dự án nguồn mở trên hàng loạt 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 dữ liệu thực địa 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. Analytics và Giám sát người dùng thực (RUM) cung cấp dữ liệu cho trải nghiệm thực tế của người dùng, chẳng hạn như thời gian để các trang đăng ký tải, các thành phần giao diện người dùng tương tác với (hoặc không tương tác) và người dùng mất bao lâu để hoàn tất đăng ký.

Những thay đổi nhỏ có thể tạo ra sự khác biệt lớn về tỷ lệ hoàn thành biểu mẫu đăng ký. Số liệu phân tích và phiên bản rum cho phép bạn tối ưu hoá và ưu tiên các thay đổi, đồng thời theo dõi trang web của bạn để phát hiện các vấn đề hiển thị bằng thử nghiệm cục bộ.

Không ngừng tìm hiểu

Ảnh của @ecowarriorprincess trên Unsplash.