Trong phần đầu, bạn đã tìm hiểu cách tạo một biểu mẫu cơ bản. Phần này là về 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 tại sao giao diện người dùng (UI) được triển khai tốt có thể tạo ra 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à phiền toái. Bạn không nhất thiết phải như vậy. Để đảm bảo trải nghiệm người dùng tuyệt vời, hãy thiết kế giao diện người dùng trực quan. Đảm bảo bạn mang đến cấu trúc hình thức và thiết kế đồ hoạ tối ưu (bố cục, khoảng cách, kích thước phông chữ và màu sắc), và giao diện người dùng logic (chẳng hạn như từ ngữ trên nhãn và loại dữ liệu đầu vào thích hợp). Hãy cùng xem cách bạn có thể cải thiện biểu mẫu và làm cho biểu mẫu này dễ sử dụng.
Nhãn
Bạn có nhớ phần tử <label> dùng để làm gì không?
Nhãn mô tả chức năng điều khiển biểu mẫu.
Một nhãn dễ nhìn và được viết rõ ràng sẽ giúp người dùng hiểu mục đích của chế độ kiểm soát biểu mẫu.
Sử dụng nhãn cho từng phần điều khiển biểu mẫu
Bạn có muốn thêm một chế độ điều khiển 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 đừng quên thêm sự kiện phát trực tiếp.
Việc thêm nhãn trước cũng giúp bạn tập trung vào các mục tiêu của biểu mẫu – tôi cần dữ liệu nào ở đâ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 thành biểu mẫu.
Từ ngữ trong nhãn
Giả sử bạn muốn mô tả một trường email. Bạn có thể thực hiện như sau:
<label for="email">Enter your email address</label>
Hoặc bạn có thể mô tả vị trí như sau:
<label for="email">Email address</label>
Bạn sẽ chọn nội dung mô tả nào?
Ví dụ: từ 'Địa chỉ email' được ưu tiên, vì nhãn ngắn sẽ dễ quét hơn, giảm sự lộn xộn về hình ảnh, đồng thời giúp người dùng nhanh chóng nắm được dữ liệu nào 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 phần điều khiển biểu mẫu. Bạn đặt mã này ở đâu?
Chương trình nghiên cứu phương pháp hay nhất là đặt nhãn phía trên phần điều khiển biểu mẫu, để người dùng có thể quét biểu mẫu một cách nhanh chóng 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 tốt có thể
giảm đáng kể tỷ lệ bỏ qua 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 thích hợp
Có nhiều lựa chọn
phần tử biểu mẫu và loại đầu vào mà bạn có thể chọn.
Để mang lại trải nghiệm tốt nhất cho người dùng, hãy sử dụng phần tử và kiểu dữ liệu đầu vào phù hợp nhất với 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 họ 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 trực quan giữa các loại thành phần điều khiển biểu mẫu. Nút nên có dạng như một nút. Một giá trị đầu vào, chẳng hạn như giá trị nhập. Giúp người dùng dễ dàng nhận ra mục đích của chế độ kiểm soát biểu mẫu. Ví dụ: Nếu một nội dung nào đó trông giống như một đường liên kết, thì khi nhấp vào một đường liên kết, một trang mới sẽ mở ra. và không gửi biểu mẫu.
Giúp người dùng sử dụng biểu mẫu
Một bố cục xa hoa có thể thú vị, nhưng có thể gây cản trở cho việc hoàn thành một biểu mẫu.
Cụ thể, chương trình nghiên cứu rằng 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í tiếp theo trong thành phần điều khiển biểu mẫu. Khi sử dụng một cột, bạn sẽ chỉ cần đi theo một hướng.
Giúp người dùng tương tác với biểu mẫu
Để tránh những lượt nhấn và nhấp ngoài ý muốn,
và giúp người dùng tương tác với biểu mẫu của bạn, làm cho các nút đủ lớn.
Các thành phần được đề xuất
kích thước đích nhấn của nút tối thiểu là 48 px.
Bạn cũng nên thêm đủ khoảng cách giữa các thành phần điều khiển biểu mẫu bằng cách sử dụng margin
Thuộc tính CSS để giúp tránh các lượt tương tác ngoài ý muốn.
Kích thước mặc định của đối tượng điều khiển biểu mẫu quá nhỏ nên không thể sử dụng được. 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 từng thiết bị trỏ,
ví dụ như chuột sử dụng tính năng đa phương tiện pointer CSS.
// 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ề chính sách
pointer Tính năng đa phương tiện của CSS.
Cho thấy lỗi xảy ra
Để người dùng dễ dàng biết được chế độ kiểm soát biểu mẫu nào cần chú ý, hiển thị thông báo lỗi bên cạnh kiểm soát biểu mẫu mà chúng tham chiếu đến. Khi hiển thị lỗi khi gửi biểu mẫu, hãy nhớ chuyển đến kiểm soát biểu mẫu không hợp lệ đầu tiên.
Nêu rõ cho người dùng dữ liệu nào cần nhập
Hãy đảm bảo người dùng hiểu được 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? Chia sẻ với họ.
<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>
Cho người dùng biết rõ 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 nêu rõ thông tin đó! Cấu trúc của các biểu mẫu dễ tiếp cận giải thích các phương án thay thế cho các trường bắt buộc. Nếu hầu hết các trường trong một biểu mẫu đều bắt buộc, bạn nên cho biết các trường không bắt buộc.
Bạn có thể kết nối thông báo lỗi với biểu mẫu điều khiển bằng cách nào để trình đọc màn hình có thể truy cập vào thông báo lỗi đó? Bạn có thể tìm hiểu về nội dung này trong mô-đun tiếp theo.
Kiểm tra kiến thức
Kiểm tra kiến thức của bạn về thiết kế biểu mẫu
Bạn mô tả một thành phần điều khiển biểu mẫu như thế nào?
<description>.<label>.description.placeholder.Kích thước mục tiêu nhấn được đề xuất là bao nhiêu?
Bạn nên đặt thông báo lỗi ở đâu?
<form>.