UI Là Gì? Cách Audit Giao Diện, Trạng Thái Và Khả Năng Truy Cập

UI (User Interface) là lớp giao diện mà người dùng nhìn thấy và tương tác: typography, màu sắc, button, form, menu, card, table, icon, spacing và trạng thái phản hồi. UI không chỉ là “làm đẹp”; nó phải giúp người dùng nhận biết, hiểu, thao tác và biết hệ thống đang xảy ra điều gì.

Phạm vi bài viết tập trung vào visual hierarchy, component states, responsive behavior, form UI, accessibility implementation và design consistency. Task flow/usability được phân tích trong UX; loading/interaction/layout metrics trong Core Web Vitals; architecture trong Website Architecture.

UI khác UX, IA và visual identity thế nào?

Khái niệm	Trọng tâm	Ví dụ
UI	Thành phần hiển thị và trạng thái tương tác	Button, form, menu, typography, feedback
UX	Toàn bộ hành trình hoàn thành nhiệm vụ	Tìm sản phẩm, đặt lịch, nhận hỗ trợ
Information Architecture	Tổ chức và đặt tên thông tin	Category, hierarchy, navigation
Visual identity	Biểu đạt thương hiệu	Màu, font, hình ảnh, illustration

UI đẹp không sửa được một user flow sai. Ngược lại, flow đúng nhưng component khó nhận biết hoặc thiếu trạng thái cũng làm task thất bại. UI và UX liên quan nhưng nên được đánh giá theo tiêu chí riêng.

Visual hierarchy phải giúp người dùng nhận biết ưu tiên

• H1, heading và body text có hierarchy rõ.
• CTA chính nổi bật nhưng không làm mờ thông tin quan trọng.
• Link, button, label và text thường dễ phân biệt.
• Giá, lỗi, điều kiện và trạng thái không bị giấu bằng màu quá nhạt.
• Khoảng trắng, line length và line-height hỗ trợ đọc.
• Mobile giữ thứ tự nội dung phù hợp với nhiệm vụ.

Component cần đủ trạng thái

State	UI cần thể hiện
Default	Chức năng và affordance rõ
Hover	Phản hồi bổ sung, không phải dấu hiệu duy nhất
Focus	Keyboard focus dễ nhận biết
Selected/active	Item hoặc lựa chọn hiện tại
Disabled	Không khả dụng và lý do khi cần
Loading	Hệ thống đang xử lý, hạn chế thao tác trùng
Empty	Không có dữ liệu và bước tiếp theo
Error	Vấn đề cụ thể và cách sửa
Success	Hành động hoàn tất và next step

Chỉ thiết kế happy path khiến developer phải tự đoán các trạng thái còn lại. Đây là nguồn phổ biến của button không rõ, duplicate submit, form lỗi và giao diện thiếu nhất quán.

Responsive UI không phải thu nhỏ desktop

• Xác định component đổi cột, thứ tự hoặc behavior ở breakpoint nào.
• Menu mobile có open/close/focus state rõ.
• Table có cách cuộn hoặc chuyển layout phù hợp.
• Ảnh có aspect ratio và focal point phù hợp.
• Sticky CTA không che nội dung, field hoặc keyboard.
• Form dùng input type và autofill phù hợp.
• Không bỏ chức năng quan trọng chỉ vì màn hình nhỏ.

Form UI và validation

• Dùng label rõ; placeholder chỉ hỗ trợ ví dụ.
• Required/optional state được mô tả nhất quán.
• Error gắn đúng field và nói cách sửa.
• Không xóa dữ liệu đã nhập khi một field lỗi.
• Submit có loading/disabled state để tránh gửi trùng.
• Success state nói rõ dữ liệu đã nhận và bước tiếp theo.
• Backend delivery phải được QA ngoài lớp UI.

Nếu cần đánh giá toàn bộ hành trình form từ intent tới completion và backend handoff, xem UX audit theo nhiệm vụ.

Accessibility phải được phản ánh trong component

• Text và background có contrast đủ để đọc theo tiêu chuẩn áp dụng.
• Không dùng màu là tín hiệu duy nhất cho trạng thái.
• Focus indicator rõ và không bị CSS loại bỏ.
• Icon-only control có accessible name.
• Touch target đủ dễ thao tác.
• Motion có phương án giảm khi phù hợp.
• Heading và landmark phản ánh cấu trúc nội dung.
• Image có alt phù hợp hoặc được đánh dấu trang trí.

Mockup không tự chứng minh accessibility. Sau khi code cần test keyboard, semantics và behavior thực tế. Specification trước development nằm ở Mockup, wireframe và prototype.

Design tokens giúp giữ consistency

Token	Ví dụ
Color	Text, surface, border, primary, success, warning
Typography	Family, size, weight, line-height
Spacing	Scale khoảng cách
Shape	Radius, border, shadow
Motion	Duration, easing, reduced motion
Breakpoint	Điểm component đổi behavior
Icon	Library, size, stroke, accessible label

Consistency không có nghĩa mọi trang giống nhau. Component cùng chức năng nên có behavior nhất quán; hierarchy vẫn có thể thay đổi theo page type.

UI liên quan Core Web Vitals ở đâu?

Quyết định UI có thể ảnh hưởng performance: hero media, slider, font, modal, chat widget và layout động có thể làm chậm loading, interaction hoặc làm bố cục dịch chuyển. Tuy nhiên metric, field-vs-lab và diagnosis được phân tích sâu trong bài Core Web Vitals.

• Reserve space cho media và dynamic blocks.
• Không tải asset nặng chỉ vì thẩm mỹ nếu giá trị thấp.
• Giữ button/form phản hồi ngay cả khi script bên thứ ba chậm.
• Popup/chat không che nội dung hoặc thao tác.

Acceptance criteria cho UI

Hạng mục	Pass khi
Hierarchy	Vai trò và hành động chính dễ nhận biết
States	Đủ default/focus/loading/error/success khi phù hợp
Responsive	Không mất chức năng hoặc nội dung quan trọng
Keyboard	Focus và thao tác theo thứ tự hợp lý
Form	Label, validation và feedback rõ
Consistency	Component cùng chức năng hành xử giống nhau
Implementation	Frontend thực tế khớp specification đã duyệt

Các lỗi UI thường gặp

• Đánh giá UI chỉ bằng đẹp/xấu.
• Chỉ thiết kế happy path hoặc desktop.
• Dùng placeholder thay label.
• Không có focus/error/success state.
• CTA sticky che nội dung trên mobile.
• Dùng màu là dấu hiệu duy nhất.
• Component cùng chức năng nhưng behavior khác nhau.
• Đổi UI sitewide mà không có specification, pilot và read-back.

UI nằm ở đâu trong hệ thống thiết kế?

• UX: task, journey, friction và usability testing.
• Website Architecture: hierarchy/page type/navigation cấp hệ thống.
• Core Web Vitals: LCP, INP, CLS và performance diagnosis.
• Mockup: specification và handoff trước development.

Kết luận

UI là hệ thống visual hierarchy, component và trạng thái giúp người dùng nhận biết và thao tác. Hãy thiết kế đủ states, responsive behavior và accessibility; dùng UX để đánh giá toàn hành trình, CWV để đo performance và architecture để xử lý cấu trúc cấp hệ thống.