UX tương tác trên web, các kỹ thuật cơ bản

166

Tương tác là cách Website phản hồi lại thông tin, giúp người dùng biết được kết quả thực hiện công việc. Từ đó, người dùng biết được mình làm đúng chưa, cần điều chỉnh gì, bước tiếp theo là gì. UX tương tác trên web đặc biệt quan trọng giúp người dùng sử dụng web dễ dàng hơn.

1. Có rõ ràng thông báo sau khi xử lý

Khi xử lý xong tác vụ, phải có rõ ràng thông báo kết quả thực hiện, kể cả khi thành công hay thất bại. Ví dụ như tài khoản đã tồn tại. Và phân biệt rõ ràng các loại thông báo bằng màu sắc.

Ảnh thông báo toast

2. Khi tương tác quá 1s cần có progress indicator

Các thao tác như tìm kiếm, lưu, sửa, xóa… cần có hiệu ứng để cho người dùng biết tác vụ đang được thực hiện. Hiệu ứng phải dạng động.

 

Ảnh ux tương tác

3. Xác nhận với thao tác nguy hiểm, quan trọng

Với các thao tác nguy hiểm, quan trọng, cần phải có popup xác nhận thực hiện. Ví dụ các thao tác:

  • Xóa, từ chối, phê duyệt
  • Gửi thông tin quan trọng cho nhiều người
  • Xác nhận về việc mất dữ liệu có thể mất khi chưa lưu

ảnh confirm popup

4. File import cần hỗ trợ người dùng dễ nhập liệu

Nếu như data của cell là giá trị hợp lệ trong 1 danh sách, thì cell phải cung cấp dưới dạng dropdown cho người dùng chọn. Trong file import phải có hướng dẫn về các trường bắt buộc, không bất buộc.

ảnh excel dropdown

5. Thể hiện kết quả import bằng file

Kết quả của thao tác import cũng phải được thể hiện bằng file, tốt nhất là bằng cách bổ sung thêm 2 cột kết quả vào file import gốc. 2 cột đó là kết quả (thành công/thất bại), và nguyên nhân lỗi. Từ đó, người dùng có thể lọc các bản ghi lỗi và sửa.

6. Export data chứa thông tin tìm kiếm

Khi export data ra file, trong file export phải chứa cả các thông tin tìm kiếm, lọc. Thông tin sẽ giúp người dùng biết được dữ liệu ứng với các điều kiện gì.

7. Freeze header của file

File import/export cần freeze header của File để người dùng có thể dễ dàng theo dõi dữ liệu ở bất kỳ đâu. Khi người dùng cuộn file xuống bên dưới, các header vẫn hiển thị để người dùng có thể tiện theo dõi.

8. Kết luận

Trên đây là những kỹ thuật mà Ad thấy là sẽ giúp tăng cường UX tương tác trên website. Các bạn áp dụng để thấy được hiệu quả nha. Chúc các bạn thành công.

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 .