Bỏ qua menu, vào nội dung chính

UI/UX là gì?

UI (User Interface - Giao diện người dùng) là phần hình ảnh người dùng nhìn thấy và chạm vào: màu sắc, nút bấm, bố cục, kiểu chữ, biểu tượng. UX (User Experience - Trải nghiệm người dùng) là toàn bộ cảm nhận và hiệu quả khi một người dùng sản phẩm để đạt mục tiêu của họ - từ lúc tìm thấy sản phẩm, thao tác, đến khi hoàn tất việc cần làm. UI là một phần của UX, nhưng UX còn bao gồm cả tốc độ, luồng thao tác, và việc sản phẩm có giải quyết đúng nhu cầu hay không.

Thuật ngữ 'User Experience' được Don Norman đặt ra khi ông làm việc tại Apple đầu thập niên 1990, với ý muốn nhấn mạnh rằng trải nghiệm người dùng không chỉ là màn hình mà còn bao gồm cả cách sản phẩm hoạt động, cách nó được hỗ trợ, và cảm giác tổng thể. Một giao diện (UI) có thể rất đẹp nhưng UX tệ nếu người dùng không tìm thấy nút cần bấm, hoặc phải qua quá nhiều bước để hoàn tất một việc đơn giản. Ngược lại một giao diện tối giản, ít trang trí vẫn có thể có UX tốt nếu luồng thao tác rõ ràng và nhanh.

Thành phần

  1. Nghiên cứu người dùng (User Research)

    Phỏng vấn, quan sát người dùng thật để hiểu họ đang gặp khó khăn gì trước khi vẽ bất kỳ giao diện nào.

  2. Wireframe

    Bản phác thảo bố cục đơn giản, chưa có màu sắc hay hình ảnh thật, tập trung vào vị trí và luồng thao tác.

  3. Thiết kế trực quan (Visual Design / UI)

    Màu sắc, kiểu chữ, biểu tượng, khoảng cách - phần người dùng nhìn thấy trực tiếp trên màn hình.

  4. Prototype tương tác

    Bản mô phỏng có thể bấm thử trước khi lập trình thật, dùng để kiểm tra luồng thao tác với người dùng.

  5. Kiểm tra khả dụng (Usability Testing)

    Cho người dùng thật thao tác trên bản thiết kế hoặc sản phẩm, quan sát họ có bị vướng ở bước nào không.

Lợi ích và thời điểm triển khai

Lợi ích

  • Luồng thao tác được rút gọn, giảm số bước và số lần bối rối phải hỏi lại.
  • Giao diện rõ ràng, nhãn nút đúng nghĩa giúp người dùng tự thao tác được mà không cần hướng dẫn thêm.
  • Một hệ thống thiết kế nhất quán (design system) giúp thêm màn hình mới mà không phá vỡ trải nghiệm cũ.
  • Kiểm tra trên wireframe và prototype rẻ hơn nhiều so với phát hiện sau khi đã lập trình xong.

Nên triển khai khi

  • Người dùng thường xuyên hỏi lại cách thao tác dù đã có hướng dẫn
  • Tỷ lệ bỏ giữa chừng ở một bước cụ thể trong form hoặc quy trình đặt hàng cao bất thường
  • Giao diện đã được thêm tính năng nhiều lần, không còn nhất quán về màu sắc và bố cục
  • Sắp làm phiên bản mới hoặc mở rộng sang app di động, cần một hệ thống thiết kế thống nhất trước

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

UI và UX cái nào quan trọng hơn?

Không cái nào thay được cái nào. UX quyết định người dùng có hoàn tất được việc họ cần hay không; UI quyết định trải nghiệm đó có dễ chịu, đáng tin hay không. Một sản phẩm UX tốt nhưng UI xấu vẫn dùng được nhưng kém chuyên nghiệp; UI đẹp mà UX tệ thì người dùng bỏ đi dù giao diện bắt mắt.

Thiết kế UI/UX có cần làm trước khi lập trình không?

Nên có, ít nhất là wireframe và luồng thao tác chính, vì sửa thiết kế trên giấy hoặc prototype rẻ hơn nhiều lần so với sửa sau khi đã lập trình xong. Với dự án nhỏ, phần thiết kế có thể gọn lại nhưng không nên bỏ hẳn bước phác thảo luồng.

Design system là gì và có cần ngay từ đầu không?

Design system là tập hợp các quy tắc và thành phần giao diện dùng chung (màu, kiểu chữ, nút, ô nhập) để mọi màn hình nhất quán. Dự án nhỏ có thể bắt đầu với một bộ quy tắc tối giản rồi mở rộng dần, không cần dựng đầy đủ ngay từ ngày đầu.

Làm sao biết một thiết kế UX có tốt hay không trước khi lập trình?

Cách đáng tin nhất là cho vài người dùng thật thao tác thử trên prototype và quan sát họ có bị vướng ở bước nào không, thay vì chỉ hỏi ý kiến chủ quan trong nội bộ đội dự án.

Trao đổi về dự án