Real-Time Overlay Relocation in Digital Adoption Platforms
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing digital guidance systems struggle to provide contextually relevant content to users, often overwhelming them with excessive information and lacking flexibility in integrating overlays with underlying applications, which can affect web accessibility and the overall user experience.
Innovation Solution
The development of a digital adoption platform (DAP) that creates and relocates overlay elements in real-time within a digital guidance platform, allowing for dynamic adjustment based on changes in the underlying application's user interface, ensuring that overlay elements remain relevant and functional.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If overlay elements are added as an overlay platform, then flexibility in integrating with underlying applications is improved, but the components do not scroll with the elements they relate to
Solution Approach 1:
The overlay element's position is made dynamic through continuous monitoring of the underlying application's DOM changes. The system uses MutationObserver to detect when target elements move or appear/disappear, and automatically recalculates and updates the overlay element's position accordingly, ensuring the overlay remains properly positioned without requiring fixed parent-child relationships
Solution Approach 2:
The system introduces an intermediary layer (the overlay element positioned independently in the DOM) that mediates between the flexible overlay platform integration and the scrolling behavior of underlying application elements. This intermediary approach allows overlays to be positioned absolutely based on target element coordinates rather than being constrained by parent component scrolling
2Quantity of substance
If all digital guidance content is provided to a user in one place, then completeness of information is improved, but it becomes overwhelming to the user
Solution Approach 1:
The system applies local quality by positioning guidance overlays directly adjacent to the specific application elements they relate to, rather than collecting all guidance content in one location. Each overlay element is contextually anchored to its target element, providing users with distributed, context-relevant information exactly where needed in the interface
Solution Approach 2:
The guidance content is segmented into multiple independent overlay elements, each associated with specific target elements in the application. This segmentation allows the system to present only relevant guidance content in context rather than overwhelming users with complete guidance content simultaneously, while still providing access to all guidance information as needed
3Adaptability or versatility
If overlay elements are placed in independent location in code from corresponding selected element, then integration flexibility is improved, but real-time relocation capability becomes more complex
Solution Approach 1:
The overlay element system performs self-service by automatically detecting changes to target elements through MutationObserver and autonomously relocating itself without requiring manual intervention. The system monitors DOM mutations, identifies affected overlay elements, and recalculates their positions based on updated target element coordinates, making the relocation mechanism self-managing despite the independence of overlay element placement in the DOM
Data Source
AI summary
Provided herein are systems and methods for creating and relocating overlay elements in real time within a digital adoption platform (DAP) used in conjunction with an underlying computer application. In some embodiments, a method includes loading a page of the underlying application, loading the DAP, using the DAP to identify selected elements that are visible components of the user interface of the underlying application, create and display overlay elements over the user interface, each of the plurality of overlay elements being associated with and displayed visibly adjacent to a corresponding selected element, but placed in an independent location in the code from the corresponding selected element, detect changes that visibly affect the display of the selected elements, and change the display of the overlay elements based on changes detected so that the overlay elements visibly match the changes to the selected elements.