7 nguyên tắc thiết kế UI — checklist mọi screen cần verify trước handoff

7 nguyên tắc UI — hierarchy, consistency, feedback, proximity, alignment, affordance, simplicity — là checklist designer phải verify trên từng screen trước handoff cho dev. Bài này phân tích từng nguyên tắc với ví dụ đo lường được, 8 lỗi UI thường gặp khi bỏ qua kèm cách fix.

Vì sao mỗi screen cần áp đủ 7 nguyên tắc trước khi ship

7 nguyên tắc dưới đây không phải lý thuyết hàn lâm. Chúng tổng hợp từ Don Norman (“The Design of Everyday Things”), Jakob Nielsen với 10 usability heuristic, và Material Design + Apple Human Interface Guidelines — ba bộ guideline được follow rộng rãi nhất 2026.

Mục tiêu cốt lõi là giảm cognitive load — lượng thông tin não user phải xử lý song song để hoàn thành task. Layout tự do không tuân nguyên tắc thường tăng cognitive load 2-3 lần, dẫn tới user mất 8-12 giây hiểu screen thay vì 2-3 giây.

Cách Web22 áp checklist 7 mục trong QA review

Web22 áp 7 mục này như khâu QA bắt buộc trước khi handoff Figma cho dev. Designer junior thường skip 2-3 nguyên tắc (đặc biệt feedback và affordance), review checklist phát hiện sớm để sửa trong Figma rẻ hơn fix trên code 5-10 lần.

Quy trình review mỗi screen mất 5-8 phút. Phát hiện 80% issue UI trước khi designer hand-off cho dev, tránh vòng lặp “code xong rồi mới biết sai”.

Nguyên tắc 1 — Hierarchy thị giác

Hierarchy là thứ bậc thị giác. User nhìn screen 3 giây phải nhận ra title chính, secondary, CTA chính trước khi đọc chi tiết.

Bộ não tự động scan từ element to nhất / đậm nhất / màu rực nhất xuống dần — designer cần align thứ tự đó với ưu tiên thật của flow.

Designer dùng 3 đòn bẩy chính tạo hierarchy: size, weight, color. Thêm position và whitespace bổ trợ — vị trí trên cùng + whitespace lớn xung quanh CTA giúp nó nổi bật dù size không phải lớn nhất.

Quy tắc tối đa 3-4 cấp độ mỗi screen

Mỗi screen có tối đa 3-4 cấp độ hierarchy. Nhiều hơn dẫn tới “mọi thứ đều nổi bật” — user không biết nhìn đâu trước, ngược lại không có thứ tự nào nổi.

• Cấp 1 — H1 / hero / CTA chính: size 48-64px hoặc button cao 48-56px với màu primary nổi.
• Cấp 2 — H2 / section title: size 32-40px, font-weight 600-700 tạo contrast với body.
• Cấp 3 — body text: 16-18px regular, line-height 1,5-1,7 cho dễ đọc lâu.
• Cấp 4 — caption / footer / disclaimer: 12-14px, màu xám phụ trợ thông tin.

3 đòn bẩy size, weight và color

• Size — đòn bẩy mạnh nhất: element to gấp 2 lần thì nổi bật gấp ~3 lần do não cảm nhận theo log. Tăng size nhiều element cùng lúc làm screen chaotic.
• Weight (font-weight) — phụ trợ: bold so với regular tạo cấp khác mà không đổi size, hữu dụng khi không có chỗ tăng size.
• Color — dùng cho CTA: primary color (xanh / đỏ / cam tuỳ brand) cho action chính, neutral gray cho action phụ — tách rõ chính phụ.

Test hierarchy bằng phương pháp squint — nheo mắt nhìn screen 5 giây, ghi nhớ 3 element hiện ra rõ nhất. Đó phải là 3 element quan trọng nhất theo flow.

Nếu CTA “Mua ngay” mất hút sau testimonial, hierarchy sai.

Nguyên tắc 2 — Consistency nhất quán nội bộ và bên ngoài

Consistency có 2 mặt: internal (cùng sản phẩm dùng cùng pattern) và external (theo convention của hệ điều hành / web chung). Nội bộ là button primary luôn cùng màu + padding + radius + hover state trên mọi screen.

Bên ngoài là link underline + xanh, icon X close ở góc phải modal, scroll dọc, swipe ngang. Đừng cố sáng tạo lại convention vì user sẽ bối rối — convention được hình thành qua thập kỷ tích luỹ thói quen người dùng.

Enforce qua design system và component library

Cách enforce consistency là xây design system với design token + component library. Mỗi button, input, modal là 1 component Figma có variant — designer reuse component thay vì vẽ lại từ đầu.

Khi cần đổi (vd primary từ xanh sang tím), sửa 1 token thì 50 màn hình tự update. Đây là khác biệt cơ bản giữa file Figma có hệ thống và file Figma vẽ tay từng screen.

Spacing scale và phương pháp test

• Spacing scale 4px hoặc 8px: Tailwind 0/4/8/12/16/20/24/32/40/48/64px. Không có padding 13px, không có margin 7px tự bịa.
• Find duplicate component: dùng Figma plugin “Find & Replace” tìm tất cả button trong file, sort theo style. Nếu có hơn 4 variant, audit từng cái xem có cần thiết không.
• Audit cross-screen: chụp 10 screen tiêu biểu, lay ra 1 board so sánh button / input / card có giống nhau không. Khác 2-3 pixel padding là user nhận ra.

Phương pháp atomic design giúp tổ chức component theo cấp atom → molecule → organism, dễ duy trì consistency hơn vẽ flat từng component.

Nguyên tắc 3 — Feedback phản hồi cho mọi tương tác

Feedback là phản hồi visual khi user tương tác. Nguyên tắc cứng: mọi action phải có response trong 100ms (instant), 100ms-1s cần loading indicator, trên 1s cần progress bar hoặc skeleton screen.

User không nhận feedback sau click sẽ click lại 2-3 lần (rage click). Hotjar và Microsoft Clarity đều có metric đo rage click — số rage click cao là tín hiệu rõ feedback đang thiếu hoặc quá chậm.

Loading state — spinner và skeleton screen

Loading state có 2 dạng chính. Spinner dùng cho action ngắn dưới 2 giây như submit form hoặc refresh data.

Skeleton screen dùng cho page load trên 2 giây — user thấy layout sẽ ra sao trước, perceived performance tốt hơn 30-40% so với spinner trắng.

• Button submit form: chuyển sang spinner + disable trong 200-2000ms khi gọi API. Tránh user click nhiều lần tạo duplicate request.
• Page load full: thay bằng skeleton screen match layout cuối, không phải spinner giữa màn hình trắng.
• Lazy load image: dùng aspect-ratio CSS để chống layout shift (CLS) khi ảnh load xong. Width và height attribute trên mọi img tag.

Error state và success state

• Error inline: validate khi blur (rời focus) khỏi field, hiện red text dưới input + đỏ viền + giữ nguyên giá trị user đã nhập. KHÔNG dùng alert popup native browser.
• Success ngắn: hiển thị checkmark animation 300-500ms + redirect hoặc reset form. Toast 3 giây tự ẩn là đủ trong 90% case.
• Empty state có CTA: illustration + giải thích vì sao trống + nút action fix. Tránh để màn trắng “No data” cụt lủn không hướng dẫn.

Trang xác nhận full-screen chỉ dùng khi cần user note thông tin như mã đơn hàng, link tracking. Tham khảo Nielsen Norman về visibility of system status — đây là heuristic số 1 trong 10 usability heuristic Jakob Nielsen.

Nguyên tắc 4 và 5 — Proximity và Alignment theo Gestalt

Proximity và Alignment là 2 trong 5 quy tắc Gestalt designer phải thuộc. Não user tự động grouping element gần nhau và hiểu element trên cùng đường thẳng “thuộc cùng nhóm”.

Vi phạm 2 quy tắc này dẫn tới chaos visual mà user không gọi tên được, nhưng cảm thấy “rối, không chuyên nghiệp”. Đó là điểm khác biệt rõ nhất giữa giao diện amateur và giao diện qua tay designer.

Proximity — gom nhóm bằng whitespace, không cần line

Proximity nghĩa là element liên quan đặt gần nhau, element không liên quan tách xa. Ví dụ form: label “Email” cách input “Email” 4-8px (gần), nhưng cách label “Mật khẩu” 20-32px (xa).

Whitespace là ranh giới — không cần line, không cần border, chỉ cần khoảng cách đủ giữa các nhóm.

Designer junior thường dùng border line khắp nơi, kết quả là screen đầy hộp, cognitive load cao. Chi tiết về whitespace xem white space trong thiết kế.

Alignment — căn dòng theo grid và baseline

• Căn cùng trục: mọi element căn theo cùng 1 trục — left-aligned text với edge layout, button trên cùng baseline với input, icon center vertically với text label.
• Lệch 2-4px nhận ra ngay: não rất nhạy với pattern lệch nhẹ. Một icon lệch baseline 3px so với label là user cảm thấy “không chỉn chu”.
• Enforce qua grid: mọi element nằm trên grid 12 cột với gutter cố định và baseline grid 8px hoặc 4px. Figma có chế độ “Show baseline grid” giúp căn nhanh trong file.

Trong 1 card sản phẩm, tên + giá + nút “Thêm giỏ” group lại với spacing 8-12px giữa nhau, cách card khác 24-32px. Khi 100 card cùng pattern này, layout shop-like tự nhiên dù không có line ngăn.

Nguyên tắc 6 — Affordance gợi ý cách dùng qua hình dạng

Affordance là khái niệm Don Norman đưa ra từ 1988: object phải gợi ý cách dùng qua hình dạng. Cánh cửa có tay nắm dài thì kéo; cánh cửa có tấm phẳng kim loại thì đẩy.

Trong UI: button phải trông ấn được (background + shadow + padding), link phải trông click được (underline + màu khác), input phải trông gõ được (border + cursor + placeholder text). Vi phạm affordance là user không biết element nào tương tác được.

Button — flat design và cấp affordance

Vi phạm affordance phổ biến nhất 2026 là flat design không phân biệt button với text. Button “Đặt hàng” chỉ là text màu primary không có background — user không nhận ra ấn được, đặc biệt user trên 40 tuổi.

Fix bằng cách thêm background solid hoặc border + padding 12-24px tối thiểu. Material Design có 3 cấp button — filled (action chính), outlined (action phụ), text (action tham khảo) — đủ tạo affordance hierarchy mà vẫn flat.

Link inline và icon-only button

• Link inline luôn underline: CSS text-decoration: underline. Bỏ underline khiến click rate giảm theo test của Nielsen Norman, đặc biệt người trên 50 tuổi và người trên mobile.
• Custom underline cho đẹp: offset 2-4px, thickness 1,5px nếu cần đẹp hơn, nhưng KHÔNG bỏ. Underline đẹp vẫn tốt hơn không underline.
• Icon-only button cần label hoặc tooltip: icon hamburger 3 gạch ngang đã thành convention. Icon “save” hình đĩa mềm thế hệ Z không hiểu — cần tooltip + label “Lưu”.

Quy tắc: nếu trên 20% user mất hơn 2 giây hover để hiểu icon, thay bằng icon + label hoặc đổi icon khác.

Test bằng usability test 5-8 user là đủ phát hiện. Bộ icon chuẩn 2026 là Lucide hoặc Heroicons với 1000+ icon cover mọi UI thông dụng.

Nguyên tắc 7 — Simplicity tối giản theo task chính

Simplicity không phải minimalism cực đoan. Là quy tắc “mỗi screen 1 task chính, mọi thứ phục vụ task đó, cắt phần thừa”.

Dieter Rams gọi là “less but better” — ít element hơn nhưng mỗi element đều có lý do tồn tại rõ ràng.

Áp dụng UI: mỗi page có 1 CTA chính (lớn, primary color), 0-2 CTA phụ (secondary), không có 5-7 button đua nhau “nổi bật”. Khi nhiều CTA cùng cấp, user không biết nên click cái nào, tỷ lệ click giảm.

Cách audit simplicity — liệt kê và đặt câu hỏi

Liệt kê mọi element trên screen, hỏi “nếu xoá element này, user còn hoàn thành được task không?”. Nếu trả lời có thì element thừa, cắt được mà không mất gì.

• Banner “Save 20%” lặp lại: đã có badge sale trên từng product, banner trên cùng là thừa. Cắt giúp focus vào product.
• Navigation 12 mục: Miller’s Law nói user không nhớ được hơn 5-7 item đồng thời. Gom theo 4-5 nhóm với mega menu hoặc giảm xuống 5 primary + 1 “More” dropdown.
• Footer link 30 cái: đa số user không scroll xuống footer. Giữ 8-12 link quan trọng, bỏ link “Sitemap”, “Tag cloud” ít người dùng.

Cắt 30-50% element thường tăng conversion 10-20% vì user focus được CTA chính. Đây là pattern lặp lại nhiều ở các project audit UI Web22 đã review.

Simplicity trong form — chỉ thu thông tin cần

Form đăng ký nhiều khi chỉ cần email + password (2 field) là đủ. Thêm name, phone, company chỉ làm tăng abandonment 30-40% — có thể hỏi sau khi user đã onboard.

Tương tự, checkout 1 trang với 8 field gọn hơn 3 step 20 field. Tỷ lệ hoàn thành cao hơn 15-25% theo các test conversion phổ biến của Baymard Institute.

Đừng đòi data không cần ngay vòng đầu.

8 lỗi UI thường gặp khi bỏ qua nguyên tắc

Sau hơn 50 audit UI cho dự án Web22 đã review, 8 lỗi dưới đây xuất hiện thường nhất theo thứ tự ưu tiên fix. Lỗi 1-3 ảnh hưởng accessibility + conversion trực tiếp, lỗi 4-8 ảnh hưởng polish và trust.

Lỗi 1-4 — Contrast, hover, validate, link

• Lỗi 1 — Body text contrast dưới 4,5:1: dùng xám nhạt như #999 trên nền #fff (ratio 2,8:1) cho “trông chuyên nghiệp”. Fail WCAG AA.
• Fix tối thiểu #6b7280 (Tailwind gray-500) trên nền trắng, ratio 4,9:1.
• Lỗi 2 — Button không có hover state: chỉ default state, hover không đổi màu. User không biết đang sẵn sàng click hay đã click.
• Fix hover lighten 10% hoặc darken 5%, transition 150-200ms ease-out.
• Lỗi 3 — Form validate sau submit, không inline: user nhập sai từ field 1 đến field 8 mới biết. Fix validate inline khi blur khỏi field, chỉ block submit nếu vẫn còn field invalid.
• Lỗi 4 — Link không underline trong body: bỏ underline để “đẹp hơn”, click rate giảm 40-60%. Fix luôn underline link inline, có thể custom thickness + offset cho đẹp.

Lỗi 5-8 — Icon, loading, spacing, mobile

• Lỗi 5 — Icon-only button không tooltip: user phải hover lâu để đoán nghĩa. Fix thêm title attribute hoặc tooltip Tippy.js, hoặc đổi sang icon + label.
• Lỗi 6 — Loading state thiếu hoặc không khớp: button submit không disable khi loading, user click nhiều lần. Fix disable button + spinner 200-2000ms; trên 2s dùng skeleton full page.
• Lỗi 7 — Inconsistent spacing: 50 button có 12 padding khác nhau (12, 13, 14, 16, 17 px). Fix enforce spacing scale 4px hoặc 8px qua design token + component library.
• Lỗi 8 — Mobile breakpoint vỡ: desktop layout không stack đúng trên mobile, button dài hơn viewport. Fix bắt buộc test mọi screen ở 375px (iPhone SE) trước handoff.

Quy trình review screen 5-8 phút theo 7 nguyên tắc

Designer Web22 review mỗi screen trong Figma theo thứ tự 7 nguyên tắc, mất 5-8 phút mỗi screen. Quy trình phát hiện 80% issue UI trước khi handoff dev — vài phút này tiết kiệm vài giờ refactor code sau.

7 bước review tuần tự

• Bước 1 — Squint test 5 giây check hierarchy: nheo mắt nhìn screen, 3 element rõ nhất phải là 3 element quan trọng nhất theo flow.
• Bước 2 — Search Figma component check consistency: dùng plugin Find & Replace tìm button / card có bao nhiêu variant, audit xem có cần thiết không.
• Bước 3 — List mọi action verify state: mỗi button, link, input có đủ loading / error / success / empty state chưa.
• Bước 4 — Bật grid và baseline check alignment: mọi element nằm trên grid 12 cột và baseline 8px, không lệch 2-4px ngẫu nhiên.
• Bước 5 — Kéo gần xa verify proximity: element cùng nhóm cách 4-12px, khác nhóm cách 20-32px, không cần border line phụ.
• Bước 6 — Hover test mọi element interactive check affordance: button có trông ấn được, link có underline, icon-only có tooltip không.
• Bước 7 — List element hỏi “cần thiết không” check simplicity: cắt element không phục vụ task chính, giữ tối đa 1 CTA primary + 0-2 secondary.

Plugin Stark cho WCAG và colorblind

Sau review thủ công, chạy plugin Stark trong Figma để audit WCAG 2.2 contrast và colorblind simulation. Tự động hoá 40% checklist còn lại do designer + senior review.

Bộ 3 colorblind type (deuteranopia, protanopia, tritanopia) chiếm 8% nam giới. Interface không pass colorblind test sẽ loại 1/12 user nam khỏi flow — rủi ro lớn cho site có target audience nam đông.

Câu hỏi thường gặp về 7 nguyên tắc UI

Tài nguyên và bước tiếp theo

7 nguyên tắc là checklist nền — sau đó cần đi sâu từng thành phần để xây design system production hoàn chỉnh. Các bài liên quan trong cụm UI/UX cơ bản:

• UI/UX là gì — định nghĩa, 5 layer UX và 6 thành phần UI cốt lõi — phân biệt UI và UX qua mục tiêu, output, tool, vai trò trong team.
• Màu sắc trong thiết kế UI — 60-30-10, WCAG contrast và xây palette — chi tiết về contrast 4,5:1 cho text body, audit tool và colorblind simulation.
• White space trong thiết kế — spacing scale 8pt và token chuẩn 2026 — macro vs micro white space, áp dụng vào proximity và hierarchy.
• Grid system cơ bản — 12 cột, CSS Grid vs Flexbox và breakpoint mobile-first — base cho nguyên tắc alignment.
• Báo giá thiết kế giao diện website — gói trọn gói từ research tới handoff Figma kèm dev guideline.

Cần đội Web22 áp 7 nguyên tắc UI vào website doanh nghiệp với design system + component library + accessibility audit WCAG 2.2 AA? Báo giá thiết kế giao diện website — gói trọn gói từ research tới handoff Figma kèm dev guideline.