15 Luật khi thiết kế Form

giaiphapvba

Administrator
Thành viên BQT
1. Hãy liệt kê trên một cột
Bạn cần đăng nhập để thấy đính kèm

Ở bên trái là ví dụ tốt. Ở bên phải là ví dụ không tốt. Việc liệt kê theo hàng ngang làm cho người dùng khó nhập dữ liệu.

2. Hãy để nhãn Label ở phía trên ô Textbox.
Bạn cần đăng nhập để thấy đính kèm

Ở bên trái là ví dụ tốt. Ở bên phải là ví dụ không tốt. Với các máy laptop có độ rộng màn hình không thoải mái thì thiết kế như bên trái sẽ giúp người dùng dễ quan sát và nhập dữ liệu hơn.

3. Nên đặt Label sát với ô Textbox. Không nên để khoảng trống lớn giữa Label và Textbox.
Bạn cần đăng nhập để thấy đính kèm

Ở bên trái là ví dụ tốt, ở bên phải là ví dụ không tốt.

4. Hãy dừng ngay việc viết toàn bộ các ký tự bằng chữ in hoa.
Bạn cần đăng nhập để thấy đính kèm

Ở bên trái là ví dụ tốt, ở bên phải là ví dụ không tốt.

5. Nếu như chỉ có 5 lựa chọn trở xuống, thì nên liệt kê hết ra.
Bạn cần đăng nhập để thấy đính kèm

Ở bên trái là ví dụ tốt. Ở bên phải là ví dụ không tốt.
Thao tác Drop Down gây khó khăn cho người dùng, do đó nếu chỉ có vài lựa chọn (5 lựa chọn trở xuống) thì nên liệt kê hết ra.

6. Không chèn thuyết minh vào ô nhập dữ liệu.
Bạn cần đăng nhập để thấy đính kèm

Ở bên trái là ví dụ tốt. Ở bên phải là ví dụ không tốt.
Trong khi chờ người dùng nhập dữ liệu, trong ô textbox có một số người thích để các chữ thuyết minh nội dung cần nhập vào đây.
Tuy nhiên làm như vậy có thể gây khó khăn cho người dùng xác nhận xem mình đã nhập đầy đủ dữ liệu hay còn bỏ sót chỗ nào hay không. Ngoài ra việc kiểm tra nội dung đã nhập để đưa ra cảnh báo cũng sẽ gặp khó khăn nếu bạn ghi sẵn vào ô nhập dữ liệu các nội dung gợi ý.
Trên quan điểm người dùng, nếu cần có thuyết minh thì ghi rõ chú thích ở bên dưới ô nhập dữ liệu. Không nên chèn nội dung đó vào ô nhập dữ liệu.

(Còn nữa)
 

Euler

Administrator
Thành viên BQT
7. Không xếp checkbox hoặc radio button thành hàng ngang
Bạn cần đăng nhập để thấy đính kèm

Ở bên trái là ví dụ tốt, bên phải là ví dụ không tốt.
Khi xếp checkbox hoặc radio button thành hàng dọc thì người dùng dễ xác nhận là họ đã tích chọn hay chưa. Do đó không xếp hàng ngang, mà hãy xếp thành hàng dọc.

8. Nên làm rõ chức năng của nút bấm, tránh ghi chung chung.
Bạn cần đăng nhập để thấy đính kèm

Ở bên trái là ví dụ tốt. Sign Up được hiểu là đăng ký.
Ở bên phải là ví dụ chưa tốt. Submit được hiểu là gửi. Nhưng gửi cái gì, cái gì được gửi là không rõ ràng, chưa được làm rõ.

9. Hiển thị rõ ràng nội dung lỗi.
Bạn cần đăng nhập để thấy đính kèm

Bên trái là ví dụ tốt. Nội dung thông báo lỗi rằng đã tồn tại địa chỉ mail như vậy rồi.
Bên phải là ví dụ chưa tốt. Thông báo là tìm thấy 1 lỗi, cụ thể là lỗi gì thì không nói rõ, gây hoang mang cho người dùng.

10. Không ra thông báo lỗi giữa chừng.
Bạn cần đăng nhập để thấy đính kèm

Bên trái là ví dụ tốt. Bên phải là ví dụ chưa tốt.
Người dùng nhập địa chỉ mail nhưng thiếu .com, bên phải lập tức vô hiệu hóa không cho người dùng nhập nữa.
Chúng ta nên để người dùng nhập xong, sau khi ấn nút thực thi hoặc chuyển sang mục khác, thì mới ra thông báo lỗi, không nên chặn giữa chừng.
(Còn nữa)
 

giaiphapvba

Administrator
Thành viên BQT
11. Hiển thị Help Text
Một số người thiết kế form thường để trỏ chuột vào thì hiện nội dung Help. Hoặc click vào thì hiện nội dung Help.
Tuy nhiên hãy cố hết sức để thể hiện nội dung Help ra ngay bên ngoài.
Bạn cần đăng nhập để thấy đính kèm

Ví dụ bên trái là ví dụ tốt. Ví dụ bên phải là ví dụ chưa tốt, vì phải trỏ chuột vào thì nội dung Help mới hiện ra.

12. Gợi ý hành động tiếp theo
Bạn cần đăng nhập để thấy đính kèm

Ví dụ bên trái là ví dụ tốt. Hành động tiếp theo là ấn vào nút Sign Up, và lúc này nút bấm Sign Up được làm nổi bật lên.
Tuy nhiên chú ý rằng, gợi ý hành động tiếp theo nên đơn giản, tránh rườm rà sẽ làm rối loạn quan sát của người dùng.

13. Độ rộng phù hợp
Bạn cần đăng nhập để thấy đính kèm

Ô nhập dữ liệu có bao nhiêu ký tự, tương ứng với đó nên có quy chuẩn độ rộng phù hợp.
Chẳng hạn với số điện thoại, số ký tự dự trù là bao nhiêu, từ đó tính toán độ rộng ô nhập dữ liệu một cách hợp lý.

14. Không phải là [*], hãy dùng [Optional]
Bạn cần đăng nhập để thấy đính kèm

Nếu bạn để ký tự * với hàm ý là bắt buộc phải nhập trường thông tin này, người dùng có thể suy nghĩ, vậy dấu * mang ý nghĩa gì.
Bởi vì không phải lúc nào người dùng cũng hiểu điều này. Thay vì sử dụng * , các bạn có thể định nghĩa trường thông tin nào là Tùy Ý [Optional].
Ở hình trên, ví dụ bên trái là ví dụ tốt, ví dụ bên phải là ví dụ chưa tốt.

15. Nên tạo nhóm các thông tin liên quan.
Bạn cần đăng nhập để thấy đính kèm

Việc sắp xếp các thông tin liên quan với nhau vào cùng một nhóm sẽ giúp người dùng nhanh chóng lý giải.
Ở hình trên, ví dụ bên trái là ví dụ tốt, ví dụ bên phải là ví dụ chưa tốt.

Nguồn tham khảo:
 
Top