Screen2Vec: Semantic Embedding of GUI Screens and GUI Components

Honorable Mention
Explainable AI (XAI)Prototyping & User TestingComputational Methods in HCISoftware Engineers & DevelopersUI/UX DesignersHCI Researchers

Document Title

Screen2Vec: Semantic Embedding of GUI Screens and GUI Components

Document Information

  • Subject Area: Human-Computer Interaction, Semantic Embedding, Graphical User Interface (GUI) Analysis
  • Keywords: GUI embedding, semantic representation, self-supervised learning, user interaction, screen design, task learning, layout patterns, domain adaptation, user interface design, neural networks

Research Background and Problem

  • Identified Problems or Challenges:

    • Existing methods for semantic representation of GUIs often focus on textual content or visual design, failing to simultaneously capture screen task context, interaction information, and layout patterns.
    • Some methods require extensive manual annotation, limiting adaptability and application across multiple tasks and domains.
    • Current embedding models exhibit limited generalization across different tasks, making them unsuitable for diverse downstream applications.
  • Significance:

    • With the rise of data-driven computational methods in user-GUI interaction modeling, efficiently representing the semantic information of GUIs is crucial for task modeling and design improvement.
    • Embeddings that effectively capture screen semantics and user task context are essential for developing intelligent interface recommendation systems and design generation tools.
  • Research Motivation:

    • To address the above issues, the authors propose a novel self-supervised model, Screen2Vec, which does not require manual data annotation. This model generates comprehensive screen semantic embeddings capable of representing semantic similarity and design context across multiple dimensions.

Solution

Method Overview

  • Proposed Method:
    • Developed a new self-supervised technique to generate embedding vectors by capturing the text, visual design, layout patterns, and application metadata of GUI screens and their components.
    • Designed a two-layer embedding pipeline: component-level embedding and screen-level embedding.
    • Trained the model using user interaction trajectory data (e.g., Rico dataset) without labeled data.

Innovations

  1. Integration of Multiple Features: The model integrates textual semantic embeddings (based on Sentence-BERT), component types, screen layout embeddings, and application metadata.
  2. Self-Supervised Framework: Utilizes a "Continuous Bag of Words" (CBOW) approach, optimizing embedding learning by predicting screens or components in context, without requiring manual annotation.
  3. Screen Sequence Modeling: Treats screen embeddings as building blocks of user tasks, enabling cross-application task representation.

Implementation Steps and Key Techniques

  • Data Preprocessing: Used various screen descriptions in the Rico dataset (e.g., view hierarchy, text content, layout information) to establish semantic representations.
  • Component Embedding Model: Represented text using a 768-dimensional pre-trained Sentence-BERT, combined with a 6-dimensional class embedding, to generate component embeddings through linear combination.
  • Screen Embedding Model: Fused component-level embeddings, layout embeddings, and application descriptions to generate a 1536-dimensional screen semantic representation.
  • Model Training: Employed the Adam optimizer and cross-entropy loss function to perform screen prediction tasks (e.g., predicting the next screen based on screen sequences) using user interaction trajectories.

Research Outcomes

  • Specific Achievements:

    • Developed and open-sourced the Screen2Vec model and pre-trained parameters, which can be directly used to generate embeddings for Android application screens.
    • Demonstrated the model's effectiveness in multiple downstream tasks, significantly improving semantic descriptive capabilities compared to baseline models (e.g., TextOnly and LayoutOnly).
  • Advantages Over Existing Solutions:

    • Encodes text, layout, and application context comprehensively, offering higher prediction accuracy and representational power compared to models that encode only a single feature.
    • The self-supervised learning approach significantly reduces data annotation costs and extends the model's applicability across different datasets.
  • Experimental or Evaluation Results:

    • Screen Prediction Task: Screen2Vec consistently outperformed baseline models across multiple metrics (e.g., Top-1 prediction accuracy, Top-0.01% accuracy) and exhibited better performance in normalized mean squared error (RMSE).
    • Downstream Task Performance: Effectively supported tasks such as nearest-neighbor retrieval, embedding compositionality, and task sequence representation, enabling design inspiration generation and task comparison.
  • Limitations and Future Directions:

    • Currently limited to Android applications and has not been extended to cross-platform scenarios (e.g., iOS or desktop applications).
    • The Rico dataset lacks cross-application interactions, necessitating further validation with multi-application trajectory data.
    • Does not yet incorporate icon semantics into embeddings; future work could leverage visual object detection techniques to enhance model adaptability.
    • Further research into sequence embedding methods could improve dynamic task representation capabilities.

Related Applications and Contributions

  • Graphical User Interface Design:
    • Supports design similarity-based queries and embedding composition, enhancing the efficiency of generating design inspirations.
    • Provides more semantic screen nesting logic for generative layout models (e.g., LayoutGAN).
  • Cross-Application Task Learning:
    • Enhances transferability between intelligent task learning systems (e.g., Sugilite) through task sequence generation using Screen2Vec embeddings.

In summary, Screen2Vec offers a novel solution with significant contributions to the study of semantic embeddings in user interfaces, opening new research and application avenues in areas such as interactive learning and design generation.

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/papers/chi/47527/2021

AdRecommended

Learn AI Coding at CodeNow

open_in_newOpen DOI Link
DOI: https://doi.org/10.1145/3411764.3445049
At a Glance

Paper Snapshot

fact_check
dataset
Source
CHI
calendar_month
Year
2021
emoji_events
Award
Honorable Mention
group
Authors
4 authors
sell
Subtopics
Explainable AI (XAI), Prototyping & User Testing, Computational Methods in HCI
work
Professions
Software Engineers & Developers, UI/UX Designers, HCI Researchers
article
Content Status
Full text indexed
hub
Related Papers
10 related papers