VNEXT
FSB19 / 23
Phần III · M9 · Chung mục tiêu

Product · Design · Coding Rules

Nielsen · WCAG · SOLID · 12-Factor · review checklist — xương sống của sản phẩm AI tốt.

10
Nielsen heuristics

Bộ chuẩn vàng đánh giá UX dùng từ 1994 đến nay.

8
Shneiderman rules

Quy tắc thiết kế giao diện cho người dùng chuyên nghiệp.

AA
WCAG 2.2

Mức tối thiểu bắt buộc cho khách hàng JP/EU public sector.

4
design tokens

Color · Spacing · Typography · Motion — DNA của design system.

Nguyên tắc sản phẩm
Jobs-To-Be-Done

Khách hàng "thuê" sản phẩm để hoàn thành 1 job — không phải mua feature.

MVP → MLP

Minimum Viable rồi Minimum Lovable — đo learning trước khi scale.

North-Star Metric

1 chỉ số duy nhất phản ánh giá trị cốt lõi cho user.

RICE Prioritization

Reach × Impact × Confidence / Effort — chọn backlog có dữ liệu.

Nguyên tắc UX/UI
Hick's Law

Càng nhiều lựa chọn, càng chậm quyết định → giảm option, group, default.

Fitts's Law

Mục tiêu càng lớn & càng gần, càng dễ nhấn → CTA primary ≥ 44px.

Gestalt

Proximity · Similarity · Closure — nhóm bằng khoảng cách, không phải đường kẻ.

60·30·10

Tỉ lệ màu chủ đạo / phụ / accent giữ giao diện không chói.

8pt Grid

Mọi spacing là bội của 4/8 → consistency cross-device.

Mobile-First

Design cho 360px trước, scale lên — ép loại bỏ chi tiết thừa.

Accessibility — bắt buộc với JP/EU
Contrast ≥ 4.5:1
Text trên nền — đo bằng axe / Stark trước ship.
Keyboard nav
Mọi action thao tác được bằng Tab/Enter, có focus ring rõ.
ARIA & semantic
<button> chứ không <div onClick> — screen reader đọc đúng.
i18n JP/EN/VI
Tránh hard-code chuỗi, để dài text tiếng Đức/Nhật không vỡ layout.
Design System · Atomic + Token
Atom → Molecule → Organism → Template → Page — tái sử dụng, không build lại.
Token tách giá trị (#F16A22) khỏi ý nghĩa (--brand) → đổi theme 1 dòng.
Figma Variables → Code qua MCP (xem M15) — designer và dev nói cùng 1 ngôn ngữ.
Workshop: Mỗi nhóm chọn 1 màn hình sản phẩm hiện tại → soi qua 10 heuristics Nielsen, chỉ ra 3 vi phạm và đề xuất fix dùng nguyên tắc 8pt + 60·30·10.