Mở đầu — vì sao bài này quan trọng
Trong suốt khóa học, chúng ta đã dành rất nhiều bài để nói về accessibility ở góc độ kỹ thuật: alt text đúng chuẩn, color contrast đạt ngưỡng WCAG, keyboard navigation mượt mà. Đó là những thứ giúp sản phẩm của bạn dùng được với nhiều người hơn. Nhưng có một tầng sâu hơn mà rất ít designer Việt Nam để ý tới: hình ảnh bạn đưa vào sản phẩm đang kể một câu chuyện về việc ai được chào đón dùng nó.
Hãy tưởng tượng một ứng dụng gym mở lên toàn hình người mẫu 6 múi, da trắng, dưới 25 tuổi. Một phụ nữ 45 tuổi thừa cân muốn bắt đầu tập luyện sẽ nghĩ gì khi thấy màn hình đó? Không phải "sản phẩm này lỗi", mà là một cảm giác âm thầm hơn, nguy hiểm hơn: "Cái này không dành cho mình." Cô ấy không phàn nàn, không gửi bug report. Cô ấy chỉ đóng app và không bao giờ quay lại.
Đó chính là lý do bài này tồn tại. Inclusive imagery — hình ảnh mang tính bao trùm — không phải là "accessibility compliance" theo nghĩa kỹ thuật. Bạn không thể chạy một cái tool tự động để chấm điểm nó. Nhưng nó ảnh hưởng trực tiếp đến việc người dùng có cảm thấy mình thuộc về sản phẩm hay không. Và trong Design, cảm giác thuộc về (belonging) chính là thứ quyết định họ ở lại hay rời đi.
Bài này sẽ dạy bạn cách nhìn hình ảnh không chỉ như "trang trí đẹp mắt", mà như một tuyên ngôn về đối tượng người dùng. Đây là phần accessibility ít được nói tới nhất, nhưng lại là phần chạm đến trái tim con người nhiều nhất.
Khái niệm cốt lõi
Representation là gì và tại sao nó khác với accessibility kỹ thuật
Representation (sự đại diện) là việc các nhóm người dùng khác nhau — về giới tính, độ tuổi, sắc tộc, thể trạng, tình trạng khuyết tật, hoàn cảnh kinh tế — nhìn thấy chính họ được phản ánh trong hình ảnh của sản phẩm.
Điểm mấu chốt để phân biệt: accessibility kỹ thuật hỏi "Người này có dùng được không?", còn representation hỏi "Người này có cảm thấy được mời không?". Một website có thể đạt WCAG AAA hoàn hảo về mặt kỹ thuật nhưng vẫn khiến một nhóm người dùng cảm thấy vô hình, bởi trong 40 tấm ảnh minh họa không có một ai giống họ.
Đây là lý do inclusive imagery thuộc về accessibility theo nghĩa rộng — accessibility là "làm cho sản phẩm mở ra với mọi người", và cảm giác được chào đón cũng là một dạng "mở ra".
Hình ảnh là tín hiệu về "ai được bao gồm"
Con người đọc hình ảnh nhanh hơn đọc chữ rất nhiều. Trước khi người dùng đọc một dòng copy nào, họ đã lướt qua hình ảnh và đưa ra một phán đoán tức thời: "Đây là chỗ dành cho người như tôi hay không?"
Những tín hiệu này hoạt động ngầm. Người dùng thường không ý thức được lý do họ cảm thấy xa lạ với một sản phẩm. Họ chỉ thấy "nó không hợp mình". Công việc của designer là làm cho tín hiệu này trở nên tích cực và bao trùm.
Các trục đa dạng cần cân nhắc
Khi đánh giá hình ảnh trong sản phẩm, hãy soi qua các trục sau:
- Độ tuổi: Sản phẩm của bạn có chỉ toàn người trẻ 20–30 tuổi không? Ở Việt Nam, nhóm 50+ đang là người dùng smartphone tăng nhanh nhất.
- Thể trạng và ngoại hình: Chỉ có người gầy, đẹp, cân đối? Người dùng thật có đủ mọi vóc dáng.
- Khuyết tật: Có bao giờ xuất hiện người dùng xe lăn, người dùng gậy, người đeo máy trợ thính, hay luôn "vô hình"?
- Sắc tộc và vùng miền: Với sản phẩm phục vụ Đông Nam Á, hình ảnh có phản ánh người châu Á, người da nâu, chứ không phải toàn ảnh stock người phương Tây?
- Giới và vai trò: Phụ nữ có luôn bị đặt vào vai "chăm sóc, nội trợ" còn nam giới luôn là "lãnh đạo, kỹ thuật"?
- Hoàn cảnh kinh tế — xã hội: Bối cảnh trong ảnh có luôn là căn hộ sang trọng, đồ hiệu, hay có cả những khung cảnh đời thường, bình dị?
Tokenism — cái bẫy của việc "làm cho có"
Có một sai lầm phổ biến khi các đội bắt đầu quan tâm đến đa dạng: tokenism — chèn một nhân vật thuộc nhóm thiểu số vào chỉ để "tick vào ô". Ví dụ: một banner có chín người mẫu ăn mặc bảnh bao và một người ngồi xe lăn đặt ở góc cho "đủ diện". Người dùng cảm nhận được sự giả tạo này rất nhanh. Representation thật sự nghĩa là nhóm thiểu số xuất hiện tự nhiên, trong vai trò có ý nghĩa, chứ không phải làm nền cho người khác.
Alt text cho hình ảnh có người — nối lại với accessibility kỹ thuật
Ở Bài 14 chúng ta đã học về alt text nói chung. Trong bối cảnh inclusive imagery, có một nguyên tắc riêng: chỉ mô tả các đặc điểm nhận dạng (sắc tộc, khuyết tật, giới) khi chúng liên quan đến mục đích của hình ảnh. Nếu bức ảnh minh họa một bài viết về "hòa nhập cho người khiếm thị", thì việc mô tả "một người dùng gậy dò đường đang thao tác điện thoại" là hợp lý và cần thiết. Nhưng nếu chỉ là ảnh minh họa chung chung, việc gán nhãn sắc tộc cho từng người có thể là thừa hoặc thậm chí xúc phạm. Nguyên tắc: mô tả phục vụ mục đích, không phải để phân loại con người.
Tình huống thực tế
Ví dụ 1 — App học tiếng Anh Việt Nam và bài học về độ tuổi
Một startup edtech ở TP.HCM (gọi là "SpeakUp") ra mắt app luyện phát âm tiếng Anh. Toàn bộ onboarding illustration là các bạn sinh viên trẻ, năng động, ngồi quán cà phê. Metric ban đầu tốt, nhưng đội growth phát hiện một điều lạ: tỷ lệ hoàn thành onboarding của nhóm người dùng 40+ chỉ đạt 22%, trong khi nhóm 18–25 đạt 61%.
Khi phỏng vấn 15 người dùng lớn tuổi đã bỏ dở, một câu trả lời lặp đi lặp lại: "Nhìn cái app này thấy dành cho tụi trẻ, tôi già rồi học sao kịp." Vấn đề không nằm ở tính năng — các bài học hoàn toàn phù hợp với người lớn tuổi. Vấn đề nằm ở việc không ai trong hình ảnh giống họ, nên họ tự loại mình ra.
Đội thiết kế bổ sung vào bộ illustration một số nhân vật trung niên: một người đàn ông tầm 50 tuổi đang luyện nói để chuẩn bị đi công tác, một phụ nữ lớn tuổi học cùng cháu. Sau ba tháng, tỷ lệ hoàn thành onboarding của nhóm 40+ tăng lên 44% — gấp đôi.
Bài học: Đôi khi một "bug conversion" không phải lỗi flow, mà là lỗi representation. Hình ảnh đang âm thầm nói với một nhóm người dùng rằng "chỗ này không phải của bạn".
Ví dụ 2 — Ngân hàng số và người dùng khuyết tật vô hình
Một ngân hàng số ở Đông Nam Á làm chiến dịch marketing về "tài chính cho mọi người". Landing page có 20 tấm ảnh khách hàng — tất cả đều là người khỏe mạnh, trẻ trung, thao tác điện thoại bằng hai tay đầy tự tin.
Trớ trêu là chính ngân hàng này lại có một chương trình rất tốt cho người khiếm thị: hỗ trợ screen reader đầy đủ, có chi nhánh phục vụ người khuyết tật. Nhưng không một hình ảnh nào phản ánh điều đó. Một tổ chức của người khiếm thị đã phản hồi công khai: "Các bạn nói 'cho mọi người', nhưng chúng tôi không thấy mình ở đâu cả."
Đội đã sửa bằng cách thêm hình ảnh chân thực: một người dùng khiếm thị đang thao tác app bằng screen reader, một người lớn tuổi được nhân viên hướng dẫn. Quan trọng là các hình ảnh này được chụp thật, có tư vấn từ cộng đồng người khuyết tật, chứ không phải ảnh stock dàn dựng. Kết quả không chỉ là thiện cảm — số lượng người khuyết tật mở tài khoản mới tăng rõ rệt trong quý sau đó, vì lần đầu họ thấy sản phẩm này "nói với mình".
Bài học: Representation phải khớp với giá trị thật của sản phẩm. Nếu bạn có tính năng inclusive nhưng giấu nó khỏi hình ảnh, bạn đang lãng phí cả nỗ lực kỹ thuật lẫn cơ hội chạm đến người dùng thật.
Ví dụ 3 — Sàn TMĐT và bài học về vóc dáng
Một sàn thương mại điện tử thời trang (giả định tên "Mặc Đẹp") ban đầu chỉ dùng người mẫu size S cho toàn bộ ảnh sản phẩm. Đội data nhận thấy tỷ lệ trả hàng cao bất thường ở các sản phẩm size lớn, và tỷ lệ chuyển đổi của nhóm khách plus-size rất thấp dù họ là một phân khúc thị trường lớn.
Nguyên nhân: khách hàng có vóc dáng lớn không hình dung được sản phẩm sẽ trông thế nào trên cơ thể họ, vì mọi ảnh đều mặc trên người mẫu gầy. Họ hoặc không mua, hoặc mua rồi thất vọng khi nhận hàng.
Giải pháp là chụp mỗi sản phẩm trên nhiều vóc dáng người mẫu khác nhau, kèm thông tin chiều cao — cân nặng của người mẫu để khách so sánh. Đây vừa là inclusive imagery (khách thấy người giống mình), vừa là một cải thiện UX thực tế. Tỷ lệ trả hàng ở nhóm size lớn giảm, và niềm tin vào thương hiệu tăng.
Bài học: Inclusive imagery không phải chi phí "làm màu" — nó thường trực tiếp cải thiện business metric, vì nó giúp người dùng ra quyết định chính xác hơn.
Hướng dẫn từng bước
Dưới đây là quy trình bạn có thể áp dụng để đưa inclusive imagery vào công việc thiết kế:
Bước 1 — Audit hình ảnh hiện có. Thu thập toàn bộ hình ảnh có người trong sản phẩm: onboarding, marketing, empty state, illustration, ảnh sản phẩm. Lập một bảng và tick qua các trục đa dạng (tuổi, thể trạng, khuyết tật, sắc tộc, giới, hoàn cảnh). Bạn sẽ nhanh chóng thấy những "khoảng trống": ai đang vắng mặt hoàn toàn?
Bước 2 — Đối chiếu với chân dung người dùng thật. Lấy dữ liệu nhân khẩu học người dùng thực tế (analytics, khảo sát). Nếu 30% người dùng của bạn trên 45 tuổi mà 0% hình ảnh phản ánh nhóm này, đó là một gap cần sửa. Đây cũng là lý do vì sao inclusive personas (Bài 44) rất quan trọng — chúng cho bạn biết ai thực sự cần được đại diện.
Bước 3 — Xác định ưu tiên. Không phải mọi màn hình đều quan trọng như nhau. Ưu tiên các điểm chạm đầu tiên (onboarding, trang chủ, landing page) và các thông điệp về giá trị ("cho mọi người") — vì đây là nơi tín hiệu belonging tác động mạnh nhất.
Bước 4 — Tìm nguồn hình ảnh đa dạng. Với ảnh stock, hãy dùng các bộ sưu tập chú trọng đa dạng (ví dụ Disabled And Here, Nappy, hoặc các collection inclusive của các thư viện lớn). Với ảnh chụp thật, cân nhắc mời người mẫu thật thuộc các nhóm bạn muốn đại diện.
Bước 5 — Tham vấn cộng đồng liên quan. Nếu bạn đại diện cho một nhóm cụ thể (người khuyết tật, người dân tộc thiểu số), đừng tự đoán. Hãy hỏi người trong cộng đồng đó xem hình ảnh có chân thực và tôn trọng không. Nguyên tắc "nothing about us without us" (không có gì về chúng tôi mà thiếu chúng tôi) rất quan trọng ở đây.
Bước 6 — Viết alt text phù hợp. Với mỗi hình ảnh có người, viết alt text mô tả đúng mục đích. Chỉ nêu đặc điểm nhận dạng khi chúng phục vụ nội dung, không dùng để phân loại con người.
Bước 7 — Đưa vào design system. Để inclusive imagery bền vững, hãy đưa nguyên tắc này vào guideline của design system (Bài 45): danh sách nguồn ảnh được duyệt, checklist đa dạng, và ví dụ đúng/sai. Nếu chỉ dựa vào ý thức cá nhân, nó sẽ mai một khi có người mới vào đội.
Lỗi thường gặp & mẹo
Lỗi 1 — Tokenism trá hình. Chèn một người khuyết tật hoặc một người lớn tuổi vào cho "đủ" nhưng luôn ở vị trí phụ, mờ nhạt. Mẹo: kiểm tra xem nhóm thiểu số có bao giờ là nhân vật chính của một hình ảnh không, hay luôn làm nền.
Lỗi 2 — Rập khuôn định kiến. Luôn đặt người khuyết tật vào cảnh "được thương hại", phụ nữ vào bếp, người lớn tuổi vào cảnh lúng túng với công nghệ. Representation không chỉ là có mặt, mà là được thể hiện trong vai trò đàng hoàng, đa dạng.
Lỗi 3 — Dùng ảnh stock phương Tây cho sản phẩm Việt. Rất nhiều app Việt Nam dùng ảnh stock toàn người da trắng, bối cảnh Âu Mỹ. Người dùng Việt cảm nhận ngay sự "lệch". Mẹo: ưu tiên hình ảnh có bối cảnh, con người quen thuộc với người dùng địa phương.
Lỗi 4 — Cho rằng đây là việc của marketing, không phải của designer. Hình ảnh trong onboarding, empty state, illustration đều nằm trong tay designer sản phẩm. Đừng đẩy trách nhiệm.
Lỗi 5 — Nhầm representation với accessibility kỹ thuật và bỏ một trong hai. Cả hai đều cần. Một hình ảnh đa dạng nhưng thiếu alt text vẫn loại người dùng screen reader. Ngược lại, alt text hoàn hảo trên một bộ ảnh đơn điệu vẫn khiến người dùng cảm thấy bị loại trừ.
Mẹo vàng — "Squint test" nhân khẩu học: Nhìn lướt qua toàn bộ sản phẩm và tự hỏi: "Nếu tôi là [một nhóm người dùng cụ thể], tôi có thấy mình ở đâu không?" Làm bài test này với ít nhất 3–4 nhóm khác nhau.
Bài tập thực hành
- Audit một sản phẩm bạn đang dùng. Chọn một app phổ biến ở Việt Nam (ngân hàng, ví điện tử, giao đồ ăn). Chụp lại 15–20 hình ảnh có người. Lập bảng đối chiếu qua 6 trục đa dạng đã học. Ghi ra: nhóm nào vắng mặt hoàn toàn? Có dấu hiệu tokenism hoặc định kiến không?
- Sửa một empty state. Lấy một màn hình empty state có illustration người dùng. Viết đề xuất cụ thể để làm nó bao trùm hơn — mô tả nhân vật, bối cảnh, và giải thích tại sao lựa chọn đó phản ánh đúng người dùng thật của sản phẩm.
- Viết alt text cho ba hình ảnh có người, trong đó một hình mà đặc điểm nhận dạng liên quan đến nội dung, một hình mà đặc điểm đó không liên quan. Giải thích lựa chọn của bạn cho từng trường hợp.
- Xây một mini-guideline. Viết một trang guideline inclusive imagery cho design system giả định của một startup edtech Việt Nam: liệt kê 5 nguyên tắc, 3 nguồn ảnh gợi ý, và một checklist ngắn để review trước khi ship.
Tóm tắt
- Inclusive imagery vượt ra ngoài accessibility kỹ thuật: nó hỏi "người dùng có cảm thấy được mời không?" chứ không chỉ "họ có dùng được không?".
- Hình ảnh là tín hiệu tức thời và ngầm về việc ai được bao gồm trong sản phẩm. Người dùng không thấy mình sẽ tự nghĩ "cái này không dành cho tôi" và rời đi mà không phàn nàn.
- Hãy đánh giá hình ảnh qua nhiều trục: tuổi, thể trạng, khuyết tật, sắc tộc, giới, hoàn cảnh kinh tế.
- Tránh tokenism và định kiến — representation thật là để nhóm thiểu số xuất hiện tự nhiên, trong vai trò có ý nghĩa.
- Representation phải khớp với giá trị thật của sản phẩm, và thường trực tiếp cải thiện business metric (như các ví dụ SpeakUp, ngân hàng số, sàn TMĐT).
- Quy trình: audit hình ảnh → đối chiếu người dùng thật → ưu tiên điểm chạm quan trọng → tìm nguồn đa dạng → tham vấn cộng đồng → viết alt text đúng mục đích → đưa vào design system.
- Với sản phẩm Việt Nam/Đông Nam Á, ưu tiên hình ảnh có con người và bối cảnh quen thuộc thay vì ảnh stock phương Tây.