2026-10-22: JAViD: An Interactive Dashboard for Joint Visual Attention Analysis
We developed JAViD as a group project for the CS832 Human Computer Interaction course at Old Dominion University in Spring 2026, taught by Dr. Bhanuka Mahanama. The group members are Kumushini Thennakoon, Rochana Obadage, and Chameli Dommanige. Our goal was to make dual-participant gaze analysis more engaging using a visualization dashboard. This blog post describes the problem we addressed, how we applied human-computer interaction concepts, tools, and technologies, and the key takeaways from the course.
1. Problem Statement
Many eye-tracking tools focus on single-user study setups, but they offer limited support for comparing multiple synchronized gaze streams. An example of a single-user visualization dashboard is “A-DisETrac: Advanced Analytic Dashboard for Distributed Eye Tracking”. Researchers who study shared attention often write custom scripts or assemble Jupyter Notebooks that combine data cleaning, analysis, and visualization. These workflows can answer relevant research questions, but they require programming knowledge. We designed JAViD to bring the main steps of a dual-participant analysis into a browser-based dashboard. A user can load synchronized gaze data, inspect where each participant looked, examine how the distance between their gaze points changed over time, identify candidate joint-attention episodes, and export summary results. The project was guided by two questions:
Q1: How can we design effective interactive visualizations that reveal both spatial and temporal patterns of JVA from multi-participant eye-tracking data?
Q2: How does an integrated dashboard approach compare to traditional code-based analysis methods in terms of usability, learnability, and effectiveness for JVA analysis?
2. System Design
This section explains the JAViD system, including the task scenario, system architecture, design decisions, and core visualization components. The system was developed based on a screen-based visual search task, with the goal of analyzing JVA between two participants. It outlines how gaze data are prepared and processed, how usability principles inform the interface design, and how interactive visualizations support the exploration of spatial and temporal attention patterns.
2.1. Task Scenario
The task scenario involves two participants engaging in a screen-based activity, such as jointly analyzing visual content or completing a task on a shared display. Eye-tracking data from both participants are recorded as synchronized gaze points on the screen. To ensure consistent spatial alignment, the gaze data are transformed into the screen’s reference frame using a perspective transformation. ArUco markers are used to detect the screen frame in the visual field. Figure 1 shows an example of the data collection setup.
.png)
2.2. System Architecture
JAViD uses a client-server architecture built with Python, Dash, and Plotly. As shown in Figure 2, the browser provides the interface for uploading data, adjusting controls, and exploring coordinated visualizations. The Python Dash server handles data processing, joint visual attention analysis, and the construction of figures and results. Labeled request and response arrows show how these components communicate during interactive analysis.
.png)
Data collection and spatial preparation occur before the data is uploaded to JAViD. ArUco markers identify the screen frame in the scene recordings, and perspective transformation maps both participants’ gaze coordinates into a common two-dimensional reference frame. Next, users upload the prepared gaze files in CSV or Excel format with an optional stimulus image that provides context for the spatial visualizations.
The server uses pandas and NumPy to read, validate, and clean the uploaded data. The system aligns the participants’ gaze streams by timestamp and interpolates when necessary to accommodate different sampling rates. Using the aligned data, the system computes gaze distances and identifies JVA episodes according to spatial proximity and temporal criteria. They also support cross-recurrence analysis, spatial-temporal clustering using DBSCAN, and the calculation of episode measures and summary statistics.
Dash callbacks connect user actions with the required server-side operations. When users load data or change relevant analysis parameters, the browser sends the inputs to the server through HTTP requests. The callbacks invoke the necessary computations and construct updated Plotly figures, summary tables, and other results. These outputs are returned to the browser, including figure definitions encoded as JSON, where Dash components and Plotly.js display them.
The interface brings together five main coordinated views: scanpath and heatmap, temporal JVA analysis, cross-recurrence, gaze points on the stimulus, and statistical summaries. Shared time and display controls allow users to examine the same recording from complementary perspectives. Users can navigate through the recording, adjust analysis settings, and export figures or results for further analysis.
2.3. Design Decisions
The JAViD interface was designed with established usability principles in human-computer interaction to ensure accessibility for users with varying levels of technical expertise. As shown in Figure 3, the interface reflects key concepts from Nielsen’s usability heuristics and Norman’s principles of interaction design, including visibility of system status, feedback, constraints, consistency, affordances, and mappings.
2.3.1. Visibility of System Status
The interface maintains continuous awareness of the system state through status indicators. The left panel displays the currently loaded file names (e.g., “scene_5_participant_1.csv”) directly beneath each upload zone, so users always know which datasets are active. Participant ID fields (P1 ID, P2 ID) are shown persistently, making the current configuration visible at all times without requiring the user to navigate away from the main view.
2.3.2. Feedback
Immediate and informative feedback is provided at two levels. At the data level, a confirmation banner highlighted in green and reading “Loaded — P1: 81 pts | P2: 81 pts | Duration: 2000 ms” appears upon successful data loading, confirming exactly what has been ingested. At the system level, the Dash developer toolbar at the bottom of the screen surfaces runtime information including server connectivity status, callback activity, and version update notifications (e.g., “Dash update available - v4.1.0”), providing transparent feedback about the underlying application state.
2.3.3. Constraints
Input constraints are enforced to prevent user error before it occurs. File upload zones accept only .xls or .csv formats, as stated explicitly in the field labels (“Participant 1 (.xls or csv)”), preventing incompatible file types from being submitted. The screen dimension fields (Width, Height) and the Global Time Window slider are bounded inputs that restrict values to valid numerical ranges, guiding users toward correct configurations without requiring domain knowledge.
2.3.4. Consistency and Standards
The interface adheres to consistent visual and interaction conventions throughout. Both participant upload zones share identical layout, styling, and labeling patterns, reducing the cognitive load of learning one in order to use the other. Toggle controls for “Show Heatmap,” “Show Trails,” and “Show Stimulus” follow the same checkbox style, and opacity sliders for heatmap, trail, and image layers use a uniform slider component. The light mode/dark mode toggle and the 2D/3D JVA navigation buttons appear consistently in the top bar across views.
2.3.5. Affordance
Interactive elements are designed to signal their function visually. The “Drag & Drop or Browse” upload zones use a dashed-border card style that conventionally affords file-dropping behavior. The “Load Data” button is rendered with a play-arrow icon, reinforcing the action of initiating a process. Sliders for opacity and time window are rendered as draggable tracks with visible thumb handles, affording continuous adjustment. Radio button groups for “Heatmap View” and “Trails View” (P1 only, P2 only, or Both P1 & P2) afford mutually exclusive selection.
2.3.6. Mapping
Real-world scenarios are mapped into the dashboard through supportive interface elements that aid interpretation and usability. A dedicated help section is positioned at the top of the dashboard, providing users with contextual guidance on how to understand and interact with the visualizations in relation to the underlying study tasks. Additionally, the interface includes both dark and light modes to accommodate different viewing preferences and environments. Users can switch between the two modes using a button with a small symbol next to the label. A sun symbol indicates light mode, while a moon symbol indicates dark mode, allowing users to quickly identify the mode selection button.
2.4. Core Visualization Components
JAViD provides five primary visualization components, each addressing specific aspects of JVA analysis.
2.4.1. Scanpath and Heatmap View
The scanpath visualization overlays the gaze trails of both participants using distinct colors to show their sequential visual exploration (Figure 4). The heatmap represents attention intensity across the stimulus. Users can toggle between individual participant patterns and combined patterns to examine convergence and divergence in attention. The visualization also provides adjustable opacity for the heatmap and gaze trail overlays. The stimulus image is displayed as the background to provide spatial context for the gaze patterns.
2.4.2. Temporal JVA Analysis
The temporal analysis view (Figure 5) shows the dynamics of attention coordination between participants. The upper graph displays the Euclidean distance between the participants’ gaze points over time, while the lower graph shows the JVA signal computed using a sliding window. Users can configure the distance threshold used to detect JVA and adjust smoothing settings to reduce noise in the temporal signals. Sustained JVA episodes are highlighted in the visualization to help users identify periods of shared attention.
2.4.3. Cross Recurrence Plot
The cross-recurrence plot in Figure 6 represents the temporal relationship between the gaze patterns of the two participants in a two-dimensional grid. Participant 1's time is shown on the vertical axis, while Participant 2's time is shown on the horizontal axis. Color-coded cells indicate spatial proximity between the participants’ gaze points at corresponding time points. Diagonal patterns can reveal synchronized attention sequences, while vertical or horizontal patterns can indicate differences in participants' attention timing. Users can adjust the sampling frequency and interact with the plot using zoom and pan controls.
2.4.4. Gaze Points on Stimulus View
The gaze point visualization (Figure 7) shows the exact gaze locations of both participants on the stimulus at a selected point in time. Users can navigate through the recording using a time slider and view the current timestamp. Play and pause controls allow users to examine the gaze behavior through animated playback. The stimulus image is displayed in the background to provide spatial context for the gaze points.
2.4.5. Statistical Summary Dashboard
The statistical summary dashboard (Figure 8) provides quantitative measures of JVA across a session. It presents the total JVA time and percentage, the number of distinct JVA episodes, and the mean and median episode duration. The dashboard also includes spatial dispersion metrics and attention synchrony correlation. Summary statistics can be exported for further analysis and comparison across conditions or sessions.
3. Usability Evaluation of the Dashboard
To evaluate the usability of JAViD, we conducted a within-subjects comparative study. Here, participants used both JAViD and a Jupyter Notebook-based visualization workflow. The Jupyter Notebook contained the analytical code needed to create three selected visualizations available in JAViD. Participants first interacted with JAViD and completed a questionnaire that asked them to rate the dashboard functionalities and provide feedback through open-ended questions. Next, they used the Jupyter Notebook, ran the provided code, and generated the same three visualizations. After completing the notebook task, participants filled out a second questionnaire that collected their feedback and enabled a comparison between JAViD and the Jupyter Notebook workflow. We selected Jupyter Notebook as the comparison baseline because it is a common approach for generating visualizations by combining code and narrative text. This comparison allowed us to examine whether JAViD provided improvements in usability, learnability, and effectiveness over a traditional code-based workflow.
We recruited five participants for the usability study, including three males and two females. All participants were graduate students from different academic disciplines. Participants were selected to assess whether users with different levels of coding and domain knowledge could use JAViD to analyze JVA data. We summarized the feedback from the usability evaluation participants below.
3.1. Usability of JAViD
The usability study results indicate a strong positive response toward the dashboard across all evaluated dimensions. The majority of participants either agreed or strongly agreed that the system was easy to use, had a clear layout, and was easy to navigate. Participants also reported that the visualizations were interpretable and that the dashboard effectively supported their understanding of JVA. All participants indicated that the system was easy to learn, highlighting its accessibility for users with limited domain knowledge and coding experience. Figure 9 presents a summary of the findings.
Despite the overall positive feedback, the Cross Recurrence Plot was identified as the most difficult section to understand. This suggests that more complex visualizations may require additional guidance or explanation. Overall, these findings demonstrate that the dashboard provides a usable and intuitive interface for JVA analysis while also identifying opportunities to improve the interpretability of more advanced visual components.
4. User Feedback on JAViD
This section presents the participant feedback on the JAViD dashboard based on the layout, interactivity, complexity, and usability. It discusses what participants liked about the interface, the challenges they faced when interpreting the visualizations, and their suggestions for improvement. The feedback is helpful to identify the areas that worked well and ways to make the dashboard easier to understand and use.
4.1. Structure and Organization
Participants consistently praised the dashboard’s clean and well-structured layout. They noted that the organization made it easy to gain a broad overview of the data and navigate between different components. The logical grouping of visualizations supported efficient exploration and understanding of the data.
4.2. Interactivity
Interactive features, such as sliders, opacity controls, and participant toggles for P1 and P2, were highlighted as key strengths. These controls enabled users to dynamically explore the data and adjust visualizations in real time. Participants found that these features enhanced their interaction with the data and provided flexibility during the analysis.
4.3. Complexity
The Cross Recurrence Plot (CRP) was identified as the most challenging component of the dashboard. Four of the five participants reported difficulty interpreting it. This challenge was largely attributed to unfamiliarity with the underlying concept rather than issues with the interface itself. The feedback suggests that additional explanations could help users understand the purpose and interpretation of the CRP.
4.4. Domain Knowledge Gap
Some participants experienced difficulty because of limited familiarity with eye-tracking data and JVA concepts. This suggests that certain challenges were related to domain knowledge rather than the usability of the dashboard. Users who were less familiar with these concepts may require additional explanations to understand some of the visualizations and analytical measures.
4.5. Contextual Help
Participants expressed the need for additional support features to help them understand complex visualizations. Suggested features included hover tooltips, in-graph explanations, and a guided tutorial or onboarding process. These enhancements could provide users with information about the visualizations and metrics without requiring them to leave the dashboard.
“Maybe there could be a hover tutorial option where, if you hover over a specific graph or chart, it explains how the data was put into it.”
4.6. UI Sizing and Layout
Participants suggested improvements to the sizing and layout of some interface elements. Feedback indicated that font sizes and icon sizes could be increased and that some controls could be positioned closer together. In particular, participants suggested making the drag-and-drop icon more visible and placing the P1, P2, and opacity controls closer together to make them easier to access. These changes could improve readability and usability across different screen sizes.
“I felt some fonts were smaller when looking at the screen. The drag-and-drop option would be a bigger icon to find easily. Options for p1, p2, and opacity could be close by to use.”
5. Key Takeaways
The project demonstrated the practical value of JAViD while also providing several important lessons from the group development experience. The usability evaluation showed that JAViD can make JVA analysis more accessible by reducing the technical barriers associated with traditional tools such as Jupyter Notebook. Participants without programming backgrounds were able to complete analytical tasks, suggesting that the dashboard can support a wider range of users in exploring and understanding JVA data. Working as a group also helped us recognize and make effective use of each member’s strengths. Kumushini contributed domain knowledge in JVA, Rochana contributed technical skills for developing the dashboard, and Chameli contributed through background research and development of the dashboard. Through the project, we also gained a clear understanding of how human-computer interaction concepts can be translated into practical design decisions within an analytical dashboard. The project further helped us identify research gaps in JVA analysis and data visualization, particularly in making complex attention data easier to explore and interpret. The project also provided a valuable foundation for future research, as pilot studies and early-stage systems such as JAViD can help identify practical challenges, refine research questions, and guide the design of larger and more comprehensive studies.
A short video tutorial on how to use JAVID
For further details about JVA and JAViD, please refer to the links below:
GitHub repository:
- Beyond Gaze Overlap: Analyzing Joint Visual Attention Dynamics Using Egocentric Data
- Modeling Joint Visual Attention in Naturalistic Dyadic Interactions
- Egocentric Eye-Tracking in Collaborative Tasks: Quantifying Joint Visual Attention Using Wearable Glasses
Comments
Post a Comment