4 Mẹo thiết kế mẫu UX bạn nên biết (Có ví dụ)

Chúng ta có xu hướng nghĩ về các biểu mẫu chỉ đơn giản là một phương tiện để thu thập dữ liệu người dùng, nhưng đôi khi chúng cũng là một cách cách duy nhất, cho người dùng của chúng tôi kết nối với chúng tôi. Có lẽ thật ảo tưởng khi nghĩ rằng chúng ta có thể khiến người dùng yêu điền vào các mẫu đơn, tuy nhiên chắc chắn là có thể để tìm giải pháp mà không làm phiền họ quá nhiều, và giúp họ trong suốt quá trình.

Trong khi duyệt mạng, đôi khi chúng ta có thể tìm thấy các giải pháp đáng ngạc nhiên, chính xác về mặt lập trình, nhưng được thiết kế theo cách rất có thể khiến nhiều người dùng từ bỏ trang web vì trải nghiệm người dùng kém.

Nếu các biểu mẫu của chúng tôi được thiết kế tốt, chúng tôi sẽ có thể không chỉ làm hài lòng người dùng của chúng tôi mà cả nhóm phụ trợ có thể giải quyết lỗi đầu vào của người dùng ít hơn nhiều. Vì vậy, trong bài viết này, chúng ta sẽ xem xét làm thế nào chúng ta có thể giảm thiểu lỗi nhập của người dùng và vẫn giữ cho người dùng của chúng tôi hạnh phúc.

Dự đoán nhu cầu người dùng

Trang web và ứng dụng có cơ sở và mục tiêu người dùng khác nhau, và thậm chí cùng một vị trí có thể lưu trữ nhiều biểu mẫu thu thập các loại dữ liệu khác nhau, chỉ để đặt tên cho các biểu mẫu thường gặp nhất:

• Biểu mẫu đăng nhập
• Mẫu đăng ký
• Mẫu hồ sơ người dùng
• Mẫu đăng ký bản tin
• Hình thức thanh toán
• Khảo sát người dùng
• Hình thức liên lạc
• Mẫu bình luận
• Hình thức tìm kiếm

Tất cả các loại hình đòi hỏi những thứ khác nhau. Khi thiết kế một hình thức thanh toán, điều quan trọng là đảm bảo đáng tin cậy cho người dùng về bảo mật, trong khi trong trường hợp hình thức nhận xét, đó là một ý tưởng tốt để thêm biểu tượng cảm xúc hoặc các phương pháp khác cho phép người dùng thể hiện tâm trạng thực tế của họ.

Tuy nhiên, ngay cả các loại biểu mẫu tương tự có thể cần phải được thiết kế khác nhau, vì tất cả các trang web đều có cơ sở người dùng duy nhất. Trước khi bắt tay vào quá trình thiết kế, luôn luôn là một ý tưởng tốt để dự đoán những gì người dùng của chúng tôi cần, và thiết kế phù hợp.

Ví dụ: Đăng nhập xã hội nhắm mục tiêu nhu cầu người dùng

Biểu mẫu đăng nhập của Codepen chứa ba thông tin đăng nhập xã hội với Github ở đầu. Sự lựa chọn này sẽ không hợp lý cho hầu hết các trang web.

Nhưng nó hoàn hảo cho Codepen, vì cơ sở người dùng của họ bao gồm các nhà phát triển, nhiều người trong số họ sẽ muốn đăng nhập bằng tài khoản Github của họ hoặc kết nối tài khoản phát triển của họ với nhau cùng một lúc.

Nghĩ đến di động trước

Người dùng di động và máy tính để bàn có những nhu cầu khác nhau, nhưng như hoàn thành các hình thức là một thách thức lớn hơn nhiều trên màn hình di động, sử dụng cử chỉ tay hơn trên bàn phím vật lý, phương pháp di động đầu tiên có thể đưa chúng ta đi xa hơn khi chúng ta muốn thiết kế các hình thức có thể sử dụng.

Hơn nữa, nhiều mẫu UI mẫu hoạt động tốt trên thiết bị di động cũng sẽ hoạt động tốt trên máy tính để bàn..

Ví dụ: Điều khiển Tappable

Các hình thức di động chất lượng cao không thể tưởng tượng được mà không có điều khiển có thể nhìn thấy trên đó người dùng di động có thể dễ dàng chạm bằng ngón tay của họ.

Biểu mẫu đăng ký bản tin của hội nghị thiết kế web Một sự kiện Ngoài thích ứng với cách người dùng di động truy cập màn hình - nó chứa hai trường nhập liệu dễ nhấn và một nút cỡ ngón tay.

Các trường nhập văn bản cao hơn bình thường để người dùng di động có thể dễ dàng chạm vào chúng và nút lớn, màu cam có biểu tượng đánh dấu khuyến khích người dùng gửi biểu mẫu.

Phiên bản máy tính để bàn của trang web sử dụng thiết kế mẫu tương tự, vì nó cũng trông tốt và hoạt động tốt trên màn hình lớn hơn.

Ví dụ: Đầu vào dự kiến

Khi thiết kế biểu mẫu cho thiết bị di động, điều quan trọng là phải xem xét cách chúng ta có thể giảm thiểu không gian chúng ta sử dụng. Các đầu vào chi tiêu Mẫu thiết kế UI đã trở nên khá phổ biến gần đây và nó hoạt động đặc biệt tốt trên thiết bị di động.

Booking.com tận dụng mô hình này trong mẫu tìm kiếm trên trang web di động của mình. Khi người dùng chạm vào trường tìm kiếm, nó sẽ mở rộng để chừa thêm không gian cho cử chỉ, và một danh sách lựa chọn với các khuyến nghị cũng xuất hiện bên dưới nó.

Khi người dùng thoát khỏi trường, nó co lại và thông tin bổ sung sẽ biến mất.

Ví dụ: Nút Morphing

Nút biến hình đưa mô hình đầu vào có thể sử dụng thêm một bước nữa, khi người dùng lần đầu tiên nhìn thấy một nút, sau đó biến thành một hình thức khi họ chạm vào nó.

Ảnh chụp màn hình bên dưới là từ bài viết xuất sắc của Startup về thiết kế biểu mẫu sáng tạo, cũng trình bày nhiều giải pháp sáng tạo khác.

Tạo điều kiện cho đầu vào Take-In

Các hình thức dài có xu hướng ngăn cản người dùng. Điều tốt nhất chúng ta có thể làm là chỉ yêu cầu đầu vào chúng tôi thực sự cần. Điều này không chỉ quan trọng từ góc độ trải nghiệm người dùng, mà người dùng cũng có thể ngần ngại cung cấp quá nhiều thông tin cá nhân vì mối quan tâm riêng tư.

Đôi khi, tuy nhiên, chúng tôi vẫn phải đi cùng với các hình thức dài hơn. Trong trường hợp này, đó là một ý tưởng tốt để cắt chúng thành nhiều phần nhỏ hơn, và phục vụ các khối như màn hình liên tiếp.

Nhiều trang web thương mại điện tử (ví dụ: Amazon) sử dụng giải pháp này để giảm tỷ lệ từ bỏ giỏ hàng.

Nếu chúng ta muốn dễ dàng hoàn thành các trường mẫu, quy tắc chung là giảm cả phiền nhiễu và hành động của người dùng Càng nhiều càng tốt.

Ví dụ: Bộ chọn đầu vào được cá nhân hóa

Các công cụ chọn nội dung khác nhau, chẳng hạn như công cụ chọn ngày hoặc công cụ chọn màu, không chỉ giúp dễ dàng hơn trong việc nhập đúng, mà chúng còn tạo biểu mẫu hấp dẫn hơn, và đáng kể giảm lỗi người dùng.

Ứng dụng lấy danh sách Todoist đưa ra gợi ý cá nhân bên trong bộ chọn ngày của nó khi người dùng di chuyển qua các ngày.

Chẳng hạn, trên ảnh chụp màn hình bên dưới, người dùng có thể thấy rằng vào ngày 31 tháng 8, cô đã có 2 nhiệm vụ đúng hạn và có thể tính đến thông tin này khi quyết định đúng ngày cho các nhiệm vụ. Đó là một ý tưởng tuyệt vời cho một ứng dụng mà năng suất là mối quan tâm chính của người dùng.

Ví dụ: Đầu vào kéo và thả

Thiết kế kéo và thả thường hoạt động tốt với các trường tải lên tệp, đặc biệt là nơi người dùng có nghĩa vụ tải lên hình ảnh.

Họ có thể không giảm các hành động của người dùng so với nút Tải lên tệp thông thường, nhưng họ làm cho nó dễ dàng hơn nhiều chọn tập tin người dùng muốn tải lên, do đó làm giảm cơ hội gửi một tập tin sai.

WordPress.com cung cấp giao diện nhập và kéo thả người dùng thanh lịch và trực quan ở dạng trình chỉnh sửa bài đăng của nó. Các hình thu nhỏ và đại diện trực quan của các tập tin đã tải lên tiếp tục giúp người dùng nhanh chóng thực hiện tải lên.

Ví dụ: Lớp phủ để loại bỏ phiền nhiễu

Nếu người dùng bị phân tâm trong khi hoàn thành biểu mẫu của chúng tôi, họ sẽ dễ bị lỗi hơn và cũng dễ dàng bị làm phiền hơn

Lớp phủ nội dung là một thay thế tuyệt vời cho thiết kế hình thức tối giản. Chúng được sử dụng bởi các trang web phức tạp hơn muốn hiển thị các loại thông tin khác nhau trên cùng một màn hình.

Trên ảnh chụp màn hình bên dưới, bạn có thể thấy phiên bản máy tính để bàn của Booking.com. Khi người dùng di chuột vào biểu mẫu tìm kiếm, phần còn lại của nội dung sẽ được bao phủ bởi một lớp phủ màu xám để giúp họ tập trung vào quá trình điền vào mẫu.

Gửi phản hồi cho người dùng

Tặng phản hồi đúng lúc có thể cải thiện đáng kể trải nghiệm người dùng.

Trong thiết kế mẫu, có hai loại phản hồi của người dùng:

1. Phản hồi đã cho trước Nộp mẫu - để mà giảm lỗi và tỷ lệ từ bỏ hình thức, chẳng hạn như trình theo dõi tiến trình, xác thực đầu vào tức thì, phần thưởng ngay lập tức cho người dùng về đầu vào chính xác hoặc công cụ trợ giúp
2. Phản hồi đã cho sau Nộp mẫu - để cho người dùng biết họ đã phạm lỗi, chẳng hạn như thông báo lỗi

Loại phản hồi người dùng mà người dùng của chúng tôi rất cần phụ thuộc vào đặc điểm của đối tượng mục tiêu và mục tiêu của trang web của chúng tôi.

Ví dụ: Trình theo dõi tiến độ

Các biểu mẫu dài hơn một trang, chẳng hạn như khảo sát và hầu hết các biểu mẫu thanh toán Thương mại điện tử có thể tận dụng đòn bẩy của theo dõi tiến độ mẫu thiết kế. Theo dõi tiến độ cho một phản hồi trực quan ngay lập tức cho người dùng về trạng thái của họ và khuyến khích họ tiếp tục với quy trình.

Ứng dụng web của người tạo khảo sát SnapSurveys hiển thị một trình theo dõi tiến trình nhỏ ngay phía trên các nút gửi để người dùng có thể tự nhiên bắt gặp nó.

anh ấy theo dõi tiến trình không sử dụng bất kỳ nhãn nào, nhưng cách nó được thiết kế làm cho mục tiêu của nó rõ ràng - số lượng vòng tròn biểu thị số bước, các bước đã thực hiện trở thành màu xanh và người dùng có thể dễ dàng thấy có bao nhiêu bước vẫn ở phía trước chúng.

Ví dụ: Xác thực thời gian thực

Nhà bán lẻ mỹ phẩm The Body Shop sử dụng xác nhận thời gian thực trên biểu mẫu Hồ sơ người dùng để loại bỏ lỗi và cải thiện UX của quy trình hoàn tất biểu mẫu.

Đầu vào được kiểm tra trong khi người dùng hoàn thành biểu mẫu và câu trả lời đúng và sai ngay lập tức được chỉ định bởi biểu tượng dễ phân biệt xa hơn một chút ở bên phải nhưng vẫn trong khu vực có thể nhìn thấy.

Ví dụ: Chú giải công cụ biểu cảm

Vi mô có thể hiểu được cũng là một phần thiết yếu của phản hồi người dùng thành công trong thiết kế biểu mẫu. Theo định nghĩa, microcopy của một trang web bao gồm khối nhỏ của văn bản được sử dụng trong các yếu tố khác nhau - nhãn, nút, thông báo lỗi, chú giải công cụ, v.v..

Trong mẫu đăng nhập của mình, nhóm ngân hàng của Barclay trả lời các câu hỏi mà người dùng có thể hỏi với sự trợ giúp của chú giải công cụ được thiết kế tốt bao gồm vi mô dễ hiểu.

Các tooltips được ẩn đằng sau ít? biểu tượng không làm người dùng mất tập trung Ai biết làm thế nào để hoàn thành mẫu đăng nhập, nhưng luôn luôn có mặt cho người dùng không chắc chắn.

Một số chú giải công cụ thậm chí có chứa một hình ảnh nhỏ của thẻ ghi nợ có chú thích để người dùng có thể dễ dàng tìm thấy dữ liệu họ phải nhập vào biểu mẫu đăng nhập.