Trong phần đầu tiên, bạn đã tìm hiểu cách tạo một biểu mẫu cơ bản. Phần này trình bày các phương pháp hay nhất. Trong mô-đun này, hãy tìm hiểu về trải nghiệm người dùng (UX) và lý do giao diện người dùng (UI) được triển khai đúng cách có thể tạo ra sự khác biệt lớn.
Tạo giao diện thân thiện với người dùng
Việc điền vào biểu mẫu có thể tốn thời gian và gây khó chịu, nhưng không nhất thiết phải như vậy. Để mang lại trải nghiệm tuyệt vời cho người dùng, hãy đảm bảo giao diện trực quan. Đảm bảo bạn cung cấp cấu trúc biểu mẫu và thiết kế đồ hoạ tối ưu (bố cục, khoảng cách, kích thước và màu phông chữ), cũng như giao diện người dùng hợp lý (chẳng hạn như từ ngữ của nhãn và các loại dữ liệu đầu vào phù hợp). Hãy xem cách bạn có thể cải thiện biểu mẫu và giúp người dùng dễ dàng sử dụng hơn.
Nhãn
Bạn có nhớ mục đích của phần tử <label> không?
Nhãn mô tả một thành phần điều khiển biểu mẫu.
Nhãn dễ thấy và được viết rõ ràng giúp người dùng hiểu được mục đích của một chế độ kiểm soát biểu mẫu.
Sử dụng nhãn cho mọi thành phần điều khiển biểu mẫu
Bạn có muốn thêm một chế độ kiểm soát biểu mẫu mới vào biểu mẫu của mình không? Bắt đầu bằng cách thêm nhãn cho trường mới. Bằng cách này, bạn sẽ không quên thêm thông tin đó.
Việc thêm nhãn trước cũng giúp bạn tập trung vào mục tiêu của biểu mẫu – tôi cần dữ liệu gì ở đây? Sau khi hiểu rõ, bạn có thể tập trung vào việc giúp người dùng nhập dữ liệu và hoàn tất biểu mẫu.
Nội dung nhãn
Nói rằng bạn muốn mô tả một trường trong email. Bạn có thể làm như sau:
<label for="email">Enter your email address</label>
Hoặc bạn có thể mô tả như sau:
<label for="email">Email address</label>
Bạn chọn nội dung mô tả nào?
Đối với ví dụ của chúng tôi, chúng tôi ưu tiên dùng từ "Địa chỉ email", vì nhãn ngắn dễ quét hơn, giảm bớt sự lộn xộn về hình ảnh và giúp người dùng hiểu rõ hơn về dữ liệu cần thiết.
Vị trí nhãn
Với CSS, bạn có thể đặt nhãn ở trên cùng, dưới cùng, bên trái và bên phải của một chế độ kiểm soát biểu mẫu. Bạn đặt nó ở đâu?
Nghiên cứu cho thấy cách hay nhất là đặt nhãn phía trên chế độ kiểm soát biểu mẫu, để người dùng có thể quét nhanh một biểu mẫu và xem nhãn nào thuộc về chế độ kiểm soát biểu mẫu nào.
Thiết kế biểu mẫu
Thiết kế biểu mẫu hiệu quả có thể giảm đáng kể tỷ lệ bỏ dở biểu mẫu.
Giúp người dùng nhập dữ liệu bằng cách sử dụng phần tử và loại dữ liệu đầu vào phù hợp. Có nhiều phần tử biểu mẫu và loại dữ liệu đầu vào mà bạn có thể chọn.
Để mang lại trải nghiệm người dùng tốt nhất, hãy sử dụng phần tử và loại dữ liệu đầu vào phù hợp nhất cho trường hợp sử dụng của bạn.
Nếu người dùng cần điền nhiều dòng văn bản, hãy sử dụng phần tử <textarea>.
Khi người dùng cần chấp nhận các điều khoản và điều kiện của trang web, hãy sử dụng <input type="checkbox">.
Bạn cũng nên phân biệt bằng hình ảnh giữa các loại chế độ kiểm soát biểu mẫu. Nút phải có hình dạng giống như một nút. Một đầu vào giống như một đầu vào. Giúp người dùng dễ dàng nhận ra mục đích của một chế độ kiểm soát biểu mẫu. Ví dụ: nếu một phần tử trông giống như một đường liên kết, thì việc nhấp vào phần tử đó sẽ mở một trang mới chứ không gửi biểu mẫu.
Giúp người dùng thao tác trên biểu mẫu
Bố cục cầu kỳ có thể thú vị, nhưng có thể cản trở việc hoàn tất biểu mẫu.
Cụ thể, nghiên cứu cho thấy bạn chỉ nên sử dụng một cột duy nhất. Người dùng không muốn mất thời gian tìm kiếm vị trí của chế độ kiểm soát biểu mẫu tiếp theo. Bằng cách sử dụng một cột, chỉ có một hướng để làm theo.
Giúp người dùng tương tác với biểu mẫu
Để tránh trường hợp người dùng vô tình nhấn và nhấp, đồng thời giúp người dùng tương tác với biểu mẫu của bạn, hãy tạo các nút có kích thước đủ lớn. Kích thước đích chạm được đề xuất của một nút là ít nhất 48 px. Bạn cũng nên thêm đủ khoảng cách giữa các chế độ kiểm soát biểu mẫu bằng cách sử dụng thuộc tính marginCSS để tránh các lượt tương tác vô tình.
Kích thước mặc định của các đối tượng kiểm soát biểu mẫu quá nhỏ nên không thực sự hữu ích. Bạn nên tăng kích thước bằng cách sử dụng padding và thay đổi font-size mặc định.
Bạn có thể xác định các kích thước khác nhau cho các thiết bị trỏ khác nhau, ví dụ: chuột, bằng cách sử dụng tính năng nội dung nghe nhìn CSS pointer.
// pointer device, for example, a mouse
@media (pointer: fine) {
input[type="checkbox"] {
width: 15px;
height: 15px;
}
}
// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
input[type="checkbox"] {
width: 30px;
height: 30px;
}
}
Tìm hiểu thêm về pointer tính năng đa phương tiện CSS.
Hiện lỗi ở nơi xảy ra lỗi
Để người dùng dễ dàng biết được chế độ kiểm soát biểu mẫu nào cần được chú ý, hãy hiển thị thông báo lỗi bên cạnh chế độ kiểm soát biểu mẫu mà họ đề cập đến. Khi hiển thị lỗi khi gửi biểu mẫu, hãy nhớ chuyển đến chế độ điều khiển biểu mẫu không hợp lệ đầu tiên.
Cho người dùng biết rõ họ cần nhập dữ liệu gì
Đảm bảo người dùng hiểu cách nhập dữ liệu hợp lệ. Họ có cần nhập ít nhất 8 ký tự cho mật khẩu không? Hãy cho họ biết.
<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>
Làm rõ cho người dùng biết những trường nào là bắt buộc
<label for="name">Name (required)</label>
<input name="name" id="name" required>
Nếu một trường là bắt buộc, hãy làm cho trường đó nổi bật! The Anatomy of Accessible Forms (Cấu trúc của biểu mẫu dễ sử dụng) giải thích các lựa chọn thay thế để cho biết trường bắt buộc. Nếu hầu hết các trường trong biểu mẫu đều là trường bắt buộc, thì bạn nên cho biết các trường không bắt buộc.
Làm cách nào để kết nối thông báo lỗi với các chế độ kiểm soát biểu mẫu để người đọc màn hình có thể truy cập vào các thông báo lỗi đó? Bạn có thể tìm hiểu về vấn đề này trong học phần Hỗ trợ tiếp cận.
Kiểm tra mức độ hiểu biết của bạn
Kiểm tra kiến thức của bạn về cách thiết kế biểu mẫu
Bạn mô tả một chế độ kiểm soát biểu mẫu như thế nào?
<description>.<label>.description.placeholder.Kích thước đề xuất cho mục tiêu nhấn là bao nhiêu?
Bạn nên đặt thông báo lỗi ở đâu?
<form>.