Biểu mẫu di động Jquery. 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 Cung cấp khả năng lưu dữ liệu

Nhà thiết kế UX từ IBM Zoltan Collin.

Để đánh dấu

Zoltan Collin

Các hình thức danh sách thả xuống có vẻ rõ ràng giải pháp thiết kế: Chúng dễ tạo và rẻ, không chiếm quá nhiều dung lượng, chúng tự động xác nhận thông tin bạn nhập, chúng được hỗ trợ bởi tất cả các trình duyệt và nền tảng và người dùng đã quen với chúng.

Các nhà thiết kế thường sử dụng danh sách thả xuống một cách không thích hợp, nhưng theo ý kiến của giám đốc sản phẩm của Google Luke Wroblewski, mô hình này chỉ nên được sử dụng như là phương sách cuối cùng.

Hãy xem xét một số hạn chế:

Các tùy chọn thả xuống sẽ ẩn cho đến khi người dùng nhấp hoặc nhấn vào biểu mẫu. Ngoài ra, thoạt nhìn không thể đoán trước được sẽ có bao nhiêu dòng trong danh sách - hai hoặc năm mươi.
Việc chọn một tùy chọn từ danh sách thả xuống là một quá trình gồm nhiều bước, đặc biệt là trên thiêt bị di độngà: đầu tiên người dùng cần chạm vào biểu mẫu và mở các tùy chọn, cuộn xuống và tìm cái mình cần, chọn nó và đóng danh sách.
Danh sách thả xuống khiến các nhà thiết kế lười biếng vì rất dễ dàng thêm tất cả các tùy chọn có thể có vào một danh sách mà không có bất kỳ mức độ ưu tiên nào. Do đó, danh sách thả xuống rất giống với một mẫu khác - menu "hamburger".
Cuộn qua các danh sách dài như chọn một quốc gia là một cơn ác mộng. Đặc biệt là trên các thiết bị di động, nơi thường không có tính năng tìm kiếm bằng bàn phím.
Trên một số thiết bị, trường hiển thị các tùy chọn rất nhỏ nên việc vuốt có thể là một cơn ác mộng.

Số lượng tùy chọn hiển thị danh sách trên iOS có vẻ cực kỳ không đáng kể

Tin tốt là có một số lượng lớn các phần tử thay thế để nhập dữ liệu, trong nhiều trường hợp sẽ hoạt động tốt hơn danh sách thả xuống.

Ước tính số lựa chọn

Bạn không nên sử dụng danh sách thả xuống cho những quyết định mà bạn cần chọn một trong hai phương án. Thay vào đó hãy thử chọn hộp kiểm hoặc nút radio.

Vì số lượng nhỏĐối với các tùy chọn loại trừ lẫn nhau, biểu mẫu ở dạng nút radio hoặc nút Điều khiển phân đoạn là phù hợp. Người dùng sẽ thấy ngay tất cả các tùy chọn có sẵn và không phải mở rộng danh sách.

Ví dụ về sử dụng các nút Điều khiển được phân đoạn

Số lượng tùy chọn hiển thị tùy thuộc vào chiều rộng màn hình và độ dài văn bản. Tuy nhiên, bạn không nên sử dụng nhiều hơn năm tùy chọn

Sử dụng biểu mẫu nhập có danh sách thả xuống được lọc để có số lượng lớn thông tin chính xác một số lựa chọn nhất định, khi người dùng biết chính xác những gì mình cần tìm.

Thay vì phải cuộn qua toàn bộ danh sách, người dùng có thể nhập các chữ cái đầu tiên và chọn tùy chọn lọc

Đối với các danh sách lớn và đa dạng, tốt hơn nên sử dụng dữ liệu người dùng hiện có để đảm bảo rằng các tùy chọn trả lời phổ biến đều được đưa vào danh sách. Trong trường hợp này, 90% người dùng sẽ có thể chọn ngay tùy chọn được yêu cầu và 10% còn lại sẽ nhấp vào tùy chọn “Khác”, điều này sẽ được làm rõ trong câu hỏi tiếp theo.

Và mặc dù “Khác” không phải là nhất giải pháp tao nhã,việc ưu tiên có thể cải thiện UX cho hầu hết người dùng.

Đánh giá hình thức đầu vào ưa thích của bạn

Một trong những lợi ích của danh sách thả xuống là người dùng không phải gõ nhiều. Tuy nhiên, nếu bạn cần gõ một chút và dữ liệu được yêu cầu khá thường xuyên (ví dụ: thông tin cá nhân), thì việc nhập chúng sẽ thuận tiện hơn thay vì chọn từ danh sách.

Trên thiết bị di động, cách dễ nhất để nhập năm sinh của bạn là sử dụng bàn phím số, không phải danh sách thả xuống

Nói chung, bàn phím số là thứ quan trọng nhất phương pháp hiệu quả nhập một giá trị số.

Ngay cả khi các giá trị danh sách được sắp xếp theo thứ tự, người dùng có thể nhập chúng bằng tay dễ dàng hơn thay vì cuộn qua chúng.

Nếu điều quan trọng là bạn phải xác nhận dữ liệu mà một người nhập vào, hãy sử dụng biểu mẫu nhập có danh sách thả xuống được lọc.

Ví dụ: khi người dùng cần chỉ định trạng thái, hãy lọc danh sách Tùy chọn có sẵn có lẽ chỉ một chữ cái

Điều này đặc biệt quan trọng nếu thứ tự sắp xếp của các thành phần trong danh sách không hoàn toàn rõ ràng.

Ví dụ: người dùng không hiểu loại tiền tệ được sắp xếp theo nguyên tắc nào. Làm cho nó để họ có thể tìm kiếm theo cả tên và chữ viết tắt của nó

Điều tương tự cũng áp dụng cho danh sách các quốc gia.

Đối với số nguyên - chẳng hạn như số lượng hành khách hoặc số đồ trong xe đẩy - tốt nhất nên sử dụng bước. Nó sẽ cho phép người dùng tăng hoặc giảm giá trị chỉ bằng một cú nhấp chuột.

Vì số phân số hoặc các biến nằm trên thang đo thì tốt nhất nên sử dụng thanh trượt.

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 đủ 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 đủ những 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 cho những 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 phần tử được thực hiện bằng một cú nhấp chuột vào phần tử. Cuộc gọi nhấn dài danh mục 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. 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 phép cộng riêng biệtđến cấu hình. 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 số lượng lớn các thiết bị thông dụng.

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 vận hành Hệ thống Android Nền tảng di động hiện sử dụng phiên bản 4.4.2 trở lên 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.

Những người sử dụng của bạn ứng dụng di động hoặc trang web, theo đuổi một mục tiêu 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 ghế trống, đặc biệt là trên màn ả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 sử dụng hiệu quả hơn không gian có sẵn màn hình.

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 trường không phải là nhiều nhất thay thế tốt nhất 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). Lợi ích bổ sung Có thể viết tiêu đề rõ ràng, 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 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 thông tin cần thiết và sẽ hoàn thành xuất sắc nhiệm vụ này. 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 thông tin, họ nhấ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ụ dưới đây, bạn có thể thấy ví dụ tốt, 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ẽ làm tăng tốc độ làm đầy và giảm lượng lỗi có thể xảy rađầu vào.

Bạn cần chắc chắn rằng Cơ hội nàyđược triển khai trên toàn bộ ứng dụng chứ không phải trên từng phần riêng lẻ của nó.

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 những thông tin liên quan và thông tin hữu íchđể đơn giản hóa quá trình người dùng hoàn thành biểu mẫu. 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 người dùng thông tin chính xác. 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ợ định dạng khác nhau nhập và hiển thị thông tin ở dạng 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.

JQuery Mobile tự động thêm kiểu dáng vào biểu mẫu HTML, làm cho chúng hấp dẫn hơn, thân thiện hơn với người dùng khi chạm vào.

Cấu trúc biểu mẫu di động JQuery

JQuery Mobile để sử dụng CSS để tạo kiểu cho các phần tử biểu mẫu HTMLđể làm cho chúng hấp dẫn hơn và dễ sử dụng hơn.

Trong jQuery Mobile, bạn có thể sử dụng các yếu tố sau các hình thức:

trường nhập văn bản
Tìm kiếm trường đầu vào
nút radio
hộp kiểm
Chọn thực đơn
thanh trượt
Công tắc lật

Khi sử dụng jQuery Mobile Form, bạn nên biết:

<Форма>phần tử phải có một phương thức và thuộc tính hành động
Mỗi thành phần của biểu mẫu phải có một thuộc tính "ID" duy nhất. ID phải là duy nhất trên tất cả các trang trên toàn bộ trang web. Điều này xảy ra bởi vì Jquery di động cơ chế điều hướng một trang được trình bày theo cách mà nhiều người nhiều trang khác nhauđồng thời
Mỗi thành phần của biểu mẫu phải có nhãn. tab cài đặt Vì thuộc tính khớp với id phần tử

ví dụ

Thử nó "

Để ẩn nhãn, hãy sử dụng lớp có thể truy cập ẩn trên giao diện người dùng. Điều này thường được sử dụng khi bạn gán một phần tử làm thẻ giữ chỗ:

ví dụ

Thử nó "

Khuyên bảo: Chúng ta có thể sử dụng thuộc tính data-net-BTN="true" để thêm nút xóa nội dung của trường nhập (biểu tượng X ở bên phải trường nhập):

ví dụ

<Ярлык = "имя_файла">Tên:
<Входной тип = "текст" имя = "имя_файла" ID = "имя_файла" данных четко БТН = "истинный">

Thử nó "

Biểu tượng Biểu mẫu di động jQuery

Mẫu mã nút HTML tiêu chuẩn <вход>phần tử (nút, đặt lại, gửi). Chúng sẽ tự động hiển thị các kiểu, tự động điều chỉnh thiết bị di động cho phù hợp với máy tính để bàn:

ví dụ

<Тип входного = "Сброс" значение = "кнопка сброса">

Thử nó "

Nếu bạn cần thêm các kiểu bổ sung vào<вход>, bạn có thể sử dụng bảng thuộc tính data-* sau:

Nút để thêm biểu tượng:

<Тип входного = "Сброс" значение = "кнопка сброса">

Thử nó "

Trường vùng chứa

Để làm cho nhãn và các thành phần của biểu mẫu trông phù hợp hơn với màn hình rộng làm ơn hoặc

phần tử xung quanh phần tử nhãn/biểu mẫu được sử dụng với lớp "Chứa trường UI"

ví dụ

Thử nó "

Khuyên bảo:Để ngăn jQuery Mobile tự động thêm kiểu dáng yếu tố tương tác, thuộc tính role data use = "no".

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 để thu hút khách hàng.

Các hình thức nhận xétđóng vai trò rất lớn trong mua sắm trực tuyến, 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 về 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 hợp lệ Thông tin quan trọng, chẳng hạn như Họ và tên, Địa chỉ E-mail, 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 để làm điều này là sử dụng căn chỉnh theo chiều dọc cho các trường biểu mẫu của bạn. Bạn thấy đấy, khi nó được sử dụng cho một biểu mẫu căn chỉnh ngang, có khả năng không phải tất cả thông tin đều hiển thị trên 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ù việc cuộn màn hình là khá phổ biến nhưng người dùng điện thoại thông minh lại thích có bằng cách nhanh chóng mua sắm hàng hóa trực tuyến.

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 phải lựa chọn lượng lớn 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 từ khóa và cũng hiển thị danh sách 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, cá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ể nằm trong theo một thứ tự nhất định, ví dụ theo 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ù tính năng này hoạt động trên các trang web, nhưng trên phiên bản di động Việc sử dụng các hình thức này không phải lúc nào cũng phù hợp.

Thông thường, việc phân tách dữ liệu đầu vào yêu cầu người mua sắm trên thiết bị di động, hãy điền vào cả ba (hoặc hai) trường nhập để chỉ phản hồi cho 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, sử dụng nhiều hơn trường đơn giảnđầu vào 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 mua sắm trực tuyến, cũng như 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 quá nhiều màu sáng hoặc tạo các nút di chuyển quá nhiều vì nó khiến khách hàng của bạn mất tập trung khi nhấp vào. Bạn hầu như không thể sử dụng sự thay đổi đáng chú ý màu sắc hoặc di chuột khi nhấn nút để khách hàng của bạn 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ể nhiệm vụ đầy thử tháchđố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 đã điền biến mất thì người mua của bạn rất có thể sẽ từ chố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, tạo một cửa sổ có cảnh báo và 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 xem 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ị. Vì vậy, hãy đảm bảo bạn kiểm tra các biểu mẫu của mình dựa trên các loại khác nhau thiết bị di động, có tính đến sự khác biệt các 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.