Material 3 Expressive Cho UI/UX: Thiết Kế Cảm Xúc Mà Không Hy Sinh Accessibility

Trong nhiều năm, “giao diện tốt” thường bị rút gọn thành một công thức an toàn: lưới ngay ngắn, màu trung tính, nhiều khoảng trắng và chuyển động vừa đủ để không ai phàn nàn. Công thức đó giúp sản phẩm dễ dùng, nhưng cũng khiến không ít ứng dụng trở nên khó phân biệt. Material 3 Expressive là nỗ lực của Google nhằm đưa cảm xúc, cá tính và nhịp điệu trở lại giao diện mà không phủ nhận các nguyên tắc usability đã có.

Điểm đáng chú ý không nằm ở việc bo góc nhiều hơn hay dùng màu rực hơn. Material 3 Expressive đặt ra một câu hỏi khó hơn cho product designer: làm thế nào để giao diện có cảm xúc nhưng vẫn rõ ràng, dễ tiếp cận, phù hợp ngữ cảnh và có thể triển khai nhất quán bởi cả đội ngũ? Bài viết này tập trung vào câu hỏi đó qua trường hợp Wear OS, nơi diện tích màn hình nhỏ và thời gian tương tác ngắn buộc mọi quyết định thị giác phải có lý do.

Google mô tả Material 3 Expressive là bước mở rộng của Material Design 3 với những thay đổi dựa trên nghiên cứu về theming, component, motion, typography và shape. Nó không phải lời mời biến mọi màn hình thành một poster. Đây là một hệ thống để điều chỉnh mức độ biểu cảm theo nhiệm vụ, thương hiệu và nhu cầu người dùng. Nếu đang xây design system, ứng dụng di động, sản phẩm đeo tay hoặc prototype mới, cách tiếp cận này có thể giúp đội ngũ chuyển từ “trông hiện đại” sang “có chủ đích”.

Material 3 Expressive thực sự thay đổi điều gì?

Material Design 3 đã cung cấp nền tảng về màu động, typography, shape và component. Material 3 Expressive không xóa nền tảng đó mà tăng biên độ lựa chọn. Designer có thêm công cụ để tạo nhịp điệu, nhấn mạnh hành động quan trọng và gợi ra cảm xúc phù hợp với sản phẩm. Một ứng dụng sức khỏe có thể dùng chuyển động mềm và hình khối thân thiện; một ứng dụng thể thao có thể dùng tương phản mạnh, typography lớn và chuyển động giàu năng lượng; một ứng dụng tài chính vẫn có thể giữ mức biểu cảm thấp hơn để ưu tiên cảm giác tin cậy.

Mức độ yêu thích thiết kế biểu cảm theo nhóm tuổi. Nguồn: Android Developers.

Trong tài liệu nghiên cứu của Android Developers, mức yêu thích thiết kế biểu cảm cao nhất ở nhóm 18–24 tuổi, sau đó giảm dần theo nhóm tuổi. Biểu đồ ghi nhận tỷ lệ 87% ở nhóm 18–24, 81% ở nhóm 25–34, 65% ở nhóm 35–44, 62% ở nhóm 45–54 và 52% ở nhóm 55–64. Đây là dữ liệu nghiên cứu do Google công bố, không phải quy luật phổ quát cho mọi thị trường. Nó nhắc designer rằng “expressive” không nên trở thành mặc định bất biến: cùng một sản phẩm có thể cần mức cường độ khác nhau theo tệp người dùng.

Điểm cốt lõi là chủ đích. Biểu cảm chỉ có giá trị khi hỗ trợ một trong ba việc: làm rõ thứ bậc, tăng khả năng nhận biết hành động hoặc củng cố bản sắc sản phẩm. Nếu một hình dạng lạ, chuyển động mạnh hay màu nhấn không phục vụ ba mục tiêu đó, nó có nguy cơ trở thành nhiễu. Vì vậy, bước đầu tiên không phải mở Figma và chọn component mới, mà là xác định khoảnh khắc nào trong hành trình thật sự cần cảm xúc.

Nghiên cứu người dùng là nền móng, không phải lớp trang trí sau cùng

Android Developers gọi Material 3 Expressive là một trong những cập nhật được nghiên cứu sâu nhất của hệ thống Material. Theo mô tả chính thức, quá trình phát triển sử dụng nhiều phương pháp như eye tracking, khảo sát, focus group, thử nghiệm cảm nhận và usability testing. Đội ngũ không chỉ hỏi người tham gia “mẫu nào đẹp hơn”, mà còn quan sát họ tập trung vào đâu, hiểu hành động nhanh đến mức nào và phản ứng cảm xúc ra sao.

Các thuộc tính cảm xúc được dùng để đánh giá thiết kế biểu cảm. Nguồn: Android Developers.

Các thuộc tính được đo gồm energetic, emotive, positive vibe, creative, playful và friendly. Điều này gợi ra một quy trình hữu ích cho đội ngũ UI/UX: trước khi chọn ngôn ngữ thị giác, hãy chọn phản ứng mong muốn. Một flow onboarding có thể cần “friendly” và “positive” hơn; màn hình cảnh báo cần “clear” và “urgent”, không nhất thiết “playful”; dashboard vận hành cần “confident” và “efficient”. Khi có từ khóa cảm xúc cụ thể, việc đánh giá prototype bớt cảm tính hơn.

Đội ngũ có thể biến các từ khóa này thành tiêu chí kiểm thử. Ví dụ, cho người dùng xem hai biến thể của cùng một màn hình trong thời gian ngắn, sau đó hỏi họ chọn ba tính từ mô tả cảm giác. Tiếp theo, kiểm tra xem họ có nhận ra CTA chính, hiểu trạng thái hệ thống và hoàn thành nhiệm vụ đúng không. Nếu biến thể “đẹp hơn” nhưng làm giảm khả năng nhận biết hoặc tăng lỗi, đó không phải expressive design tốt.

Đừng nhầm nghiên cứu cảm xúc với cuộc thi sở thích. Preference chỉ là một lớp dữ liệu. Một thiết kế được yêu thích chưa chắc hoàn thành nhiệm vụ tốt hơn; một thiết kế mới lạ có thể đạt điểm cao trong lần tiếp xúc đầu nhưng gây mệt khi dùng hằng ngày. Với sản phẩm có tần suất sử dụng cao, nên kiểm thử cả ấn tượng ban đầu lẫn trải nghiệm lặp lại. Nhật ký sử dụng, thử nghiệm theo thời gian và dữ liệu hành vi thực tế giúp phát hiện hiệu ứng “wow” ngắn hạn.

Cá nhân hóa có thể tăng giá trị cảm nhận, nhưng cần giới hạn

Kết quả nghiên cứu về tác động của cá nhân hóa đến ý định mua. Nguồn: Android Developers.

Một biểu đồ trong tài liệu của Google ghi nhận cá nhân hóa làm tăng “intent to buy” 27,6% trong nghiên cứu được trình bày. Con số này không nên được dùng như dự báo doanh thu cho mọi sản phẩm. Nó cho thấy người dùng có thể đánh giá cao giao diện phản ánh sở thích cá nhân, nhưng hiệu quả thực tế còn phụ thuộc ngành hàng, mẫu nghiên cứu, giá trị sản phẩm và cách triển khai.

Với Material 3, cá nhân hóa thường bắt đầu từ dynamic color, nhưng hệ thống không nên dừng ở việc đổi palette. Designer có thể cho phép điều chỉnh mức tương phản, cỡ chữ, mật độ thông tin, chuyển động hoặc mức độ biểu cảm. Một lựa chọn “calm” và một lựa chọn “vibrant” đôi khi có ý nghĩa hơn hàng chục theme màu. Điều quan trọng là những lựa chọn này phải giữ được hierarchy, trạng thái và ý nghĩa semantic của component.

Cá nhân hóa cũng tạo chi phí. Mỗi biến thể làm tăng số trường hợp phải kiểm tra: light/dark, contrast, locale, cỡ chữ, hình dạng màn hình, trạng thái disabled, loading và error. Nếu design token không đủ chặt, đội ngũ sẽ nhanh chóng có một tập hợp màn hình đẹp riêng lẻ nhưng thiếu tính hệ thống. Vì vậy, hãy cá nhân hóa ở cấp token và theme trước, tránh cho phép tùy chỉnh tùy tiện từng component.

Một quy tắc thực tế là giữ cố định ý nghĩa, cho phép thay đổi biểu hiện. Màu lỗi vẫn phải được nhận biết là lỗi; CTA chính vẫn phải nổi bật; trạng thái đã chọn vẫn phải phân biệt được; vùng chạm vẫn phải đạt chuẩn. Người dùng có thể chọn màu và mức biểu cảm, nhưng không nên vô tình làm mất tín hiệu tương tác.

Ba mức độ biểu cảm để kiểm soát cường độ

Tài liệu Wear OS chia mức độ biểu cảm thành ba tầng: foundational, excellent và transformational. Cách phân tầng này hữu ích hơn việc hỏi “có dùng Material 3 Expressive hay không”, bởi thực tế mỗi sản phẩm cần một mức khác nhau.

Với đội ngũ đang migration, foundational là điểm bắt đầu hợp lý. Chuẩn hóa token, component và accessibility trước khi thêm hiệu ứng. Ở mức excellent, hãy chọn hai hoặc ba chiến thuật biểu cảm thay vì kích hoạt tất cả: chẳng hạn shape có nhịp, typography lớn ở hero moment và motion cho trạng thái chuyển tiếp. Mức transformational chỉ nên xuất hiện ở những luồng thật sự định nghĩa sản phẩm.

Có thể lập “bản đồ cường độ” cho toàn bộ user journey. Đăng nhập, nhập thông tin thanh toán và xử lý lỗi nên bình tĩnh, rõ ràng. Hoàn thành mục tiêu, đạt thành tích hoặc khám phá nội dung mới có thể giàu cảm xúc hơn. Bản đồ này giúp designer tránh tình trạng mọi màn hình đều tranh nhau nổi bật.

Typography: xây hierarchy trước khi tăng cá tính

Material 3 Expressive trên Wear OS sử dụng Roboto Flex và một thang chữ gồm 21 style. Điều đáng học không phải số lượng style, mà là cách mỗi nhóm được gắn với một vai trò. Khi typography có vai trò rõ, đội ngũ có thể thay đổi kích thước, weight hoặc width mà không làm mất cấu trúc thông tin.

Kiểu Display dành cho thông tin nổi bật và khoảnh khắc thương hiệu. Nguồn: Android Developers.

Display dành cho chuỗi ngắn, số liệu quan trọng hoặc hero moment. Nó không phải lựa chọn cho đoạn văn dài. Trên đồng hồ, Display có thể là nhịp tim, thời gian tập luyện hoặc thành tích. Trên điện thoại, nó có thể là con số chính trong dashboard. Nếu mọi tiêu đề đều dùng Display, tác dụng nhấn mạnh sẽ biến mất.

Kiểu Title hỗ trợ phân cấp và định hướng trong giao diện. Nguồn: Android Developers.

Title chịu trách nhiệm dẫn đường: tên trang, section và nhóm nội dung. Đây là lớp giúp người dùng hiểu họ đang ở đâu. Trong design system, hãy giới hạn số cấp Title thực sự cần dùng và định nghĩa khoảng cách đi kèm. Kích thước chữ không thể tự tạo hierarchy nếu spacing giữa các nhóm không nhất quán.

Kiểu Label được dùng cho nhãn hành động và thành phần tương tác. Nguồn: Android Developers.

Label gắn với hành động và component. Đây là nơi vẻ đẹp phải nhường chỗ cho khả năng hiểu. Nhãn “Tiếp tục”, “Lưu” hoặc “Hủy” cần đủ tương phản, không bị co giãn quá mức và giữ nghĩa khi dịch sang ngôn ngữ dài hơn. Nếu dùng variable font, phải kiểm tra width axis với bản tiếng Việt, tiếng Đức hoặc những locale có chuỗi dài.

Kiểu Body dành cho nội dung, dữ liệu và thông tin bổ trợ. Nguồn: Android Developers.

Body dành cho nội dung, metadata và dữ liệu phức tạp. Một lỗi phổ biến khi theo đuổi giao diện biểu cảm là làm headline rất đẹp nhưng để body quá nhỏ, line-height chật hoặc tương phản thấp. Trên màn hình nhỏ, sự thoải mái khi đọc quan trọng hơn việc nhồi thêm thông tin. Hãy thử thiết kế ở điều kiện xấu: ánh sáng ngoài trời, người dùng đang di chuyển, màn hình giảm sáng và font scale tăng.

Kiểu Numeral tối ưu chữ số lớn và dữ liệu thay đổi trên màn hình nhỏ. Nguồn: Android Developers.

Numeral là nhóm dễ bị bỏ quên nhưng đặc biệt quan trọng với đồng hồ, fintech, sức khỏe và dashboard. Chữ số có thể dùng tabular hoặc mono spacing để tránh “nhảy” chiều rộng khi giá trị thay đổi. Khi số liệu chuyển động, độ ổn định của baseline và chiều rộng thường quan trọng hơn hiệu ứng lạ mắt. Đây là ví dụ rõ ràng cho triết lý expressive có kiểm soát: hình thức giàu cá tính, nhưng cấu trúc dữ liệu vẫn ổn định.

Nếu muốn đào sâu cách chọn vai trò chữ, có thể tham khảo bài về các xu hướng typography và variable font trên NextGZ. Khi cần lựa chọn font có hỗ trợ tiếng Việt và giấy phép rõ, danh sách các phông chữ miễn phí phổ biến cung cấp thêm bối cảnh cho Roboto và những lựa chọn thay thế.

Shape, motion và màu: mỗi yếu tố cần một nhiệm vụ

Shape là một trong những thay đổi dễ nhận thấy nhất của Material 3 Expressive. Trên màn hình tròn, container có thể ôm cạnh, các nhóm nút thay đổi hình dạng theo trạng thái và component tận dụng không gian tốt hơn. Nhưng shape không chỉ để tạo phong cách. Nó có thể biểu thị nhóm, trạng thái, mức ưu tiên hoặc vùng tương tác.

Để dùng shape hiệu quả, hãy định nghĩa một “ngữ pháp hình dạng”. Ví dụ: shape tròn cho hành động nhanh, shape kéo dài cho lựa chọn có nhãn, góc sắc hơn cho trạng thái cảnh báo, container lớn cho nội dung ưu tiên. Ngữ pháp này phải nhất quán đủ để người dùng học được. Nếu mỗi màn hình dùng một shape mới vì thấy thú vị, hệ thống sẽ mất khả năng dự đoán.

Motion cũng cần chức năng. Spring animation có thể làm phản hồi chạm tự nhiên hơn, shape morphing có thể cho thấy quan hệ giữa hai trạng thái, còn chuyển động theo không gian giúp người dùng hiểu màn hình mới đến từ đâu. Motion không nên chỉ là phần thưởng cho designer. Nó phải giải thích sự thay đổi, xác nhận hành động hoặc hướng chú ý.

Đối với accessibility, luôn cung cấp phương án giảm chuyển động. Tránh để thông tin chỉ xuất hiện qua animation, tránh nhấp nháy mạnh và không kéo dài chuyển tiếp đến mức làm chậm nhiệm vụ. Khi thử nghiệm, hãy đo thời gian hoàn thành và tỷ lệ lỗi ở cả chế độ motion đầy đủ lẫn reduced motion.

Màu biểu cảm có thể tạo nhịp và củng cố thương hiệu, nhưng màu semantic phải ổn định. Trạng thái error, warning, success, selected và disabled cần phân biệt không chỉ bằng hue mà còn bằng icon, label, pattern hoặc hình dạng. Dynamic color cũng phải được kiểm tra trên nhiều wallpaper và palette. Một theme đẹp trong mockup chưa chắc đạt tương phản khi seed color thay đổi.

Accessibility không phải lực cản của thiết kế biểu cảm

Một định kiến phổ biến là accessibility khiến giao diện nhàm chán. Thực tế, giới hạn rõ thường giúp thiết kế tốt hơn. Khi target đủ lớn, hierarchy rõ, tương phản đạt yêu cầu và motion có kiểm soát, designer có thể tự tin tăng cá tính ở những vùng còn lại.

Google cho biết trong quá trình nghiên cứu Material 3 Expressive, đội ngũ xem xét tap target, color contrast và các thực hành accessibility; trong một số trường hợp, họ chọn vượt yêu cầu hiện hành. Điều này không có nghĩa mọi component mặc định sẽ tự động phù hợp mọi sản phẩm. Nội dung, locale, màu thương hiệu và ngữ cảnh sử dụng vẫn có thể tạo lỗi.

Checklist tối thiểu cho một màn hình expressive nên gồm:

• CTA chính có thể nhận biết khi bỏ màu hay không.

• Text và icon có đủ tương phản ở cả light và dark theme hay không.

• Trạng thái focus, pressed, selected và disabled có khác nhau rõ ràng hay không.

• Font scale lớn có làm vỡ layout, che nội dung hoặc đẩy CTA khỏi màn hình hay không.

• Reduced motion có giữ nguyên ý nghĩa của chuyển tiếp hay không.

• Screen reader có đọc đúng thứ tự, nhãn và trạng thái hay không.

• Vùng chạm có đủ lớn khi người dùng đang di chuyển hay không.

• Màu semantic có thêm tín hiệu ngoài màu sắc hay không.

Trên Wear OS, giới hạn màn hình càng làm checklist này quan trọng. Một kiểu chữ lớn có thể rất biểu cảm nhưng không phải style nào cũng cho phép scale theo thiết lập của người dùng do không gian hạn chế. Vì vậy, designer phải hiểu vai trò từng style và kiểm thử trên thiết bị thật. Không thể chỉ phóng mockup tròn trên màn hình desktop rồi coi là hoàn tất.

Quy trình áp dụng vào design system hiện có

1. Kiểm kê token và component trước khi đổi giao diện

Lập danh sách color token, type token, shape token, spacing, elevation, motion và trạng thái component. Đánh dấu phần nào đã có semantic rõ, phần nào vẫn dùng giá trị trực tiếp. Nếu hệ thống còn nhiều màu hex và kích thước rời rạc, hãy chuẩn hóa trước khi thêm expressive layer.

2. Chọn một hành trình có giá trị cao

Không migration toàn bộ sản phẩm cùng lúc. Chọn một flow có tần suất sử dụng cao nhưng rủi ro vừa phải, chẳng hạn home, discovery hoặc summary. Tránh bắt đầu bằng thanh toán, khôi phục tài khoản hay cảnh báo bảo mật. Flow thí điểm cần đủ component để kiểm tra hệ thống nhưng không quá nhạy cảm.

3. Xác định phản ứng cảm xúc và giới hạn

Chọn ba tính từ mục tiêu và ba tính từ cần tránh. Ví dụ: “energetic, friendly, confident” nhưng không “childish, chaotic, aggressive”. Bộ từ này giúp nhóm thiết kế phản biện cụ thể hơn. Thay vì nói “màu này hơi quá”, có thể hỏi “nó có làm giao diện chuyển từ energetic sang aggressive không?”.

4. Thiết kế ba mức cường độ

Tạo biến thể foundational, excellent và transformational cho cùng một màn hình. Giữ nội dung và nhiệm vụ giống nhau để so sánh công bằng. Đừng chỉ thay màu; hãy thử hierarchy, shape, motion và typography theo bộ token. Mục tiêu là tìm mức thấp nhất vẫn tạo được cảm xúc mong muốn.

5. Prototype chuyển động trên thiết bị thật

Motion khó đánh giá bằng frame tĩnh. Kiểm tra tốc độ, độ nảy, phản hồi chạm và khả năng gián đoạn. Người dùng có thể chạm tiếp khi animation đang chạy không? Nếu hệ thống chờ animation kết thúc mới nhận lệnh, trải nghiệm sẽ chậm dù hình ảnh mượt.

6. Kiểm thử định tính và định lượng

Kết hợp nhiệm vụ usability với câu hỏi cảm xúc. Đo tỷ lệ hoàn thành, thời gian, lỗi, khả năng nhớ CTA và mức tự tin. Sau đó hỏi người dùng chọn tính từ mô tả. Một biến thể chỉ được xem là tốt hơn khi đạt cảm xúc mục tiêu mà không làm giảm khả năng sử dụng.

7. Ghi lại quyết định trong documentation

Mỗi token hoặc component biểu cảm cần có mục đích, trường hợp dùng và trường hợp không dùng. Documentation nên có ví dụ đúng/sai, accessibility note, motion behavior và fallback. Nếu chỉ phát hành một thư viện Figma đẹp mà thiếu quy tắc, các đội sản phẩm sẽ áp dụng khác nhau và làm hệ thống phân mảnh.

Những sai lầm dễ gặp khi “expressive” trở thành phong trào

Sai lầm đầu tiên là coi Material 3 Expressive như một skin. Thay palette, bo góc lớn và thêm animation không tạo ra một hệ thống có cảm xúc. Nếu hierarchy, nội dung và hành trình chưa tốt, lớp skin chỉ làm vấn đề nổi bật hơn.

Sai lầm thứ hai là dùng một mức cường độ cho mọi ngữ cảnh. Màn hình chúc mừng và màn hình nhập mã xác thực không nên có cùng nhịp. Sự tương phản giữa vùng bình tĩnh và khoảnh khắc cao trào mới làm biểu cảm có ý nghĩa.

Sai lầm thứ ba là lấy số liệu nghiên cứu của Google làm benchmark sản phẩm. Các con số như mức tăng preference, aesthetics hay intent to buy là bối cảnh nghiên cứu được Google công bố, không phải cam kết hiệu quả. Đội ngũ vẫn cần nghiên cứu với người dùng, thị trường và nhiệm vụ của chính mình.

Sai lầm thứ tư là bỏ qua localization. Variable font, button group và typography lớn có thể hoạt động tốt với chuỗi tiếng Anh ngắn nhưng vỡ với tiếng Việt hoặc ngôn ngữ dài. Hãy dùng nội dung thật sớm, không chờ đến cuối sprint.

Sai lầm cuối cùng là không dự trù chi phí engineering. Shape morphing, spring motion, dynamic theme và adaptive layout đều cần triển khai, kiểm thử và theo dõi hiệu năng. Designer nên làm việc với developer từ lúc chọn mức biểu cảm, không bàn giao một prototype khó tái tạo rồi mới thương lượng phạm vi.

Material 3 Expressive phù hợp với đội ngũ nào?

Hệ thống này phù hợp với đội ngũ muốn tăng bản sắc cho sản phẩm Android hoặc Wear OS, đang xây design system mới, hoặc cần làm mới trải nghiệm mà vẫn giữ nền tảng Material. Nó đặc biệt hữu ích với ứng dụng sức khỏe, thể thao, giải trí, sáng tạo, social và productivity—những nơi cảm xúc và cá nhân hóa có thể tạo giá trị rõ.

Với sản phẩm enterprise, tài chính hoặc y tế, Material 3 Expressive vẫn có thể dùng nhưng nên bắt đầu ở mức foundational hoặc excellent có kiểm soát. Typography, hierarchy, trạng thái và accessibility cần được ưu tiên trước motion và shape đặc trưng. Biểu cảm trong những sản phẩm này có thể đến từ sự tự tin, bình tĩnh và rõ ràng, không nhất thiết từ màu rực.

Nếu sản phẩm đa nền tảng, đừng ép mọi nền tảng trông giống nhau. Hãy giữ brand token và nguyên tắc chung, đồng thời tôn trọng pattern bản địa. Material 3 Expressive có thể là ngôn ngữ cho Android; iOS cần đối chiếu Human Interface Guidelines và hệ thống component tương ứng. Sự nhất quán nên nằm ở mục tiêu, nội dung và nhận diện—not ở việc sao chép pixel.

Kết luận: cảm xúc cần được thiết kế như một chức năng

Material 3 Expressive đáng chú ý vì nó đặt cảm xúc vào cùng cuộc thảo luận với usability, accessibility và design system. Nó không cho phép designer bỏ qua giới hạn; ngược lại, buộc đội ngũ nói rõ muốn người dùng cảm thấy gì, ở khoảnh khắc nào và vì sao.

Cách áp dụng an toàn nhất là bắt đầu nhỏ: chuẩn hóa token, chọn một hành trình, xác định tính từ mục tiêu, tạo ba mức cường độ, prototype trên thiết bị thật và kiểm thử cả nhiệm vụ lẫn cảm xúc. Khi kết quả cho thấy giao diện dễ hiểu hơn hoặc ít nhất không kém rõ ràng, mới mở rộng sang phần còn lại.

Thiết kế biểu cảm không đồng nghĩa với thiết kế ồn ào. Một hệ thống tốt biết lúc nào nên nổi bật và lúc nào nên lùi lại. Khi shape, motion, màu và typography đều có nhiệm vụ, cảm xúc trở thành một phần của trải nghiệm sản phẩm—không phải lớp trang trí được thêm vào phút cuối.