Biểu mẫu di động: cách thay thế danh sách thả xuống. Xử lý hàng loạt các tài liệu bảng tính. Tối ưu hóa biểu mẫu cho thiết bị di động

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 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ẽ khiến biểu mẫu của bạn bớt bận rộn hơn, đặc biệt khi bạn nhắc người dùng một số lượng lớn 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 mà 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 vào 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 đề phản hồi

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 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: 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 vào 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 chờ 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.

Trong bài viết này, chúng ta sẽ xem xét một số cải tiến biểu mẫu mới trong HTML5 và phân tích cách chúng giúp cải thiện giao diện người dùng trên điện thoại 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 người thường gặp khó khăn với công việc HTMLĐầu vào. Danh sách đầy đủ Các kiểu 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 rồi danh sách này không hoàn thành. Đ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 này được hỗ trợ tín hiệu đầu vào, khi đó 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ẽ hiển thị ở ô tương ứng giá trị thập lục phân RGB.

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, ủng hộ thuộc loại này 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ó, bản đồ chính xác chỉ có thể được tìm thấy trong Opera di động 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 khối tiện lợiđể 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 là Ngày cũng như các tùy chọn kiểu ngày giờ và datetime-local cung cấp các thuộc tính, giá trị hữu ích như min và max, có thể giới hạn và xác thực dữ liệu đầ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

Cái này Kiểu đầu vào cho phép người dùng chỉ định ngày và giờ trong đị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, trong khi 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 các 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. Loại email đầ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, điều này rất công cụ 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 đề nghị giao diện thân thiện với người dùng bàn phím số.

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ừ mọi người trình duyệt phổ biến, ngoại trừ Opera Mini.

7. Xác thực mẫu

Nó rất thuận tiện để thiết lập đặc biệt Thuộc tính HTMLĐầu vào để kiểm tra 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:

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à với việc tung ra các mẫu mới và cải tiến, đơn giản là 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ự trỗi dậy 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ọ 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 tô màu cho nó 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 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 web 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 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 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 mà 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.

Dựa theo yêu cầu của bạn biểu mẫu trang web di động thành lập 2833 kết quả

• Phát triển điều hướng tốt cho một trang web là một trong những yếu tố then chốt sự phát triển tốt của dự án và thực tế là khách truy cập bắt đầu khám phá trang web để kiểm tra tất cả các ngóc ngách (dấu trang, hình ảnh, văn bản, v.v.) để biết thông tin. Hãy xem và lấy cảm hứng cho những dự án tuyệt vời của riêng bạn.

  Tuân thủ: 7

• Khi thiết kế ứng dụng di động Có nhiều cạm bẫy khác nhau đang chờ đợi nhà phát triển có thể phá hỏng mọi nỗ lực. TRONG bài học này Chúng tôi sẽ mô tả 6 lỗi nguy hiểm và phổ biến nhất khi làm việc trên các phiên bản dành cho thiết bị di động.

  Tuân thủ: 7

• Trong bài học này, chúng ta sẽ tìm hiểu cách tạo một biểu mẫu tin nhắn gốc dưới dạng máy đánh chữ. Tất cả các chức năng chính của thiết bị này đã không còn được sử dụng sẽ được khôi phục cẩn thận bằng sử dụng CSS và jQuery.

  Tuân thủ: 7

• Ở đây bạn sẽ tìm ra toàn bộ sự thật về các trang web thương mại điện tử: Theo nghiên cứu gần đây trong lĩnh vực này, ít nhất 59,8% người mua tiềm năng từ chối thanh toán cho thứ họ đã thêm vào giỏ hàng (MarketingSherpa 59,8%, See Why 83% và MarketLive 62,14%). Câu hỏi chính: Tại sao khách hàng thường xuyên từ bỏ việc mua hàng? Thực tế là có một số sai lầm cơ bản mà các nhà phát triển trang web thương mại điện tử rất thường xuyên mắc phải. Liệu có một nguyên tắc chungĐiều đó gây khó khăn cho người dùng khi mua sản phẩm của chúng tôi? Và có cách nào có ý nghĩa để cải thiện hiệu suất bán hàng của những gì chúng tôi bán không?

  Tuân thủ: 7

• Tính năng mới thú vị nhất trong HTML5 là khả năng thêm văn bản mặc định vào các trường biểu mẫu. Thuộc tính giữ chỗ cho phép bạn hiển thị trong các trường biểu mẫu văn bản cụ thể trong khi chúng trống hoặc không được lấy nét (khi trường được lấy nét, nó sẽ bị xóa). Đây là một tính năng rất phong cách nhưng vẫn không được tất cả các trình duyệt hỗ trợ. Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách sử dụng Modernizr để xác định xem nó có được trình duyệt nhất định hỗ trợ hay không và nếu không, hãy điền động các trường biểu mẫu với văn bản mặc định bằng cách sử dụng jQuery.

  Tuân thủ: 7

• Lưới mô-đun có thể cung cấp hỗ trợ đáng kể khi tạo một trang web. Nó cung cấp cả cấu trúc trực quan cho các thành phần trang web và môi trường cho nội dung. Cô ấy tình cờ là một cách đơn giản tạo nên một website cân bằng và thống nhất.

  Tuân thủ: 7

• Khi phát triển giao diện dự án, bạn luôn muốn nó đơn giản và dễ hiểu đối với người dùng. Bất kể trang web của bạn cung cấp những gì, bạn cần tìm sự cân bằng giữa tính đơn giản và chức năng. Điều rất quan trọng là đảm bảo rằng người dùng có thể dễ dàng tìm và hiểu bất kỳ chức năng nào trong dự án của bạn, lý tưởng nhất là không cần tải các trang khác.

  Tuân thủ: 7

• Hãy tưởng tượng cảm xúc hỗn loạn của người dùng khi chỉ cần thêm một vài ký tự để gửi biểu mẫu có số lượng lớn các trường được điền thủ công và đột nhiên tất cả dữ liệu bị mất. Kinh khủng. Tất nhiên, trừ khi có cách khôi phục dữ liệu để tránh số phận của Sisyphus.