UX và UI: hai việc khác nhau
Giao diện đẹp không cứu được trải nghiệm tồi, nhưng trải nghiệm tốt cũng cần giao diện đủ rõ để khách đi tới đích.
UI (user interface, giao diện người dùng) là phần khách nhìn và chạm vào: nút bấm, màu sắc, chữ, bố cục màn hình. UX (user experience, trải nghiệm người dùng) rộng hơn, bao gồm toàn bộ hành trình của khách từ lúc đến trang đến lúc hoàn thành mục tiêu, trong đó giao diện chỉ là một phần. Hai việc cần làm cùng nhau vì giao diện đẹp trên một luồng sai vẫn cho kết quả kém.
UI và UX là hai từ hay bị dùng lẫn nhau, ngay cả trong giới thiết kế. Sự nhầm lẫn này không chỉ là vấn đề thuật ngữ, nó dẫn đến những quyết định sai trong dự án: thuê nhầm người, làm nhầm việc trước, rồi ngạc nhiên khi kết quả không ra.
Hai khái niệm, hai phạm vi
UI (user interface, giao diện người dùng) là những gì khách nhìn thấy và tương tác trực tiếp: nút bấm, ô chữ, màu sắc, bố cục, trạng thái hiển thị của từng màn hình. Đây là phần nằm trên bề mặt, phần mắt nhìn được.
UX (user experience, trải nghiệm người dùng) rộng hơn nhiều. Đó là toàn bộ hành trình của khách từ lúc họ tìm đến sản phẩm cho đến lúc hoàn thành việc cần làm, kể cả cảm nhận sau đó. Hành trình đó bao gồm giao diện, nhưng còn bao gồm cả nội dung, luồng đi, tốc độ tải, logic của từng bước, và thậm chí những gì xảy ra trước và sau khi khách vào trang.
Một website đánh giá phim có giao diện hoàn hảo vẫn cho trải nghiệm tệ nếu dữ liệu phim bên dưới sai. Ví dụ đó của Nielsen Norman Group nói rõ điều Sinh Vũ hay nhắc khách: UI tốt là điều kiện cần, không phải điều kiện đủ.
Khả dụng nằm ở giữa
Giữa UI và UX có một khái niệm quan trọng cần biết: khả dụng (usability). Đây là thuộc tính chất lượng của giao diện, đo ba việc: khách có học dùng được nhanh không, có dùng hiệu quả không, và có cảm thấy dễ chịu khi dùng không.
Khả dụng thuộc về giao diện, nhưng ảnh hưởng đến trải nghiệm tổng thể. Một trang có khả dụng cao, tức là nút đúng chỗ, chữ đủ rõ, bước tiếp theo hiện ra đúng lúc, là trang đang làm tốt cả UI lẫn một phần UX.
Khi nào tập trung vào từng phía
Nhấn khâu UX trước khi khách hay bỏ trang giữa chừng, đặt nhầm, gọi hỏi lại dù trang trông vẫn đẹp. Đây là dấu hiệu luồng đi có vấn đề: khách không hiểu bước tiếp theo, không tìm được thông tin cần, hoặc mất niềm tin trước khi tới nút chuyển đổi.
Nhấn khâu UI sau khi luồng và nội dung đã ổn, cần nâng cảm nhận thị giác và tính nhất quán với nhận diện thương hiệu. Đây là lúc màu, font, khoảng trắng, hình ảnh phát huy tác dụng thật sự.
Làm cả hai song song khi dựng mới hoàn toàn. Trong trường hợp này cần có đầu việc dựng luồng và cấu trúc nội dung chạy trước hoặc cùng lúc với thiết kế thị giác, không phải để giao diện đẹp rồi mới nghĩ luồng.
Lỗi thường gặp khi nhầm lẫn hai khái niệm
- Thuê làm giao diện đẹp rồi mong tỷ lệ chuyển đổi tự tăng, trong khi vấn đề nằm ở luồng và nội dung chưa được nghĩ tới.
- Coi UX và UI là một, bỏ hẳn khâu dựng luồng và cấu trúc trang, dẫn đến màn hình đẹp nhưng khách không biết đi đâu tiếp.
- Đánh giá bản thiết kế chỉ bằng mắt nhìn đẹp hay không, không kiểm tra xem khách có đi được tới đích không.
- Nghĩ đổi màu hoặc đổi nút là cải thiện trải nghiệm, trong khi gốc của vấn đề là nội dung thiếu thuyết phục hoặc trang tải chậm.
Trải nghiệm người dùng bao gồm tất cả các khía cạnh tương tác của người dùng cuối với công ty, dịch vụ và sản phẩm. Giao diện là một phần quan trọng của trải nghiệm đó, nhưng không phải toàn bộ.
Nielsen Norman Group, The Definition of User Experience (UX)
Góc nhìn của Sinh Vũ
Sinh Vũ tách rõ hai đầu việc trong mỗi dự án số. Đầu tiên là dựng luồng trải nghiệm trên Figma, để xác định khách đến từ đâu, đi con đường nào, cần thông tin gì ở từng bước, và điểm chuyển đổi đặt ở đâu. Đây là công việc UX thuần, không có màu sắc, chỉ có cấu trúc và logic.
Sau khi luồng đã được đồng thuận, Sinh Vũ mới đặt giao diện lên trên nền nhận diện thương hiệu, để trang nhìn là tin ngay từ giây đầu. Đây là công việc UI, và nó phát huy sức mạnh thật sự khi được đặt trên một luồng đúng.
Sinh Vũ không nhận làm giao diện đẹp trên một luồng chưa được nghĩ thấu. Bàn giao cuối luôn bao gồm cả bản đồ hành trình và chiến lược nội dung, không chỉ các màn hình thiết kế.
Nguồn tham khảo
Nielsen Norman Group, The Definition of User Experience (UX). Nielsen Norman Group, UX vs. UI (video). Kinh nghiệm thực hành Sinh Vũ.
Câu hỏi thường gặp
Thuê một người có thể làm được cả UX lẫn UI không?
Có người làm được cả hai, nhưng đó là hai đầu việc khác nhau cần được thực hiện theo đúng thứ tự: luồng và cấu trúc nội dung trước, giao diện thị giác sau. Nếu thuê một người làm cả hai mà họ bỏ qua khâu dựng luồng để nhảy thẳng vào thiết kế đẹp, kết quả thường là trang trông tốt nhưng khách không đi được tới điểm mua hay liên hệ.
Làm sao biết vấn đề của trang mình nằm ở UX hay UI?
Nếu khách hay bỏ trang giữa chừng, đặt sai, hoặc gọi hỏi lại dù trang trông vẫn đẹp, vấn đề thường nằm ở luồng, tức là UX. Nếu khách đến, hiểu cần làm gì, đi đúng bước nhưng cảm giác trang thiếu tin tưởng hoặc không nhất quán với thương hiệu, vấn đề nằm ở giao diện, tức là UI. Hai trường hợp cần hai cách xử lý khác nhau.