UI UX là gì? Phân biệt giao diện và trải nghiệm người dùng bằng ví dụ

UI là giao diện, UX là trải nghiệm người dùng. Định nghĩa theo ISO, bảng so sánh UI và UX, ví dụ thực tế và 5 dấu hiệu website có vấn đề UX.

UI (user interface) là giao diện người dùng: những gì người dùng nhìn thấy và bấm vào trên website hay ứng dụng, như nút, menu, màu sắc, chữ. UX (user experience) là trải nghiệm người dùng: toàn bộ cảm nhận và kết quả khi họ dùng sản phẩm, từ tìm thông tin, đặt hàng đến nhận hàng. UI là một phần của UX.

Một website có thể đẹp (UI tốt) nhưng khó dùng (UX kém), ví dụ nút đặt hàng đẹp nhưng nằm khuất cuối trang. Vì vậy hai mảng luôn được làm cùng nhau.

Bài này giải thích hai khái niệm, so sánh bằng bảng và ví dụ, rồi chỉ ra dấu hiệu website đang có vấn đề về UX.

1. UX là gì?

Theo tiêu chuẩn ISO 9241-210:2019 (được Wikipedia dẫn), trải nghiệm người dùng là nhận thức và phản ứng của người dùng sinh ra từ việc sử dụng, hoặc dự định sử dụng, một hệ thống, sản phẩm hay dịch vụ. Nói gọn, UX là việc người dùng có làm được điều họ muốn một cách dễ dàng và dễ chịu hay không.

Thuật ngữ này được nhà thiết kế Donald Norman đưa vào sử dụng rộng rãi từ giữa thập niên 1990, cũng theo Wikipedia. UX không chỉ là màn hình: thời gian giao hàng, cách trả lời tin nhắn khách hỏi cũng là một phần trải nghiệm.

2. UI là gì?

UI là phần giao diện để người dùng tương tác với sản phẩm số: bố cục trang, nút bấm, biểu mẫu, biểu tượng, màu sắc, kiểu chữ, hiệu ứng khi bấm. Người làm UI quyết định mỗi màn hình trông thế nào và các thành phần được sắp xếp ra sao.

3. UI và UX khác nhau thế nào?

UX trả lời câu hỏi "sản phẩm có giải quyết đúng việc người dùng cần không", còn UI trả lời "giao diện có rõ ràng, dễ nhìn, dễ bấm không". UX quyết định cấu trúc và luồng, UI quyết định hình thức thể hiện.

4. Ví dụ: trang đặt hàng

Trên một trang đặt hàng, phần UX quyết định có bao nhiêu bước, hỏi những thông tin gì, có cần tạo tài khoản không. Phần UI quyết định nút "Đặt hàng" màu gì, to cỡ nào, các ô nhập liệu xếp ra sao.

Nếu khách phải tạo tài khoản mới đặt được một món hàng nhỏ, đó là vấn đề UX, dù giao diện đẹp đến đâu. Nếu chữ trên nút quá nhỏ để bấm bằng ngón tay trên điện thoại, đó là vấn đề UI.

5. 5 dấu hiệu website đang có vấn đề UX

Doanh nghiệp có thể nhận ra vấn đề UX qua hành vi khách, ngay cả khi không có công cụ phân tích chuyên sâu. Năm dấu hiệu sau đáng để xem lại thiết kế.

1. Khách hay nhắn hỏi những thông tin đã có trên website.
2. Nhiều người bỏ giỏ hàng ở cùng một bước.
3. Trên điện thoại phải phóng to mới đọc hoặc bấm được.
4. Khách không tìm thấy giá hoặc cách liên hệ.
5. Biểu mẫu hỏi quá nhiều thông tin không cần thiết.

Câu hỏi thường gặp

Doanh nghiệp nhỏ có cần thiết kế UI UX không?

Có, ở mức phù hợp. Doanh nghiệp nhỏ không cần nghiên cứu lớn, nhưng nên kiểm tra trang chính và luồng đặt hàng có dễ dùng trên điện thoại không. Nhờ vài khách thật thử đặt hàng và quan sát họ vướng ở đâu đã giúp phát hiện nhiều vấn đề.

Một người có làm được cả UI và UX không?

Được, và ở nhiều dự án nhỏ một designer làm cả hai. Ở dự án lớn, hai vai trò thường tách riêng: người làm UX lo nghiên cứu và luồng, người làm UI lo giao diện và design system.

Thiết kế UI UX dùng công cụ gì?

Figma là công cụ phổ biến để vẽ wireframe, thiết kế giao diện và làm prototype bấm thử. Ngoài ra còn có các công cụ khảo sát, ghi hình phiên dùng thử và phân tích hành vi để làm phần nghiên cứu UX.

Kết luận

UX là trải nghiệm tổng thể khi dùng sản phẩm, UI là giao diện người dùng nhìn và bấm vào. Website bán hàng cần cả hai: luồng đặt hàng ngắn, rõ (UX) và giao diện dễ đọc, dễ bấm trên điện thoại (UI).

Cần thiết kế lại website hoặc ứng dụng cho dễ dùng hơn? Xem dịch vụ thiết kế UI UX của Cananest.

Tài liệu tham khảo:

• Wikipedia — User experience