Form là thành phần rất quan trọng đối với web, app. Bất cứ khi nào nhập liệu ta thường sẽ làm việc với Form. Tăng cường UX cho Form Web chính là cách Developer mang lại cảm giác thoải mái, tiện dụng hơn cho người dùng của mình.
Sau đây, Ad sẽ giới thiệu cho các bạn 11 kỹ thuật giúp tăng trải nghiệm người dùng cho Form trên Web.
1. Cho phép sử dụng bàn phím tối đa
- Khi vào một màn hình nhập liệu, tự động hiển thị con trỏ vào vị trí nhập liệu đầu tiên
- Khi tab/shift-tab thì phải lần lượt đi qua các control element và thao tác được (luồng tab: từ trái sang phải, từ trên xuống dưới; Luồng shift-tab là ngược lại.).
2. Đổi màu thành phần đang được tương tác
Khi di chuột/focus/click vào một UI Element mà tương tác được thì phải có hiệu ứng đồ họa, ví dụ đổi màu viền hoặc màu nền, cho người dùng biết.
Khuyến nghị: Đổi màu viền đối với ô nhập liệu; Đổi màu nền đối với Button, dòng trong bảng; Đổi con trỏ chuột sang hình bàn tay khi di vào nút
3. Bấm enter phải focus vào nút quan trọng và an toàn nhất
– Ví dụ khi edit hoặc search thì focus vào button “Lưu”/”Tìm kiếm”.
– Khi delete thì focus vào button “Cancel”.
4. Phân biệt giữa trường thông tin bắt buộc và không bắt buộc
Các thông tin bắt buộc phải có ký hiệu để đánh dấu, thường dùng dấu *.
5. Dữ liệu phải được validate tính hợp lệ trước khi submit
Các validate cơ bản như kiểu dữ liệu, độ dài, trường bắt buộc phải được kiểm tra tính hợp lệ ở phía frontend trước khi gửi Submit lên backend.
6. Disable button ngay khi click submit
Để tránh việc click submit nhiều lần, ngay khi vừa click Submit thực hiện disable hoặc block Button cho các thao tác sửa, xóa, tạo mới.
7. Thông báo lỗi dữ liệu cần hiển thị ngay dưới ô nhập liệu
- Khi người dùng nhập thông tin không hợp lệ vào một trường dữ liệu, ứng dụng đổi màu border cho ô nhập liệu và có message bên dưới, đồng thời focus vào ô nhập liệu đó.
- Message cần rõ ràng và chi tiết hướng dẫn người dùng cách sửa
8. Giữ nguyên hiện trạng dữ liệu khi gặp lỗi
Khi có lỗi xảy ra, dù là phía frontend hay do backend, dữ liệu trên Form phải được dữ nguyên để người dùng có thể chỉnh sửa và đỡ phải nhập liệu lại.
9. Lưu nháp khi nhập liệu các nội dung dài
Khi nhập liệu các nội dung dài như 1 bài viết, phải có nút để lưu nháp hoặc tự động lưu nháp để tránh mất dữ liệu người dùng. Trong trường hợp không có lưu nháp, khi tắt Form phải có Popup cảnh báo người dùng về việc có dữ liệu chưa được lưu và mất dữ liệu.
10. Cho phép người dùng tạo nội dung khác mà không cần đóng form
Đối với các nội dung phải tạo nhiều và liên tục, có checkbox để cho người dùng chọn tạo thêm nội dung khác. Khi checkbox được chọn và người dùng bấm Submit, thì Form sẽ không bị đóng lại và các dữ liệu trên Form được clear về trạng thái ban đầu để người dùng nhập dữ liệu khác.
11. Không thay đổi dữ liệu khi không update
Người dùng chọn 1 item trong danh sách để chỉnh sửa, sau đó thay đổi nội dung rồi bấm Hủy, hoặc người dùng bấm nút gửi sau đó hệ thống báo lỗi rồi bấm Đóng. Khi đó, dữ liệu gốc ở trong danh sách dữ liệu sẽ không được phép thay đổi.
12. Kết luận
Với 11 kỹ thuật rất cơ bản với Form này, Ad hy vọng rằng UX cho form web của bạn sẽ giúp người dùng thoải mái hơn.
Bạn có thể đọc thêm các bài khác trong Series trải nghiệm người dùng này nhé.
Muốn tìm hiểu thêm về UI/UX, bạn nên tìm đọc cuốn Don’t make me think .
