Roadmap toàn diệnUI/UX Design 2025

Từ kiến thức nền tảng đến kỹ năng chuyên sâu. Học Design Thinking, User Research, Prototyping, Design Systems và Testing theo roadmap chuẩn quốc tế với bài tập thực hành.

8
Chương học chính
50+
Kỹ năng & công cụ
7
Bài tập thực hành
2025
Cập nhật mới nhất
Chương 1

Kiến thức nền tảng UI/UX

Hiểu rõ sự khác biệt giữa UI và UX, cùng những khái niệm cơ bản để bắt đầu hành trình thiết kế.

UI (User Interface)
Giao diện người dùng

Những gì người dùng thấy và chạm vào:

  • Màu sắc và typography
  • Button và icon
  • Layout và bố cục

UI = "Look & Feel" - Vẻ ngoài và cảm giác

UX (User Experience)
Trải nghiệm người dùng

Những gì người dùng cảm nhận khi sử dụng:

  • Dễ dùng và logic
  • Thoải mái và nhanh chóng
  • Hiệu quả và hữu ích

UX = "Flow & Experience" - Luồng và trải nghiệm

Lưu ý quan trọng

Một sản phẩm đẹp (UI tốt) nhưng khó dùng (UX kém) vẫn sẽ thất bại. Cần cân bằng cả hai yếu tố để tạo ra sản phẩm thành công.

Chương 2

Các nguyên tắc cơ bản

Những quy luật tâm lý và nguyên tắc thiết kế quan trọng mà mọi UX designer cần nắm vững.

Nguyên lý Gestalt
Tâm lý thị giác

Người dùng có xu hướng nhìn tổng thể trước chi tiết

Các nguyên lý nhỏ:

  • Proximity: Gần nhau = nhóm với nhau
  • Similarity: Giống nhau = liên quan
  • Continuity: Theo dòng chảy tự nhiên

💡 Ứng dụng: Nhóm các nút chức năng theo cụm, giữ consistency trong thiết kế

Hick's Law
Luật về lựa chọn

Càng nhiều lựa chọn → người dùng càng mất thời gian quyết định

Các nguyên lý nhỏ:

  • Giảm thiểu số lượng tùy chọn
  • Phân nhóm các lựa chọn liên quan
  • Ưu tiên các tùy chọn quan trọng

💡 Ứng dụng: Tối giản số lựa chọn trong menu, filter, form

Fitts's Law
Luật về tương tác

Thời gian click = khoảng cách + kích thước mục tiêu

Các nguyên lý nhỏ:

  • Nút CTA phải đủ lớn
  • Đặt ở vị trí dễ tiếp cận
  • Giảm khoảng cách di chuyển

💡 Ứng dụng: Nút quan trọng to hơn, đặt ở góc dưới màn hình mobile

User-Centered Design
Thiết kế lấy người dùng làm trung tâm

Thiết kế dựa trên nhu cầu, hành vi và bối cảnh thực tế

Các nguyên lý nhỏ:

  • Hiểu người dùng qua research
  • Thiết kế dựa trên insight
  • Test & iterate liên tục

💡 Ứng dụng: Interview, survey, tạo persona, usability testing

Design Thinking

Quy Trình Design Thinking

Design Thinking là phương pháp giải quyết vấn đề tập trung vào con người, giúp tạo ra các giải pháp sáng tạo và hiệu quả thông qua 5 giai đoạn chính.

Giai đoạn 1
Empathize
Hiểu người dùng thông qua quan sát và tương tác

Phương pháp chính:

User InterviewsObservationEmpathy MapsJourney Mapping
Giai đoạn 2
Define
Xác định vấn đề cốt lõi cần giải quyết

Phương pháp chính:

Problem StatementPoint of ViewHow Might WeUser Personas
Giai đoạn 3
Ideate
Tạo ra nhiều ý tưởng sáng tạo để giải quyết vấn đề

Phương pháp chính:

BrainstormingMind MappingSCAMPERCrazy 8s
Giai đoạn 4
Prototype
Tạo mẫu thử để kiểm tra ý tưởng

Phương pháp chính:

Paper PrototypesDigital WireframesInteractive PrototypesStoryboards
Giai đoạn 5
Test
Kiểm tra và cải thiện giải pháp với người dùng thực

Phương pháp chính:

Usability TestingA/B TestingUser FeedbackIteration

Lợi ích của Design Thinking

Cho tổ chức:

  • • Tăng khả năng đổi mới và sáng tạo
  • • Giảm rủi ro trong phát triển sản phẩm
  • • Tăng sự hài lòng của khách hàng
  • • Cải thiện hiệu quả làm việc nhóm

Cho designer:

  • • Hiểu sâu hơn về nhu cầu người dùng
  • • Tạo ra giải pháp có tác động thực tế
  • • Phát triển tư duy phản biện
  • • Nâng cao kỹ năng giải quyết vấn đề
User Research

Nghiên Cứu Người Dùng

User Research là nền tảng của UX Design, giúp hiểu sâu về người dùng để tạo ra những sản phẩm thực sự hữu ích và dễ sử dụng.

Qualitative Research

User Interviews
Phỏng vấn sâu để hiểu động cơ, nhu cầu và hành vi người dùng

Khi nào sử dụng: Khám phá vấn đề, hiểu ngữ cảnh sử dụng

Focus Groups
Thảo luận nhóm để thu thập ý kiến đa chiều

Khi nào sử dụng: Đánh giá concept, thu thập feedback

Ethnographic Studies
Quan sát người dùng trong môi trường tự nhiên

Khi nào sử dụng: Hiểu hành vi thực tế, phát hiện pain points

Diary Studies
Người dùng ghi lại trải nghiệm theo thời gian

Khi nào sử dụng: Theo dõi hành vi dài hạn

Quantitative Research

Surveys
Thu thập dữ liệu từ nhiều người dùng qua câu hỏi có cấu trúc

Khi nào sử dụng: Đo lường xu hướng, xác thực giả thuyết

Analytics
Phân tích dữ liệu hành vi người dùng trên sản phẩm

Khi nào sử dụng: Hiểu cách sử dụng thực tế, tối ưu hóa

A/B Testing
So sánh hiệu quả của các phiên bản khác nhau

Khi nào sử dụng: Kiểm tra giải pháp thiết kế

Card Sorting
Hiểu cách người dùng phân loại và tổ chức thông tin

Khi nào sử dụng: Thiết kế information architecture

Behavioral Research

Usability Testing
Quan sát người dùng thực hiện các tác vụ cụ thể

Khi nào sử dụng: Đánh giá khả năng sử dụng sản phẩm

Eye Tracking
Theo dõi chuyển động mắt để hiểu attention patterns

Khi nào sử dụng: Tối ưu hóa layout và visual hierarchy

Click Tracking
Phân tích các điểm click và tương tác trên interface

Khi nào sử dụng: Hiểu hành vi navigation

Session Recordings
Ghi lại toàn bộ session sử dụng sản phẩm

Khi nào sử dụng: Phát hiện vấn đề UX cụ thể

Quy Trình Nghiên Cứu

1
Define Research Goals
Xác định mục tiêu nghiên cứu và câu hỏi cần trả lời
2
Choose Methods
Lựa chọn phương pháp nghiên cứu phù hợp với mục tiêu
3
Recruit Participants
Tuyển chọn người tham gia đại diện cho target users
4
Conduct Research
Thực hiện nghiên cứu theo kế hoạch đã định
5
Analyze Data
Phân tích dữ liệu và rút ra insights có ý nghĩa
6
Share Findings
Trình bày kết quả và đề xuất hành động cụ thể

Deliverables Chính

User PersonasJourney MapsResearch ReportsUsability FindingsEmpathy MapsPain Point AnalysisOpportunity AreasDesign Recommendations
Chương 3

Quy trình thiết kế UX chuẩn

Quy trình 6 bước từ nghiên cứu đến triển khai, đảm bảo sản phẩm được thiết kế dựa trên nhu cầu thực tế của người dùng.

Quy trình:Research → Ideation → Wireframe → Prototype → Test → Iterate
1
Research
Phân tích thị trường, phỏng vấn người dùng

Tìm hiểu nhu cầu, hành vi và pain points của người dùng thông qua surveys, interviews và competitive analysis.

2
Ideation
Brainstorm giải pháp, sketch nhanh

Tạo ra nhiều ý tưởng khác nhau, vẽ sketches và xác định hướng giải quyết vấn đề.

3
Wireframe
Bản phác thảo khung (low fidelity)

Tạo wireframes để định hình cấu trúc và layout cơ bản của sản phẩm.

4
Prototype
Mẫu thử có thể click được

Xây dựng prototype tương tác để mô phỏng trải nghiệm người dùng thực tế.

5
Test
Thử nghiệm với user thật

Tiến hành usability testing để thu thập feedback và phát hiện vấn đề.

6
Iterate
Cải tiến liên tục dựa trên feedback

Phân tích kết quả test và cải thiện sản phẩm trong các vòng lặp tiếp theo.

Design Thinking
5 bước tư duy thiết kế

Tập trung vào sáng tạo giải pháp dựa trên hiểu biết sâu về người dùng

EmpathizeDefineIdeatePrototypeTest
Lean UX
Phương pháp tinh gọn cho Agile

Tinh gọn hơn, áp dụng trong môi trường phát triển nhanh

BuildMeasureLearn
Prototyping

Tạo Mẫu Thử (Prototyping)

Prototyping là quá trình tạo ra phiên bản thử nghiệm của sản phẩm để kiểm tra ý tưởng, test usability và communicate design concepts.

Mức Độ Chi Tiết (Fidelity)

Low Fidelity
Sketches và wireframes cơ bản để thể hiện ý tưởng nhanh chóng

Tools phổ biến:

Paper & PencilBalsamiqPOPMarvel
Ưu điểm:
  • • Nhanh chóng
  • • Chi phí thấp
  • • Dễ thay đổi
  • • Tập trung vào concept
Nhược điểm:
  • • Thiếu chi tiết
  • • Khó test interaction
  • • Không realistic

Khi nào sử dụng: Giai đoạn ideation, concept validation

Medium Fidelity
Wireframes chi tiết hơn với một số tương tác cơ bản

Tools phổ biến:

FigmaSketchAdobe XDAxure
Ưu điểm:
  • • Cân bằng tốc độ và chi tiết
  • • Có thể test flow
  • • Dễ communicate
Nhược điểm:
  • • Chưa có visual design
  • • Limited interactions

Khi nào sử dụng: User flow testing, stakeholder review

High Fidelity
Prototype gần giống sản phẩm thật với visual design đầy đủ

Tools phổ biến:

FigmaPrincipleFramerProtoPie
Ưu điểm:
  • • Realistic experience
  • • Detailed interactions
  • • Tốt cho testing
Nhược điểm:
  • • Tốn thời gian
  • • Chi phí cao
  • • Khó thay đổi

Khi nào sử dụng: Usability testing, final validation

Công Cụ Prototyping

Design Tools

Figma
All levels
Collaborative design và prototyping
Sketch
Medium-High
Mac-based design tool với plugins mạnh
Adobe XD
Medium-High
All-in-one UX/UI design platform
Framer
High
Advanced prototyping với code components

Specialized Tools

Principle
High
Timeline-based animation prototyping
ProtoPie
High
Sensor-based interactive prototyping
InVision
Medium
Clickable prototypes từ static designs
Marvel
Low-Medium
Simple prototyping và user testing

Code-Based

React/Vue
High
Frontend frameworks cho functional prototypes
Codepen
Medium
Quick web-based prototyping
Webflow
Medium-High
Visual web development platform
Bubble
High
No-code app development

Quy Trình Prototyping

1

Define prototype goals và scope

2

Choose appropriate fidelity level

3

Create user flows và scenarios

4

Build prototype incrementally

5

Test với target users

6

Iterate based on feedback

7

Document findings và next steps

Design Systems

Hệ Thống Thiết Kế

Design System là tập hợp các standards, components và guidelines giúp tạo ra trải nghiệm nhất quán và hiệu quả trên toàn bộ sản phẩm.

Thành Phần Của Design System

Foundation

Các yếu tố cơ bản tạo nên identity của design system

Color Palette
Primary, secondary, semantic colors
Typography
Font families, sizes, weights, line heights
Spacing
Margin, padding, gap values
Grid System
Layout structure và breakpoints
Iconography
Icon style, sizes, usage guidelines
Elevation
Shadow styles cho depth và hierarchy

Components

Các UI components có thể tái sử dụng

Buttons
Primary, secondary, ghost, icon buttons
Form Elements
Inputs, selects, checkboxes, radios
Navigation
Headers, sidebars, breadcrumbs, tabs
Cards
Content containers với various layouts
Modals
Dialogs, drawers, popovers
Data Display
Tables, lists, charts, badges

Patterns

Các mẫu thiết kế cho common use cases

Page Layouts
Dashboard, list, detail page structures
Form Patterns
Multi-step, validation, error handling
Navigation Patterns
Menu structures, search, filtering
Content Patterns
Article layouts, media galleries
Feedback Patterns
Loading states, empty states, errors
Onboarding
Welcome flows, tutorials, tooltips

Lợi Ích Của Design System

Consistency
Đảm bảo trải nghiệm nhất quán trên toàn bộ sản phẩm
Efficiency
Tăng tốc độ thiết kế và development với reusable components
Scalability
Dễ dàng mở rộng và maintain khi sản phẩm phát triển
Collaboration
Cải thiện communication giữa design và development teams

Quy Trình Xây Dựng

1
Audit & Inventory
Kiểm tra và cataloging tất cả UI elements hiện có
UI InventoryPattern LibraryInconsistency Report
2
Define Foundation
Thiết lập color, typography, spacing, và grid systems
Design TokensStyle GuideBrand Guidelines
3
Create Components
Build reusable components với clear specifications
Component LibraryUsage GuidelinesCode Components
4
Document & Govern
Tạo documentation và quy trình governance
Design System SiteContribution GuidelinesReview Process
5
Implement & Iterate
Deploy system và continuously improve based on feedback
Implementation PlanFeedback LoopVersion Control

Design Systems Nổi Tiếng

Material Design

Google

Mobile-first, paper metaphor

Human Interface Guidelines

Apple

iOS/macOS native experience

Fluent Design

Microsoft

Cross-platform consistency

Carbon

IBM

Enterprise applications

Ant Design

Ant Group

React-based enterprise UI

Chakra UI

Community

Simple, modular, accessible

Testing & Validation

Kiểm Thử & Xác Thực

Testing là bước quan trọng để validate design decisions, phát hiện usability issues và đảm bảo sản phẩm đáp ứng nhu cầu người dùng.

Phương Pháp Testing

Usability Testing

Kiểm tra khả năng sử dụng sản phẩm với người dùng thực

Moderated Testing
Có người điều hành hướng dẫn và quan sát trực tiếp
Ưu điểm:
  • • Deep insights
  • • Có thể hỏi follow-up
  • • Real-time clarification
Nhược điểm:
  • • Tốn thời gian
  • • Chi phí cao
  • • Có thể bias
Unmoderated Testing
Người dùng tự thực hiện tasks mà không có sự hướng dẫn
Ưu điểm:
  • • Natural behavior
  • • Scalable
  • • Cost-effective
Nhược điểm:
  • • Limited insights
  • • Không thể clarify
  • • Technical issues
Remote Testing
Thực hiện testing từ xa qua video call hoặc tools
Ưu điểm:
  • • Wider participant pool
  • • Natural environment
  • • Cost savings
Nhược điểm:
  • • Technical challenges
  • • Limited observation
  • • Connection issues

A/B Testing

So sánh hiệu quả của hai phiên bản khác nhau

Split Testing
Chia traffic đều cho 2 versions và so sánh metrics
Ưu điểm:
  • • Statistical significance
  • • Real user data
  • • Clear results
Nhược điểm:
  • • Cần traffic lớn
  • • Chỉ test được ít elements
  • • Time consuming
Multivariate Testing
Test nhiều elements cùng lúc để tìm combination tốt nhất
Ưu điểm:
  • • Test multiple variables
  • • Find optimal combination
  • • Comprehensive
Nhược điểm:
  • • Phức tạp
  • • Cần traffic rất lớn
  • • Khó interpret

Accessibility Testing

Đảm bảo sản phẩm accessible cho mọi người dùng

Screen Reader Testing
Test với screen readers như NVDA, JAWS, VoiceOver
Ưu điểm:
  • • Real accessibility experience
  • • Find navigation issues
  • • Content structure
Nhược điểm:
  • • Learning curve
  • • Time intensive
  • • Need specialized knowledge
Keyboard Navigation
Test toàn bộ interface chỉ bằng keyboard
Ưu điểm:
  • • Easy to perform
  • • Find focus issues
  • • Motor accessibility
Nhược điểm:
  • • Limited scope
  • • Không cover visual issues
  • • Basic testing
Color Contrast Testing
Kiểm tra contrast ratio theo WCAG guidelines
Ưu điểm:
  • • Automated tools available
  • • Clear standards
  • • Visual accessibility
Nhược điểm:
  • • Chỉ cover màu sắc
  • • Không test context
  • • Limited scope

Quy Trình Testing

Plan
Test Planning
Define objectives, choose methods, recruit participants
Deliverables:
Test PlanScenariosSuccess Metrics
Prepare
Test Preparation
Setup environment, create tasks, prepare materials
Deliverables:
Test ScriptsPrototypesRecording Setup
Execute
Test Execution
Conduct tests, observe behaviors, collect data
Deliverables:
Session RecordingsNotesRaw Data
Analyze
Data Analysis
Analyze findings, identify patterns, prioritize issues
Deliverables:
Findings ReportIssue PriorityRecommendations
Report
Results Reporting
Present findings, suggest improvements, plan next steps
Deliverables:
Executive SummaryDetailed ReportAction Plan

Công Cụ Testing

Maze
Unmoderated Testing
Remote usability testing platform
UserTesting
Moderated Testing
Video-based user research platform
Hotjar
Behavior Analytics
Heatmaps, recordings, feedback tools
Optimizely
A/B Testing
Experimentation platform
Google Optimize
A/B Testing
Free A/B testing tool
axe
Accessibility
Automated accessibility testing
WAVE
Accessibility
Web accessibility evaluation tool
Lookback
Remote Testing
Live user research platform

Key Metrics

Task Success Rate

Percentage of tasks completed successfully

Time on Task

Average time to complete each task

Error Rate

Number of errors made during tasks

System Usability Scale (SUS)

Standardized usability questionnaire

Net Promoter Score (NPS)

Likelihood to recommend the product

Conversion Rate

Percentage of users completing desired actions

Bài tập thực hành

Bài tập thực hành UI/UX cơ bản

7 bài tập giúp bạn áp dụng kiến thức vào thực tế và kiểm tra hiểu biết về UX Design

1
So sánh UI vs UX
Lấy ví dụ một ứng dụng thực tế anh dùng hàng ngày (ví dụ: Grab, Shopee, Zalo).
2
Áp dụng Nguyên lý Gestalt
Chọn một trang web bất kỳ (ví dụ: trang chủ Shopee, Tiki, Ticketbox).
3
Hick's Law
Thiết kế form đăng ký sự kiện.
4
Fitts's Law
Thiết kế lại nút 'Đặt vé ngay' cho một website bán vé.
5
User-Centered Design (UCD)
Giả sử anh thiết kế app đặt vé xem phim.
6
Quy trình UX Design
Với ứng dụng E-commerce bán vé sự kiện, mô tả ngắn quy trình từ Research → Test → Iterate.
7
Design Thinking vs Lean UX
So sánh 2 cách tiếp cận trong dự án nhỏ (ví dụ: redesign app đặt vé bus).

Hoàn thành bài tập

Sau khi làm xong 7 bài này, bạn sẽ nắm chắc phần nền tảng và bắt đầu quen với việc nhìn một sản phẩm bằng "con mắt UI/UX designer".

Chương 4

Tài nguyên khuyến nghị

Những cuốn sách và trang web chất lượng cao để bạn tiếp tục hành trình học UX design.

📚 Sách

The Design of Everyday Things
Don Norman
Sách nền tảng

UX mindset kinh điển - Cuốn sách nền tảng về tâm lý học trong thiết kế

Xem chi tiết
Don't Make Me Think
Steve Krug
Sách thực hành

UI/UX thực tế, dễ áp dụng - Hướng dẫn thiết kế web usability

Xem chi tiết

🌐 Online

Nielsen Norman Group
https://www.nngroup.com
Research & Articles

Kho kiến thức UX chuẩn mực từ các chuyên gia hàng đầu thế giới

Truy cập website
Interaction Design Foundation
https://www.interaction-design.org
Courses & Learning

Khóa học và tài liệu về thiết kế tương tác và UX design

Truy cập website