Giúp người dùng đăng ký, đăng nhập và quản lý thông tin tài khoản của họ một cách dễ dàng.
Nếu người dùng cần đăng nhập vào trang web của bạn, thì việc thiết kế biểu mẫu đăng ký tốt 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 dùng thiết bị di động, đang vội hoặc đang bị căng thẳng. Biểu mẫu đăng ký được thiết kế kém sẽ có tỷ lệ thoát cao. Mỗi lượt thoát có thể đồng nghĩa với một người dùng bị mất và không hài lòng, chứ không chỉ là một cơ hội đăng ký bị bỏ lỡ.
Sau đâ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ể.
- Cho người dùng biết rõ cách tạo tài khoản.
- Cho người dùng biết cách truy cập vào thông tin tài khoản.
- Loại bỏ các thành phần thừa trong biểu mẫu.
- Cân nhắc thời lượng phiên.
- 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.
- Không cho phép mật khẩu bị lộ.
- Cho phép dán mật khẩu.
- Đừng bao giờ lưu trữ hoặc truyền mật khẩu ở dạng văn bản thuần tuý.
- Không buộc cập nhật mật khẩu.
- Giúp bạn dễ dàng thay đổi hoặc đặt lại mật khẩu.
- Bật tính năng đăng nhập liên kết.
- Đơn giản hoá việc chuyển đổi tài khoản.
- Cân nhắc cung cấp tính năng xác thực đa yếu tố.
- Cẩn thận với tên người dùng.
- Kiểm thử thực địa cũng như trong phòng thí nghiệm.
- Kiểm thử trên nhiều trình duyệt, thiết bị và nền tảng.
Tránh đă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 bạn có thực sự cần làm như vậy hay không. Bất cứ khi nào có thể, bạn nên tránh đặt ra các tính năng hạn chế sau khi đăng nhập.
Biểu mẫu đăng ký tốt nhất là không có biểu mẫu đăng ký!
Khi yêu cầu người dùng tạo tài khoản, bạn đã đặt họ vào tình huống phải làm một việc khác với mục tiêu họ đang hướng đến. 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 mà bạn lưu trữ đều mang một "khoản nợ dữ liệu" về quyền riêng tư và bảo mật, sẽ 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 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ượt đ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 để thực hiện giao dịch mua được trích dẫn là một lý do chính khiến người dùng bỏ 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.
Hiển thị thông tin đăng nhập rõ ràng
Hãy làm rõ cách tạo tài khoản trên trang web của bạn, chẳng hạn 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 hoặc từ ngữ mơ hồ ("Hãy tham gia!", "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. Chuyên gia về khả năng hữu dụng Steve Krug đã tóm tắt phương pháp này về khả năng hữu dụng của trang web: Đừng bắt 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 mình, hãy sử dụng số liệu phân tích để cho thấy tác động của nhiều lựa chọn.
Ở kích thước cửa sổ lớn hơn kích thước hiển thị ở đây, Gmail sẽ hiển thị đường liên kết Đăng nhập và nút Tạo tài khoản.
Hãy nhớ 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 và cũng đăng ký bằng email và mật khẩu. Bạn có thể dễ dàng thực hiện việc này nếu có thể truy cập vào địa chỉ email của người dùng từ dữ liệu hồ sơ của nhà cung cấp danh tính và so khớp hai tài khoản. Đoạn mã dưới đây cho biết cách truy cập vào 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 nêu rõ cách truy cập vào thông tin tài khoản. Cụ thể, hãy hướng dẫn cách thay đổi hoặc đặt lại mật khẩu.
Loại bỏ các thành phần thừa trong biểu mẫu
Trong quy trình đăng ký, nhiệm vụ của bạn là giảm thiểu sự phức tạp và giúp người dùng 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ỗ!
Khi đăng ký, hãy yêu cầu càng ít thông tin càng tốt. Chỉ thu thập dữ liệu người dùng bổ sung (chẳng hạn như tên và địa chỉ) khi bạn cần và khi người dùng thấy được 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 hai lần chỉ để đảm bảo người dùng có thông tin liên hệ chính xác. Điều này làm chậm quá trình hoàn tất 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ệ, 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.
Bạn có thể 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 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 giao diện này.
Giống như tính năng đăng nhập liên kết, phương thức này còn có thêm lợi ích là bạn không phải quản lý mật khẩu của người dùng.
Cân nhắc thời lượng phiên
Dù sử dụng phương pháp nào để xác định danh tính người dùng, bạn 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 sử dụng thiết bị di động hay máy tính, cũng như họ đang chia sẻ trên máy tính hay 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 trong 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 tốt trong các trình duyệt hiện đại, đồng bộ hoá tài khoản trên các thiết bị, trên các ứng dụng web và dành riêng cho nền tảng, cũng như trên các thiết bị mới.
Do đó, bạn cần phải lập trình chính xác các biểu mẫu đăng ký, đặ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 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ể hỗ trợ trình 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à bật tính năng xác thực tích hợp sẵn cơ bả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 trình duyệt và trình quản lý trình duyệt bên thứ ba đề xuất.
Tuy nhiên, nhiều người dùng muốn nhập mật khẩu riêng, 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 cách tránh sử dụng 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ị bị lộ trong các 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 đó 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 cho phép bạn kiểm tra xem có mật khẩu nào hiện tại bị lộ 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.
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.
Việc không cho phép dán mật khẩu sẽ gây phiền hà cho người dùng, khuyến khích việc 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ư Trung tâm bảo mật mạng quốc gia của Vương quốc Anh, việc này thực sự có thể 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ố gắng 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 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
Đừng buộc người dùng cập nhật mật khẩu một cách tuỳ ý.
Việc buộc người dùng cập nhật mật khẩu có thể gây tốn kém cho bộ phận CNTT, gây phiền hà cho người dùng và không ảnh hưởng nhiều đến tính bảo mật. Điều này cũng có thể khuyến khích mọi người sử dụng mật khẩu dễ nhớ nhưng không an toàn hoặc ghi lại mật khẩu trên giấy.
Thay vì buộc người dùng cập nhật mật khẩu, bạn nên theo dõi 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 của họ, cho họ biết vị trí và thời điểm đăng nhập.
Đơn giản hoá việc thay đổi hoặc đặt lại mật khẩu
Cho người dùng biết rõ vị trí và cách cập nhật mật khẩu tài khoản. Trên một số trang web, việc này cực kỳ khó.
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ý mật khẩu bị mất.
Để bảo vệ doanh nghiệp và người dùng, bạn đặc biệt cần giúp người dùng thay đổi mật khẩu nếu họ phát hiện mật khẩu của mình đã bị xâm phạm. Để 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 để chuyển hướng đến trang quản lý mật khẩu. Điều này cho phép trình quản lý mật khẩu đưa người dùng trực tiếp đến trang mà 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 trên các trình duyệt khác. Bài viết 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 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.
Đăng nhập 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ý có đị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.
Phương pháp này có một số ưu điểm. Đối với những 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ơ đã xác minh bổ sung từ tính năng đăng nhập liên kết, chẳng hạn như địa chỉ email. Điều này 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 họ mua một 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 các 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.
Đơn giản hoá việc chuyển đổi tài khoản
Nhiều người dùng dùng chung thiết bị và hoán đổi giữa các tài khoản bằng cùng một trình duyệt. Dù người dùng có truy cập vào thông tin đăng nhập liên kết hay không, bạn nên đơn giản hoá việc chuyển đổi tài khoản.
Cân nhắ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 thông tin 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 cách sử dụng mã xác thực một lần được gửi qua email hoặc tin nhắn SMS, hoặc bằng cách sử dụng mã xác thực 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 tính năng xác thực mạnh bằng WebAuthn giải thích cách triển khai tính năng xác thực đa yếu tố.
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.
Cẩn thận với tên người dùng
Đừng bắt buộc phải có tên người dùng trừ phi (hoặc cho đến khi) bạn cần. 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 thông tin đăng nhập liên kết nếu họ muốn. Đừng buộc trẻ phải 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ý đối với tên người dùng đó 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, chẳng hạn như tên người dùng.
Ngoài ra, 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
Thử nghiệm biểu mẫu đăng ký trên các nền tảng phổ biến nhất đối với người dùng của bạn. Chức năng của phần tử biểu mẫu có thể khác nhau 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 địa cũng như dữ liệu thử nghiệm để hiểu cách người dùng trải nghiệm biểu mẫu đăng ký. 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 tải các trang đăng ký, các thành phần giao diện người dùng tương tác (hoặc không tương tác) và người dùng mất bao lâu để hoàn tất việc đăng ký.
- Chỉ số về trang: lượt xem trang, tỷ lệ thoát và số lượt rời bỏ cho mỗi trang trong quy trình đăng ký.
- Phân tích tương tác: phễu mục tiêu và sự kiện cho biết thời điểm người dùng bỏ dở quy trình đăng ký và tỷ lệ phần trăm người dùng nhấp vào nút, đường liên kết và các thành phần khác trên trang đăng ký.
- Hiệu suất trang web: các chỉ số tập trung vào người dùng có thể cho bạn biết liệu quy trình đăng ký của bạn có tải chậm hoặc không ổn định về mặt hình ảnh hay không.
Những 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à ưu tiên các thay đổi, đồng thời theo dõi trang web để phát hiện các vấn đề không được phát hiện bằng quy trình kiểm thử cục bộ.
Không ngừng tìm hiểu
- Các phương pháp hay nhất về biểu mẫu đăng nhập
- Các phương pháp hay nhất về biểu mẫu thanh toán và địa chỉ
- Tạo 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
- Các thành phần điều khiển biểu mẫu có nhiều chức năng hơn
- Tạo biểu mẫu hỗ trợ tiếp cận
- Đơn giản hoá quy trình đăng ký 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 WebOTP API
Ảnh của @ecowarriorprincess trên Unsplash.