Tư duy Thiết kế UI/UX hướng đối tượng và xây dựng Design System

I. Giới thiệu

Bạn đã từng nghe về lập trình hướng đối tượng (Object-Oriented Programming – OOP), vậy nếu việc thiết kế một giao diện cũng diễn ra như vậy thì điều đó sẽ là gì? Nó có tác dụng gì không?

Bài viết này sẽ đi sâu khám phá khái niệm “Thiết kế UI/UX theo hướng đối tượng” (Object-Oriented UX – OOUX), phân tích sự tương đồng của nó với tư duy lập trình hướng đối tượng (Object-Oriented Programming – OOP). Nội dung sẽ làm rõ các nguyên tắc cốt lõi, lợi ích mà OOUX mang lại, và các công cụ hỗ trợ việc áp dụng tư duy này trong thực tế. Mục tiêu là cung cấp một cái nhìn toàn diện về cách OOUX có thể đóng vai trò là cầu nối, thúc đẩy sự hợp tác hiệu quả và tạo ra các design cho digital product chất lượng cao hơn, phối hợp quá trình làm viêc tốt hơn.

II. Tổng quan về Lập trình hướng đối tượng (OOP)

Lập trình hướng đối tượng (OOP) là một mô hình lập trình phổ biến, được xây dựng dựa trên khái niệm “đối tượng“. Trong OOP, các chương trình máy tính được thiết kế bằng cách tạo ra các đối tượng tương tác với nhau để thực hiện các chức năng cụ thể. Mỗi đối tượng là một thực thể cụ thể, có thể là một vật lý (như xe hơi) hoặc một khái niệm (như tài khoản ngân hàng), và sở hữu các thuộc tính (dữ liệu) cùng với các phương thức (hành vi) riêng.

Nói dễ hiểu cho một ai đó đang mới bắt đầu đó là thay vì bạn phải liệt kê ra những dòng code khô khan và tìm cách định nghĩa cho mọi thứ trong sản phẩm, bạn có thể tưởng tượng rằng mình đang xây dựng một thế giới với những “đối tượng” rõ ràng với những đặc tính để có thể tác động, tạo ra phản ứng và thực hiện những tác vụ trên đó. Trong những phần tiếp theo, dưới một góc nhìn của Designer bạn sẽ được thừa hưởng kiểu suy nghĩ, tư duy này và đưa nó vào thiết kế như thế nào.

Các khái niệm cốt lõi của OOP bao gồm:

• Đối tượng (Object): Là các thực thể có tính chất và hành động, được trừu tượng hóa từ thế giới thực. Ví dụ, một lon sữa đặc có thể là một đối tượng với thuộc tính “nắp khui” và hành vi “tự mở nắp”.
• Lớp (Class): Là một khuôn mẫu hoặc bản thiết kế để tạo ra các đối tượng. Lớp định nghĩa cấu trúc của đối tượng, bao gồm các thuộc tính và phương thức mà các đối tượng tạo ra từ lớp đó sẽ có.
• Thuộc tính (Attribute): Là các thông tin, đặc điểm hoặc dữ liệu mô tả trạng thái của một đối tượng (ví dụ: màu sắc, kích thước của máy tính; mắt, mũi, tuổi của con người).
• Phương thức (Method): Là các hành động hoặc chức năng mà một đối tượng có thể thực hiện (ví dụ: đi, đứng, cười đối với con người).

Bên cạnh đó, bốn trụ cột chính của OOP định hình cách các đối tượng tương tác và hoạt động trong hệ thống:

• Tính đóng gói (Encapsulation): Khả năng ẩn đi thông tin chi tiết bên trong đối tượng, chỉ cung cấp các phương thức cần thiết để tương tác. Điều này giúp bảo vệ dữ liệu và hạn chế truy cập trái phép, đồng thời cho phép thay đổi cấu trúc bên trong lớp mà không ảnh hưởng đến các lớp khác.
• Tính kế thừa (Inheritance): Cho phép một lớp mới (lớp con) được tạo ra dựa trên một lớp có sẵn (lớp cha), kế thừa các thuộc tính và phương thức. Điều này giúp tái sử dụng mã nguồn, tiết kiệm thời gian và công sức, đồng thời loại bỏ các chương trình bị lặp, bị dư thừa.
• Tính đa hình (Polymorphism): Cho phép các đối tượng khác nhau được xử lý bằng cùng một phương thức, nhưng có thể có các luồng xử lý khác nhau tùy thuộc vào ngữ cảnh. Ví dụ, cùng một phương thức “tính diện tích” nhưng cách tính sẽ khác nhau cho hình vuông và hình tròn.
• Tính trừu tượng (Abstraction): Quá trình ẩn đi những chi tiết không cần thiết, chỉ giữ lại những đặc điểm quan trọng nhất của một đối tượng. Điều này giúp lập trình viên tập trung vào chức năng chính mà không bị phân tâm bởi các yếu tố phức tạp bên trong.

OOP mang lại nhiều ưu điểm vượt trội trong phát triển phần mềm:

• Nâng cao hiệu năng và tốc độ phát triển: Tính tái sử dụng của các đối tượng và thư viện phong phú giúp phát triển phần mềm nhanh hơn, giảm thiểu chi phí phát triển.
• Khả năng bảo trì và quản lý code dễ dàng: Thiết kế mô-đun giúp việc thay đổi một phần chương trình không ảnh hưởng đến các phần còn lại, rất có lợi cho các dự án quy mô lớn.
• Tính bảo mật cao: Tính đóng gói hạn chế truy cập không hợp lệ, giúp đối tượng an toàn và ổn định hơn.
• Chất lượng phần mềm cao hơn: Việc phát triển nhanh và chi phí thấp hơn cho phép dành nhiều thời gian và tài nguyên vào kiểm thử, dẫn đến phần mềm ít lỗi hơn.

Các ngôn ngữ lập trình phổ biến hỗ trợ OOP bao gồm Java, Python, C++, PHP, và C#. Những lợi ích này không chỉ là kết quả của việc áp dụng OOP mà còn là mục tiêu mà các phương pháp thiết kế hiện đại như OOUX và Component-based Design hướng tới. Thành công của OOP trong việc giải quyết các vấn đề về quản lý và mở rộng phần mềm đã tạo tiền đề cho việc tìm kiếm các giải pháp tương tự trong lĩnh vực thiết kế, cho thấy một sự “tái sử dụng” các nguyên tắc thiết kế ở cấp độ cao hơn. Điều này là một minh chứng cho hiệu quả của tư duy hướng đối tượng trong việc quản lý sự phức tạp và thúc đẩy sự phát triển bền vững của sản phẩm.

III. Thiết kế UI/UX theo hướng đối tượng (OOUX): Áp dụng tư duy lập trình vào thiết kế trải nghiệm người dùng

Thiết kế UI/UX theo hướng đối tượng (OOUX) là một phương pháp luận thiết kế nhằm làm cho UX của Digital Product trở nên đơn giản và trực quan hơn bằng cách tập trung vào các “đối tượng” mà người dùng tương tác.(1) Đây là một quá trình lập kế hoạch hệ thống kỹ thuật số được mô hình hóa dựa trên các tương tác của người dùng trong thế giới thực.(1)

Triết lý cốt lõi của OOUX là chuyển dịch tư duy từ việc chia nhỏ sự phức tạp dựa trên “hành động” (verbs) hoặc luồng tác vụ sang chia nhỏ theo “đối tượng” (nouns3) Phương pháp này phản ánh cách con người tự nhiên tư duy và điều hướng thế giới vật lý – ưu tiên “đối tượng trước, hành động sau”.(1) OOUX giúp tổ chức thông tin và các thành phần trong sản phẩm kỹ thuật số theo cách phù hợp với mô hình tư duy của người dùng, từ đó tạo ra một môi trường kỹ thuật số trực quan và dễ sử dụng.(2) Sự chuyển dịch từ tư duy “verb-first” sang “noun-first” trong OOUX là điểm tương đồng mạnh mẽ nhất với OOP, nơi các đối tượng là trung tâm của thiết kế hệ thống. Đây không chỉ là một sự thay đổi về phương pháp mà còn là một sự thay đổi về mô hình tư duy, giúp tạo ra một “ngôn ngữ chung” giữa thiết kế và phát triển, giảm thiểu sự hiểu lầm và tăng cường hiệu quả hợp tác.

Lấy một ví dụ: bạn đang phải thiết kế trải nghiệm và giao diện cho một sản phẩm rất phức tạp như công cụ quản lý doanh nghiệp (ERP) với rất nhiều những nghiệp vụ. Nếu lạc lối trong những hành động như “làm việc, nộp báo cáo, tính lương, lưu trữ tài liệu, kiểm kho, bán hàng ….” thì bạn sẽ rất dễ rơi vào trạng thái phải xử lý rất nhiều thông tin lớn và thiết kế ra những thứ khó sử dụng. Nếu tư duy ngược lại, quy hoạch các thành phần vừa kể theo góc nhìn đối tượng, bạn sẽ có những danh từ về “task, report, nhân sự và các thông tin liên quan, tài sản công ty và các sản phẩm ….”.

———

Để triển khai OOUX, khung làm việc ORCA (Objects, Relationships, Calls-to-Action, Attributes) cung cấp một quy trình lặp lại và có cấu trúc để phân tích và cấu trúc các đối tượng ¹:

• Objects (Đối tượng): Là các thực thể hữu hình mà người dùng tương tác và quan tâm trong hệ thống, chẳng hạn như “Sản phẩm”, “Hồ sơ người dùng”, hoặc “Sự kiện”.(1) Tiêu chí để xác định đối tượng bao gồm việc nó là một danh từ và người dùng có khả năng tạo hoặc thao tác với nó (ví dụ: bài hát, nghệ sĩ, album, danh sách phát trong ứng dụng nghe nhạc5)
• Relationships (Mối quan hệ): Mô tả cách các đối tượng kết nối và lồng vào nhau trong hệ thống.(1) Ví dụ, một bài hát có thể thuộc một album, có một nghệ sĩ, và có thể nằm trong nhiều danh sách phát. Các mối quan hệ có thể là lồng ghép (nested relationships), khi một đối tượng chứa đối tượng khác như một thuộc tính, hoặc liên kết (linked relationships) cho các đối tượng độc lập.(5)
• Calls-to-Action (Kêu gọi hành động): Là các hành động mà người dùng có thể thực hiện với hoặc trên một đối tượng.(1) Ví dụ, đối với một bài hát, các hành động có thể là “phát”, “tải xuống”, “thêm vào danh sách phát”; đối với một hồ sơ người dùng, có thể là “chỉnh sửa” hoặc “xóa”.^.(8)
• Attributes (Thuộc tính): Là nội dung hoặc siêu dữ liệu định nghĩa mỗi đối tượng, những thông tin mà người dùng có thể thay đổi để làm cho đối tượng hữu ích.(1) Ví dụ, tên bài hát, thời lượng, số lượt phát, hoặc ngày xuất bản của một album.(5)

Khung ORCA cung cấp một cấu trúc có hệ thống để thiết kế, tương tự như cách các nguyên tắc OOP cung cấp cấu trúc cho lập trình. Việc xác định rõ ràng các thành phần này trước khi đi sâu vào giao diện người dùng giúp tránh sự phức tạp ngẫu nhiên, đảm bảo tính nhất quán và đặt nền tảng vững chắc cho khả năng mở rộng của sản phẩm.(2)

OOUX mang lại nhiều lợi ích đáng kể trong việc xây dựng giao diện trực quan, nhất quán và có khả năng mở rộng:

• Đơn giản hóa sự phức tạp: OOUX chia nhỏ các hệ thống phức tạp thành các đối tượng quen thuộc, dễ quản lý, giúp người dùng dễ dàng điều hướng và hiểu thông tin.(3)
• Nâng cao khả năng sử dụng (Usability): Bằng cách phản ánh các tương tác trong thế giới thực, OOUX tạo ra các giao diện tự nhiên, giảm tải nhận thức (cognitive load) và cải thiện trải nghiệm tổng thể.(2)
• Cải thiện tính nhất quán: Việc chuẩn hóa các đối tượng và thuộc tính của chúng đảm bảo trải nghiệm liền mạch trên các màn hình và tính năng khác nhau của sản phẩm.(2)
• Khả năng mở rộng (Scalability) và chống lỗi thời (Future-Proof): Các thiết kế được cấu trúc xung quanh các đối tượng cốt lõi dễ dàng mở rộng. Các tính năng hoặc đối tượng mới có thể được thêm vào mà không làm gián đoạn trải nghiệm người dùng hiện có, giúp sản phẩm bền vững hơn theo thời gian.(2)
• Tăng tốc chu kỳ phát triển: Định nghĩa đối tượng rõ ràng giảm sự mơ hồ, dẫn đến sự hợp tác suôn sẻ hơn và chu kỳ phát triển nhanh hơn giữa các nhóm.(3)

Những lợi ích này gần như song song trực tiếp với các lợi ích của OOP, củng cố luận điểm về sự tương đồng tư duy. Đặc biệt, “khả năng mở rộng” và “nhất quán” là những lợi ích then chốt mà cả hai phương pháp đều mang lại, cho thấy một sự “tái sử dụng” các nguyên tắc thiết kế ở cấp độ cao hơn để giải quyết các vấn đề cấu trúc phổ quát trong phát triển sản phẩm.

OOUX đã được áp dụng thành công trong nhiều sản phẩm số phức tạp:

• Nền tảng thương mại điện tử: Các đối tượng chính có thể là Sản phẩm, danh mục, đánh giá, hồ sơ người dùng, giỏ hàng, và đơn đặt hàng. Tương tác điển hình bao gồm thêm sản phẩm vào giỏ hàng, lọc danh mục, và viết đánh giá. Kết quả là một trải nghiệm mua sắm liền mạch, nơi người dùng có thể dễ dàng tìm, đánh giá và mua các mặt hàng.(3)
• Ứng dụng mạng xã hội: Các đối tượng có thể là bài đăng, hồ sơ người dùng, bình luận, nhóm, và sự kiện. Tương tác bao gồm thích, chia sẻ, bình luận bài đăng, và tham gia sự kiện. Kết quả là tăng cường tương tác thông qua các tương tác trực quan và quen thuộc.(3)
• Nền tảng SaaS (Software as a Service): Các đối tượng có thể là dự án, nhiệm vụ, người dùng, và báo cáo. Tương tác bao gồm giao nhiệm vụ, tạo báo cáo, và theo dõi tiến độ. Kết quả là quy trình làm việc hiệu quả và cải thiện hợp tác trong các nền tảng này.(3)

Các ví dụ này minh họa tính ứng dụng rộng rãi của OOUX trong các hệ thống phức tạp, nơi việc quản lý các “danh từ” (objects) là trọng tâm. Chúng cho thấy OOUX không chỉ là một lý thuyết mà là một phương pháp thực tế để tổ chức và thiết kế các sản phẩm số phức tạp một cách hiệu quả.

IV. Phân tích sự tương đồng và giao thoa giữa OOUX và OOP

Sự tương đồng giữa OOUX và OOP không chỉ dừng lại ở cấp độ khái niệm mà còn thể hiện rõ ràng trong các nguyên tắc cốt lõi mà cả hai phương pháp đều hướng tới để giải quyết sự phức tạp và thúc đẩy hiệu quả trong phát triển sản phẩm.

So sánh các nguyên tắc cốt lõi

• Tính mô-đun (Modularity):

• OOP: Tách biệt các nhiệm vụ trong quá trình phát triển phần mềm dựa trên các đối tượng cụ thể, cho phép các phần của hệ thống được phát triển và quản lý độc lập.
• OOUX: Chia nhỏ giao diện người dùng thành các phần riêng biệt, có thể tái sử dụng gọi là components. Điều này giúp dễ dàng tạo, duy trì và mở rộng sản phẩm kỹ thuật số, vì mỗi component có thể được thiết kế và phát triển độc lập.(2)

• Khả năng tái sử dụng (Reusability):

• OOP: Các đối tượng và đoạn mã có thể được sử dụng lại trong cùng một ứng dụng hoặc nhiều ứng dụng khác nhau, giúp giảm thiểu sự trùng lặp và tiết kiệm chi phí phát triển.
• OOUX: Các thành phần (components) được xây dựng để sử dụng lại nhiều lần trong các thiết kế khác nhau, đảm bảo tính nhất quán và hiệu quả. Việc này giảm đáng kể thời gian và năng lượng cần thiết để bắt đầu một thiết kế mới hoặc điều chỉnh các thiết kế hiện có.^.(9)

• Tính nhất quán (Consistency):

• OOP: Đảm bảo tính nhất quán thông qua việc định nghĩa lớp và kế thừa, giúp giảm thiểu lỗi và tăng tính ổn định của hệ thống.
• OOUX: Đạt được sự nhất quán bằng cách định nghĩa cấu trúc đối tượng và tương tác đồng nhất trên các điểm chạm khác nhau, giúp người dùng điều hướng giao diện một cách dễ dàng và tự tin, tạo ra trải nghiệm liền mạch.(2)

• Khả năng mở rộng (Scalability):

• OOP: Các đối tượng có thể được mở rộng dễ dàng, bao gồm việc thêm thuộc tính và hành vi mới, rất có lợi trong các dự án có quy mô lớn và cần phát triển liên tục.
• OOUX: Các thiết kế được cấu trúc xung quanh các đối tượng cốt lõi dễ dàng mở rộng. Các tính năng hoặc đối tượng mới có thể được thêm vào mà không làm gián đoạn trải nghiệm người dùng hiện có, giúp sản phẩm thích ứng linh hoạt với nhu cầu thay đổi.(2)

Sự song song rõ ràng trong các nguyên tắc cốt lõi này cho thấy OOUX không chỉ “tương đương” với tư duy lập trình mà còn là một sự “phản ánh” của nó trong lĩnh vực thiết kế. Điều này chỉ ra rằng các vấn đề về cấu trúc và quản lý sự phức tạp là phổ quát trong phát triển sản phẩm, và tư duy hướng đối tượng là một giải pháp hiệu quả cho cả hai lĩnh vực, cho phép các nhóm phát triển sản phẩm làm việc hiệu quả hơn và tạo ra các sản phẩm bền vững hơn.

OOUX như một “ngôn ngữ chung”

Một trong những đóng góp quan trọng nhất của OOUX là khả năng tạo ra một “ngôn ngữ chung” giữa các nhà thiết kế và nhà phát triển. OOUX cung cấp một từ vựng và khung tư duy chung cho các nhóm thiết kế, phát triển và sản phẩm, giúp hợp lý hóa toàn bộ quy trình thiết kế và phát triển.(3)

Theo truyền thống, khoảng cách giữa nhà thiết kế và nhà phát triển thường phát sinh từ những cách tư duy và giao tiếp khác nhau. Nhà thiết kế thường tập trung vào tính thẩm mỹ và trải nghiệm người dùng, trong khi nhà phát triển tập trung vào logic và chức năng.(12) OOUX trực tiếp giải quyết vấn đề này bằng cách cung cấp một khung cấu trúc chung (các đối tượng) mà cả hai bên đều có thể hiểu và thảo luận.

Các tạo phẩm (artifacts) được tạo ra trong quá trình OOUX, như bản đồ mối quan hệ, tên mô-đun, và định nghĩa đối tượng, là tài liệu rõ ràng giúp nhà phát triển hiểu sâu sắc hơn về ý định và cấu trúc sản phẩm.(1) Khi nhà phát triển có hiểu biết về thiết kế UX/UI, họ có thể triển khai các thiết kế một cách chính xác hơn, duy trì tính thẩm mỹ, tính hữu dụng và khả năng sử dụng của sản phẩm.(12) Điều này giúp lấp đầy khoảng trống giao tiếp, giảm thiểu sự mơ hồ và ma sát giữa các bộ phận, từ đó tăng cường hiệu quả hợp tác và đẩy nhanh chu kỳ phát triển sản phẩm.(12) Khả năng của OOUX trong việc tạo ra một “ngôn ngữ chung” là một lợi ích chiến lược, không chỉ cải thiện hiệu quả mà còn giảm thiểu xung đột và hiểu lầm giữa các bộ phận. Điều này đặc biệt quan trọng trong bối cảnh phát triển sản phẩm Agile, nơi sự hợp tác liên tục và giao tiếp rõ ràng là chìa khóa để đạt được các mục tiêu chung của dự án.

Những điểm khác biệt và giới hạn trong sự tương đồng

Mặc dù có nhiều điểm tương đồng mạnh mẽ, OOUX không phải là bản sao chính xác của OOP. Sự khác biệt nằm ở phạm vi ứng dụng và mức độ hình thức hóa:

• Mục tiêu và phạm vi: OOP tập trung vào cấu trúc mã và logic thực thi của phần mềm, đảm bảo hiệu quả và khả năng bảo trì ở cấp độ kỹ thuật.(1) Ngược lại, OOUX tập trung vào cấu trúc thông tin và trải nghiệm người dùng, nhằm mục đích tạo ra các giao diện trực quan và dễ sử dụng^.(1)
• Mức độ hình thức hóa: OOP có các quy tắc chặt chẽ về cú pháp và thực thi, được quy định bởi các ngôn ngữ lập trình cụ thể (ví dụ: Java, Python, C++ có cú pháp và quy tắc riêng). OOUX, mặt khác, là một phương pháp tư duy và cấu trúc linh hoạt hơn. Nó đóng vai trò là một triết lý hướng dẫn thiết kế, giúp phá vỡ các chủ đề phức tạp cho những người có quan điểm khác nhau để họ có được sự hiểu biết và tầm nhìn chung, chứ không phải là một bộ quy tắc cứng nhắc.(4)

Việc nhận diện những giới hạn này là quan trọng để cung cấp một phân tích cân bằng và chính xác. OOUX không phải là “lập trình” giao diện, mà là “tư duy lập trình” cho giao diện. Điều này nhấn mạnh vào cấu trúc và mối quan hệ giữa các thành phần thiết kế hơn là các chi tiết thực thi mã. Sự “tương đồng” nằm ở cấp độ tư duy và nguyên tắc, chứ không phải ở cấp độ thực thi kỹ thuật.

Bảng 1: So sánh các nguyên tắc cốt lõi của OOP và OOUX

V. Các phương pháp và công cụ hỗ trợ thiết kế UI/UX theo hướng đối tượng

Để hiện thực hóa tư duy thiết kế UI/UX theo hướng đối tượng, các nhà thiết kế sử dụng nhiều phương pháp và công cụ chuyên biệt, trong đó nổi bật là Thiết kế dựa trên thành phần (Component-based Design), Atomic Design và công cụ Figma. Đây chính là một trong những tiền đề để hình thành thứ gọi là Design System bạn hay nghe.

Thiết kế dựa trên thành phần (Component-based Design) và Atomic Design

Thiết kế dựa trên thành phần là một phương pháp chia nhỏ giao diện người dùng thành các phần có thể tái sử dụng, tự chứa (self-contained) gọi là components..(9) Phương pháp này cải thiện tính nhất quán, hiệu quả và khả năng mở rộng trong quá trình phát triển sản phẩm kỹ thuật số..(9)

Atomic Design, được giới thiệu bởi Brad Frost, là một khung làm việc tổ chức các components thành năm cấp độ, phản ánh cấu trúc tự nhiên của thế giới, từ những yếu tố nhỏ nhất đến các trang hoàn chỉnh .(11):

• Atoms (Nguyên tử): Là các yếu tố UI cơ bản nhất, không thể phân chia thêm, như nút, trường nhập liệu, nhãn, hoặc kiểu chữ..(9) Chúng là nền tảng để tạo ra các thành phần phức tạp hơn.
• Molecules (Phân tử): Được hình thành khi các atoms kết hợp lại để tạo thành một đơn vị chức năng nhỏ. Ví dụ, một thanh tìm kiếm bao gồm một trường nhập liệu và một nút tìm kiếm, hoặc một trường biểu mẫu với nhãn và input..(9)
• Organisms (Cơ quan): Là các phần UI lớn hơn, kết hợp nhiều molecules và atoms để tạo thành các phần hoàn chỉnh của giao diện. Ví dụ điển hình là tiêu đề website bao gồm logo, menu điều hướng và thanh tìm kiếm, hoặc một thẻ sản phẩm..(9)
• Templates (Mẫu): Đưa cấu trúc vào thiết kế bằng cách kết hợp các organisms thành một bố cục trang. Ở cấp độ này, trọng tâm chuyển từ các thành phần riêng lẻ sang cấu trúc tổng thể của một loại trang cụ thể, định nghĩa vị trí và luồng nội dung..(9)
• Pages (Trang): Là giai đoạn cuối cùng, nơi các templates được điền đầy bằng nội dung thực tế, bao gồm văn bản, hình ảnh và tất cả các yếu tố mà người dùng sẽ tương tác. Đây là bản trình bày đầy đủ chức năng của sản phẩm, sẵn sàng cho phản hồi, thử nghiệm và lặp lại..(9)

Atomic Design là một khung làm việc mạnh mẽ giúp tạo ra các hệ thống thiết kế nhất quán và có khả năng mở rộng.(11) Việc áp dụng các nguyên tắc này đã giúp các công ty như Airbnb giảm thời gian bàn giao từ thiết kế sang phát triển tới 35% và cải thiện tính nhất quán thiết kế 20% trên toàn bộ nền tảng của họ..(9)

Component-based Design và Atomic Design là các phương pháp thực hành cụ thể của tư duy hướng đối tượng trong UI/UX. Chúng cung cấp cấu trúc và quy trình để hiện thực hóa các nguyên tắc của OOUX, đặc biệt là tính mô-đun và tái sử dụng, từ đó trực tiếp hỗ trợ việc tạo ra “ngôn ngữ chung” với lập trình viên. Điều này cho thấy cách các nguyên tắc trừu tượng được chuyển đổi thành các quy trình làm việc hữu hình, thúc đẩy sự hợp tác và hiệu quả trong toàn bộ chu trình phát triển sản phẩm.

Trong chương trình đào tạo về Design System tại TELOS, chúng tôi có hai kiểu system được giới thiệu đến các bạn học viên, thì Component-based Design chính là một phần quan trọng trong đó.

Bảng 2: Các cấp độ của Atomic Design và ví dụ minh họa

Figma: Công cụ đắc lực cho tư duy hướng đối tượng trong UI/UX

Figma là một công cụ thiết kế giao diện người dùng (UI) và trải nghiệm người dùng (UX) dựa trên nền tảng đám mây, nổi bật với khả năng làm việc nhóm theo thời gian thực.(14) Nó được công nhận là một trong những công cụ thiết kế quan trọng nhất cho UI/UX, được ưa chuộng nhờ khả năng cộng tác mạnh mẽ và khả năng truy cập mọi lúc mọi nơi thông qua trình duyệt web.(14)

Figma cung cấp nhiều tính năng nổi bật hỗ trợ mạnh mẽ OOUX và Component-based Design:

• Components & Design System: Figma cho phép tạo và quản lý các components (thành phần thiết kế có thể tái sử dụng), giúp duy trì tính nhất quán và quản lý hiệu quả các thành phần trong một hệ thống thiết kế.(15) Khi chỉnh sửa main component, tất cả các component con liên kết với nó trong bản thiết kế sẽ được cập nhật theo, đảm bảo sự đồng bộ trên toàn bộ dự án.(17)
• Variants: Tính năng này cho phép phân loại components thành nhiều trạng thái hoặc kiểu dáng khác nhau (ví dụ: nút “primary”, “secondary”, “disabled”), giúp quản lý và lựa chọn components dễ dàng hơn, đồng thời thể hiện tính đa hình trong thiết kế.(17)
• Auto Layout: Một tính năng mạnh mẽ giúp tạo ra các thiết kế động, tự động điều chỉnh kích thước và vị trí các thành phần khi nội dung thay đổi.(17) Điều này hỗ trợ tư duy hệ thống hóa UI/UX chuyên nghiệp và thiết kế responsive, giúp giao diện hiển thị tốt trên nhiều kích thước màn hình.(19)
• Prototyping & Smart Animate: Figma cho phép nhà thiết kế tạo ra các nguyên mẫu tương tác, mô phỏng hành vi sản phẩm với các hiệu ứng chuyển động sinh động trước khi phát triển.(15) Điều này giúp kiểm thử khả năng sử dụng và cải thiện trải nghiệm người dùng một cách hiệu quả.(17)
• Shared Libraries: Hỗ trợ chia sẻ thư viện components, styles (màu sắc, kiểu chữ), và variables giữa các nhóm và dự án, đảm bảo tính nhất quán trên toàn tổ chức và giảm thiểu công việc trùng lặp.(22)

Figma không chỉ là một công cụ mà còn là một nền tảng thúc đẩy mạnh mẽ tư duy hướng đối tượng trong thiết kế UI/UX. Các tính năng của nó được thiết kế để hỗ trợ trực tiếp các nguyên tắc của OOUX và Component-based Design, từ đó thu hẹp khoảng cách giữa thiết kế và phát triển, biến tư duy hướng đối tượng thành hiện thực trong quy trình làm việc. Figma thúc đẩy cộng tác thời gian thực, cho phép nhiều người tham gia chỉnh sửa đồng thời trên cùng một file thiết kế, nhận phản hồi và theo dõi tiến trình dự án mà không cần gửi qua lại nhiều phiên bản.(14) Điều này giúp giảm thiểu căng thẳng giao tiếp và trao đổi rườm rà giữa các bộ phận thiết kế và phát triển.(25)

Nếu xem khoá Design System tại TELOS chính là nơi bạn học để biết cách làm việc thật sự với hệ thống cũng như vai trò phối hợp với những người khác cùng nói “chung ngôn ngữ lập trình – thiết kế” thì Figma chính là bệ đỡ tư duy cho cái ngôn ngữ đó. Nó là kho từ vựng, hệ thống ngữ pháp cho việc thiết kế của bạn. Tìm hiểu khoá tại đây.

Bảng 3: Các tính năng của Figma hỗ trợ OOUX và Component-based Design

VI. Vai trò của con người trong hoạt OOUX

“Thiết kế UI/UX theo hướng đối tượng” (OOUX) không chỉ là một khái niệm trừu tượng mà là một phương pháp luận có cấu trúc, phản ánh rõ ràng tư duy lập trình hướng đối tượng (OOP). Cả hai mô hình này đều tập trung vào việc phân tách hệ thống thành các “đối tượng” có thể quản lý, tái sử dụng, nhằm đạt được các mục tiêu chung về tính mô-đun, nhất quán, khả năng mở rộng và hiệu quả.

OOUX, thông qua khung ORCA (Objects, Relationships, Calls-to-Action, Attributes) và các phương pháp như Atomic Design, cung cấp một “ngôn ngữ chung” và quy trình làm việc hiệu quả. Điều này giúp thu hẹp khoảng cách giao tiếp giữa nhà thiết kế và nhà phát triển, từ đó tối ưu hóa toàn bộ chu trình phát triển sản phẩm, mang lại sản phẩm chất lượng cao hơn và giảm thiểu rủi ro. Mặc dù OOUX không phải là bản sao chính xác của OOP về mặt thực thi kỹ thuật, sự tương đồng về tư duy và nguyên tắc cốt lõi là không thể phủ nhận, cho thấy một sự hội tụ trong cách giải quyết các vấn đề phức tạp trong phát triển sản phẩm.

Để áp dụng hiệu quả tư duy này và tối đa hóa lợi ích, các bên liên quan cần thực hiện các khuyến nghị sau:

Đối với nhà thiết kế UI/UX:

• Nghiên cứu sâu về OOUX và Atomic Design: Nắm vững các nguyên tắc của khung ORCA và cách Atomic Design phân loại các thành phần UI. Việc này sẽ giúp xây dựng một nền tảng tư duy vững chắc, cho phép thiết kế các hệ thống phức tạp một cách có tổ chức và logic.
• Thành thạo Figma và các công cụ liên quan: Tận dụng tối đa các tính năng của Figma như Components, Variants, Auto Layout, Prototyping và Dev Mode. Các công cụ này là cầu nối quan trọng để chuyển đổi tư duy hướng đối tượng thành các sản phẩm thiết kế cụ thể, đồng thời tạo điều kiện thuận lợi cho việc bàn giao và cộng tác với đội ngũ phát triển.
• Xây dựng Portfolio thể hiện tư duy hướng đối tượng: Trong các dự án cá nhân hoặc thực tế, hãy trình bày rõ ràng cách các nguyên tắc OOUX được áp dụng để giải quyết vấn đề, từ việc xác định đối tượng đến cấu trúc mối quan hệ và hành động. Điều này không chỉ thể hiện kỹ năng thiết kế mà còn cho thấy khả năng tư duy hệ thống, một yếu tố quan trọng trong ngành.

Đối với lập trình viên:

• Tìm hiểu các nguyên tắc UX/UI cơ bản và OOUX: Hiểu biết về cách nhà thiết kế tư duy và cấu trúc sản phẩm sẽ giúp lập trình viên chuyển đổi thiết kế thành code một cách chính xác và hiệu quả hơn. Việc này cũng giúp nhận diện sớm các vấn đề tiềm ẩn trong quá trình triển khai.
• Hợp tác chặt chẽ với nhà thiết kế: Tham gia vào các buổi thảo luận về cấu trúc đối tượng và luồng người dùng ngay từ giai đoạn đầu của dự án. Sử dụng các công cụ cộng tác như Figma Dev Mode để trực tiếp truy cập thông tin thiết kế và đưa ra phản hồi kịp thời, giảm thiểu sự hiểu lầm và làm lại.
• Áp dụng tư duy hướng đối tượng trong code: Liên tục rèn luyện và áp dụng các nguyên tắc OOP trong code để đảm bảo tính mô-đun, tái sử dụng và khả năng mở rộng của phần mềm, phù hợp với cấu trúc thiết kế.

Đối với doanh nghiệp và quản lý sản phẩm:

• Đầu tư vào đào tạo liên ngành: Tổ chức các khóa học và workshop chung về OOUX và OOP cho cả đội ngũ thiết kế và phát triển. Việc này sẽ xây dựng một nền tảng kiến thức và ngôn ngữ chung, thúc đẩy sự hiểu biết lẫn nhau giữa các bộ phận.
• Khuyến khích hợp tác đa chức năng: Xây dựng văn hóa làm việc nhóm chặt chẽ, nơi các nhà thiết kế, phát triển và quản lý sản phẩm cùng nhau tham gia vào mọi giai đoạn của chu trình phát triển sản phẩm. Điều này đảm bảo rằng các quyết định được đưa ra dựa trên sự hiểu biết toàn diện về cả khía cạnh thiết kế và kỹ thuật.
• Xây dựng và duy trì Design System: Đầu tư vào việc phát triển và duy trì một Design System mạnh mẽ dựa trên các nguyên tắc Atomic Design. Một Design System được quản lý tốt sẽ là nguồn tài nguyên chung, đảm bảo tính nhất quán của sản phẩm và tăng tốc độ phát triển, đồng thời là minh chứng rõ ràng cho việc áp dụng thành công tư duy hướng đối tượng.

VII. Kết luận

Trong một thời đại mà tốc độ công nghệ phát triển vũ bão và chúng ta luôn lo lắng về việc liệu mình có bị thay thế bởi những công cụ tân tiến hơn như AI Agents, các tool tự động,… thì việc có cho mình những tư duy mang tính thượng tầng về thiết kế, tạo lập những định nghĩa trừu tượng và quy trình tư duy khái quát rộng mở đặc biệt là trong việc xây dựng hệ thống sẽ là một trong những giá trị cần đảm bảo.

Bằng cách áp dụng tư duy hướng đối tượng một cách toàn diện, từ thiết kế đến lập trình, các tổ chức có thể tạo ra những sản phẩm kỹ thuật số không chỉ đáp ứng nhu cầu người dùng mà còn có khả năng mở rộng, dễ bảo trì và bền vững trong tương lai.

Nguồn trích dẫn

1. Object Oriented UX Makes Digital Systems Work Better – Aufait UX, truy cập vào tháng 5 2.(8), 2025, https://www.aufaitux.com/blog/what-is-object-oriented-ux/
2. Understanding the OOUX Example: A Guide to Object … – Koru UX, truy cập vào tháng 5 2.(8), 2025, https://www.koruux.com/blog/object-oriented-ux/
3. Object-Oriented UX: The Ultimate Guide to Designing Intuitive User …, truy cập vào tháng 5 2.(8), 2025, https://www.entropik.io/blogs/object-oriented-ux-the-ultimate-guide-to-designing-intuitive-user-experiences
4. OOUX – What is Object Oriented UX, truy cập vào tháng 5 2.(8), 2025, https://www.ooux.com/what-is-ooux
5. Why UX designers should create object maps (and how to start), truy cập vào tháng 5 2.(8), 2025, https://adobe.design/stories/leading-design/why-ux-designers-should-create-object-maps-and-how-to-start
6. Four Hidden UX Fails and How to Fix Them – Object Oriented UX, truy cập vào tháng 5 2.(8), 2025, https://www.ooux.com/offerings/fourfails
7. Benefits of OOUX (Object-Oriented UX), truy cập vào tháng 5 2.(8), 2025, https://rikwilliams.net/articles/benefits-ooux/
8. Object Oriented UX in 5 Minutes – benpapp, truy cập vào tháng 5 2.(8), 2025, https://www.benpappalardo.com/post/object-oriented-ux-in-5-minutes
9. Component-Based Design: Complete Implementation Guide | UXPin, truy cập vào tháng 5 2.(8), 2025, https://www.uxpin.com/studio/blog/component-based-design-complete-implementation-guide/
10. Object-Oriented Design (OOD) – System Design | GeeksforGeeks, truy cập vào tháng 5 2.(8), 2025, https://www.geeksforgeeks.org/oops-object-oriented-design/
11. Building better UIs with Atomic Design principles – Justinmind, truy cập vào tháng 5 2.(8), 2025, https://www.justinmind.com/ui-design/atomic-design
12. UX/UI là gì? Các yếu tố quan trọng mà một UX/UI Designer cần biết – JAMstack Vietnam, truy cập vào tháng 5 25, 2025, https://jamstackvietnam.com/blog/jamstack-experience/ux-ui-la-gi
13. Why UI/UX Design Differs for Startups vs Enterprises — Even in the Same Industry, truy cập vào tháng 5 25, 2025, https://www.bayrocklabs.com/post/why-ui-ux-design-differs-for-startups-vs-enterprises
14. Figma là gì? Hướng dẫn cách sử dụng Figma cho người mới bắt đầu – FPT Aptech, truy cập vào tháng 5 .(14), 2025, https://aptech.fpt.edu.vn/figma-la-gi.html
15. Figma Dùng Để Làm Gì? 5 Ứng Dụng Phổ Biến Nhất Của Figma – JobsGO Blog, truy cập vào tháng 5 .(14), 2025, https://jobsgo.vn/blog/figma-dung-de-lam-gi/
16. Figma – Công cụ “prototype” và xây app ấn tượng – TELOS, truy cập vào tháng 5 .(14), 2025, https://telos.vn/figma-cong-cu-prototype-va-xay-app-an-tuong 
17. Figma – sự lựa chọn tiêu chuẩn cho thiết kế UI/UX ở thời điểm hiện tại – TELOS, truy cập vào tháng 5 .(14), 2025, https://telos.vn/figma-su-lua-chon-tieu-chuan-cho-thiet-ke-ui-ux/ 
18. Lợi ích của phần mềm Figma & Khóa Học Figma Online cơ bản nhất – TELOS, truy cập vào tháng 5 .(14), 2025, https://telos.vn/loi-ich-cua-viec-hoc-figma/ 
19. .(11) Most Important UI Developer Skills in 2025 | AND Academy, truy cập vào tháng 5 25, 2025, https://www.andacademy.com/resources/blog/ui-ux-design/ui-developer-skills/
20. .(6) kỹ năng UX/UI Designer cần có – Keyframe, truy cập vào tháng 5 25, 2025, https://keyframe.vn/bai-viet/.(6)-ky-nang-uxui-designer-can-co-.(13).html
21. Khóa Học Figma Từ Căn Bản Đến Thực Chiến UPDATE 2025 | Telos Academy, truy cập vào tháng 5 25, 2025, https://telos.vn/khoa-hoc-thiet-ke-giao-dien-voi-figma/ 
22. Educational & Professional Plans | Figma Forum, truy cập vào tháng 5 .(14), 2025, https://forum.figma.com/ask-the-community-.(7)/educational-professional-plans-.(15)02.(8)
23. Figma plans and features, truy cập vào tháng 5 .(14), 2025, https://help.figma.com/hc/en-us/articles/3.(6)004032.(8)2.(7)3-Figma-plans-and-features
24. Figma Pricing Tiers & Costs – The Product Manager, truy cập vào tháng 5 .(14), 2025, https://theproductmanager.com/tools/figma-pricing/
25. Khóa học thiết kế giao diện với Figma cho đội ngũ UI/UX của doanh nghiệp – Telos, truy cập vào tháng 5 25, 2025, https://telos.vn/khoa-hoc-thiet-ke-giao-dien-voi-figma-cho-doi-ngu-ui-ux-cua-doanh-nghiep/
26. Cách sử dụng Dev Mode trong Figma dễ dàng và nhanh chóng – Cao Đẳng FPT Polytechnic, truy cập vào tháng 5 .(14), 2025, https://caodang.fpt.edu.vn/tin-tuc-poly/cach-su-dung-dev-mode-trong-figma-de-dang-va-nhanh-chong.html
27. Figma: Chiến Thần Tạo Nên Thiết Kế UI/UX Hoàn Hảo – SaDesign, truy cập vào tháng 5 .(14), 2025, https://sadesign.vn/figma-chien-than-tao-nen-thiet-ke-ui-ux-hoan-hao