Các phương pháp hay nhất về biểu mẫu thanh toán và biểu mẫu địa chỉ

Tối đa hoá lượt chuyển đổi bằng cách giúp người dùng hoàn tất biểu mẫu địa chỉ và thanh toán nhanh chóng và dễ dàng nhất có thể.

Sam Dutton

Biểu mẫu được thiết kế tốt sẽ giúp người dùng và tăng tỷ lệ chuyển đổi. Một bản sửa lỗi nhỏ có thể tạo ra sự khác biệt lớn!

Sau đây là ví dụ về một biểu mẫu thanh toán đơn giản minh hoạ tất cả các phương pháp hay nhất:

Sau đây là ví dụ về một biểu mẫu địa chỉ đơn giản minh hoạ tất cả các phương pháp hay nhất:

Danh sách kiểm tra

• Sử dụng các phần tử HTML có ý nghĩa: <form>, <input>, <label> và <button>.
• Gắn nhãn cho từng trường biểu mẫu bằng <label>.
• Sử dụng các thuộc tính phần tử HTML để truy cập vào các tính năng tích hợp sẵn của trình duyệt, cụ thể là type và autocomplete với các giá trị thích hợp.
• Tránh sử dụng type="number" cho các số không được tăng lên, chẳng hạn như số thẻ thanh toán. Thay vào đó, hãy sử dụng type="text" và inputmode="numeric".
• Nếu có giá trị tự động hoàn thành thích hợp cho input, select hoặc textarea, bạn nên sử dụng giá trị đó.
• Để giúp trình duyệt tự động điền biểu mẫu, hãy cung cấp cho các thuộc tính name và id đầu vào giá trị ổn định không thay đổi giữa các lần tải trang hoặc triển khai trang web.
• Tắt nút gửi sau khi người dùng nhấn hoặc nhấp vào nút đó.
• Xác thực dữ liệu trong quá trình nhập, chứ không chỉ khi gửi biểu mẫu.
• Đặt chế độ thanh toán không cần đăng nhập làm chế độ mặc định và đơn giản hoá việc tạo tài khoản sau khi hoàn tất quy trình thanh toán.
• Cho thấy tiến trình thanh toán theo các bước rõ ràng với lời kêu gọi hành động rõ ràng.
• Hạn chế các điểm thoát tiềm ẩn trong quy trình thanh toán bằng cách loại bỏ những nội dung lộn xộn và gây mất tập trung.
• Hiện toàn bộ thông tin chi tiết về đơn đặt hàng tại bước thanh toán và giúp người dùng dễ dàng điều chỉnh đơn đặt hàng.
• Đừng yêu cầu dữ liệu mà bạn không cần đến.
• Yêu cầu tên bằng một mục nhập, trừ phi bạn có lý do chính đáng để không làm vậy.
• Không áp dụng quy định chỉ cho phép ký tự Latinh đối với tên và tên người dùng.
• Cho phép nhiều định dạng địa chỉ.
• Cân nhắc sử dụng một textarea cho địa chỉ.
• Sử dụng tính năng tự động hoàn thành cho địa chỉ thanh toán.
• Quốc tế hoá và bản địa hoá khi cần.
• Cân nhắc việc tránh truy vấn địa chỉ theo mã bưu chính.
• Sử dụng các giá trị tự động điền thẻ thanh toán thích hợp.
• Sử dụng một phương thức nhập duy nhất cho số thẻ thanh toán.
• Tránh sử dụng các phần tử tuỳ chỉnh nếu các phần tử đó làm gián đoạn trải nghiệm tự động điền.
• Kiểm thử trong thực tế cũng như trong phòng thí nghiệm: số liệu phân tích trang, số liệu phân tích lượt tương tác và đo lường hiệu suất của người dùng thực.
• Kiểm thử trên nhiều trình duyệt, thiết bị và nền tảng.

Sử dụng HTML có ý nghĩa

Sử dụng các phần tử và thuộc tính được tạo cho công việc:

• <form>, <input>, <label> và <button>
• type, autocomplete và inputmode

Các thuộc tính này cho phép chức năng tích hợp sẵn của trình duyệt, cải thiện khả năng hỗ trợ tiếp cận và thêm ý nghĩa vào mã đánh dấu.

Sử dụng các phần tử HTML đúng mục đích

Đặt biểu mẫu của bạn trong <form>

Bạn có thể không muốn bọc các phần tử <input> trong <form> và xử lý việc gửi dữ liệu bằng JavaScript.

Đừng làm vậy!

<form> HTML cho phép bạn sử dụng một bộ tính năng tích hợp mạnh mẽ trên tất cả trình duyệt hiện đại, đồng thời có thể giúp trình đọc màn hình và các thiết bị hỗ trợ tiếp cận khác truy cập vào trang web của bạn. <form> cũng giúp bạn dễ dàng xây dựng chức năng cơ bản cho các trình duyệt cũ có hỗ trợ JavaScript hạn chế, đồng thời cho phép gửi biểu mẫu ngay cả khi mã của bạn gặp sự cố và cho một số ít người dùng thực sự tắt JavaScript.

Nếu bạn có nhiều thành phần trang để người dùng nhập, hãy nhớ đặt từng thành phần vào phần tử <form> riêng. Ví dụ: nếu bạn có tính năng tìm kiếm và đăng ký trên cùng một trang, hãy đặt từng tính năng vào <form> riêng.

Sử dụng <label> để gắn nhãn cho các phần tử

Để gắn nhãn cho <input>, <select> hoặc <textarea>, hãy sử dụng <label>.

Liên kết nhãn với dữ liệu đầu vào bằng cách đặt thuộc tính for của nhãn có cùng giá trị với id của dữ liệu đầu vào.

<label for="address-line1">Address line 1</label>
<input id="address-line1" …>

Sử dụng một nhãn cho một đầu vào: đừng cố gắng gắn nhãn nhiều đầu vào bằng một nhãn. Phương thức này hoạt động hiệu quả nhất đối với trình duyệt và trình đọc màn hình. Thao tác nhấn hoặc nhấp vào một nhãn sẽ di chuyển tiêu điểm đến dữ liệu đầu vào liên kết với nhãn đó và trình đọc màn hình sẽ thông báo văn bản nhãn khi nhãn hoặc dữ liệu đầu vào của nhãn nhận được tiêu điểm.

Tạo nút hữu ích

Sử dụng <button> cho các nút! Bạn cũng có thể sử dụng <input type="submit">, nhưng đừng sử dụng div hoặc một số phần tử ngẫu nhiên khác đóng vai trò là nút. Các thành phần nút cung cấp hành vi hỗ trợ tiếp cận, chức năng gửi biểu mẫu tích hợp sẵn và có thể dễ dàng tạo kiểu.

Đặt giá trị cho mỗi nút gửi biểu mẫu để cho biết chức năng của nút đó. Đối với mỗi bước thanh toán, hãy sử dụng lời kêu gọi hành động mô tả cho biết tiến trình và làm rõ bước tiếp theo. Ví dụ: gắn nhãn Tiếp tục thanh toán cho nút gửi trên biểu mẫu địa chỉ giao hàng thay vì Tiếp tục hoặc Lưu.

Cân nhắc việc tắt nút gửi sau khi người dùng nhấn hoặc nhấp vào nút đó, đặc biệt là khi người dùng đang thanh toán hoặc đặt hàng. Nhiều người dùng nhấp vào các nút nhiều lần, ngay cả khi các nút đó đang hoạt động tốt. Điều đó có thể làm hỏng quy trình thanh toán và làm tăng tải máy chủ.

Mặt khác, đừng tắt nút gửi khi người dùng chưa nhập đầy đủ và hợp lệ. Ví dụ: đừng chỉ tắt nút Lưu địa chỉ vì thiếu hoặc không hợp lệ. Điều đó không giúp ích gì cho người dùng – họ có thể tiếp tục nhấn hoặc nhấp vào nút và cho rằng nút đó bị hỏng. Thay vào đó, nếu người dùng cố gắng gửi một biểu mẫu có dữ liệu không hợp lệ, hãy giải thích cho họ biết vấn đề và cách khắc phục. Điều này đặc biệt quan trọng trên thiết bị di động, nơi việc nhập dữ liệu khó khăn hơn và dữ liệu biểu mẫu bị thiếu hoặc không hợp lệ có thể không xuất hiện trên màn hình của người dùng vào thời điểm họ cố gắng gửi biểu mẫu.

Khai thác tối đa thuộc tính HTML

Giúp người dùng dễ dàng nhập dữ liệu

Sử dụng thuộc tính type đầu vào 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 cơ bản của trình duyệt.

Ví dụ: sử dụng type="email" cho địa chỉ email và type="tel" cho số điện thoại.

Đối với ngày, hãy cố gắng tránh sử dụng các phần tử select tuỳ chỉnh. Các tính năng này sẽ làm hỏng trải nghiệm tự động điền nếu không được triển khai đúng cách và không hoạt động trên các trình duyệt cũ. Đối với các số như năm sinh, hãy cân nhắc sử dụng phần tử input thay vì select, vì việc nhập chữ số theo cách thủ công có thể dễ dàng hơn và ít gặp lỗi hơn so với việc chọn trong danh sách thả xuống dài, đặc biệt là trên thiết bị di động. Sử dụng inputmode="numeric" để đảm bảo bàn phím phù hợp trên thiết bị di động, đồng thời thêm gợi ý xác thực và định dạng bằng văn bản hoặc phần giữ chỗ để đảm bảo người dùng nhập dữ liệu ở định dạng thích hợp.

Sử dụng tính năng tự động hoàn thành để cải thiện khả năng hỗ trợ tiếp cận và giúp người dùng tránh nhập lại dữ liệu

Việc sử dụng các giá trị autocomplete thích hợp cho phép trình duyệt giúp người dùng bằng cách lưu trữ dữ liệu một cách an toàn và tự động điền các giá trị input, select và textarea. Điều này đặc biệt quan trọng trên thiết bị di động và đóng vai trò quan trọng trong việc tránh tỷ lệ bỏ ngang biểu mẫu cao. Tính năng tự động hoàn thành cũng mang lại nhiều lợi ích về khả năng hỗ trợ tiếp cận.

Nếu có giá trị tự động hoàn thành phù hợp cho một trường trong biểu mẫu, bạn nên sử dụng giá trị đó. Tài liệu web MDN có danh sách đầy đủ các giá trị và nội dung giải thích về cách sử dụng đúng cách.

Giá trị ổn định

Địa chỉ thanh toán

Theo mặc định, hãy đặt địa chỉ thanh toán giống với địa chỉ giao hàng. Giảm tình trạng lộn xộn về hình ảnh bằng cách cung cấp đường liên kết để chỉnh sửa địa chỉ thanh toán (hoặc sử dụng các phần tử summary và details) thay vì hiển thị địa chỉ thanh toán trong một biểu mẫu.

Sử dụng các giá trị tự động điền thích hợp cho địa chỉ thanh toán, giống như bạn làm cho địa chỉ giao hàng, để người dùng không phải nhập dữ liệu nhiều lần. Thêm một từ tiền tố vào các thuộc tính tự động hoàn thành nếu bạn có các giá trị khác nhau cho dữ liệu đầu vào có cùng tên trong các phần khác nhau.

<input autocomplete="shipping address-line-1" ...>
...
<input autocomplete="billing address-line-1" ...>

Giúp người dùng nhập đúng dữ liệu

Cố gắng tránh "nhắc nhở" khách hàng vì họ "đã làm sai điều gì đó". Thay vào đó, hãy giúp người dùng hoàn tất biểu mẫu nhanh chóng và dễ dàng hơn bằng cách giúp họ khắc phục sự cố khi sự cố xảy ra. Trong quy trình thanh toán, khách hàng đang cố gắng trả tiền cho công ty của bạn để mua một sản phẩm hoặc dịch vụ. Nhiệm vụ của bạn là hỗ trợ họ, chứ không phải trừng phạt họ!

Bạn có thể thêm thuộc tính quy tắc ràng buộc vào các phần tử biểu mẫu để chỉ định các giá trị chấp nhận được, bao gồm min, max và pattern. Trạng thái hợp lệ của phần tử được đặt tự động tuỳ thuộc vào việc giá trị của phần tử có hợp lệ hay không, cũng như các lớp giả lập CSS :valid và :invalid có thể được dùng để tạo kiểu cho các phần tử có giá trị hợp lệ hoặc không hợp lệ.

Ví dụ: HTML sau đây chỉ định dữ liệu đầu vào cho năm sinh từ năm 1900 đến năm 2020. Việc sử dụng type="number" sẽ chỉ ràng buộc các giá trị đầu vào ở dạng số, trong phạm vi do min và max chỉ định. Nếu bạn cố gắng nhập một số nằm ngoài phạm vi, thì dữ liệu đầu vào sẽ được đặt trạng thái không hợp lệ.

Ví dụ sau sử dụng pattern="[\d ]{10,30}" để đảm bảo số thẻ thanh toán hợp lệ, đồng thời cho phép dấu cách:

Các trình duyệt hiện đại cũng thực hiện quy trình xác thực cơ bản cho dữ liệu đầu vào có loại email hoặc url.

Khi gửi biểu mẫu, trình duyệt sẽ tự động đặt tiêu điểm vào các trường có giá trị bắt buộc bị thiếu hoặc có vấn đề. Không cần JavaScript!

Xác thực cùng dòng và cung cấp phản hồi cho người dùng khi họ nhập dữ liệu, thay vì cung cấp danh sách lỗi khi họ nhấp vào nút gửi. Nếu bạn cần xác thực dữ liệu trên máy chủ sau khi gửi biểu mẫu, hãy liệt kê tất cả vấn đề phát hiện được và làm nổi bật rõ ràng tất cả trường biểu mẫu có giá trị không hợp lệ, cũng như hiển thị thông báo cùng dòng bên cạnh mỗi trường có vấn đề để giải thích những gì cần khắc phục. Kiểm tra nhật ký máy chủ và dữ liệu phân tích để tìm lỗi thường gặp. Bạn có thể cần thiết kế lại biểu mẫu.

Bạn cũng nên sử dụng JavaScript để xác thực mạnh mẽ hơn trong khi người dùng nhập dữ liệu và khi gửi biểu mẫu. Sử dụng Constraint Validation API (được hỗ trợ rộng rãi) để thêm tính năng xác thực tuỳ chỉnh bằng cách sử dụng giao diện người dùng trình duyệt tích hợp để đặt tiêu điểm và hiển thị lời nhắc.

Tìm hiểu thêm trong phần Sử dụng JavaScript để xác thực theo thời gian thực phức tạp hơn.

Giúp người dùng tránh thiếu dữ liệu bắt buộc

Sử dụng thuộc tính required cho các giá trị bắt buộc.

Khi một biểu mẫu được gửi, các trình duyệt hiện đại sẽ tự động nhắc và đặt tiêu điểm vào các trường required bị thiếu dữ liệu. Bạn có thể sử dụng lớp giả :required để làm nổi bật các trường bắt buộc. Không yêu cầu JavaScript!

Thêm dấu hoa thị vào nhãn cho mọi trường bắt buộc và thêm một ghi chú ở đầu biểu mẫu để giải thích ý nghĩa của dấu hoa thị.

Đơn giản hoá quy trình thanh toán

Hãy chú ý đến khoảng cách thương mại trên thiết bị di động!

Hãy tưởng tượng rằng người dùng của bạn có một ngân sách mệt mỏi. Nếu bạn sử dụng hết, người dùng sẽ rời bỏ ứng dụng của bạn.

Bạn cần giảm sự phiền toái và duy trì tiêu điểm, đặc biệt là trên thiết bị di động. Nhiều trang web có nhiều lưu lượng truy cập hơn trên thiết bị di động nhưng có nhiều lượt chuyển đổi hơn trên máy tính. Đây là hiện tượng được gọi là khoảng cách thương mại trên thiết bị di động. Có thể khách hàng chỉ muốn hoàn tất giao dịch mua trên máy tính, nhưng tỷ lệ chuyển đổi trên thiết bị di động thấp hơn cũng là do trải nghiệm người dùng kém. Nhiệm vụ của bạn là giảm thiểu số lượt chuyển đổi bị mất trên thiết bị di động và tối đa hoá số lượt chuyển đổi trên máy tính. Nghiên cứu đã chỉ ra rằng có rất nhiều cơ hội để mang lại trải nghiệm tốt hơn cho biểu mẫu trên thiết bị di động.

Quan trọng nhất là người dùng có nhiều khả năng bỏ dở những biểu mẫu có vẻ dài dòng, phức tạp và không có hướng dẫn. Điều này đặc biệt đúng khi người dùng sử dụng màn hình nhỏ hơn, bị phân tâm hoặc vội vàng. Yêu cầu ít dữ liệu nhất có thể.

Đặt chế độ thanh toán không cần đăng nhập làm chế độ mặc định

Đối với cửa hàng trực tuyến, cách đơn giản nhất để giảm sự phiền hà khi điền thông tin vào biểu mẫu là đặt chế độ thanh toán không cần đăng nhập làm chế độ mặc định. Không buộc người dùng tạo tài khoản trước khi mua hàng. Việc không cho phép khách thanh toán được coi là lý do chính khiến khách hàng bỏ dở giỏ hàng.

Bạn có thể cho phép người dùng đăng ký tài khoản sau khi thanh toán. Tại thời điểm đó, bạn đã có hầu hết dữ liệu cần thiết để thiết lập tài khoản, vì vậy, người dùng có thể tạo tài khoản một cách nhanh chóng và dễ dàng.

Hiển thị tiến trình thanh toán

Bạn có thể giúp quy trình thanh toán trở nên đơn giản hơn bằng cách cho thấy tiến trình và nêu rõ việc cần làm tiếp theo. Video dưới đây cho thấy cách nhà bán lẻ johnlewis.com ở Vương quốc Anh đạt được điều này.

Bạn cần duy trì đà phát triển! Đối với mỗi bước thanh toán, hãy sử dụng tiêu đề trang và giá trị nút mô tả để cho người dùng biết rõ việc cần làm ngay bây giờ và bước thanh toán tiếp theo.

Sử dụng thuộc tính enterkeyhint trên các mục nhập biểu mẫu để đặt nhãn phím enter trên bàn phím di động. Ví dụ: sử dụng enterkeyhint="previous" và enterkeyhint="next" trong một biểu mẫu nhiều trang, enterkeyhint="done" cho dữ liệu đầu vào cuối cùng trong biểu mẫu và enterkeyhint="search" cho dữ liệu đầu vào tìm kiếm.

Thuộc tính enterkeyhint được hỗ trợ trên Android và iOS. Bạn có thể tìm hiểu thêm trong phần giải thích về enterkeyhint.

Giúp người dùng dễ dàng quay lại và đi tiếp trong quy trình thanh toán để dễ dàng điều chỉnh đơn đặt hàng, ngay cả khi họ đang ở bước thanh toán cuối cùng. Hiển thị toàn bộ thông tin chi tiết về đơn đặt hàng, chứ không chỉ một bản tóm tắt hạn chế. Cho phép người dùng dễ dàng điều chỉnh số lượng mặt hàng trên trang thanh toán. Ưu tiên của bạn khi thanh toán là tránh làm gián đoạn tiến trình chuyển đổi.

Loại bỏ chi tiết thừa

Hạn chế các điểm thoát tiềm ẩn bằng cách loại bỏ các yếu tố gây rối mắt và mất tập trung, chẳng hạn như quảng cáo sản phẩm. Nhiều nhà bán lẻ thành công thậm chí còn xoá tính năng điều hướng và tìm kiếm khỏi quy trình thanh toán.

Luôn tập trung vào hành trình. Đây không phải là thời điểm để dụ dỗ người dùng làm việc khác!

Đối với người dùng cũ, bạn có thể đơn giản hoá quy trình thanh toán hơn nữa bằng cách ẩn dữ liệu mà họ không cần xem. Ví dụ: hiển thị địa chỉ giao hàng ở dạng văn bản thuần tuý (không phải trong biểu mẫu) và cho phép người dùng thay đổi địa chỉ đó thông qua một đường liên kết.

Giúp người dùng dễ dàng nhập tên và địa chỉ

Chỉ yêu cầu dữ liệu bạn cần

Trước khi bắt đầu lập trình biểu mẫu tên và địa chỉ, hãy đảm bảo bạn hiểu rõ những dữ liệu cần thiết. Đừng yêu cầu dữ liệu mà bạn không cần! Cách đơn giản nhất để giảm độ phức tạp của biểu mẫu là xoá các trường không cần thiết. Điều này cũng tốt cho quyền riêng tư của khách hàng và có thể giảm chi phí và trách nhiệm pháp lý liên quan đến dữ liệu phụ trợ.

Sử dụng một phương thức nhập tên

Cho phép người dùng nhập tên của họ bằng một phương thức nhập duy nhất, trừ phi bạn có lý do chính đáng để lưu trữ tên, họ, tên hiệu hoặc các phần tên khác riêng biệt. Việc sử dụng một phương thức nhập tên duy nhất giúp biểu mẫu ít phức tạp hơn, cho phép cắt và dán cũng như giúp tính năng tự động điền đơn giản hơn.

Cụ thể, trừ phi bạn có lý do chính đáng, đừng thêm một mục nhập riêng cho tiền tố hoặc chức danh (như Bà, Tiến sĩ hoặc Chúa). Người dùng có thể nhập tên của họ vào đó nếu muốn. Ngoài ra, tính năng tự động hoàn thành honorific-prefix hiện không hoạt động trong hầu hết các trình duyệt. Vì vậy, việc thêm trường cho tiền tố tên hoặc tiêu đề sẽ làm hỏng trải nghiệm tự động điền biểu mẫu địa chỉ cho hầu hết người dùng.

Bật tính năng tự động điền tên

Sử dụng name cho tên đầy đủ:

<input autocomplete="name" ...>

Nếu bạn thực sự có lý do chính đáng để tách các phần tên, hãy nhớ sử dụng các giá trị tự động hoàn thành phù hợp:

• honorific-prefix
• given-name
• nickname
• additional-name-initial
• additional-name
• family-name
• honorific-suffix

Cho phép tên quốc tế

Bạn nên xác thực dữ liệu tên nhập vào hoặc hạn chế các ký tự được phép cho dữ liệu tên. Tuy nhiên, bạn cần phải không hạn chế chữ cái nhất có thể. Thật thô lỗ khi bị nói rằng tên của bạn "không hợp lệ"!

Để xác thực, hãy tránh sử dụng biểu thức chính quy chỉ khớp với các ký tự Latinh. Chỉ Latinh sẽ loại trừ những người dùng có tên hoặc địa chỉ chứa các ký tự không có trong bảng chữ cái Latinh. Thay vào đó, hãy cho phép so khớp chữ cái Unicode và đảm bảo rằng phần phụ trợ của bạn hỗ trợ Unicode một cách an toàn cả ở đầu vào và đầu ra. Các trình duyệt hiện đại hỗ trợ tốt Unicode trong biểu thức chính quy.

<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
<input pattern="[\w \-]+" ...>

<!-- Accepts Unicode letters. -->
<input pattern="[\p{L} \-]+" ...>

Cho phép nhiều định dạng địa chỉ

Khi thiết kế biểu mẫu địa chỉ, hãy lưu ý đến sự đa dạng đáng kinh ngạc của các định dạng địa chỉ, ngay cả trong một quốc gia. Hãy cẩn thận để không đưa ra giả định về địa chỉ "bình thường". (Hãy xem bài viết Địa chỉ kỳ lạ ở Vương quốc Anh! nếu bạn chưa tin!)

Tạo sự linh hoạt cho biểu mẫu địa chỉ

Đừng buộc người dùng phải cố gắng nhét địa chỉ của họ vào các trường biểu mẫu không vừa.

Ví dụ: đừng bắt buộc phải nhập số nhà và tên đường trong các trường nhập riêng biệt, vì nhiều địa chỉ không sử dụng định dạng đó và dữ liệu không đầy đủ có thể làm hỏng tính năng tự động điền của trình duyệt.

Hãy đặc biệt cẩn thận với các trường địa chỉ required. Ví dụ: địa chỉ ở các thành phố lớn ở Vương quốc Anh không có hạt, nhưng nhiều trang web vẫn buộc người dùng phải nhập hạt.

Việc sử dụng hai dòng địa chỉ linh hoạt có thể phù hợp với nhiều định dạng địa chỉ.

<input autocomplete="address-line-1" id="address-line1" ...>
<input autocomplete="address-line-2" id="address-line2" ...>

Thêm nhãn để so khớp:

<label for="address-line-1">
Address line 1 (or company name)
</label>
<input autocomplete="address-line-1" id="address-line1" ...>

<label for="address-line-2">
Address line 2 (optional)
</label>
<input autocomplete="address-line-2" id="address-line2" ...>

Bạn có thể thử tính năng này bằng cách phối lại và chỉnh sửa bản minh hoạ được nhúng bên dưới.

Cân nhắc sử dụng một textarea duy nhất cho địa chỉ

Lựa chọn linh hoạt nhất cho địa chỉ là cung cấp một textarea.

Phương pháp textarea phù hợp với mọi định dạng địa chỉ và rất phù hợp để cắt và dán. Tuy nhiên, hãy lưu ý rằng phương pháp này có thể không phù hợp với yêu cầu về dữ liệu của bạn và người dùng có thể bỏ lỡ tính năng tự động điền nếu trước đó họ chỉ sử dụng các biểu mẫu có address-line1 và address-line2.

Đối với textarea, hãy sử dụng street-address làm giá trị tự động hoàn thành.

Dưới đây là ví dụ về một biểu mẫu minh hoạ cách sử dụng một textarea duy nhất cho địa chỉ:

Quốc tế hoá và bản địa hoá biểu mẫu địa chỉ

Đặc biệt, bạn cần xem xét việc quốc tế hoá và bản địa hoá cho biểu mẫu địa chỉ, tuỳ thuộc vào vị trí của người dùng.

Xin lưu ý rằng cách đặt tên các phần của địa chỉ cũng như định dạng địa chỉ còn tuỳ thuộc vào từng ngôn ngữ.

    ZIP code: US
 Postal code: Canada
    Postcode: UK
     Eircode: Ireland
         PIN: India

Bạn có thể cảm thấy khó chịu hoặc khó hiểu khi thấy một biểu mẫu không phù hợp với địa chỉ của bạn hoặc không sử dụng những từ mà bạn mong đợi.

Có thể bạn cần tuỳ chỉnh biểu mẫu địa chỉ cho nhiều ngôn ngữ trên trang web của mình, nhưng việc sử dụng các kỹ thuật để tối đa hoá tính linh hoạt của biểu mẫu (như mô tả ở trên) có thể là đủ. Nếu bạn không bản địa hoá biểu mẫu địa chỉ, hãy nhớ nắm được các ưu tiên chính để xử lý một loạt định dạng địa chỉ: * Tránh quá cụ thể về các phần địa chỉ, chẳng hạn như khăng khăng phải có tên đường hoặc số nhà. * Tránh tạo trường required nếu có thể. Ví dụ: địa chỉ ở nhiều quốc gia không có mã bưu chính và địa chỉ ở vùng nông thôn có thể không có tên đường. * Sử dụng tên bao gồm: "Quốc gia/khu vực" thay vì "Quốc gia"; "Mã zip/mã bưu chính" thay vì "Mã zip".

Hãy linh hoạt! Ví dụ về biểu mẫu địa chỉ đơn giản ở trên có thể được điều chỉnh để hoạt động "đủ tốt" cho nhiều ngôn ngữ.

Cân nhắc việc tránh tra cứu địa chỉ theo mã bưu chính

Một số trang web sử dụng dịch vụ tra cứu địa chỉ dựa trên mã bưu chính hoặc mã zip. Điều này có thể hợp lý đối với một số trường hợp sử dụng, nhưng bạn nên lưu ý đến những nhược điểm tiềm ẩn.

Tính năng đề xuất địa chỉ theo mã bưu chính không hoạt động ở một số quốc gia và ở một số khu vực, mã bưu chính có thể bao gồm một lượng lớn địa chỉ tiềm năng.

Người dùng khó có thể chọn trong danh sách dài địa chỉ, đặc biệt là trên thiết bị di động nếu họ đang vội hoặc căng thẳng. Việc cho phép người dùng tận dụng tính năng tự động điền và nhập địa chỉ đầy đủ chỉ bằng một lần nhấn hoặc nhấp có thể dễ dàng và ít xảy ra lỗi hơn.

Đơn giản hoá biểu mẫu thanh toán

Biểu mẫu thanh toán là phần quan trọng nhất trong quy trình thanh toán. Thiết kế biểu mẫu thanh toán kém là một nguyên nhân phổ biến khiến khách hàng bỏ dở giỏ hàng. Điều quan trọng nằm ở chi tiết: các lỗi nhỏ có thể khiến người dùng bỏ dở giao dịch mua, đặc biệt là trên thiết bị di động. Công việc của bạn là thiết kế các biểu mẫu để giúp người dùng nhập dữ liệu dễ dàng nhất có thể.

Giúp người dùng tránh phải nhập lại dữ liệu thanh toán

Hãy nhớ thêm các giá trị autocomplete thích hợp vào biểu mẫu thẻ thanh toán, bao gồm số thẻ thanh toán, tên trên thẻ, tháng và năm hết hạn:

• cc-number
• cc-name
• cc-exp-month
• cc-exp-year

Điều này cho phép trình duyệt giúp người dùng bằng cách lưu trữ an toàn thông tin thẻ thanh toán và nhập chính xác dữ liệu biểu mẫu. Nếu không có tính năng tự động hoàn thành, người dùng có thể sẽ giữ lại bản ghi thực tế về thông tin thẻ thanh toán hoặc lưu trữ dữ liệu thẻ thanh toán một cách không an toàn trên thiết bị của họ.

Tránh sử dụng phần tử tuỳ chỉnh cho ngày trên thẻ thanh toán

Nếu không được thiết kế đúng cách, các phần tử tuỳ chỉnh có thể làm gián đoạn quy trình thanh toán bằng cách phá vỡ tính năng tự động điền và sẽ không hoạt động trên các trình duyệt cũ. Nếu tất cả thông tin chi tiết khác về thẻ thanh toán đều có sẵn từ tính năng tự động điền, nhưng người dùng buộc phải tìm thẻ thanh toán thực tế của họ để tra cứu ngày hết hạn vì tính năng tự động điền không hoạt động đối với một phần tử tuỳ chỉnh, thì bạn có thể mất một giao dịch bán hàng. Thay vào đó, hãy cân nhắc sử dụng các phần tử HTML chuẩn và tạo kiểu cho các phần tử đó cho phù hợp.

Sử dụng một trường nhập cho số điện thoại và thẻ thanh toán

Đối với số thẻ thanh toán và số điện thoại, hãy sử dụng một phương thức nhập duy nhất: không chia số thành các phần. Điều này giúp người dùng dễ dàng nhập dữ liệu, đơn giản hoá quy trình xác thực và cho phép trình duyệt tự động điền. Hãy cân nhắc làm tương tự đối với các dữ liệu dạng số khác như mã PIN và mã ngân hàng.

Xác thực cẩn thận

Bạn nên xác thực hoạt động nhập dữ liệu cả theo thời gian thực và trước khi gửi biểu mẫu. Một cách để thực hiện việc này là thêm thuộc tính pattern vào phương thức nhập thẻ thanh toán. Nếu người dùng cố gắng gửi biểu mẫu thanh toán bằng một giá trị không hợp lệ, trình duyệt sẽ hiển thị thông báo cảnh báo và đặt tiêu điểm vào dữ liệu đầu vào. Không yêu cầu JavaScript!

Tuy nhiên, biểu thức chính quy pattern phải đủ linh hoạt để xử lý dải độ dài số thẻ thanh toán: từ 14 chữ số (hoặc có thể ít hơn) đến 20 chữ số (hoặc nhiều hơn). Bạn có thể tìm hiểu thêm về cách tạo cấu trúc số thẻ thanh toán trên LDAPwiki.

Cho phép người dùng thêm dấu cách khi nhập số thẻ thanh toán mới, vì đây là cách số xuất hiện trên thẻ thực. Điều này thân thiện hơn với người dùng (bạn sẽ không phải nói với họ rằng "họ đã làm sai điều gì đó"), ít có khả năng làm gián đoạn luồng chuyển đổi và bạn có thể dễ dàng xoá khoảng trắng trong số trước khi xử lý.

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

Điều đặc biệt quan trọng là bạn phải kiểm thử biểu mẫu địa chỉ và thanh toán trên các nền tảng phổ biến nhất với người dùng, vì chức năng và giao diện của phần tử biểu mẫu có thể khác nhau, đồng thời sự khác biệt về kích thước khung nhìn có thể dẫn đến vấn đề về vị trí. 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 số liệu phân tích và RUM

Việc kiểm thử khả năng hữu dụng và hiệu suất cục bộ có thể hữu ích, nhưng bạn cần có dữ liệu thực tế để hiểu rõ cách người dùng trải nghiệm biểu mẫu thanh toán và địa chỉ của bạn.

Để làm được điều đó, bạn cần có số liệu phân tích và tính năng Giám sát người dùng thực – dữ liệu về trải nghiệm của người dùng thực tế, chẳng hạn như thời gian tải trang thanh toán hoặc thời gian hoàn tất thanh toán:

• Chỉ số phân tích trang: lượt xem trang, tỷ lệ thoát và số lượt thoát khỏi trang cho mọi trang có biểu mẫu.
• Phân tích lượt 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ỏ ngang quy trình thanh toán và hành động mà họ thực hiện khi tương tác với biểu mẫu.
• 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 trang thanh toán có tải chậm hay không và nếu có thì nguyên nhân là gì.

Phân tích trang, phân tích lượt tương tác và đo lường hiệu suất của người dùng thực tế trở nên đặc biệt có giá trị khi kết hợp với nhật ký máy chủ, dữ liệu chuyển đổi và thử nghiệm A/B, cho phép bạn trả lời các câu hỏi như liệu mã giảm giá có làm tăng doanh thu hay không hoặc liệu việc thay đổi bố cục biểu mẫu có cải thiện số lượt chuyển đổi hay không.

Nhờ đó, bạn có cơ sở vững chắc để ưu tiên nỗ lực, thực hiện thay đổi và khen thưởng thành công.

Tiếp tục học hỏi

• 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 đăng ký
• Xác minh số điện thoại trên web bằng WebOTP API
• 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
• Frank's Compulsive Guide to Postal Addresses (Hướng dẫn bắt buộc của Frank về địa chỉ bưu chính) cung cấp các đường liên kết hữu ích và hướng dẫn chi tiết về định dạng địa chỉ ở hơn 200 quốc gia.
• Danh sách quốc gia có một công cụ để tải mã và tên quốc gia xuống bằng nhiều ngôn ngữ, ở nhiều định dạng.

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