Fluent design

Fluent Design là một design system được xây dựng nhằm tạo ra trải nghiệm giao diện liền mạch, đa nền tảng và giàu tính tương tác.

Không giống các phong cách thiết kế trước đó chỉ tập trung vào hình thức, Fluent Design đặt trọng tâm vào:

• Cảm giác tương tác

• Chuyển động

• Chiều sâu

• Sự phản hồi theo hành vi người dùng

Nói cách khác, Fluent Design không chỉ là “cách giao diện trông như thế nào”, mà là cách giao diện phản ứng và “chuyển động” cùng người dùng. Fluent Design được xây dựng dựa trên một ý tưởng quan trọng:

Giao diện không phải là một bề mặt tĩnh, mà là một môi trường sống động, có thể phản hồi và thích nghi.

Fluent Design hướng đến việc tạo ra một trải nghiệm nhất quán trên mọi thiết bị và mọi hình thức tương tác.

(Nguồn: https://www.techmagic.co/blog/design-systems)

5 yếu tố nền tảng của Fluent Design

Fluent Design được cấu thành từ năm yếu tố chính, tạo nên “ngôn ngữ” của hệ thống này.

• Light (Ánh sáng)

Ánh sáng được sử dụng để hướng dẫn sự chú ý và phản hồi tương tác. Khi người dùng hover hoặc chạm vào một thành phần, hiệu ứng ánh sáng giúp họ nhận biết rằng giao diện đang phản hồi.

• Depth (Chiều sâu)

Fluent Design sử dụng layering, blur và transparency để tạo cảm giác không gian. Điều này giúp phân cấp thông tin rõ ràng và tăng khả năng định hướng.

• Motion (Chuyển động)

Chuyển động không chỉ mang tính thẩm mỹ mà còn giúp giải thích hành vi. Các animation được thiết kế để người dùng hiểu sự thay đổi trạng thái một cách tự nhiên.

• Material (Vật liệu số)

Các hiệu ứng như acrylic (mờ, trong suốt) và mica tạo cảm giác “vật liệu kỹ thuật số”. Đây không phải là mô phỏng vật lý như skeuomorphism, mà là một dạng “material” đặc trưng của môi trường số.

• Scale (Tỷ lệ và khả năng thích ứng)

Giao diện có thể thay đổi linh hoạt theo kích thước màn hình và thiết bị, từ desktop đến mobile, từ 2D đến không gian 3D.

(Nguồn: https://arstechnica.com/information-technology/2017/05/taking-a-closer-look-at-microsofts-fluent-design-system/)

 

Fluent Design trong tiến trình phát triển UI/UX

Fluent Design không xuất hiện một cách độc lập, mà là kết quả của một quá trình tiến hóa:

• Skeuomorphism: giúp người dùng làm quen bằng cách mô phỏng thế giới thật

• Flat design: tối giản và tăng hiệu năng

• Material Design: kết hợp trực quan và cấu trúc

• Fluent Design: hướng tới trải nghiệm động, đa chiều và thích nghi

Điều này phản ánh một xu hướng rõ ràng: Giao diện đang chuyển từ “hiển thị thông tin” sang “tạo trải nghiệm tương tác”.

Fluent Design được áp dụng rộng rãi trong hệ sinh thái của Microsoft, bao gồm:

• Windows 10 và Windows 11

• Microsoft Edge

• Office 365

• Các ứng dụng và nền tảng web

Ngoài ra, nó cũng ảnh hưởng đến nhiều thiết kế hiện đại trong các hệ thống đa nền tảng.

Tài liệu tham khảo và đọc thêm

• https://fptshop.com.vn/tin-tuc/danh-gia/fluent-design-la-gi-137517
• https://topdev.vn/blog/fluent-design-ngon-ngu-thiet-ke-moi-cua-microsoft/
• https://www.behance.net/gallery/210368867/Microsoft-Fluent-Illustration
• https://quantrimang.com/cong-nghe/fluent-design-la-gi-173139

Material design

Material Design là một hệ thống thiết kế được phát triển bởi Google, nhằm tạo ra trải nghiệm người dùng nhất quán, trực quan và hiệu quả trên nhiều nền tảng như Android, web và các ứng dụng số.

Khác với flat design thuần túy, Material Design không hoàn toàn “phẳng”. Nó đưa vào một ý tưởng cốt lõi:

Giao diện số được tạo thành từ các “tấm vật liệu” có thể xếp chồng, di chuyển và tương tác theo quy luật vật lý.

Những “material” này không phải vật thể thật, nhưng được thiết kế để tạo cảm giác có chiều sâu và cấu trúc rõ ràng.

(Nguồn: https://onextrapixel.com/flat-design-and-material-design-are-same-oh-are-they-really/)

Các nguyên lý cốt lõi của Material Design

Material Design không chỉ là phong cách, mà là một hệ thống có triết lý rõ ràng.

• Thứ nhất, “Material as metaphor” (vật liệu như một phép ẩn dụ).

Các thành phần giao diện được xem như các lớp vật liệu có độ cao (elevation), có thể chồng lên nhau và tạo ra bóng đổ. Điều này giúp người dùng hiểu đâu là thành phần chính, đâu là lớp phía sau.

• Thứ hai, “Bold, graphic, intentional” (mạnh mẽ và có chủ đích).

Thiết kế sử dụng màu sắc rõ ràng, typography nổi bật và bố cục có tổ chức. Mọi yếu tố đều có mục đích cụ thể, không mang tính trang trí dư thừa.

• Thứ ba, “Motion provides meaning” (chuyển động mang ý nghĩa).

Animation trong Material Design không chỉ để tạo hiệu ứng đẹp, mà còn giúp người dùng hiểu hành động. Ví dụ, khi một phần tử mở rộng hoặc chuyển vị trí, chuyển động đó giải thích mối liên hệ giữa các trạng thái.

(Nguồn: https://www.creative-tim.com/blog/web-development/material-design-comparison/)

 

 Vì sao Material Design quan trọng?

Material Design ra đời để giải quyết một vấn đề lớn trong thiết kế số: làm sao để vừa đơn giản, vừa dễ hiểu. Flat design giúp giao diện nhẹ và hiện đại, nhưng đôi khi thiếu gợi ý tương tác. Skeuomorphism thì dễ hiểu, nhưng nặng và rối. Material Design đứng ở giữa, tạo ra sự cân bằng:

• Giữ sự tối giản của flat design
• Bổ sung chiều sâu để tăng trực quan
• Thêm chuyển động để giải thích hành vi

(Nguồn: https://devopedia.org/material-design)

Kết quả là một giao diện:

• Dễ hiểu
• Dễ sử dụng
• Nhất quán trên nhiều nền tảng

Material Design được sử dụng rộng rãi trong:

• Ứng dụng Android
• Website hiện đại
• Dashboard quản lý
• Sản phẩm số của Google như Gmail, Google Maps, YouTube

Ngoài ra, nó còn trở thành một chuẩn tham chiếu cho nhiều hệ thống thiết kế khác.

Tài liệu tham khảo và đọc thêm

• https://m2.material.io/design/introduction
• https://fmit.vn/en/glossary/thiet-ke-material-la-gi
• https://colorme.vn/blog/material-design-la-gi

Flat design

Flat design là gì?

Flat design là phong cách thiết kế giao diện (UI) theo hướng tối giản, hai chiều (2D), loại bỏ các yếu tố mô phỏng vật thể thật như:

• Bóng đổ (shadows)

• Hiệu ứng nổi (3D effects)

• Texture (gỗ, da, kim loại…)

(Nguồn: https://mona.media/thiet-ke-phang-la-gi/ )

Thay vào đó, flat design tập trung vào:

• Màu sắc rõ ràng

• Hình khối đơn giản

• Typography dễ đọc

• Bố cục gọn gàng

Nói cách khác, flat design không cố gắng “bắt chước” thế giới vật lý, mà xây dựng một ngôn ngữ thị giác riêng cho môi trường số.

Sự trỗi dậy của flat design không phải là ngẫu nhiên, mà phản ánh một bước chuyển trong cách con người tương tác với công nghệ. Trước đó, các giao diện thường theo phong cách skeuomorphism — mô phỏng vật thể thật để giúp người dùng dễ làm quen. Tuy nhiên, khi người dùng đã trở nên “quen với môi trường số), việc mô phỏng này trở nên không còn cần thiết.

Khoảng năm 2013, Apple với iOS 7 đã đánh dấu bước ngoặt lớn khi chuyển sang thiết kế phẳng. Sau đó, Google cũng phát triển Material design — một phiên bản nâng cao của flat design.

Những lý do chính khiến flat design trở nên phổ biến bao gồm:

• Giao diện nhẹ hơn, tải nhanh hơn

• Phù hợp với nhiều kích thước màn hình (responsive design)

• Giảm nhiễu thông tin, giúp người dùng tập trung

• Tạo cảm giác hiện đại, nhất quán

Đặc trưng của flat design

Flat design có thể được nhận diện qua một số đặc điểm chính.

• Thứ nhất là tính tối giản. Mọi yếu tố không cần thiết đều bị loại bỏ. Thiết kế chỉ giữ lại những thành phần phục vụ trực tiếp cho chức năng.

• Thứ hai là màu sắc rõ ràng và tương phản cao. Các màu đơn sắc hoặc bảng màu giới hạn giúp tăng khả năng nhận diện và tạo điểm nhấn.

• Thứ ba là hình học đơn giản. Các icon và thành phần giao diện thường được xây dựng từ các hình cơ bản như hình vuông, hình tròn, đường thẳng.

• Thứ tư là tập trung vào nội dung. Thay vì gây ấn tượng bằng hiệu ứng, flat design ưu tiên khả năng đọc, hiểu và tương tác.

(Nguồn: https://blog.ferpection.com/en/flat-design-skeuomorphism-which-style-for-designing-an-interface)

 Flat design và những hạn chế

Dù mang lại nhiều lợi ích, flat design không phải là hoàn hảo.

Một trong những vấn đề lớn nhất là thiếu “gợi ý tương tác” (affordance). Khi các nút bấm không có bóng đổ hay hiệu ứng nổi, người dùng có thể khó nhận ra đâu là yếu tố có thể tương tác.

Ngoài ra, việc quá tối giản đôi khi khiến giao diện trở nên:

• Khó hiểu đối với người mới

• Thiếu chiều sâu thị giác

• Dễ bị “đồng nhất hóa”, thiếu cá tính

(Nguồn:  https://www.seobility.net/en/wiki/Flat_Design)

Tài liệu tham khảo và đọc thêm

• https://arena.fpt.edu.vn/flat-design/
• https://ixdf.org/literature/topics/flat-design
• https://www.canva.com/learn/flat-design/
  
  

Skeuomorphism

Skeuomorphism là cách thiết kế trong đó các yếu tố số được tạo ra để mô phỏng hình dáng, chất liệu hoặc cách hoạt động của các vật thể ngoài đời thực.

Nói cách khác, đây là việc mang “ký ức vật lý” vào môi trường số.

Ví dụ:

• Ứng dụng ghi chú trông như một cuốn sổ giấy
• Ứng dụng đọc sách hiển thị sách trên kệ gỗ
• Máy tính điện tử có nút bấm giống máy thật

(Nguồn: https://sketchplanations.com/skeuomorph )

Những yếu tố này không cần thiết về mặt chức năng, nhưng lại rất quan trọng về mặt trải nghiệm và nhận thức. Nó gắn liền với cách con người xử lý thông tin. Trong tâm lý học nhận thức, con người thường hiểu cái mới thông qua cái quen thuộc. Skeuomorphism tận dụng nguyên lý này để làm cho công nghệ trở nên dễ tiếp cận hơn.

Ở góc độ này, skeuomorphism là một dạng của behavioral design — thiết kế dựa trên hành vi và nhận thức của con người.

Tài liệu tham khảo và đọc thêm

• https://www.nngroup.com/articles/skeuomorphism/
• https://sketchplanations.com/skeuomorph

Dark patterns

 

Dark pattern là các chiến lược thiết kế giao diện (UI/UX) được tạo ra nhằm đánh lừa, gây áp lực hoặc thao túng người dùng, khiến họ thực hiện những hành động mà họ có thể không thực sự mong muốn.

Khác với các thiết kế trung lập hoặc hỗ trợ người dùng, dark pattern tận dụng những điểm yếu trong nhận thức và hành vi để tối đa hóa lợi ích cho nền tảng hoặc doanh nghiệp, đôi khi gây bất lợi cho người dùng.

(Nguồn: https://sketchplanations.com/dark-patterns)

Những biểu hiện phổ biến của dark pattern

Một trong những đặc điểm đáng chú ý của dark pattern là chúng thường rất tinh vi và khó nhận ra. Một số dạng phổ biến bao gồm:

• “Vào dễ, ra khó” (Roach Motel)

Người dùng có thể đăng ký dịch vụ chỉ bằng một cú click, nhưng khi muốn hủy thì phải trải qua nhiều bước phức tạp, thậm chí không tìm thấy nút hủy rõ ràng.

• Lựa chọn mặc định có lợi cho hệ thống

Các checkbox như “đồng ý nhận email quảng cáo” hoặc “tự động gia hạn” được tick sẵn, khiến người dùng vô tình đồng ý nếu không chú ý.

• Confirmshaming (gây áp lực tâm lý)

Các nút từ chối được viết theo cách khiến người dùng cảm thấy “có lỗi”, ví dụ: “Không, tôi không muốn tiết kiệm tiền”.

• Ngụy trang thông tin

Thông tin quan trọng được hiển thị với font nhỏ, màu nhạt, trong khi các nút hành động (như “Mua ngay”) lại được làm nổi bật.

• Giả khan hiếm và bằng chứng xã hội

Các thông báo như “chỉ còn 1 sản phẩm” hoặc “50 người đang xem” có thể không phản ánh thực tế, nhưng lại tạo cảm giác cấp bách.

 

(Nguồn: https://visionias.in/current-affairs/news-today/2025-05-29/polity-and-governance/centre-convenes-stakeholder-dialogue-on-eliminating-dark-patterns )

Vì sao dark pattern hoạt động hiệu quả?

Dark pattern không phải là sự ngẫu nhiên. Chúng dựa trên các nguyên lý đã được nghiên cứu trong kinh tế học hành vi:

• Con người có xu hướng giữ nguyên lựa chọn mặc định (default bias)
• Chúng ta dễ bị ảnh hưởng bởi cách thông tin được trình bày (framing effect)
• Chúng ta sợ mất mát hơn là mong muốn đạt được lợi ích (loss aversion)
• Chúng ta thường tin vào hành vi của số đông (social proof)

Khi các yếu tố này được tích hợp vào thiết kế giao diện, chúng có thể định hình hành vi người dùng một cách mạnh mẽ mà không cần ép buộc.

(Ví dụ của dark pattern. Nguồn: https://www.shopify.com/partners/blog/dark-patterns)

Phân biệt dark pattern và digital nudging

Dark pattern thường bị nhầm lẫn với digital nudging, nhưng hai khái niệm này có sự khác biệt quan trọng.

• Digital nudging hướng đến việc hỗ trợ người dùng đưa ra quyết định tốt hơn, thường mang tính minh bạch và có thể từ chối dễ dàng. Trong khi đó, dark pattern lại thiếu minh bạch, làm mờ thông tin và khiến việc từ chối trở nên khó khăn.

• Nói cách khác, nếu nudging là “đẩy nhẹ”, thì dark pattern là “lái hướng”. Ranh giới giữa hai khái niệm này không chỉ nằm ở kỹ thuật thiết kế, mà còn ở ý định và đạo đức của người thiết kế.

Tài liệu tham khảo

• https://www.axelerant.com/blog/what-are-dark-patterns
• https://ised-isde.canada.ca/site/office-consumer-affairs/en/dark-patterns
• https://www.shopify.com/partners/blog/dark-patterns

Digital nudging

 

Digital nudging (thúc đẩy hành vi số) là việc thiết kế giao diện số như website, ứng dụng hay nền tảng trực tuyến nhằm tác động nhẹ đến hành vi người dùng. Điểm đặc biệt là người dùng vẫn có quyền lựa chọn, nhưng cách thông tin được trình bày, cách các nút được bố trí hay cách các tùy chọn được sắp xếp sẽ khiến họ có xu hướng chọn một phương án nhất định.

(Nguồn: https://capturly.com/blog/wp-content/uploads/2024/03/Definition-of-digital-nudges.png)

Khái niệm này bắt nguồn từ lý thuyết “nudge” trong kinh tế học hành vi do Richard Thaler và Cass Sunstein đề xuất. Thay vì giả định con người luôn ra quyết định một cách lý trí, lý thuyết này cho rằng hành vi của chúng ta chịu ảnh hưởng mạnh mẽ từ cách môi trường lựa chọn được thiết kế.

Cơ chế tâm lý phía sau

Digital nudging không phải ngẫu nhiên – nó dựa trên các thiên kiến hành vi:

• Hiệu ứng mặc định- Default effect: con người thường giữ lựa chọn mặc định.
• Hiệu ứng khung - Framing effect: cách trình bày ảnh hưởng quyết định.
• Bằng chứng xã hội - Social proof: “80% người dùng chọn gói này”.
• Hiệu ứng khan hiếm - Scarcity effect: làm tăng giá trị cảm nhận của một sản phẩm khi nó trở nên hiếm.
• Hiệu ứng neo - Anchoring: chúng ta bị ảnh hưởng bởi một con số ban đầu khi đánh giá các lựa chọn sau đó, nghĩa là  người ta thường lấy giá ban đầu làm mốc so sánh.

(Nguồn: https://www.linkedin.com/pulse/how-digital-nudging-can-generate-more-sales-msi-aci)

Tuy nhiên, digital nudging không phải lúc nào cũng tích cực. Khi được sử dụng đúng cách, nó có thể giúp con người đưa ra quyết định tốt hơn, như tiết kiệm năng lượng, duy trì thói quen học tập, hoặc cải thiện sức khỏe. Nhưng khi bị lạm dụng, nó có thể trở thành công cụ thao túng, đặc biệt thông qua các “dark patterns” — những thiết kế khiến người dùng khó từ chối, khó hủy đăng ký, hoặc vô tình đưa ra lựa chọn bất lợi.

Tài liệu tham khảo

• https://www.researchgate.net/publication/314570601_Digital_Nudging
• https://www.apxor.com/blog/in-app-nudges-complete-guide
• https://link.springer.com/article/10.1007/s12599-016-0453-1
• https://lab.co.uk/news-and-insights/what-is-nudge-theory-and-how-can-nudges-improve-digital-experiences

Easterlin Paradox

Easterlin Paradox (Nghịch lý Easterlin) là một phát hiện nổi tiếng trong happiness economics (kinh tế học hạnh phúc) do Richard Easterlin đề xuất, nêu ra một mâu thuẫn tưởng chừng trái ngược với trực giác:

"Trong dài hạn, khi thu nhập bình quân của một quốc gia tăng lên, mức độ hạnh phúc trung bình của người dân không nhất thiết tăng theo."

Nghịch lý Easterlin chỉ ra hai điều xảy ra đồng thời:

• Ở một thời điểm nhất định, trong cùng một quốc gia, người có thu nhập cao hơn thường hạnh phúc hơn người có thu nhập thấp.

• Theo thời gian, khi thu nhập của toàn xã hội tăng lên, mức hạnh phúc trung bình không tăng tương ứng.

Hai điều này ghép lại tạo thành “nghịch lý”: thu nhập làm người này hạnh phúc hơn người khác, nhưng không làm xã hội hạnh phúc hơn khi tất cả cùng giàu lên.

(Nguồn: https://fourweekmba.com/easterlin-paradox/)

Vì sao lại có nghịch lý?

Ba cơ chế thường được dùng để giải thích nghịch lý này

• Một là, so sánh tương đối (relative income).

Con người không chỉ quan tâm mình giàu bao nhiêu, mà thường so sánh mình giàu so với người khác. Khi thu nhập của mọi người cùng tăng, thứ hạng tương đối không đổi nên cảm giác hạnh phúc không tăng.

• Hai là, thích nghi (adaptation / hedonic treadmill).

Con người nhanh chóng quen với mức sống mới. Thu nhập tăng mang lại niềm vui ban đầu, nhưng cảm giác này sớm phai nhạt và trở về “mức hạnh phúc nền”.

• Ba là, chi phí xã hội của tăng trưởng.

Tăng trưởng kinh tế thường đi kèm áp lực công việc, căng thẳng, bất bình đẳng, ô nhiễm môi trường, làm triệt tiêu lợi ích hạnh phúc từ thu nhập cao hơn.

(Nguồn: https://www.brookings.edu/articles/the-easterlin-paradox-at-50/)

Tài liệu tham khảo và đọc thêm

• https://blogs.lse.ac.uk/inequalities/2025/06/25/the-easterlin-paradox-revisited/
• https://pmc.ncbi.nlm.nih.gov/articles/PMC3012515/
• https://docs.iza.org/dp13923.pdf
• https://www.forbes.com/sites/timworstall/2014/10/27/the-easterlin-paradox-is-disproved-economic-growth-really-does-make-us-happy/