Role:
Graduation Project
Research Background
AI systems are often perceived as "black boxes"—complex, abstract, and inaccessible to the general public. To demystify these systems, this project developed Cardland, an interactive design that translates technical logic into a "graspable" interface metaphor. By using digital cards to represent modular AI components, the research transforms abstract algorithms into tangible, interactive entities, enabling users to build a structured mental model of AI composition through active construction.
The system architecture follows a "Structure-Behavior-Function" (SBF) cognitive model designed to guide non-expert users from basic perception to structural deduction. It is organized into four primary layers:
1. Structural Layer: Element Deconstruction & Symbolic Encapsulation
This layer transforms abstract AI technicalities into discrete, graspable units:- Scene Cards: Define the application context, such as image processing or virtual social interaction.
- Functional Cards: Represent six categories of AI capabilities (Perception, Analysis, Generation, Memory, Judgment, and Autonomy), utilizing a systematic color-coding scheme to reduce cognitive load.
2. Behavioral Layer: Interaction Modeling & Spatial Construction
Users internalize AI logic through two distinct construction pathways:- Mode 1 (Exploratory Construction): A sandbox environment focusing on spatial induction through free-form dragging, snapping, and stacking of cards.
- Mode 2 (Requirement-Driven Construction): A goal-oriented environment focusing on logical deduction by matching hand cards into specific structured slots based on mission requirements.
3. Functional Layer: Rule Execution & Feedback
The underlying rule engine processes combinations through a multi-tiered pipeline:- Validity Check: Ensures the assembly meets the Minimum Viable System (MVS) threshold for a specific scene.
- Explanatory Feedback: Rather than simple "pass/fail" indicators, the system provides diagnostic cues that explain why a combination succeeded or how specific modules enhanced the product's performance.
4. Result Output & Cognitive Support
- Product Cards: Represent the final synthesized AI prototype, displaying core capabilities and tiered progression (1–3 stars).
- Illustrated Guide (Encyclopedia): Acts as an external memory library, providing real-world application examples and detailed module descriptions to facilitate a continuous "Query–Construct–Verify" learning loop.
The design incorporates two distinct mechanics: a Sandbox Mode for free-form exploration through stacking and dragging, and a Challenge Mode for precise requirement matching via fixed slots . This dual approach facilitates both intuitive discovery and logical verification.
Visual Language
A systematic color-coding strategy (Perception, Analysis, Generation, Memory, Action) was implemented to categorize modules, establishing a consistent visual hierarchy and reducing cognitive load.
-
Interactive Walkthrough: Utilizes masking, highlights, and directional animations to guide users through the core operational sequence.
-
Visual Scaffolding: Provides GIF-based interaction demos and real-time gesture cues to clarify complex card-stacking and slot-embedding mechanics.
- Task-Driven Learning: Features a "Newcomer Mission" to validate the "Scene × Module" logic through a simplified 1-star product construction.
- Encyclopedia Support: Integrated as an external memory library, allowing users to bridge the "evaluation gulf" by retrieving module definitions at any time.
The Outcome: Empirical results confirmed a significant increase in structural understanding and requirement inference abilities, validating that modular, gamified UI can effectively simplify complex technological concepts for a wide audience .