Umitation: Retargeting UI Behavior Examples for Website Design

Document Title

Umitation: Retargeting UI Behavior Examples for Website Design

Document Information

• Subject Area: User Interface Design and Dynamic Behavior Retargeting
• Keywords: Retargeting Design, UI Behavior Examples, User Intent, Dynamic Interaction, Visual Behavior Representation, Page Design, Data Recording and Reuse, Example Generation, Rapid Prototyping

Research Background and Issues

• What problems or challenges did the authors identify?

  • Current challenges faced by user interface designers when reusing dynamic interaction behaviors include:
    1. Difficulty in retargeting dynamic behaviors using professional tools;
    2. The need to manually inspect and modify source code, which is time-consuming and complex;
    3. Lack of clarity in design context during collaboration with developers;
    4. High complexity and difficulty in tracking dynamic UI behaviors.
  • Dynamic behaviors involve multiple elements and responsive effects of CSS properties, making it a tedious task to capture, understand, and adapt original dynamic behaviors.
  • Implementing original dynamic behaviors may require expertise in specific frameworks and libraries, posing a high barrier for designers.

• Why is this problem important?

  • Good dynamic UI behaviors enhance website user experience, making websites more attractive and user-friendly.
  • Providing a low-threshold and user-friendly tool to help designers effectively retarget dynamic behaviors can significantly improve design efficiency and team communication.

• Research Motivation and Related Work

  • Existing research primarily focuses on retargeting static interface appearances (e.g., page layouts), while interactivity and dynamic behaviors remain underexplored.
  • This document aims to address how to effectively retarget dynamic behaviors to target interfaces, enabling designers to easily extract, modify, and apply behavior examples.

Solution

• What methods or solutions did the authors propose?

  • The authors designed and implemented an interactive system called Umitation. This system assists user interface designers in extracting dynamic UI behaviors from source websites and quickly retargeting them to target websites.
  • Umitation's design goals include:
    1. Rapid extraction of dynamic UI behaviors;
    2. Simplified behavior understanding and modification;
    3. Easy experimentation with various behaviors across different interfaces.

• What are the innovative aspects of this solution?

  • Automatically captures Document Object Model (DOM) changes by recording and deconstructing dynamic interaction behaviors.
  • Provides an intuitive visual behavior editing panel, allowing designers to directly manage behavior metadata.
  • Intelligently matches similar elements between source and target websites, reducing the complexity of manual selection.
  • Supports the generation of behavior variants, enabling designers to quickly experiment with multiple behavior versions.

• What are the implementation steps and key technologies used?

  1. Behavior Recording:
     • Users select elements of interest on the source website and record behaviors as needed (e.g., mouse hover or page scroll).
     • Tracks DOM changes using the MutationObserver Web API to capture changes in CSS properties and animations.
  2. Behavior Deconstruction and Editing:
     • Deconstructs recorded behaviors into four components: trigger, trigger object, response, and response object.
     • Provides visual relationship diagrams, such as dynamic change trends of CSS properties.
     • Supports functional relationship modifications of behaviors (e.g., selecting different interpolation methods).
  3. Cross-Interface Behavior Retargeting:
     • Allows manual selection of target website elements or uses an "auto-match" algorithm to intelligently select structurally similar elements.
     • Supports shared behaviors across a group of elements, enabling users to quickly experiment with multiple behavior versions on the target website.

Research Outcomes

• What specific outcomes were achieved?

  • System Functionality: User studies validated that Umitation successfully extracts and retargets five different types of UI behavior examples.
  • Efficiency Improvement: Users reported significant time savings when using Umitation (ranging from hours to days).
  • User Experience: Users found Umitation easy to use and highly efficient, particularly for handling complex behavior examples.

• How does it compare to existing solutions?

  • Umitation significantly simplifies the process of retargeting dynamic behaviors, eliminating the need for designers to delve into source code.
  • Provides an intuitive interface to help users quickly understand complex behaviors, replacing textual code with graphical representations.
  • Supports the generation of behavior variants and automatic matching of target elements, enhancing flexibility and efficiency in the design process.

• What were the experimental or evaluation results?

  • User Study Results:
    • Average completion time: Ranged from 30 seconds to several minutes.
    • Usability rating: Average score of 5.7 out of 7 (SD=0.92).
    • Efficiency rating: Average score of 6.1 out of 7 (SD=0.3).
  • Umitation effectively helps users understand complex behavior structures, enhancing their ability to learn and explore dynamic interaction design.

• Limitations and Future Directions:

  • Current Limitations:
    • Unable to capture backend logic of dynamic behaviors, focusing solely on frontend behaviors within the DOM.
    • The system does not yet support merging existing behaviors on the target website, only overwriting them.
    • Improvements are needed in complex matching and error recovery.
  • Future Directions:
    • Integrate behavior implementation code generation to help designers directly convert retargeted behaviors into target website code.
    • Expand the scope of behavior capture to include more complex dynamic properties and 3D transformations.
    • Provide smarter support for automatic behavior extraction and adaptation across entire websites.