Giao diện form trong hệ thống thông tin

UX tốt là gì?
- Tạo cho user cảm giác họ có thể điều khiển được
- Tạo cho user cảm thấy an toàn
- Tạo cho user cảm thấy bản thân tốt hơn -tự ngã

Có sáu bậc thang mục tiêu, lần lượt và tuần tự để đạt được UX tốt
1. findable: user dễ tìm thấy chức năng, thông tin trong sản phẩm
2. accessible: dễ tiếp cận, tiếp xúc sản phẩm, để có thể sử dụng
3. useable: dễ sử dụng được
4. desirable: kỳ vọng, lôi cuốn, ấn tượng, dễ nhớ
5. credible: tin cậy được, cảm giác an toàn, thông tin chính xác
6. useful: nó có ích

Làm sao tạo ra 1 sản phẩm UX tốt
Input -> Process -> Output
Xác định input:
- yêu cầu của người dùng cuối
- yêu cầu của nghiệp vụ kinh doanh
Process
Cân bằng giữa user needs và business needs thông qua 6 bước xử lý

Dưới đây là 58 gợi ý tốt nhất mà tôi đã gặp về thiết kế form khi thấy vô số bài kiểm tra thiết kế form của các công ty.

Bài đăng này gồm tám phần:

• Thiết kế và cấu trúc mẫu chung
• Câu hỏi & trường
• Khả năng tiếp cận & tính dễ sử dụng
• Xác nhận & xử lý lỗi
• Tin tưởng & bằng chứng xã hội
• Form nhiều bước & chỉ báo tiến độ
• Nút và động lực hành động
• Thực hành trên thiết bị di động

Trước khi bắt đầu, tôi lưu ý rằng hầu hết các mẹo dưới đây dựa trên các thử nghiệm có hệ thống, được thống kê trên nhiều trang web và ứng dụng công nghiệp. Form là thiết kế ở mức cao, nó có ràng buộc với các thiết kế khác trong ngữ cảnh nhằm tạo khả năng chuyển đổi dữ liệu tốt.

Thiết kế và cấu trúc mẫu chung

1. Form nhiều bước hiệu quả form một bước

Chia form của bạn thành hai hoặc ba bước sẽ hầu như luôn tăng khả năng hoàn thành form. Chúng tôi đã thử nghiệm điều này trên tất cả các loại form thu thập thông tin khách hàng tiềm năng, từ form đăng ký hội thảo trên web đến form yêu cầu nghiệp vụ B2B và cuối cùng chúng tôi đã tìm thấy các form nhiều bước được hoàn thiện tốt hơn các form một bước.

Có ba lý do tại sao kiểu nhiều bước hoạt động tốt hơn:

1. Ấn tượng đầu tiên đó là nó ít đáng sợ hơn so với dạng dài có nhiều trường và câu hỏi.
2. Bằng cách yêu cầu thông tin nhạy cảm (email, phonenumber) ở bước cuối cùng của form(kiểu nhiều bước), người dùng có nhiều động lực sẽ điền vào các trường này => vì nếu không điền họ sẽ mất toàn bộ công sức với các tiến trình đã thực hiện ở các bước trước đó (đây là xu hướng nhận thức đã được chứng minh được gọi là ‘sunk cost fallacy’).
3. Bằng cách nhìn thấy một thanh tiến trình, người dùng có nhiều động lực hơn để hoàn thành form. Điều này, một lần nữa tái hiện, sau nhiều lần thử nghiệm dựa trên nhiều khuynh hướng nhận thức đã chứng minh được, nó là một dạng hiệu ứng thúc đẩy(Vd: quà tặng).

2. Loại bỏ tất cả các trường không cần thiết.

Expedia mất 12 triệu đô la mỗi năm bằng cách hỏi thêm một câu hỏi (tên công ty) trong mẫu đặt phòng của họ. Marketo cũng phát hiện ra rằng một vài trường không cần thiết đang tăng gánh nặng chi phí cho mỗi khách hàng tiềm năng lên tới ~ 25%.

Mỗi trường bổ sung trong form đang làm mất khách hàng tiềm năng của bạn – vì vậy hãy xem xét liệu mỗi câu hỏi có giải thích cho việc mất hoặc gia tăng khách hàng tiềm năng hay không?

3. Sử dụng điều hướng logic với điều kiện để rút ngắn form

Logic có điều kiện (đôi khi được gọi là ‘logic nhánh’) là nơi bạn chỉ hiển thị một câu hỏi nếu người dùng đã trả lời một câu hỏi trước đó theo một cách nhất định.

Kỹ thuật này làm giảm độ dài trung bình của form, đồng thời giảm việc từ bỏ form bằng cách không hiển thị các câu hỏi có thể không liên quan đến một số người dùng nhất định.

Một trong những khách hàng của chúng tôi tại Leadformly đã sử dụng tính năng này để tạo một mẫu yêu cầu duy nhất cho đại lý web của họ . Sử dụng logic có điều kiện, khách truy cập của họ có thể cho họ biết chính xác dịch vụ họ đang tìm kiếm chỉ bằng cách nhấp vào một loạt các biểu tượng.

4. Nhãn căn chỉnh trên cùng bên trái là tốt nhất để dễ đọc và hoàn thành

Các nhà nghiên cứu UX của Google nhận thấy rằng việc căn chỉnh các nhãn trên các trường ở phía bên trái đã tăng thời gian hoàn thành form. Điều này là do nó yêu cầu ít ‘visual fixations’ như được minh họa trong sơ đồ bên dưới.

Có một sự thay thế chấp nhận được cho các nhãn được căn chỉnh trên bên trái, mà tôi sẽ thảo luận ở mục #16.

5. Tránh đặt các câu hỏi cạnh nhau.

Các nghiên cứu theo dõi hành vi người dùng đã chỉ ra rằng bố cục một cột đơn giản tốt hơn bố cục nhiều cột với các câu hỏi được đặt cạnh nhau.

Ngoại lệ duy nhất cho quy tắc này là khi yêu cầu ngày (ngày, tháng, năm) hoặc thời gian (giờ và phút), trong đó nhiều trường hơn dự kiến ​​sẽ nằm trên một dòng.

6. Cung cấp cho mọi người một lý do để sử dụng form của bạn

Hãy tưởng tượng bạn đã có một kiểu form dài mà phải mất hàng giờ để hoàn thành. Không ai sẽ sử dụng nó, phải không?

Chà, không phải nếu bạn tặng mọi người một chiếc Ferrari miễn phí để hoàn thành nó. Lời hứa của một chiếc Ferrari sẽ mang đến cho mọi người động lực để vượt qua, mặc dù về trải nghiệm làm người dùng cảm giác dài dòng và chán nản. Mặc dù cực đoan, ví dụ này minh họa vai trò của động lực đóng vai trò tối ưu hóa kiểu form.

Trong một ví dụ đơn giản, BettingExpert đã nhận được thêm 31,54% đăng ký bằng cách thay đổi tiêu đề form và mời gọi hoàn thành form với nhấn mạnh lý do tại sao mọi người nên đăng ký.

7. Nhóm các lĩnh vực liên quan với nhau thành các phần hoặc các bước

Nếu form của bạn có nhiều hơn sáu trường, nó được coi là cách thực hành tốt để nhóm các câu hỏi thành các phần hoặc các bước hợp lý.

Câu hỏi & trường

8. Chọn kiểu input làm giảm số lần thao tác cần thiết để hoàn thành

Khi Microsoft thay đổi lời nhắc tắt máy của họ từ biểu tượng tắt máy có thể nhấp sang hộp thả xuống, họ thấy rằng có ít người tắt máy tính của họ hơn – chỉ vì có thêm hai lần nhấp.

Khi chọn sử dụng kiểu input dạng câu hỏi, hãy cố gắng tối ưu hóa cho càng ít lần thao tác càng tốt.

9. Sử dụng giá trị mặc định thông minh

Nếu bạn đang đặt câu hỏi như số điện thoại hoặc quốc gia, bạn nên sử dụng thêm tiện ích gợi ý giá trị mặc định dựa trên địa chỉ IP của người dùng.

10. Biết khi nào nên sử dụng nút radio, checkboxes và dropdowns

Theo nguyên tắc chung, các nút radio nên được sử dụng khi có một loạt các tùy chọn và chỉ có thể chọn một tùy chọn.

Các checkboxes nên được sử dụng khi có thể chọn nhiều hơn một tùy chọn.

Nếu có thể, các checkboxes và nút radio nên được sử dụng thay vì dropdowns, vì chúng khởi tạo nhanh hơn. Thông thường, tôi sử dụng dropdowns(danh sách thả xuống) khi có nhiều hơn sáu tùy chọn để lựa chọn.

11. Các nút radio nên được xếp theo chiều dọc

Các nút radio xếp theo chiều dọc (và các hộp checkboxes) giúp chúng được xử lý nhanh hơn so với bố cục ngang.

12. Không cắt các trường khi yêu cầu số điện thoại hoặc ngày sinh.

Các trường được cắt lát buộc người dùng phải thực hiện các nhấp chuột bổ sung để chuyển sang trường tiếp theo. Thay vào đó, tốt hơn là có một trường duy nhất có hướng dẫn định dạng rõ ràng trong trình giữ chỗ.

Ngay cả khi bạn tự động chuyển người dùng sang trường tiếp theo, việc cắt trường sẽ áp dụng xác nhận chặt chẽ hơn nhưng có khả năng gây tác dụng ngược. Trong sơ đồ trên, ví dụ, việc cắt trường này sẽ gây nhầm lẫn cho bất kỳ ai nhập số điện thoại bên ngoài Hoa Kỳ.

13. Giải thích rõ ràng lý do tại sao bạn yêu cầu thông tin nhạy cảm

Mọi người ngày càng quan tâm đến quyền riêng tư và bảo mật thông tin. Nếu bạn phải yêu cầu thông tin nhạy cảm, hãy đảm bảo bạn giải thích lý do, sử dụng văn bản giải thích bên dưới trường.

14. Khi yêu cầu địa chỉ, hãy sử dụng tra cứu mã bưu điện / mã zip để giảm mục nhập trường

Khi yêu cầu người dùng điền địa chỉ của họ, cách tốt nhất là chỉ yêu cầu số nhà và mã bưu điện / mã zip, sau đó sử dụng dịch vụ tra cứu để đề xuất địa chỉ đầy đủ.

15. Sử dụng placeholder chính xác

Trình placeholder là văn bản phù hợp xuất hiện trong trường của form. Trong ví dụ trên, bạn có thể thấy một placeholder có nội dung “E.g. ‘CR0 3RL'”.

Placeholder nên được sử dụng để hướng dẫn người dùng về cách điền vào trường nếu có bất kỳ sự mơ hồ nào. Nói cách khác, có lẽ bạn không cần phải có một trình giữ chỗ cho các trường như ‘Tên’ vì hầu hết mọi người đều biết cách trả lời tên của họ.

16. Luôn có một nhãn cho trường

Một nhãn là văn bản câu hỏi nằm phía trên trường. Chúng phải luôn luôn có nó và không nên thay thế bằng placeholder . Tại sao? Bởi vì khi bạn bắt đầu nhập văn bản vào một trường, văn bản giữ chỗ sẽ biến mất, buộc mọi người phải sử dụng bộ nhớ để nhớ lại chúng.

Trường hợp duy nhất có thể chấp nhận không có nhãn trường là nếu bạn đang sử dụng inline labels . Inline labels là một giải pháp lai, nhãn luôn trong tầm nhìn, nhưng không chiếm nhiều không gian. Dưới đây là một ví dụ về inline labels đang được sử dụng bởi form của BounceExchange .

17. Sử dụng tìm kiếm gợi ý cho các trường có nhiều tùy chọn được xác định trước

Khi yêu cầu người dùng chọn quốc gia, nghề nghiệp hoặc thứ gì đó khác với số lượng lớn các tùy chọn được xác định trước, tốt nhất là cung cấp chức năng tìm kiếm dự đoán để giảm số lượng nhập và xử lý dữ liêu cần thiết.

18. Nếu bạn phải hỏi một câu hỏi tùy chọn, hãy note rõ rằng đó là tùy chọn

Mặc dù tôi khuyên bạn nên xóa các trường tùy chọn hoặc sử dụng các neo liên kết(milestone submissions) để hỏi họ sau khi người dùng đã gửi dữ liệu của họ, đôi khi vì lí do chính trị hay yêu cầu nội bộ, các trường này phải được yêu cầu.

Nếu bạn phải đặt câu hỏi tùy chọn, hãy làm rõ rằng chúng là tùy chọn bằng cách sử dụng placeholders.

19. Hình ảnh có thể lựa chọn là một trong những loại câu hỏi hấp dẫn nhất

Trường hợp có ý nghĩa, sử dụng hình ảnh có thể nhấp như một loại câu hỏi. Từ dữ liệu chúng tôi đã thấy tại Leadformly , chúng là một trong những loại câu hỏi hấp dẫn nhất và cung cấp trải nghiệm người dùng dưới dạng tuyệt vời.

20. Cẩn thận khi xin số điện thoại

Mọi người đang ngày càng ít hạnh phúc hơn khi trao số điện thoại của họ. Trên thực tế, một nghiên cứu của Clicktale đã phát hiện ra rằng việc đánh dấu trường số điện thoại là tùy chọn đã giảm tỷ lệ từ bỏ form từ 39% xuống 4%.

21. Các trường đầu vào phải có kích thước phù hợp

Kích thước của một trường sẽ phản ánh số lượng văn bản mà người dùng dự kiến ​​sẽ nhập. Do đó, các trường như mã zip hoặc số nhà nên có chiều rộng ngắn hơn các trường như dòng địa chỉ.

Khả năng tiếp cận & dễ sử dụng

22. Tránh sử dụng Captchas.

Một nghiên cứu của Đại học Stanford đã phát hiện ra rằng Captchas sẽ khiến bạn mất một lượng người đăng ký / khách hàng tiềm năng lên tới 30%. Khi Animoto xóa captcha khỏi kiểu đăng ký, họ đã nhận được thêm 33,3% đăng ký.

Captchas buộc vấn đề quản lý thư rác đối với người dùng, gây ra ma sát và cuối cùng là ngăn cản khách hàng tiềm năng. Một cách khác tốt hơn là sử dụng dịch vụ phát hiện thư rác tự động như Akismet hoặc tạo ‘honeypot’ bằng cách sử dụng các trường ẩn. Sử dụng Captcha sẽ là phương sách cuối cùng tuyệt đối của bạn.

23. Đừng dựa vào màu sắc để giao tiếp

Trong khi ít phổ biến hơn ở phụ nữ, cứ 12 nam giới thì có 1 người bị mù màu.

Khi hiển thị lỗi xác thực hoặc thông báo thành công, hãy đảm bảo không dựa vào việc làm cho trường màu xanh hoặc đỏ. Bất cứ nơi nào màu sắc được sử dụng, hãy cố gắng hiển thị văn bản hoặc biểu tượng để truyền thông điệp đến người dùng.

24. Đảm bảo rằng toàn bộ form của bạn có thể được điều hướng bằng phím tab

Có nhiều người sử dụng phím tab để điều hướng trong form để chuyển từ câu hỏi này sang câu hỏi tiếp theo, phím tab trở nên đặc biệt quan trọng đối với người dùng nó.

25. Khi hỏi một câu hỏi mà người dùng có thể không hiểu, hãy giải thích rõ ràng để hướng dẫn họ trả lời đúng.

Trong 1 form tạo bảo hiểm, không may là có rất nhiều thông tin bắt buộc phải được hỏi có thể gây nhầm lẫn cho người dùng.

May mắn thay, có rất nhiều điều mà tất cả chúng ta có thể học hỏi từ các công ty bảo hiểm về cách giải quyết thách thức này. SoetheMarket.com làm rất tốt việc cung cấp các giải thích trực quan chi tiết khi bạn di chuột qua một câu hỏi.

26. Form của bạn có hoạt động trên tất cả các trình duyệt và thiết bị chính không?

Nghe có vẻ như lẽ thường, nhưng thật tốt khi kiểm tra xem form của bạn có hoạt động không và có dễ sử dụng trên tất cả các trình duyệt và thiết bị chính hay không. Khi nghi ngờ, hãy sử dụng một dịch vụ như BrowserStack .

27. Kiểu form của bạn có dễ sử dụng trong các tình huống có nhiều ánh sáng hay thiếu sáng không?

Nếu mọi người có thể sử dụng form của bạn ở ngoài trời trên thiết bị di động của họ, tốt nhất là đảm bảo rằng các trường câu hỏi của bạn tương phản với nền của form. Nếu không, người dùng có thể không thể nhìn thấy nơi để nhấn.

28. Đảm bảo rằng không có gì nhấp nháy hơn hai lần mỗi giây

Nếu bạn có kế hoạch sử dụng con trỏ nhấp nháy, thanh tiến trình hoạt hình, gifs hoặc bất cứ thứ gì khác nhấp nháy, hãy đảm bảo rằng chúng không nhấp nháy quá hai lần mỗi giây. Nếu không, điều này có thể gây ra động kinh cho một số người.

29. Cho phép tự động điền trình duyệt

Các trình duyệt như Google Chrome và Firefox hiện có chức năng tự động điền cho phép người dùng điền vào các trường mẫu chuẩn chỉ bằng một cú nhấp chuột.

Để làm việc này, Google Chrome / Firefox tìm kiếm các manh mối theo ngữ cảnh trong ‘tên’, ‘nhãn’ và văn bản giữ chỗ. Do đó, cách tốt nhất là đảm bảo các trường của bạn được gắn thẻ chính xác với các thuật ngữ mà trình duyệt sẽ nhận ra, ví dụ: ’email’, ‘name’ hoặc ‘city’.

30. Sử dụng đệ trình cột mốc

Làm thế nào để bạn giữ các form của mình đủ ngắn để không cản trở người dùng, trong khi vẫn nắm bắt được nhiều thông tin hơn nếu người dùng sẵn sàng cung cấp thêm thông tin? ‘milestone submissions’ là một lựa chọn.

Đặt mốc liên kết là một kỹ thuật cho phép bạn gửi lại 1 đoạn nào đó của form khi người dùng đã đạt đến một bước nhất định trong form và sau đó tiếp tục cung cấp thêm thông tin nếu họ muốn. Toptal.com sử dụng tính năng này để hỗ trợ những người sẵn sàng trả lời một vài câu hỏi bổ sung.

31. Tối ưu hóa tốc độ form

Người dùng mong đợi các trang web và form để tải nhanh. Trên thực tế, cứ sau 100 mili giây Amazon tăng tốc trang web của họ, họ thấy doanh thu tăng 1% . Nếu bạn muốn tăng tốc độ trao đổi, hãy đảm bảo kiểu form của bạn tương tác nhanh nhất có thể.

32. Tránh tự động thay đổi câu hỏi (tự động chuyển sang câu hỏi tiếp theo)

Kiểu tương tác này không được mong đợi và nói chung là gây khó hiểu.

33. Sử dụng các gợi ý và biểu tượng trực quan để làm cho các trường của form trực quan hơn

Bộ não của chúng ta xử lý hình ảnh trực quan nhanh hơn đáng kể so với văn bản. Như được minh họa bằng form bên dưới, có thể sử dụng lời nhắc trực quan để báo hiệu cách điền vào một trường.

Xác thực đầu vào & xử lý lỗi

34. Đừng làm cho việc xác nhận của bạn quá nghiêm ngặt

Xác nhận nghiêm ngặt là một triệu chứng của lập trình lười biếng. Điều đó không tốt cho người dùng và doanh nghiệp của bạn sẽ trả giá cho nó.

Nếu có nhiều biến thể trong cách người dùng trả lời một trường (ví dụ: trả lời số điện thoại với +12345678912, +44 12345678912, 012345678912), lập trình viên của bạn nên sử dụng quy tắc chuyển đổi các định dạng này thành định dạng nhất quán ở cuối.

Ngoài ra, sử dụng trình giữ chỗ trường để hiển thị rõ định dạng được đề xuất.

35. Đừng yêu cầu mọi người xác nhận email hoặc mật khẩu của họ hai lần

Nếu bạn phải sử dụng hệ thống xác nhận email / mật khẩu, tốt hơn là nên có một biểu tượng hoặc hộp hiển thị mật khẩu khi nhấp vào.

36. Nếu bạn phải sử dụng validation, hãy đảm bảo thông báo trên cùng 1 dòng(bên phải của trường) và báo cáo lỗi sớm.

Đừng đợi cho đến khi người dùng nhấn submit form để báo cáo lỗi validation. Đồng thời, validation không cần theo thời gian thực, vì có thể báo cáo lỗi trước khi người dùng hoàn thành trường.

Lý tưởng nhất là các thông báo validation xuất hiện khoảng 500ms sau khi người dùng ngừng nhập.

Trust & Social proof

37. Làm cho thiết kế mẫu của bạn đẹp

Thực tế đã được chứng minh rằng mọi người tin tưởng các giao diện / trang web được thiết kế đẹp hơn các kiểu không ấn tượng.

38. Xử lý các mối lo lắng có khả năng phát sinh đối với form của bạn

Có thể có một số lý do mà mọi người có thể cảm thấy không thoải mái khi sử dụng form của bạn. Chẳng hạn, sẽ mất bao lâu để phản hồi? Users có cần nhập chi tiết thẻ tín dụng của mình không? Users có thể sẽ nhận được các cuộc gọi điện thoại gây phiền nhiễu từ một nhân viên bán hàng?

Bằng cách giải quyết những vấn đề này, bạn có thể phá vỡ các rào cản đối với form của bạn. Freshbooks giải quyết mối quan tâm, lo lắng của người dùng bằng cách hiển thị không yêu cầu thẻ tín dụng. Không có hợp đồng.

39. Hiển thị bằng chứng tin cậy của cộng đồng với form của bạn

Các tuyên bố như ‘được sử dụng bởi 100.000 người’ và lời chứng thực của những người khác trong tình huống tương tự là các kỹ thuật thuyết phục mạnh mẽ khiến người dùng có thể tin tưởng bạn và sử dụng form của bạn.

40. Hãy cẩn thận khi sử dụng con dấu bảo mật, trừ khi bạn yêu cầu thanh toán

Cẩn trọng sử dụng các biểu tượng bảo mật khi yêu cầu người dùng tương tác với các liên kết riêng tư và bảo mật như thanh toán. Trong thử nghiệm A / B bên dưới, việc thêm một con dấu thanh toán thực sự  người dùng e ngại vì mọi người nghĩ rằng họ sẽ dùng một trang để trả tiền cho một cái gì đó.

41. Hiển thị live chat hoặc thông tin liên lạc trong form của bạn

Mặc dù ngay với cả form đăng ký đơn giản, chúng ta nên hiển thị một khung cửa sổ chat trực tiếp, sẳn sàng để trả lời bất kỳ câu hỏi hoặc phản đối nào user trước khi đăng ký tài khoản.

Đối với các form phức tạp hơn, nơi người dùng có thể có nhiều câu hỏi về form, live chat là một kỹ thuật cực kỳ mạnh mẽ. Nó không chỉ xây dựng sự tin cậy cộng đồng, mà còn giúp khách hàng tiềm năng trả lời bất kỳ câu hỏi nào( câu hỏi ngăn cản họ sử dụng form của bạn).

Form nhiều bước & chỉ báo tiến độ

42. Khi sử dụng form nhiều bước, luôn hiển thị thanh tiến trình

Thanh tiến trình khuyến khích sự hoàn thành và giảm bớt sự lo lắng của người dùng của bạn bằng cách truyền đạt rõ ràng khoảng cách từ khi bắt đầu đến lúc hoàn thành.

Là một lưu ý phụ thú vị, chúng tôi đã tìm thấy từ các thử nghiệm của chúng tôi tại Leadformly rằng các thanh tiến trình hoạt hình (như thanh trên Leadformly.com) thường vượt trội hơn các thanh tiến trình tĩnh.

Ngoài ra, bắt đầu thanh tiến trình của bạn với một số tiến trình đã được thực hiện sẽ làm tăng số lượng người sử dụng form.

43. Hãy chú ý đến tốc độ chuyển tiếp của bạn

Một người bạn tốt của tôi đã nắm bắt được các khách hàng tiềm năng cho trang web của công ty hẹn hò của anh ấy bằng cách sử dụng mẫu 5 bước . Nhưng anh ta không thể hiểu tại sao mọi người nhấp vào các nút next và sau đó từ bỏ form.

Hóa ra tốc độ chuyển trang của form quá nhanh. Người dùng đã nhấp vào nút next và không nhận thấy rằng nội dung trên form đã thay đổi, vì nó chuyển bước quá nhanh. Sau khi làm chậm tốc độ chuyển bước, tương tác form của họ tăng lên.

Đây là một trong những bài học trực quan nhất mà tôi đã gặp trên thiết kế mẫu nhiều bước. Rốt cuộc, chúng ta thường nói rằng nhanh hơn là tốt hơn, nhưng không phải khi nói đến tốc độ chuyển trang.

44. Sử dụng bảng chỉ dẫn rõ ràng

Một thanh tiến trình của form nhiều bước là không đủ. Bạn cũng nên hiển thị tổng số bước và bước mà người dùng hiện đang thực hiện để xóa bất kỳ sự mơ hồ nào. Trong ví dụ bên dưới, bạn có thể thấy BrokerNotes nói rõ với người dùng rằng họ đang ở bước một trong hai.

Nút & Mời gọi thực hiện

45. Mời gọi tương tác nên kết thúc câu ‘Tôi muốn ..’

Theo mặc định, nhiều form sử dụng các nút kêu gọi tương tác buồn tẻ như ‘submit’ hoặc ‘send’. Chúng nên tránh và thay thế bằng lời mời tương tác phù hợp với những gì người dùng đang hy vọng đạt được khi họ hoàn thành form của bạn.

Một nguyên tắc nhỏ là trả lời câu hỏi ‘Tôi muốn’ – nói về góc độ của người dùng. Ví dụ: nếu đó là mẫu yêu cầu tư vấn miễn phí, lời kêu gọi hành động có thể là ‘Yêu cầu tư vấn miễn phí của tôi’.

Trong nghiên cứu này , Unbounce nhận thấy rằng thậm chí chỉ cần thay đổi ‘start your free trial’ để ‘start my free trial’ đã tăng 90% số lần tương tác click.

46. ​​Đảm bảo lời mời tương tác có độ tương phản cao

Tất cả chúng ta đã nghe về những nghiên cứu khét tiếng trong đó việc thay đổi màu sắc của nút làm tăng tương tác. Những nghiên cứu này có thể nguy hiểm khi được giải thích theo nghĩa đen, vì nó thường không phải là màu sắc cụ thể quan trọng – đó là sự tương phản.

Lưu ý cách gọi hành động màu cam nổi bật so với màu xanh / trắng trong ví dụ Unbounce ở trên? Đó là những gì bạn đang hướng tới.

47. Đoạn mời gọi tương tác nên có cùng chiều rộng với trường

Các mẫu form của Uber sử dụng lệnh tương tác với chiều rộng lớn có độ tương phản cao so với nền của form. Bằng cách đặt đoạn mời gọi tương tác có cùng độ rộng với các trường, bạn xóa mọi nghi ngờ về vị trí của nút.

Để biết ví dụ khác về cách không làm đặt độ rộng của lời mời bằng độ rộng trường, hãy xem form của UPS trong mẹo bên dưới.

48. Tránh sử dụng các nút ‘clear’ hoặc ‘reset’

Dưới đây là một ảnh chụp màn hình của mẫu đăng ký của UPS . Không chỉ là lời mời tương tác, mà nút Next cũng nằm ngay bên cạnh nút ‘Cancel’ được tạo kiểu và nằm ở vị trí ngay cạnh nút ‘Next’.

Nguy cơ vô tình xóa tất cả thông tin bạn đã nhập và phải bắt đầu lại. Hầu hết người dùng đều biết rằng Clear hoặc Reset thông tin sẽ cho phép họ bắt đầu lại từ đầu. Vì vậy, nên tránh sử dụng các nút Clear hoặc Reset.

49. Trình tự các câu hỏi của bạn cần hợp lý

Ví dụ, khi hỏi chi tiết thẻ tín dụng, hãy hỏi thông tin theo cùng thứ tự thường xuất hiện trên thẻ vật lý (số thẻ tín dụng, ngày hết hạn, mã bảo mật).

50. Không đặt các thông điệp pháp lý gần các nút của bạn.

Nếu bạn cần phải yêu cầu người dùng đồng ý với nhiều khuyến cáo phức tạp, hãy kết hợp chúng thành 1 đoạn với ít tệp nhất có thể và giữ thông điệp pháp lý ngắn gọn nhất.

51. Đừng lừa người dùng bằng cách tự động đăng ký họ vào danh sách gửi thư của bạn.

Với điều, hầu hết người dùng sẽ nhấp chuột để từ chối danh sách của bạn.

52. Giải thích rõ ràng những gì tiếp theo khi nhấp vào nút gửi

Khi ai đó sử dụng form của bạn, họ có thể tự hỏi họ sẽ phải đợi bao lâu, liệu họ có cần chuẩn bị gì không, hay chuyện gì sẽ xảy ra.

Lý tưởng nhất, form của bạn nên chuyển hướng người dùng đến một trang truyền đạt rõ ràng những gì sẽ xảy ra tiếp theo và những gì họ có thể mong đợi.

53. Khi gửi, cần vô hiệu hóa nút gửi sau khi bấm để không được nhấn lại

Điều này là để ngăn chặn các lần gửi trùng lặp và cũng cung cấp thêm một tín hiệu cho người dùng rằng việc gửi của họ đã thành công.

54. Làm rõ những gì người dùng có thể mong đợi xảy ra tiếp theo

Lời kêu gọi tương tác của bạn (và trang đích nói chung) sẽ truyền đạt rõ ràng những gì người dùng có thể mong đợi xảy ra ngay khi họ hoàn thành form của bạn.

Tối ưu hóa giao diện với mẫu di động

55. Sử dụng các tính năng của thiết bị di động (camera, định vị, chọn ngày) để đơn giản hóa các tác vụ

Năm ngoái, tôi đã dành rất nhiều thời gian với một nhà môi giới ngoại hối đang cố gắng giúp họ tối ưu hóa form của họ. Vì lý do quy định, công ty này đã phải yêu cầu người dùng gửi tài liệu ‘KYC’ (Know Your Customer), chẳng hạn như giấy phép lái xe và hóa đơn gần đây..

Với máy tính để bàn, đây là một quá trình khó khăn, vì người dùng thường phải từ bỏ form để scan tài liệu và sau đó upload lên.

Đối với người dùng di động, điều đó thậm chí còn khó khăn hơn. Cuối cùng, chúng tôi thấy rằng việc chạm vào camera của thiết bị di động là trải nghiệm người dùng tốt nhất, vì nó cho phép người dùng chụp ảnh bằng lái xe của họ mà không cần rời khỏi form.

Tôi thậm chí đã thấy cách tiếp cận tương tự được sử dụng để cho phép người dùng ‘scan’ thẻ tín dụng của họ, thay vì phải điền thông tin thẻ tín dụng theo cách thủ công.

56. Các trường, câu hỏi và nút phải cao ít nhất 48 pixel.

Kích thước pad ngón tay người lớn trung bình rộng khoảng 10 mm . Trong thuật ngữ web, đây là khoảng 48 pixel. Do đó, khi thiết kế các form mobile, hãy đảm bảo rằng các trường của bạn cao ít nhất 48 pixel.

57. Tất cả các nhãn & phông chữ phải trên 16px

Sau khi thiết kế lại toàn bộ giao diện người dùng cho một khách hàng vào năm ngoái, tôi đã nhận được một email từ Giám đốc điều hành của họ nói rằng: Có vẻ như giao diện rất tuyệt, nhưng tôi không thể đọc được một điều gì đó!

Phông chữ là 14px, đây là cỡ chữ khá chuẩn cho web. Nhưng khách hàng của tôi đã xem giao diện này trên thiết bị di động. Khi thiết kế cho thiết bị di động hoặc thiết bị cũ, văn bản của bạn phải có kích thước tối thiểu 16px.

Lưu ý, các thiết bị iOS sẽ phóng to khi bất kỳ văn bản nào dưới 16px được nhập, nhưng không có tác dụng nếu văn bản đó là 16px trở lên, vì nó được coi là không cần thiết.

58. Sử dụng các kiểu input HTML để hiển thị bàn phím chính xác

Bạn có bao giờ nhận thấy làm thế nào, khi sử dụng thiết bị di động, điện thoại sẽ hiển thị các bàn phím khác nhau tùy thuộc vào câu hỏi bạn đang hỏi? Đôi khi nút ‘.com’ hiển thị, trong khi những lần trước đó bộ chọn ngày xuất hiện?

Tất cả nhờ vào input HTML. Đối với thiết kế mẫu di động, chúng thật tuyệt vời và bạn nên sử dụng chúng. Có tám loại đầu vào có liên quan đến thiết kế mẫu:

• input type=”text” displays the normal mobile device keyboard
• input type=”email” displays the normal keyboard plus ‘@’ and ‘.com’
• input type=”tel” displays the numeric 0-9 keypad
• input type=”number” displays a keyboard with numbers and symbols
• input type=”password” this hides characters as they’re typed in the field
• input type=”date” this displays the mobile’s date selector
• input type=”datetime” this displays the mobile’s date and time selector
• input type=”month” this displays the mobile’s month/year selector

Và

Sử dụng nó như checklist khi thiết kế form

Khóa học UX căn bản với Khôi Phạm