Biểu mẫu di động Jquery. Hỗ trợ các biểu mẫu di động HTML5 và các loại đầu vào HTML

Trong bài viết này, chúng ta sẽ xem xét một số cải tiến mới về biểu mẫu trong HTML5 và phân tích cách chúng giúp cải thiện trải nghiệm người dùng trên thiết bị di động. Cụ thể, chúng ta sẽ xem cách mở rộng biểu mẫu bằng các loại đầu vào bổ sung do HTML5 cung cấp và hiển thị những gì bạn có thể mong đợi từ các trình duyệt di động khác nhau.

Các loại đầu vào HTML5

HTML5 có nhiều loại đầu vào mới cho biểu mẫu. Những loại đầu vào này cho phép kiểm soát và xác minh dữ liệu đầu vào tốt hơn. Một số trong số chúng đặc biệt hữu ích cho người dùng di động thường gặp khó khăn khi sử dụng Đầu vào HTML. Danh sách đầy đủ các loại dữ liệu đầu vào được đưa ra dưới đây:

• màu sắc - lựa chọn màu sắc
• ngày - lựa chọn ngày
• ngày giờ - chọn ngày và giờ
• email - xác thực mặt nạ email
• số - nhập số
• phạm vi - thanh trượt phạm vi
• tìm kiếm - trường tìm kiếm
• tel - xác thực mặt nạ điện thoại
• thời gian - thời điểm
• url - xác thực URL

Tất nhiên, danh sách này không đầy đủ. Điều này không bao gồm các loại được tiêu chuẩn chấp nhận, nhưng bản chất của chúng vẫn chưa rõ ràng. Chúng tôi sẽ xem xét các loại phổ biến và phù hợp nhất trong số các loại trên trong bài viết này cùng với các ví dụ.

1. Màu loại đầu vào

Nếu loại đầu vào này được hỗ trợ, trình duyệt của người dùng sẽ gọi bộ chọn màu tích hợp trên thiết bị khách. Màu được chọn sẽ được biểu thị bằng giá trị thập lục phân RGB tương ứng.

Ví dụ về công việc:

Phong cách của cửa sổ bật lên sẽ phụ thuộc vào trình duyệt của bạn. Nhấp vào nút để xem nó hoạt động như thế nào.

Chọn màu của bạn:

Không may thay, hỗ trợ loại này bởi trình duyệt di độngĐể lại nhiều mong muốn. Trong số tất cả những cái hiện có, chỉ có thể tìm thấy hiển thị chính xác trong Opera Mobile và Chrome Android. Đối với tất cả các trình duyệt khác, một trường văn bản trống sẽ được hiển thị. Điều này đáng để ghi nhớ. Ngoài ra, bạn có thể phác thảo bảng màu trong JS hoặc sử dụng plugin.

2. Nhập ngày tháng

Nếu được trình duyệt hỗ trợ, nó sẽ cung cấp một khối thuận tiện để chọn ngày.

Ví dụ về công việc:

Lựa chọn ngày:

Lưu ý rằng loại đầu vào Ngày, cũng như các biến thể loại ngày giờ và ngày giờ-cục bộ, cung cấp các thuộc tính, giá trị hữu ích như min và max, có thể đặt giới hạn và xác thực cho đầu vào của người dùng. Chúng tôi sẽ chứng minh điều này dưới đây trong văn bản.

Loại Ngày nhập HTML được hầu hết các trình duyệt hỗ trợ. Các trường hợp ngoại lệ là Opera Mini và trình duyệt mặc định của Android.

3. Kiểu đầu vào datetime và datetime-local

Loại đầu vào này cho phép người dùng chỉ định ngày và giờ ở định dạng thuận tiện. Nếu được hỗ trợ, nó sẽ được hiển thị dưới dạng tiện ích ngày/giờ gốc của thiết bị. Sự khác biệt giữa các loại đầu vào này là loại đầu tiên được gắn với giờ thế giới và loại thứ hai không chứa bất kỳ thông tin múi giờ nào.

Ví dụ về công việc:

Chọn ngày và giờ:

Không được hỗ trợ trong IE Mobile và Opera Mini. Trên các trình duyệt phổ biến khác (di động), loại này hoạt động ít nhiều chính xác, nhưng trường hợp lỗi và trục trặc không phải là hiếm. Hãy ghi nhớ điều này và đừng quên các dự phòng JavaScript.

4. Email kiểu đầu vào

Loại này không yêu cầu đại diện. Nhiều người đã sử dụng nó và nó được hầu hết các trình duyệt hỗ trợ.

Ví dụ về công việc:

Nhập địa chỉ email của bạn:

Trước khi gửi, trình duyệt sẽ kiểm tra tính chính xác của trường đã điền và thông báo cho người dùng nếu định dạng đầu vào không hợp lệ. Việc tính toán dựa trên biểu thức sau (text)@(domain)

5. Loại đầu vào và số điện thoại

Đây là một loại khác không cần phải thảo luận nhiều. Tuy nhiên, trong môi trường di động, nó là một công cụ rất hữu ích. Sử dụng nó trong trường hợp người dùng được cung cấp một tập hợp các số duy nhất. Trong tình huống này, anh ta sẽ được cung cấp giao diện bàn phím số tiện lợi.

Ví dụ về công việc:

Chọn giá trị:

Phạm vi mặc định trong hầu hết các trình duyệt là từ 0 đến 100. Nghĩa là vị trí ngoài cùng bên trái của thanh trượt là 0 và vị trí xa nhất là 100. Bạn có thể thay đổi phạm vi bằng cách sử dụng thuộc tính tối thiểu và tối đa. Chúng ta cũng có thể đặt giá trị bước thông qua thuộc tính step. Vì vậy, để chỉ định phạm vi từ 5 đến 50, với gia số là 5, chúng ta sẽ sử dụng:

Hỗ trợ tất cả các trình duyệt phổ biến ngoại trừ Opera Mini.

7. Xác thực mẫu

Sẽ rất thuận tiện khi đặt thuộc tính Đầu vào HTML đặc biệt để xác thực dữ liệu đầu vào. Ví dụ: chúng tôi muốn tạo một trường phải điền vào:

Những người sử dụng ứng dụng di động hoặc trang web của bạn đều có mục đích cụ thể. Thông thường, thứ đứng giữa người dùng và mục tiêu của anh ta là hình thức. Trên thực tế, biểu mẫu được coi là bước cuối cùng trong quá trình đạt được mục tiêu của người dùng. Đây là lý do tại sao điều quan trọng là người dùng phải điền vào biểu mẫu càng nhanh càng tốt và không gặp bất kỳ trở ngại nào.

Thực hiện theo bảy quy tắc sau để tạo các biểu mẫu đơn giản, rõ ràng:

Quy tắc số 1: Biểu mẫu phải tương thích với cách người dùng nhập dữ liệu của họ

Đảm bảo rằng các trường biểu mẫu không bị che khuất bởi các thành phần giao diện (chẳng hạn như bàn phím). Khi người dùng điền vào các trường của biểu mẫu, nó sẽ tự động di chuyển các trường lên trên.

Quy tắc số 2: Giảm thiểu số lượng trường nhập và nhu cầu nhập của người dùng

Biểu mẫu trông càng dài và phức tạp thì người dùng càng ít muốn điền vào chỗ trống, đặc biệt là trên màn hình nhỏ. Việc giảm số lượng trường nhập sẽ làm cho biểu mẫu của bạn bớt lộn xộn hơn, đặc biệt khi bạn yêu cầu người dùng cung cấp nhiều thông tin.

Làm cho biểu mẫu đơn giản và ngắn gọn nhất có thể

Nhưng giảm số lượng trường là không đủ. Bạn cũng nên chú ý đến công sức người dùng bỏ ra khi nhập dữ liệu. Việc in ấn đòi hỏi mức độ tương tác cao; có khả năng xảy ra lỗi cao, ngay cả khi nhập từ bàn phím kích thước đầy đủ (đặc biệt là trên màn hình cảm ứng).

Vì vậy, hãy cố gắng giảm thiểu nhu cầu gõ phím và lỗi của người dùng.

Mặc định thông minh

Mặc định thông minh giúp người dùng điền vào tất cả các trường biểu mẫu nhanh hơn và chính xác hơn. Ví dụ: bạn có thể chọn trước quốc gia cư trú của người dùng dựa trên dữ liệu vị trí địa lý của họ.

Tự động phát hiện vị trí sẽ giúp người dùng tiết kiệm thời gian tìm kiếm phòng khách sạn

Nút radio cho các lựa chọn tương tự nhưng loại trừ lẫn nhau

Khi người dùng phải lựa chọn từ danh sách các tùy chọn, hãy cân nhắc sử dụng danh sách thẻ theo chiều ngang. Điều này cho phép bạn sử dụng hiệu quả hơn không gian màn hình có sẵn.

Thanh trượt cho mức giá tối thiểu/tối đa hoặc phạm vi ngân sách

Hãy cân nhắc sử dụng thanh trượt cho các trường chứa giá hoặc ngân sách. Bằng cách này, người dùng có thể di chuyển thanh trượt đến giá trị tối thiểu/tối đa. Thanh trượt dễ dàng di chuyển theo chiều ngang và bạn có thể dễ dàng tùy chỉnh hành động này bằng cách sử dụng tín hiệu trực quan. Nhưng hãy nhớ rằng các con số không được ẩn khi tương tác với thanh trượt (đặc biệt là khi sử dụng ngón tay cái).

Thanh trượt AirBnB để chọn giá

Quy tắc số 3: Tiêu đề biểu mẫu phải ở phía trên các trường hoặc nổi

Tiêu đề cho người dùng biết mục đích chính của một trường và văn bản rõ ràng là một trong những cách chính giúp giao diện người dùng dễ truy cập hơn.

Tại sao bạn không bao giờ nên sử dụng tiêu đề văn bản bên trong một trường

Tiêu đề trong trường (hoặc phần giữ chỗ) là văn bản nằm bên trong trường biểu mẫu và biến mất ngay khi người dùng bắt đầu nhập dữ liệu của họ.

Tiêu đề bên trong trường
Mặc dù các tiêu đề trong hộp trông đẹp mắt về mặt thẩm mỹ nhưng lợi ích này thường được đánh giá quá cao. Sai lầm chính là mất bối cảnh. Sau khi người dùng nhấp vào trường, dòng chữ sẽ biến mất. Và do đó, anh ta không thể xác minh rằng mình đã viết chính xác những gì cần thiết.

Văn bản bên trong một trường không phải là sự thay thế tốt nhất cho tiêu đề trực quan

Ngoài ra, một số người dùng thấy rằng nội dung nào đó đã được viết sẵn trong một trường có thể nghĩ rằng trường đó đã được điền sẵn và họ không cần nhập bất kỳ thứ gì khác và có thể bỏ qua việc điền.

Tại sao tiêu đề trường căn trái lại không tốt cho thiết bị di động

Điều chính cần cân nhắc khi sử dụng tiêu đề căn trái trên thiết bị di động là kích thước màn hình và tỷ lệ khung hình. Nếu tiêu đề bên trái nằm đối diện với trường đó thì với hướng màn hình dọc, bạn sẽ chỉ còn rất ít khoảng trống cho trường đó. Điều này tạo ra một số khó khăn khi sử dụng vì không còn đủ không gian để hiển thị nội dung người dùng nhập. Việc không thể nhìn thấy văn bản đã nhập sẽ gây ra sự cố cho người dùng vì nó khiến họ không thể nhanh chóng nhận thấy lỗi nhập trước khi gửi biểu mẫu.

Rất khó nhận ra lỗi nếu dữ liệu không hiển thị đầy đủ

Tiêu đề hàng đầu hoặc Tiêu đề đáp ứng

Tiêu đề biểu mẫu phải ở đầu các trường biểu mẫu để người dùng có thể biết họ đang điền gì và điền như thế nào. Ưu điểm chính của việc đặt tiêu đề biểu mẫu phía trên biểu mẫu là bạn có thể kéo dài biểu mẫu theo toàn bộ chiều rộng của màn hình và làm cho biểu mẫu đủ lớn để nhập dữ liệu (ví dụ: với cỡ chữ 16 pixel). Một lợi thế nữa sẽ là khả năng viết tiêu đề rõ ràng và dễ hiểu (không giới hạn 1-2 từ).

Nhược điểm chính của việc đặt tiêu đề phía trên các trường là toàn bộ biểu mẫu chiếm nhiều không gian theo chiều dọc hơn, điều đó có nghĩa là người dùng cần phải cuộn màn hình. Tuy nhiên, đây không phải là vấn đề quá nghiêm trọng - ngày nay mọi người đều đã quen với việc cuộn.

Ngoài ra, bạn có thể sử dụng tiêu đề phản hồi để đảm bảo rằng người dùng đã điền chính xác vào trường. Văn bản giữ chỗ được hiển thị theo mặc định, nhưng sau khi nhấn vào trường và nhập văn bản, văn bản giữ chỗ sẽ di chuyển lên đầu trường, như minh họa bên dưới.

Quy tắc số 4: Việc xác thực trường biểu mẫu phải diễn ra trong thời gian thực

Trong một thế giới lý tưởng, người dùng sẽ điền vào biểu mẫu những thông tin được yêu cầu và hoàn thành nhiệm vụ một cách xuất sắc. Trong thế giới thực, người dùng thường mắc lỗi. Đồng thời, người dùng không thích việc sau toàn bộ quá trình điền các trường, họ đến nút “gửi” và phát hiện ra rằng mình đã mắc lỗi. Việc thông báo cho người dùng về thành công/lỗi trong trường ngay sau khi điền là đúng. Thông báo xác thực ngay lập tức thông báo cho người dùng rằng thông tin đã nhập là chính xác. Cách làm này cho phép người dùng sửa lỗi nhanh hơn và không phải đợi lỗi hiển thị sau khi nhấp vào nút gửi.

Nếu bạn mong đợi câu trả lời cụ thể cho các câu hỏi, bạn cần chỉ ra ngay những gì cần nhập và dưới hình thức nào.

Xác thực chuỗi cũng có thể là một giải pháp. Trong ví dụ bên dưới, bạn có thể thấy một ví dụ hay về cách bạn có thể sửa một lỗi tiềm ẩn.

Quy tắc số 5: Hiển thị bố cục bàn phím theo dữ liệu đầu vào

Người dùng thích cách bố trí bàn phím tương ứng trong ứng dụng. Ví dụ: khi người dùng được yêu cầu nhập số thẻ tín dụng, chỉ hiển thị mục nhập chữ số để khuyến khích người dùng nhập số thay vì ký hiệu. Điều này sẽ tăng tốc độ điền và giảm số lỗi đầu vào có thể xảy ra.

Bạn cần đảm bảo rằng tính năng này được triển khai xuyên suốt ứng dụng chứ không phải trên từng phần riêng lẻ của ứng dụng.

Quy tắc số 6: Cung cấp thông tin hữu ích trong ngữ cảnh

Đôi khi, cần phải cung cấp thông tin liên quan và hữu ích để đơn giản hóa quá trình hoàn thành biểu mẫu của người dùng. Nhưng văn bản đi kèm như vậy chỉ nên được sử dụng khi thực sự cần thiết:

• Khi lập kế hoạch ngày, người dùng đánh giá cao ngữ cảnh chẳng hạn như lịch tích hợp để xác định các ngày trong tuần. Điều này giúp giảm nhu cầu thoát khỏi ứng dụng để xem lịch, giảm nguy cơ người dùng bị phân tâm khỏi nhiệm vụ chính của họ.

• Mọi người có thể lo ngại về tính bảo mật dữ liệu của họ, vì vậy bạn cần cho họ thấy rằng dữ liệu của họ sẽ không được chia sẻ với bên thứ ba.

Theo nguyên tắc cư xử đúng mực, bạn không nên kéo dài lời giải thích của mình quá 100 ký tự.

Quy tắc số 7: Sử dụng định dạng linh hoạt

Một số tác vụ yêu cầu thông tin rất chính xác từ người dùng. Tuy nhiên, đồng thời, việc yêu cầu người dùng cung cấp thông tin theo một hình thức cụ thể có thể đi ngược lại các nguyên tắc về khả năng sử dụng tốt. Nếu bạn yêu cầu người dùng nhập thông tin số (chẳng hạn như số điện thoại) vào biểu mẫu, hãy linh hoạt và tạo các màn hình có thể hỗ trợ các định dạng đầu vào khác nhau và hiển thị thông tin theo cách thân thiện nhất với người dùng để tránh sai sót.

Không sử dụng định dạng nhập dữ liệu cố định

Phần kết luận

Người dùng có thể có đủ loại nghi ngờ khi điền vào biểu mẫu, vì vậy bạn nên cố gắng làm cho quy trình trở nên đơn giản nhất có thể. Tất cả các mẹo được mô tả trong bài viết này có thể cải thiện đáng kể khả năng sử dụng của biểu mẫu.

Bài viết này là một thông báo về chức năng mới.
Không nên sử dụng nội dung của bài viết này để tìm hiểu chức năng mới.
Mô tả đầy đủ về chức năng mới sẽ được cung cấp trong tài liệu dành cho phiên bản tương ứng.
Danh sách đầy đủ các thay đổi trong phiên bản mới được cung cấp trong tệp v8Update.htm.

Được triển khai trong phiên bản 8.3.11.2867.

Chúng tôi tiếp tục phát triển nền tảng di động, bổ sung thêm chức năng đã có sẵn trên nền tảng dành cho máy tính cá nhân. Ngoài ra, chúng tôi đang phát triển các khả năng nền tảng cụ thể chỉ phù hợp với thiết bị di động. Bây giờ chúng tôi sẽ cho bạn biết về một số cải tiến quan trọng nhất.

Người lập kế hoạch

Mô hình đối tượng của bộ lập lịch “di động” không thay đổi, nhưng cách người dùng tương tác với bộ lập lịch đã thay đổi, vì các phương thức nhập thông tin trên thiết bị di động khác với các phương pháp được sử dụng trên máy tính để bàn.

Ví dụ: chỉnh sửa nhanh một phần tử được thực hiện bằng một cú nhấp chuột vào phần tử đó. Nhấn và giữ sẽ hiển thị menu ngữ cảnh và sự xuất hiện của các điểm đánh dấu cho phép bạn kéo dài phần tử. Việc kéo được thực hiện bằng cách nhấn và giữ ngón tay của bạn.

Việc cuộn toàn bộ bảng kế hoạch được thực hiện bằng cách cuộn bằng một ngón tay, thu phóng bằng hai ngón tay, v.v.

Một đặc điểm của việc triển khai bộ lập lịch “di động” hiện tại là nó chưa hỗ trợ in.

Tài liệu được định dạng

Một đối tượng “mới” khác mà chúng tôi đã thêm vào nền tảng di động là Tài liệu được định dạng. Theo quan điểm của người dùng, tài liệu có định dạng “di động” chỉ khác ở chỗ bảng chỉnh sửa của nó được tích hợp vào chính bộ điều khiển và là một phần logic của bàn phím ảo. Bạn, với tư cách là nhà phát triển, không bắt buộc phải thêm nó vào cấu hình một cách riêng biệt. Bảng chỉnh sửa có giao diện khác nhau tùy thuộc vào loại thiết bị di động (điện thoại hoặc máy tính bảng).

Xem trước biểu mẫu “di động” trong bộ cấu hình

Trong bộ cấu hình, khi phát triển biểu mẫu, chúng tôi đã thêm khả năng xem biểu mẫu của bạn trông như thế nào trên thiết bị di động.

Trong bảng lệnh, bạn có thể chọn một tùy chọn giao diện Thiết bị di động và xem biểu mẫu sẽ trông như thế nào theo hướng chuẩn.

Tại đây bạn có thể xoay thiết bị di động của mình.

Ngoài ra, chúng tôi đã cho bạn cơ hội lựa chọn từ một số lượng lớn các thiết bị phổ biến.

Ngoài ra, bạn có thể xem biểu mẫu trên thiết bị di động ở ba tỷ lệ khác nhau:

• Pixel đến pixel- khi pixel màn hình thiết bị di động tương ứng với pixel màn hình cửa sổ xem trước;
• Kích thước thực sự- khi kích thước của thiết bị di động trên màn hình tương ứng với kích thước hình học của thiết bị;
• Theo kích thước cửa sổ- khi tỷ lệ hiển thị được chọn sao cho vùng hiển thị “di động” vừa với cửa sổ xem trước mà không cần cuộn.

Xử lý hàng loạt tài liệu bảng tính

Chúng tôi đã thêm một số đối tượng mới vào nền tảng di động cho phép bạn tạo các gói tài liệu được hiển thị. Chức năng này tương tự như chức năng được tìm thấy trong nền tảng PC. Vì vậy, bây giờ bạn có thể gửi nhiều tài liệu để in cùng một lúc.

Phát triển các thông báo có thể gửi được

Chúng tôi đã triển khai hỗ trợ cho dịch vụ thông báo đẩy của Windows (WNS, Dịch vụ thông báo của Windows). Giờ đây, bạn có thể sử dụng chức năng gửi thông báo khi chạy ứng dụng di động trên nền tảng của dòng Windows.

Chúng tôi cũng đã làm lại hệ thống xử lý lỗi khi gửi thông báo đã gửi. Trong trường hợp lỗi trước đây được đưa ra dưới dạng ngoại lệ, giờ đây lỗi đó được đưa ra dưới dạng giá trị mà bạn có thể xử lý bằng ngôn ngữ tích hợp.

Tăng tốc phần cứng trong hệ điều hành Android

Trên các phiên bản hệ điều hành Android 4.4.2 trở lên, nền tảng di động hiện sử dụng tính năng tăng tốc phần cứng. Điều này cho phép chúng tôi tăng tốc độ kết xuất giao diện lên 1,5 – 3 lần.

Hãy hỏi bất kỳ người lớn nào họ không thể rời khỏi nhà mà không có món đồ nào và họ sẽ trả lời bạn: chìa khóa, ví, điện thoại di động. Với sự phát triển của các nhà sản xuất thiết bị di động và sự ra đời của các mẫu máy mới và cải tiến, không thể không khuất phục trước xu hướng đang phát triển này.

Số liệu từ năm 2014 cho thấy chỉ riêng ở Mỹ, 90% người trưởng thành có điện thoại di động, trong đó 58% là người sở hữu điện thoại thông minh. 42% người Mỹ sở hữu máy tính bảng Trong một báo cáo, eMarketer dự đoán đến cuối năm 2014, mọi người sẽ sử dụng khoảng 1,75 tỷ điện thoại thông minh trên toàn thế giới.

Những con số này chỉ khẳng định rằng các thiết bị di động ngày nay đã chuyển từ những món đồ xa xỉ thành nhu cầu thiết yếu hàng ngày của chúng ta. Nếu trước đây, điện thoại chỉ là công cụ liên lạc thì giờ đây chúng ta đều dựa vào nó khi làm việc, thư giãn hay đi mua sắm.

Tối ưu hóa biểu mẫu cho thiết bị di động

Sự nổi lên của điện thoại thông minh không chỉ giúp người tiêu dùng mua sắm dễ dàng hơn. Đây là sự bổ sung đáng hoan nghênh cho ngành mua sắm trực tuyến đang phát triển. Theo thời gian, không chỉ các doanh nghiệp trực tuyến mà cả các doanh nghiệp ngoại tuyến cũng bắt đầu hiểu được tầm quan trọng của điện thoại di động, cùng với các kênh khuyến mãi khác trong việc thu hút khách hàng.

Các biểu mẫu phản hồi đóng một vai trò rất lớn trong mua sắm trực tuyến và chúng cũng là yếu tố cốt lõi trong nền tảng di động. Chúng tôi thường gặp chúng khi mua hàng và trang web yêu cầu chúng tôi cung cấp thông tin cụ thể như tên, địa chỉ, số điện thoại và thông tin thẻ tín dụng. Tuy nhiên, nhiều người mua nhận thấy việc điền đơn là một công việc tẻ nhạt và có thể làm mất đi sự quan tâm của họ. Ngoài ra, người mua hàng trực tuyến thường gặp phải những thách thức như thiếu thời gian hoặc kết nối Internet kém, điều này có thể tác động tiêu cực đến tỷ lệ chuyển đổi trên trang web dành cho thiết bị di động của bạn.

Dưới đây là 10 cách để tăng tốc hiệu suất giao dịch trên thiết bị di động của khách hàng và cũng làm cho trải nghiệm mua sắm trực tuyến của họ trở nên thú vị.

1. Chỉ bao gồm những chi tiết quan trọng nhất trong biểu mẫu của bạn.

Nếu bạn không đủ kiên nhẫn để điền vào hàng loạt biểu mẫu trên một trang web khi mua sắm trực tuyến thì khách hàng của bạn có thể cũng cảm thấy như vậy. Có sự khác biệt giữa việc điền vào biểu mẫu Đầy đủ và điền vào biểu mẫu đơn giản để mua thứ gì đó từ cửa hàng trực tuyến. So với phiên bản sau, phiên bản đầu tiên của biểu mẫu có thể khá khó chịu và bạn có nguy cơ mất khách hàng khi anh ta cảm thấy mệt mỏi khi điền vào biểu mẫu, đặc biệt nếu anh ta thấy rằng mình cần cung cấp ba số điện thoại khác nhau.

Làm cho việc mua sắm trực tuyến trên thiết bị di động trở nên thuận tiện bằng cách cung cấp cho khách hàng của bạn một mẫu đơn đặt hàng đơn giản nhưng đầy đủ. Chỉ yêu cầu người dùng những thông tin thực sự quan trọng, chẳng hạn như tên đầy đủ, địa chỉ email, số điện thoại, thông tin giao hàng và thông tin thẻ tín dụng. Bạn cũng có thể bao gồm danh sách thả xuống gồm các tiểu bang hoặc quốc gia mà bạn gửi hàng đến hoặc tốt hơn nữa là yêu cầu ứng dụng di động của bạn nhắc nhở về vị trí địa lý từ khách hàng. Bằng cách này, bạn có thể nhận được địa chỉ của họ một cách nhanh chóng và chính xác.

2. Sử dụng căn chỉnh chiều cao cho nhãn và trường nhập.

Điện thoại thông minh có diện tích xem hạn chế so với PC, vì vậy điều quan trọng là bạn phải thiết kế hình dạng giúp tối đa hóa diện tích này. Một cách để thực hiện việc này là sử dụng căn chỉnh dọc cho các trường biểu mẫu của bạn. Bạn thấy đấy, khi một biểu mẫu sử dụng căn chỉnh theo chiều ngang, có khả năng không phải tất cả thông tin sẽ vừa với màn hình điện thoại thông minh và nhãn hoặc trường nhập có thể bị mất. Những mẫu đơn đặt hàng như vậy có thể trông cồng kềnh đối với người mua, điều này có thể làm giảm sự quan tâm của họ.

Mặt khác, nếu nhãn và trường nhập liệu được đặt theo chiều dọc, khách hàng của bạn sẽ dễ dàng nhìn thấy ngay thông tin họ đang yêu cầu, bao gồm cả những gì họ cần điền. Điều này sẽ giúp họ có thể tin tưởng vào tính bảo mật của giao dịch. Bố cục này cũng sẽ ngăn người mua hàng bỏ lỡ bất kỳ trường nhập liệu nào hoặc tệ hơn là điền lại biểu mẫu.

Thêm vào đó, nó sẽ giảm thiểu sự lộn xộn về mặt hình ảnh của các hình dạng của bạn. Nút “Đây là gì” và “Chi tiết khác” có thể được đặt trên phiên bản di động của trang web của bạn. Nếu các nút này cần được đặt trên một biểu mẫu, hãy đặt chúng sao cho khách hàng không bị phân tâm khi mua hàng.

3. Sử dụng menu thả xuống và danh sách thả xuống

Một hạn chế khác do vùng xem hạn chế trên thiết bị di động là việc chúng ta phải cuộn vô tận để xem toàn bộ trang hoặc điền vào biểu mẫu. Mặc dù thao tác cuộn là hiện tượng phổ biến nhưng người dùng điện thoại thông minh muốn có một phương tiện mua hàng trực tuyến nhanh chóng.

Sử dụng menu kéo xuống và danh sách thả xuống có thể giúp bạn giảm thời gian khách hàng bỏ ra để điền vào biểu mẫu. Thay vì buộc người mua hàng phải lựa chọn trong số lượng lớn các tùy chọn, bạn có thể nhóm các sản phẩm riêng lẻ thành các danh mục. Các menu kéo xuống cũng hữu ích trong việc liên kết các mô tả về các sản phẩm chính mà bạn muốn đưa vào một trang. Chỉ cần nhớ đừng bắt đầu mô tả chúng khi menu đang mở rộng.

4. Sử dụng danh sách lựa chọn phù hợp

Khi danh sách thả xuống hoặc menu kéo xuống không vừa với biểu mẫu trang web dành cho thiết bị di động của bạn, bạn có hai tùy chọn tuyệt vời cho biểu mẫu trên thiết bị di động: trường nhập tìm kiếm dự đoán và danh sách thả xuống riêng tư.

Các trường nhập tìm kiếm dự đoán cho phép khách hàng của bạn tìm kiếm sản phẩm hoặc dịch vụ họ cần bằng cách sử dụng từ khóa và cũng liệt kê tất cả các kết quả tương tự. Loại biểu mẫu này lý tưởng trong trường hợp việc tìm kiếm dự kiến ​​sẽ mất nhiều thời gian hoặc khi có một số sản phẩm không thuộc các danh mục riêng biệt. Mặt khác, danh sách thả xuống đóng lại hoạt động tốt với danh sách các mục menu cụ thể được sắp xếp theo một thứ tự cụ thể, chẳng hạn như thứ tự bảng chữ cái hoặc thứ tự thời gian.

5. Nhập dữ liệu đầu vào dễ dàng

Bạn có thể đã từng gặp các trường nhập liệu trên biểu mẫu trên cả trang web và trang web dành cho thiết bị di động. Đôi khi chúng được chia thành 2-3 phần, chẳng hạn như tên, địa chỉ, số điện thoại. Và mặc dù điều này hoạt động trên các trang web, nhưng trên các phiên bản di động của họ, việc sử dụng các biểu mẫu như vậy không phải lúc nào cũng phù hợp.

Thông thường, việc phân chia đầu vào yêu cầu người mua hàng trên thiết bị di động phải điền vào cả ba (hoặc hai) trường đầu vào để chỉ phản hồi với một nhãn. Nếu bạn định lạm dụng nó ở dạng tương tự, khách hàng của bạn có thể mất hứng thú với quy trình này. Ngoài ra, việc phân tách dữ liệu đầu vào có thể khiến khách hàng cảm nhận một cách mơ hồ hoặc thậm chí gây nhầm lẫn cho họ. Khi thiết kế biểu mẫu cho nền tảng di động, hãy sử dụng các trường nhập đơn giản hơn thay vì tách chúng ra. Ví dụ: thay vì có hai trường riêng biệt cho họ và tên, hãy sử dụng một trường. Điều này sẽ giúp khách hàng của bạn hoàn thành biểu mẫu nhanh hơn.

6. Định dạng các nút biểu mẫu của bạn

Nút “Xác nhận” là bước cuối cùng trong quá trình mua sắm trực tuyến và cũng là nút quan trọng nhất trên biểu mẫu. Nếu vậy, bạn nên sắp xếp sao cho khách hàng của bạn vẫn tham gia vào quá trình điền vào biểu mẫu.

Làm cho nút “Xác nhận” trở nên hấp dẫn bằng cách đặt chiều rộng của nó bằng 1/3 biểu mẫu của bạn hoặc bằng cách sơn nó bằng màu sáng. Và thay vì chỉ sử dụng những từ “Xác nhận” hoặc “Gửi”, hãy sử dụng lời kêu gọi hành động hùng hồn hơn, chẳng hạn như “Đăng ký ngay” hoặc “Gửi đơn đăng ký của bạn”.

Tuy nhiên, tránh sử dụng màu sắc quá sáng hoặc làm các nút di chuyển quá nhiều vì điều này sẽ khiến khách hàng mất tập trung khi nhấp vào. Bạn có thể sử dụng các thay đổi màu sắc tinh tế hoặc di chuột khi nhấn nút để khách hàng biết rằng họ đã hoàn tất giao dịch.

7. Đặt thu phóng bằng thẻ meta khung nhìn

Duyệt trên thiết bị di động có thể phù hợp với khách hàng hoặc họ có thể phải tiếp tục phóng to trang, nhưng nếu vô tình làm điều này, họ có thể bị lạc trên trang. Bạn sẽ có thể kiểm soát điều này bằng cách sử dụng thẻ meta khung nhìn trong biểu mẫu của mình. Điều này sẽ cho phép khách hàng của bạn tránh vô tình mở rộng trang hoặc tệ hơn là mất hoàn toàn biểu mẫu.

8. Cung cấp khả năng lưu dữ liệu

Mua sắm bằng điện thoại di động có thể là thách thức đối với một số khách hàng vì có nguy cơ nhấp vào nút quay lại hoặc vô tình tải lại trang và nếu tất cả thông tin bạn điền biến mất, khách hàng của bạn có thể sẽ thoát khỏi giao dịch. Bạn có thể tránh khả năng này bằng cách cung cấp cho khách hàng của mình tùy chọn “Mở trong tab mới” khi họ nhấp vào bất kỳ liên kết nào bên ngoài biểu mẫu.

Ngoài ra, trong trường hợp người dùng không thể quay lại trang trước nữa, hãy cung cấp cửa sổ cảnh báo bằng các nút như “Đồng ý”, “OK” hoặc “Hủy”. Bằng cách này, bạn có thể thông báo cho khách hàng biết dữ liệu của họ đã được lưu trên trang web hay trong trình duyệt và do đó giúp họ quyết định tiến hành thanh toán.

9. Giúp khách hàng theo dõi tiến trình của họ

Không phải tất cả người mua đều quan tâm đến việc điền vào các mẫu phản hồi. Trong trường hợp này, sẽ rất hữu ích nếu bạn nghĩ ra một cách để cho khách hàng thấy rằng họ gần như đã hoàn thành xong việc điền thông tin. Bạn có thể thực hiện việc này bằng cách đặt thanh tải ở đầu biểu mẫu hoặc bằng cách sử dụng dòng thời gian và tỷ lệ phần trăm đơn giản để hiển thị họ đang ở bước nào. Hãy nhớ giới hạn số bước này để tiết kiệm thời gian cho khách hàng của bạn.

10. Làm cho biểu mẫu tải nhanh chóng

Một yếu tố khác bạn không nên quên là tốc độ tải biểu mẫu trên thiết bị di động của bạn. Nếu trang mất một lúc để tải, khách hàng của bạn có thể không quan tâm. Việc người dùng của bạn đã hoàn thành việc điền vào biểu mẫu cho thấy rằng họ đã sẵn sàng đặt hàng. Đừng làm họ thất vọng với những trang tải kém. Tốc độ tải biểu mẫu của bạn cũng phụ thuộc vào số lượng thành phần bạn đưa lên trang, vì vậy hãy cẩn thận khi sử dụng hình ảnh lớn.

Và như mọi khi, hãy kiểm tra biểu mẫu của bạn trên tất cả các hệ thống và thiết bị

Ngày nay, sự đa dạng của các thiết bị di động và giao diện của chúng đòi hỏi chúng ta phải thiết kế các biểu mẫu cho từng thiết bị. Do đó, hãy đảm bảo rằng bạn kiểm tra biểu mẫu của mình trên các loại thiết bị di động khác nhau, có tính đến sự khác biệt về hệ điều hành, kích thước và trình duyệt. Với thử nghiệm, bạn không chỉ có thể cải thiện biểu mẫu của mình mà còn đảm bảo rằng nó hoạt động trên tất cả các thiết bị có sẵn.