Trong phần đầu tiên, bạn đã tìm hiểu cách xây dựng một biểu mẫu cơ bản. Phần này trình bày toàn bộ 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 vì sao một giao diện người dùng (UI) được triển khai hiệu quả 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à phiền toái. Không nhất thiết phải là như vậy. Để đảm bảo mang lại trải nghiệm người dùng chất lượng cao, hãy thiết kế giao diện người dùng thật trực quan. Hãy đảm bảo bạn phân phối thiết kế đồ hoạ và cấu trúc biểu mẫu tối ưu (bố cục, khoảng cách, kích thước và màu sắc phông chữ) cũng như giao diện người dùng logic (chẳng hạn như từ ngữ của 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 dễ sử dụng nhé.
Nhãn
Bạn có nhớ phần tử <label> dùng để làm gì không?
Nhãn mô tả chế độ kiểm soát biểu mẫu.
Nhãn dễ thấy và được viết rõ ràng giúp người dùng hiểu mục đích của việc kiểm soát biểu mẫu.
Sử dụng nhãn cho mọi chế độ đ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 đừng quên thêm nó.
Trước tiên, việc thêm nhãn cũng giúp bạn tập trung vào mục tiêu của biểu mẫu. Ở đây, tôi cần những dữ liệu nào? Khi đã hiểu rõ điều này, 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.
Từ ngữ nhãn
Giả sử bạn muốn mô tả một trường 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?
Trong ví dụ của chúng tôi, từ "Địa chỉ email" được ưu tiên, vì nhãn ngắn dễ quét hơn, giảm sự lộn xộn về hình ảnh và giúp người dùng hiểu dữ liệu nào cần nhanh hơn.
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 một thành phần điều khiển biểu mẫu. Bạn đặt mã này ở đâu?
Nghiên cứu cho thấy phương pháp hay nhất là đặt nhãn ở phía trên thành phần điều khiển 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 tốt có thể
làm 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. Bạn có thể chọn nhiều thành phần biểu mẫu và loại dữ liệu đầu vào.
Để mang lại trải nghiệm tốt nhất cho người dùng, hãy sử dụng thành phần và loại đầ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 phải điền nhiều dòng văn bản, hãy sử dụng phần tử <textarea>.
Nếu họ cần chấp nhận các điều khoản và điều kiện của trang web của bạn, hãy sử dụng <input type="checkbox">.
Bạn cũng nên phân biệt trực quan các loại điều khiển biểu mẫu khác nhau. Nút phải trông giống như một nút. Một dữ liệu đầu vào, chẳng hạn như một dữ liệu đầu vào. Giúp người dùng dễ dàng nhận ra mục đích của việc kiểm soát biểu mẫu. Ví dụ: Nếu nội dung nào đó trông giống như một đường liên kết, thì việc nhấp vào đường liên kết đó sẽ mở ra một trang mới và không gửi biểu mẫu.
Giúp người dùng di chuyển trong biểu mẫu
Bố cục xa hoa có thể mang đến niềm vui, 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 rằng tốt nhất là chỉ 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 của chế độ điều khiển biểu mẫu. Khi sử dụng một cột thì chỉ có một hướng đi theo.
Giúp người dùng tương tác với biểu mẫu
Để tránh các lượt nhấn và nhấp không chủ ý cũng như giúp người dùng tương tác với biểu mẫu, hãy làm cho các nút đủ lớn.
Kích thước đích nhấn nên dùng của nút tối thiểu là 48px.
Bạn cũng nên thêm đủ khoảng cách giữa các thành phần kiểm soát biểu mẫu bằng cách sử dụng thuộc tính CSS margin để tránh các lượt tương tác không chủ ý.
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 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 các thiết bị trỏ khác nhau, chẳng hạn như chuột, bằng cách sử dụng tính năng đa phương tiệ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ề tính năng nội dung đa phương tiện của CSS pointer.
Hiển thị lỗi nơi chúng xảy ra
Để giúp người dùng dễ dàng tìm ra chế độ kiểm soát biểu mẫu nào cần 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ọ 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.
Cho người dùng biết rõ những dữ liệu cần nhập
Đảm bảo người dùng hiểu cách nhập dữ liệu hợp lệ. Họ có cần phải 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>
Cho người dùng biết rõ những trường 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õ trường đó! Cấu tạo của các biểu mẫu hỗ trợ tiếp cận giải thích các phương án thay thế để biểu thị các trường bắt buộc. Nếu hầu hết các trường trong biểu mẫu đều là 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ể làm cách nào để kết nối thông báo lỗi với các chế độ điều khiển biểu mẫu để trình đọc màn hình có thể truy cập các thông báo này? Bạn có thể tìm hiểu về điều này trong mô-đun tiếp theo.
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 tuỳ chọn kiểm soát biểu mẫu như thế nào?
<description>.<label>.description.placeholder.Kích thước mục tiêu nhấn đề xuất là bao nhiêu?
Bạn nên đặt thông báo lỗi ở đâu?
<form>.