ux-loading-research

Web Performance & UX Research Prototype: A full-stack research tool designed to measure user perceived wait times across three loading animation conditions (Spinner, Skeleton Screen, and Progress Bar) using a URL-parameter-based participant tracking system.

UX Research: The Impact of Loading Animations on Perceived Wait Time

This repository contains a functional web prototype developed for a 3rd-year Software Engineering research module. The study utilizes a Within-Subjects Experimental Design to compare user experience across three distinct loading states.

🚀 Research Overview

The goal of this project is to analyze whether different visual feedback mechanisms (Spinner, Skeleton Screen, and Progress Bar) influence a user's perception of time and overall satisfaction during a fixed 5-second loading period.

🛠️ Technical Implementation

This prototype is built using a decoupled architecture to ensure clean data collection and participant anonymity:

• Frontend: HTML5, CSS3, and Vanilla JavaScript hosted on GitHub Pages.
• Animations: Custom CSS animations for the Spinner and Skeleton Screen, with a JavaScript-controlled Progress Bar.
• Data Collection: Integrated Google Forms embedded via iframes.
• Participant Tracking: A custom URL Parameter system (?pid=ID) that auto-populates Participant IDs into the surveys to prevent data entry errors and ensure traceability.

📊 Experimental Workflow

1. Selection: Participant lands on the main dashboard via a unique personalized link.
2. Stimulus: Participant selects one of three animations.
3. Observation: The animation runs for a controlled duration of exactly 5 seconds.
4. Feedback: A Google Form is automatically displayed with the Participant ID pre-filled using entry.ID mapping.
5. Completion: Participant is guided back to the home screen via a custom confirmation message to complete the remaining conditions.

📁 Repository Structure

• index.html: Main landing page and testing interface.
• style.css: Visual styling and animation logic.
• script.js: State management, URL parameter parsing, and timer logic.

📈 Data Analysis

Data collected from this prototype is exported to Google Sheets and analyzed using R-Studio. A Within-Subjects ANOVA is performed to determine statistical significance between the three loading conditions.

Author: M.Sudharshika Academic Institution: Saegis Campus, Sri Lanka Module: Research Methodology