Giúp người dùng đăng ký
Biểu mẫu đăng ký thường là lượt tương tác đầu tiên với một biểu mẫu trên trang web của bạn. Thiết kế biểu mẫu đăng ký hiệu quả rất quan trọng và một biểu mẫu bảo mật cũng rất cần thiết.
Hãy cùng xem biểu mẫu đăng ký và cách bạn có thể giúp người dùng đăng ký trên trang web của mình.
Hạn chế biểu mẫu đăng ký và chỉ hiển thị các biểu mẫu bắt buộc để tạo tài khoản. Đừng tăng gấp đôi các chế độ kiểm soát biểu mẫu để giúp người dùng biết được thông tin tài khoản chính xác. Thay vào đó, hãy gửi một email xác nhận.
Giúp người dùng điền thông tin chi tiết về tài khoản
Bạn có thể giúp người dùng điền thông tin chi tiết về tài khoản của họ bằng cách sử dụng thuộc tính autocomplete thích hợp.
Sử dụng autocomplete="email" cho trường email và autocomplete="new-password" cho trường mật khẩu mới.
Tìm hiểu thêm về cách tự động điền chế độ điều khiển dữ liệu đầu vào.
Bạn cũng có thể giúp người dùng nhập mật khẩu an toàn bằng cách cung cấp một <button> để lộ mật khẩu.
Tìm hiểu thêm về mẫu mật khẩu để lộ.
Đảm bảo biểu mẫu đăng ký của bạn được bảo mật
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ộn và băm mật khẩu — và đừng cố gắng bịa ra thuật toán băm của riêng bạn.
Cung cấp cơ chế xác thực đa yếu tố, đặc biệt khi bạn lưu trữ dữ liệu cá nhân hoặc dữ liệu nhạy cảm. 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 mẽ bằng WebAuthn, giải thích cách triển khai phương thức xác thực đa yếu tố.
Đảm bảo người dùng không sử dụng mật khẩu bị lộ. Ví dụ: sử dụng API trong Have I Been Pwned để phát hiện các mật khẩu bị lộ, đồng thời đề xuất người dùng điền một mật khẩu mới khác hoặc cảnh báo họ nếu mật khẩu của họ bị lộ.
Giúp người dùng đăng nhập
Hãy xem cách tạo biểu mẫu đăng nhập để đảm bảo người dùng có thể dễ dàng đăng nhập vào trang web của bạn.
Nêu rõ vị trí của nút đăng ký và nút đăng nhập. Đảm bảo biểu mẫu của bạn dùng được trên thiết bị cảm ứng:
- Kích thước đích nhấn của các nút tối thiểu là 48px.
font-sizecủa các thành phần biểu mẫu đủ lớn (20pxgần như phù hợp trên thiết bị di động).- Có đủ không gian (
margin) giữa các thành phần điều khiển biểu mẫu và thông tin đầu vào đủ lớn (sử dụng ít nhấtpadding: 15pxtrên thiết bị di động).
Giúp người dùng điền email và mật khẩu của họ
Giúp trình duyệt và trình quản lý mật khẩu tự động điền thông tin tài khoản.
Sử dụng autocomplete="email" cho trường email và autocomplete="current-password" cho trường mật khẩu hiện tại.
Để giúp người dùng điền thông tin chi tiết về tài khoản của họ theo cách thủ công, hãy sử dụng type="email" cho trường email để hiển thị bàn phím ảo thích hợp trên thiết bị di động.
Sử dụng thuộc tính required cho trường email và mật khẩu để bạn có thể cảnh báo về các giá trị không hợp lệ khi người dùng gửi biểu mẫu.
Hãy cân nhắc sử dụng tính năng xác thực theo thời gian thực để giúp người dùng sửa dữ liệu không hợp lệ ngay sau khi họ nhập thay vì chờ gửi biểu mẫu.
Đảm bảo người dùng có thể thấy mật khẩu họ đã nhập
Theo mặc định, văn bản bạn điền cho <input type="password"> sẽ được làm mờ để tôn trọng quyền riêng tư của người dùng.
Giúp người dùng nhập mật khẩu của họ, bằng cách hiển thị <button> để chuyển đổi chế độ hiển thị văn bản đã nhập.
Tìm hiểu thêm về cách triển khai <button> để lộ mật khẩu.
Đảm bảo biểu mẫu đăng nhập và đăng ký của bạn có thể sử dụng được
Thường xuyên kiểm tra biểu mẫu đăng nhập và đăng ký với người thực để đảm bảo quá trình xác thực hoạt động như mong đợi. Sử dụng số liệu phân tích và phương pháp đo lường người dùng thực tế (rum) để thu thập dữ liệu thực tế tại hiện trường, và các công cụ như Lighthouse và PageSpeed Insights để tự chạy thử nghiệm. Tìm hiểu thêm về kiểm thử khả năng hữu dụng và thu thập dữ liệu phân tích.
Đảm bảo biểu mẫu của bạn hoạt động trên nhiều trình duyệt và trên nhiều nền tảng. Kiểm tra biểu mẫu trên nhiều kích thước màn hình, chỉ sử dụng bàn phím hoặc sử dụng trình đọc màn hình như VoiceOver trên máy Mac hoặc NVDA trên Windows.
Giúp người dùng thay đổi chế độ cài đặt tài khoản
Hãy đảm bảo rằng người dùng có thể thay đổi mọi chế độ cài đặt tài khoản, bao gồm cả địa chỉ email, mật khẩu và tên người dùng.
Hãy trình bày rõ những dữ liệu bạn đang lưu trữ và giúp người dùng tải tất cả dữ liệu cá nhân của họ xuống bất cứ lúc nào. Đảm bảo người dùng có thể xoá tài khoản của họ nếu đó là điều họ muốn. Các tính năng quản lý tài khoản như các tính năng này có thể là yêu cầu pháp lý ở một số khu vực.
Đảm bảo người dùng có thể cập nhật mật khẩu của họ
Giúp người dùng dễ dàng cập nhật mật khẩu của họ.
Yêu cầu người dùng cung cấp mật khẩu hiện tại trước khi thay đổi và gửi email về việc thay đổi mật khẩu với tùy chọn hoàn nguyên và khóa tài khoản.
Thêm lựa chọn yêu cầu mật khẩu mới và cân nhắc việc cung cấp URL .well-known để yêu cầu mật khẩu mới.