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 hóa lượt chuyển đổi bằng cách giúp người dùng hoàn tất địa chỉ và phương thức thanh toán một cách nhanh chóng và dễ dàng nhất có thể.

Sam Dutton

Các biểu mẫu được thiết kế hợp lý sẽ giúp ích cho người dùng và tăng tỷ lệ chuyển đổi. Chỉ cần sửa một chút là bạn có thể tạo ra sự khác biệt lớn!

Sau đây là ví dụ về một hình thức thanh toán đơn giản thể hiện tất cả các phương pháp hay nhất:

Dưới đây là ví dụ về một biểu mẫu địa chỉ đơn giản thể hiện 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 từng trường của 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ị phù hợp.
• Tránh sử dụng type="number" cho các số không 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 phù hợp cho input, select hoặc textarea, thì 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 dữ liệu đầu vào cho các thuộc tính name và id các giá trị ổn định không thay đổi giữa các lần tải trang hoặc quá trình triển khai trang web.
• Tắt các nút gửi sau khi người dùng nhấn hoặc nhấp vào các nút này.
• 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 thanh toán không cần đăng nhập làm mặc định và đơn giản hoá việc tạo tài khoản sau khi quy trình thanh toán hoàn tất.
• Trình bày tiến trình thực hiện quy trình thanh toán theo các bước rõ ràng kèm theo lời kêu gọi hành động rõ ràng.
• Hạn chế các điểm thoát để thanh toán bằng cách loại bỏ những chi tiết lộn xộn và gây phân tâm.
• Hiển thị toàn bộ chi tiết đơn đặt hàng khi thanh toán và giúp bạn dễ dàng điều chỉnh đơn đặt hàng.
• Đừng yêu cầu dữ liệu bạn không cần.
• Yêu cầu tên mà chỉ cần nhập một thông tin, trừ phi bạn có lý do chính đáng để từ chối.
• Đừng dùng các ký tự chỉ có chữ La-tinh cho tên và tên người dùng.
• Cho phép nhiều định dạng địa chỉ.
• Hãy cân nhắc sử dụng một textarea duy nhất cho địa chỉ.
• Sử dụng tính năng tự động hoàn tất cho địa chỉ thanh toán.
• Quốc tế hoá và bản địa hoá khi cần.
• Hãy cân nhắc tránh tra cứu địa chỉ mã bưu chính.
• Hãy sử dụng các giá trị phù hợp để tự động hoàn thành thẻ thanh toán.
• Sử dụng một mục nhập duy nhất cho số thẻ thanh toán.
• Tránh sử dụng phần tử tuỳ chỉnh nếu chúng làm hỏng trải nghiệm tự động điền.
• Kiểm thử tại thực địa cũng như trong phòng thí nghiệm: phân tích trang, phân tích lượt tương tác và đo lường hiệu suất 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

Những thẻ này kích hoạt chức năng tích hợp sẵn của trình duyệt, cải thiện khả năng tiếp cận và tăng thêm ý nghĩa cho mã đánh dấu của bạn.

Sử dụng các phần tử HTML như dự định

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

Bạn có thể không bận tâm đến việc gói các phần tử <input> trong <form> và xử lý việc gửi dữ liệu chỉ bằng JavaScript.

Đừng làm!

<form> HTML giúp bạn sử dụng một tập hợp mạnh mẽ các tính năng tích hợp sẵn 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ợ khác truy cập được vào trang web của bạn. <form> cũng giúp việc 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ế trở nên đơn giản hơn, đồ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à đối với 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 cho hoạt động đầu vào của người dùng, hãy nhớ đặt mỗi thành phần trong phần tử <form> riêng. Ví dụ: nếu bạn có lượt tìm kiếm và đăng ký trên cùng một trang, hãy đặt mỗi mục trong <form> riêng.

Dùng <label> để gắn nhãn các phần tử

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

Liên kết nhãn với dữ liệu đầu vào bằng cách cung cấp cho thuộc tính for của nhãn cùng một 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 giá trị nhập duy nhất: đừng cố gắng gắn nhãn nhiều dữ liệu đầu vào chỉ bằng một nhãn. Tính năng này hoạt động hiệu quả nhất với các trình duyệt, và cũng tốt nhất cho 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 được liên kết, đồng thời 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 đó được lấy tiêu điểm.

Giúp các nút trở nên hữu ích

Sử dụng <button> cho các nút! Bạn cũng có thể dùng <input type="submit">, nhưng không dùng div hoặc một phần tử ngẫu nhiên nào khác hoạt động như một nút. Các phần tử nút cung cấp hành vi dễ 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.

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

Hãy cân nhắc vô hiệu hoá 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 nút nhiều lần, ngay cả khi chúng không hoạt động bình thường. Điều này có thể làm xáo trộn quy trình thanh toán và thêm vào tải máy chủ.

Mặt khác, đừng vô hiệu hoá nút gửi nằm đợi thao tác nhập thông tin đầy đủ và hợp lệ của người dùng. Ví dụ: đừng chỉ tắt nút Lưu địa chỉ vì có thông tin bị thiếu hoặc không hợp lệ. Điều đó không giúp ích 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 biểu mẫu có dữ liệu không hợp lệ, hãy giải thích cho họ về sự cố và việc cần làm để khắc phục. Điều này đặc biệt quan trọng trên thiết bị di động khi 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 hiển thị 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 các 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à cho phép trình duyệt xác thực cơ bản tích hợp.

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 thuộc tính này 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 từ một danh sách thả xuống dài, đặc biệt là trên thiết bị di động. Hãy sử dụng inputmode="numeric" để đảm bảo người dùng nhập đúng bàn phím trên thiết bị di động, cũng như 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 phù 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 hỗ trợ người dùng bằng cách lưu trữ dữ liệu một cách an toàn cũng như 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 để tránh tỷ lệ bỏ ngang ở dạng 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 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, thì bạn nên sử dụng giá trị đó. Tài liệu web MN có danh sách đầy đủ các giá trị và giải thích về cách sử dụng các giá trị đó đú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 sự 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 biểu mẫu.

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

<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 "từ chối" khách hàng vì họ "đã làm sai". Thay vào đó, hãy giúp người dùng hoàn thành biểu mẫu nhanh hơn và dễ dàng hơn bằng cách giúp họ khắc phục sự cố ngay khi chúng xảy ra. Thông qua quy trình thanh toán, khách hàng đang cố gắng cung cấp 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 ràng buộc vào các phần tử biểu mẫu để chỉ định các giá trị được chấp nhận, bao gồm min, max và pattern. Trạng thái hiệu lực 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ả CSS :valid và :invalid có thể dùng để tạo kiểu cho các phần tử bằng 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 trong khoảng từ 1900 đến 2020. Việc sử dụng type="number" sẽ ràng buộc giá trị đầu vào chỉ ở dạng số, trong phạm vi do min và max chỉ định. Nếu bạn cố nhập một số nằm ngoài phạm vi, giá trị đầu vào sẽ được thiết lập để có trạng thái không hợp lệ.

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

Các trình duyệt hiện đại cũng thực hiện xác thực cơ bản cho dữ liệu đầu vào thuộ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 có vấn đề hoặc bị thiếu. Không cần JavaScript!

Xác thực cùng dòng và cung cấp ý kiến 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 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ủ của mình sau khi gửi biểu mẫu, hãy liệt kê tất cả các vấn đề được tìm thấy và làm nổi bật rõ ràng tất cả cá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 từng trường có vấn đề để giải thích những vấn đề 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 các lỗi thường gặp—bạn có thể cần phải thiết kế lại biểu mẫu của mình.

Bạn cũng nên sử dụng JavaScript để xác thực hiệu quả 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 (API Xác thực quy tắc ràng buộc) (đượ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 sẵn để đặ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 phức tạp hơn theo thời gian thực.

Giúp người dùng tránh bị thiếu dữ liệu cần thiết

Sử dụng thuộc tính required trên dữ liệu đầu vào 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 :required lớp giả để làm nổi bật các trường bắt buộc. Không cần JavaScript!

Thêm dấu hoa thị vào nhãn cho mọi trường bắt buộc và thêm 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ó ngân sách cố định. Hãy sử dụng hết và người dùng của bạn sẽ rời đi.

Bạn cần giảm sự phiền hà và duy trì sự tập trung, đặc biệt là trên thiết bị di động. Nhiều trang web nhận được nhiều lưu lượng truy cập hơn trên thiết bị di động nhưng lại có nhiều lượt chuyển đổi hơn trên máy tính – hiện tượng được gọi là khoảng cách thương mại trên thiết bị di động. Khách hàng có thể 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. Việc 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ó một cơ hội lớn để cung cấp trải nghiệm tốt hơn trên thiết bị di động.

Trên hết, người dùng có nhiều khả năng sẽ từ bỏ các biểu mẫu trông dài, phức tạp và không có ý thức về hướng. Đ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 đang vội. Hãy yêu cầu cung cấp ít dữ liệu nhất có thể.

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

Đối với một cửa hàng trực tuyến, cách đơn giản nhất để giảm sự phiền hà đối với biểu mẫu là đặt tính năng thanh toán không cần đăng nhập ở 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 thanh toán không cần đăng nhập được trích dẫn là lý do chính khiến họ bỏ dở giỏ hàng.

Bạn có thể cho phép đă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, việc tạo tài khoản sẽ diễn ra nhanh chóng và dễ dàng cho người dùng.

Hiện tiến trình thanh toán

Để quy trình thanh toán trở nên bớt phức tạp, bạn có thể cho thấy tiến trình và nêu rõ những 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 mục tiê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ả để giúp bạn biết rõ việc cần làm ngay và bước thanh toán tiếp theo.

Sử dụng thuộc tính enterkeyhint trên thông tin nhập vào biểu mẫu để đặt nhãn phím nhập bằng bàn phím dành cho thiết bị di động. Ví dụ: sử dụng enterkeyhint="previous" và enterkeyhint="next" trong biểu mẫu nhiều trang, enterkeyhint="done" cho thông tin đầu vào cuối cùng trong biểu mẫu và enterkeyhint="search" cho thông tin nhập 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 Enterkeyhint.

Giúp người dùng dễ dàng quay lại 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ị đầy đủ thông tin chi tiết về đơn đặt hàng chứ không chỉ là một bản tóm tắt giới hạn. 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 lúc thanh toán là tránh làm gián đoạn tiến trình chuyển đổi.

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

Hạn chế các điểm thoát tiềm năng bằng cách loại bỏ các yếu tố gây rối mắt và rối mắt, 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 gỡ bỏ tính năng điều hướng và tìm kiếm khỏi quy trình thanh toán.

Đảm bảo hành trình luôn tập trung. Đây không phải là lúc để lôi kéo 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 dưới dạng 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 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 tên và biểu mẫu địa chỉ, hãy nhớ hiểu rõ loại 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 giúp bảo vệ quyền riêng tư của khách hàng và có thể giảm chi phí cũng như trách nhiệm pháp lý đối với dữ liệu phụ trợ.

Sử dụng một tên duy nhất

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

Cụ thể, trừ phi bạn có lý do chính đáng để không làm vậy, đừng bận tâm đến việc thêm dữ liệu đầu vào riêng cho tiền tố hoặc phim/chương trình (chẳng hạn như Mrs, Dr hoặc Lord). Người dùng có thể nhập cụm từ đó bằng tên của họ nếu muốn. Ngoài ra, tính năng tự động hoàn thành của honorific-prefix hiện không hoạt động trên hầu hết các trình duyệt. Vì vậy, việc thêm trường tiền tố tên hoặc tiêu đề sẽ làm hỏng trải nghiệm tự động điền vào biểu mẫu địa chỉ của 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 đảm bảo sử dụng các giá trị tự động hoàn thành thích hợp:

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

Cho phép dùng tên quốc tế

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

Để xác thực, hãy tránh sử dụng các biểu thức chính quy chỉ khớp với các ký tự La-tinh. Hệ thống chỉ sử dụng 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 thuộc 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 phần phụ trợ của bạn hỗ trợ Unicode một cách an toàn ở cả dữ liệu đầu vào và đầu ra. Unicode trong biểu thức chính quy được các trình duyệt hiện đại hỗ trợ tốt.

<!-- 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 bạn thiết kế biểu mẫu địa chỉ, hãy lưu ý đến rất nhiều định dạng địa chỉ, ngay cả trong một quốc gia. Hãy cẩn thận để không đưa ra các giả định về địa chỉ "bình thường". (Hãy xem trang UK Address Oddities! nếu bạn chưa tin chắc!)

Làm cho biểu mẫu địa chỉ linh hoạt

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

Ví dụ: đừng nhất định nhập số nhà và tên đường vào các mục 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.

Đặc biệt cẩn thận với các trường địa chỉ required. Ví dụ: các đị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.

Sử dụng hai dòng địa chỉ linh hoạt có thể hoạt động đủ tốt cho 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 vùng văn bản duy nhất cho địa chỉ

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

Phương pháp textarea phù hợp với mọi định dạng địa chỉ, rất phù hợp để cắt và dán. Tuy nhiên, hãy lưu ý rằng phương thức 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 đây họ chỉ sử dụng các biểu mẫu với address-line1 và address-line2.

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

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

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

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

Hãy lưu ý rằng cách đặt tên cho các phần địa chỉ cũng như định dạng địa chỉ sẽ khác nhau, ngay cả trong cùng một ngôn ngữ.

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

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

Bạn có thể cần tuỳ chỉnh biểu mẫu địa chỉ cho nhiều ngôn ngữ cho 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) là đủ. Nếu bạn không bản địa hoá biểu mẫu địa chỉ, hãy nhớ hiểu những mức độ ưu tiên chính cần giải quyết với nhiều định dạng địa chỉ: * Tránh cung cấp thông tin cụ thể về các phần địa chỉ, chẳng hạn như nhất định phải có tên đường hoặc số nhà. * Nếu có thể, hãy tránh tạo các trường required. Ví dụ: địa chỉ ở nhiều quốc gia không có mã bưu chính và địa chỉ ở nông thôn có thể không có tên đường hoặc tên đường. * Sử dụng cách đặt tên bao gồm: "Quốc gia/khu vực" không phải là "Quốc gia"; "ZIP/mã bưu chính" không phải là "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 "đủ hiệu quả" cho nhiều khu vực.

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

Một số trang web sử dụng một 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 một số nhược điểm tiềm ẩn.

Đề xuất địa chỉ mã bưu chính không áp dụng cho tất cả các quốc gia và ở một số khu vực, mã bưu điện có thể bao gồm một số lượng lớn các địa chỉ tiềm năng.

Người dùng sẽ gặp khó khăn khi chọn trong một danh sách dài các đị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 có thể dễ dàng và ít gặp lỗi hơn bằng cách nhập địa chỉ đầy đủ của họ chỉ bằng một lần nhấn hoặc nhấp.

Đơn giản hoá hình thức thanh toán

Hình thức thanh toán là phần quan trọng nhất của quy trình thanh toán. Thiết kế biểu mẫu thanh toán kém là nguyên nhân phổ biến khiến giỏ hàng bị bỏ ngang. Thông tin chi tiết có hại: các trục trặc nhỏ có thể khiến người dùng bỏ ngang 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ế 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 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ẻ cũng như 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 hỗ trợ người dùng bằng cách lưu trữ thông tin thẻ thanh toán một cách an 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, nhiều khả năng người dùng sẽ giữ lại hồ sơ thực 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 các phần tử tuỳ chỉnh cho ngày của 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 do 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ính năng tự động hoàn thành có mọi thông tin chi tiết khác về thẻ thanh toán, nhưng người dùng buộc phải tìm thẻ thanh toán thực của mình để 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 phần tử tuỳ chỉnh, thì có khả năng bạn sẽ mất một giao dịch bán. Thay vào đó, hãy cân nhắc sử dụng phần tử HTML chuẩn và tạo kiểu cho chúng cho phù hợp.

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

Đối với thẻ thanh toán và số điện thoại, hãy sử dụng một dữ liệu nhập duy nhất: đừng chia số điện thoại thành nhiều phần. Điều này giúp người dùng dễ dàng nhập dữ liệu hơn, xác thực đơn giản hơn và cho phép trình duyệt tự động điền. Hãy cân nhắc thực hiện tương tự với các dữ liệu 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 mục 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 thông tin đầu vào của thẻ thanh toán. Nếu người dùng cố gắng gửi biểu mẫu thanh toán có giá trị không hợp lệ, thì trình duyệt sẽ hiển thị thông báo cảnh báo và đặt tiêu điểm vào thông tin nhập vào. Không cần JavaScript!

Tuy nhiên, biểu thức chính quy pattern phải đủ linh hoạt để xử lý phạm vi độ dài số thẻ thanh toán: từ 14 chữ số (hoặc có thể ít hơn) đến 20 (hoặc nhiều hơn). Bạn có thể tìm hiểu thêm về việc tạo cấu trúc số thẻ thanh toán từ 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ố điện thoại xuất hiện trên thẻ vật lý. Điều đó thân thiện hơn với người dùng (bạn sẽ không phải cho họ biết "họ đã làm sai"), ít khả năng làm gián đoạn quy trình chuyển đổi và cũng dễ dàng xoá dấu cách trong các 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ử địa chỉ và phương thức thanh toán trên những nền tảng phổ biến nhất đối với người dùng của bạn, vì giao diện và 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ể dẫn đến vấn đề về vị trí. browserStack cho phép kiểm thử miễn phí 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 tra khả năng hữu dụng và hiệu suất trên thiết 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 các biểu mẫu thanh toán và địa chỉ của bạn.

Để làm được điều đó, bạn cần phân tích và 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, chẳng hạn như thời gian tải trang thanh toán hoặc khoảng thời gian hoàn tất giao dịch thanh toán:

• Phân tích trang: số lượt xem trang, tỷ lệ thoát và số lượt thoát cho mỗi trang có biểu mẫu.
• Số liệu phân tích về lượt tương tác: phễu mục tiêu và sự kiện cho biết vị trí người dùng bỏ ngang quy trình thanh toán và những hành động mà họ thực hiện khi tương tác với biểu mẫu của bạn.
• Hiệu suất của trang web: các chỉ số tập trung vào người dùng có thể cho bạn biết liệu các trang thanh toán có tải chậm hay không và nếu có thì nguyên nhân là gì.

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

Nhờ đó, bạn sẽ có cơ sở vững chắc để sắp xếp mức độ ưu tiên cho nỗ lực, thực hiện thay đổi và thưởng cho thành công.

Tiếp tục học

• 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 API WebOTP
• Tạo những biểu mẫu hữu ích
• Các phương pháp hay nhất để thiết kế biểu mẫu dành cho thiết bị di động
• Các chế độ kiểm soát biểu mẫu linh hoạt 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
• Hướng dẫn bắt buộc về địa chỉ bưu chính của Frank cung cấp các đường liên kết hữu ích và hướng dẫn sâu rộng 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.