User Interface(UI)
Lớp mà người dùng nhìn thấy và chạm vào: màn hình, nút bấm, biểu mẫu, thông báo, màu sắc, chữ nghĩa. Là phần hữu hình của sản phẩm và cũng là phần khách hàng góp ý nhiều nhất.
Định nghĩa
Tất cả những gì hiện lên màn hình và phản hồi lại khi bạn chạm vào: nút, ô nhập, danh sách, thông báo lỗi, màu, chữ, khoảng trắng. Đó là UI — lớp duy nhất người dùng thực sự nhìn thấy. Logic hay đến mấy mà UI khó dùng thì với họ, sản phẩm là khó dùng.
UI là cái bạn nhìn và chạm. UX là toàn bộ cảm nhận trước, trong và sau khi chạm — tính cả kỳ vọng hình thành từ lúc chưa mở app.
UI khác UX chỗ nào
| Góc nhìn | UI | UX |
|---|---|---|
| Phạm vi | Một màn hình, một thành phần cụ thể | Toàn bộ chuỗi thao tác, cả trước và sau khi mở app |
| Câu hỏi chính | Nút này đặt đâu, màu gì, chữ ghi sao | Người ta có đạt được mục tiêu không, mất bao lâu, có bực không |
| Sản phẩm bàn giao | Mockup, design system, bảng màu, spec khoảng cách | Persona, journey map, kết quả usability test, luồng thao tác |
| Đo bằng | Độ tương phản, kích thước vùng chạm, tính nhất quán | Tỷ lệ hoàn thành tác vụ, thời gian thao tác, số lần gọi tổng đài |
| Ai phụ trách | UI designer | UX designer, researcher, và ở phần lớn dự án VN thì là BA |
Ví dụ từ một app ngân hàng số trong nước: màn chuyển tiền chữ to, nút gradient, hiệu ứng mượt. Nhưng để chuyển cho người đã lưu trong danh bạ, phải bấm qua 5 màn, chọn lại tài khoản nguồn dù chỉ có một, rồi nhập OTP hiệu lực 60 giây trong khi tin nhắn về sau 40 giây. UI tốt, UX tệ. Ngược lại cũng có: app đặt vé xe khách giao diện cũ kỹ mà nhớ tuyến hay đi, cho chọn ghế đúng như sơ đồ xe thật, xong việc trong 30 giây.
Gồm những gì
- Thành phần nhập liệu: ô text, chọn ngày, dropdown, radio, checkbox, upload.
- Điều hướng: menu, tab, breadcrumb, nút quay lại.
- Hiển thị: bảng, thẻ, biểu đồ, badge trạng thái.
- Phản hồi hệ thống: toast, dialog xác nhận, thanh tiến trình, trạng thái rỗng.
Còn một nhóm không nằm trong thư viện component nào: chữ nghĩa trên giao diện — nhãn nút, thông báo lỗi, câu gợi ý trong ô nhập. Phần này gọi là UX writing, ở VN thường không ai nhận rồi rơi vào tay BA.
Phần UI mà BA phải tự lo
Bốn thứ sau là nghiệp vụ, designer không thể tự biết:
- Nội dung thông báo lỗi. "Đã xảy ra lỗi" là vô dụng. Phải là "Số dư không đủ để thực hiện giao dịch, vui lòng nạp thêm hoặc chọn nguồn tiền khác."
- Quy tắc bật/tắt. Nút "Hủy đơn" biến mất hay chuyển xám khi đơn đã xuất kho, và di chuột vào thì hiện gì.
- Định dạng dữ liệu. Số tiền, ngày giờ, số điện thoại, mã số thuế, biển số xe — mỗi thứ một quy ước, và quy ước ở VN hay khác chuẩn quốc tế.
- Giá trị mặc định. Mặc định đúng tiết kiệm cho người nhập liệu hàng nghìn cú bấm mỗi tháng.
Khả năng tiếp cận và chuẩn WCAG
Giao diện có dùng được với người khiếm thị, người phân biệt màu kém, người không thao tác nổi chuột hay không — đó là accessibility. Chuẩn quốc tế cho phần này là WCAG (Web Content Accessibility Guidelines, do W3C ban hành), chia ba mức: A tối thiểu, AA là mức phần lớn hợp đồng và luật các nước lấy làm đích, AAA nghiêm ngặt tới mức hiếm sản phẩm nào đạt toàn phần.
Bốn tiêu chí sau BA viết thẳng thành yêu cầu phi chức năng, QC nghiệm thu được:
- Tương phản chữ trên nền tối thiểu 4,5:1 với chữ thường, 3:1 với chữ lớn. Đó là ngưỡng của mức AA.
- Thao tác nào làm được bằng chuột thì cũng phải làm được bằng bàn phím, và vị trí tiêu điểm bàn phím phải nhìn thấy rõ.
- Ô nhập, nút chỉ có biểu tượng, ảnh mang thông tin đều cần nhãn cho trình đọc màn hình. Để trống hoặc lấy tên file làm nhãn là lỗi.
- Không truyền tải thông tin chỉ bằng màu sắc: dòng lỗi đỏ phải kèm chữ hoặc biểu tượng, biểu đồ nhiều đường phải kèm nhãn hoặc kiểu nét riêng.
Khách châu Âu, ngân hàng và dự án nhà nước hay ghi thẳng "tuân thủ WCAG 2.1 mức AA" vào hồ sơ mời thầu. Hỏi ngay buổi kick-off, vì sửa tương phản và thứ tự tab sau khi code xong nghĩa là mở lại gần như mọi màn hình.
Mẹo khi đi làm
Khi review UI, tự hỏi người dùng của mình đang làm việc trong điều kiện nào. Thủ kho cầm điện thoại trong kho lạnh, đeo găng tay, ánh sáng vàng. Vùng chạm 24px và chữ xám nhạt trên nền trắng nghe rất tinh tế trong phòng họp máy lạnh, ngoài kho thì bấm mười lần trượt tám.
Còn nếu phải chọn một trận để đánh với designer, chọn trận về độ tương phản và cỡ chữ — đây là trận duy nhất bạn có sẵn con số trong chuẩn để chống lưng.
