Exploring Web Development Variables: A Multi-Factor Study on User Experience and Accessibility in Educational Contexts

Abstract

This research explores five critical elements of web development that impact user experience,

accessibility, and engagement. The five variables examined are: (1) color schemes and layout

styles, (2) screen reader performance through semantic HTML, (3) page load speed and its

influence on retention, (4) web form design and error rates, and (5) AI chatbot integration on

resource-based websites. Each factor was tested through controlled experiments using web

pages built with HTML, CSS, and JavaScript, combined with feedback and interaction from real

users. This study provides actionable insights for web developers aiming to create inclusive and

optimized digital platforms, particularly in educational contexts. Key findings support best

practices promoted by organizations such as the W3C, Nielsen Norman Group, and Google.

1. Introduction

In the digital age, the quality of a website’s design directly influences how users engage with

information, access content, and complete tasks. Effective web development considers not just

aesthetic appeal but also accessibility, usability, and performance. This research, composed of

five targeted experiments, investigates the individual effects of specific web development

variables on user experience. Each section involves building two variants of a webpage differing

by a single factor, then testing these with real users to measure outcomes such as task speed,

preference, satisfaction, or error rate. This project is also meant to develop the researcher’s own

skills in design thinking, user testing, and coding using HTML, CSS, JavaScript, and

accessibility tools.

2. Project 1: Color Schemes and Layout Styles

Question: How do color schemes and layout choices affect user engagement on educational

websites?

Two variations of a study-resource website were developed. Version A used a flat, minimalist

layout with neutral tones, lots of white space, and sans-serif fonts. Version B featured a more

visually dynamic style, including vibrant colors (blue, red, yellow), a bold sans-serif font, and

asymmetrical card layouts. Fifteen students, aged 14–17, were asked to browse both sites for

two minutes and complete a short usability survey using a modified System Usability Scale

(SUS).

Findings:

● 80% preferred the minimalist layout, stating it was easier to focus on content and visually

calming.

● 20% found the colorful version more “fun” and attention-grabbing, but slightly

overwhelming for academic tasks.

● Eye-tracking observations showed fewer distractions and faster comprehension in the

minimalist version.

Implications: Minimalist design supports better focus in educational contexts, aligning with

research by the Nielsen Norman Group (2021), which states that overly busy interfaces increase

cognitive load and reduce comprehension.

3. Project 2: Accessibility and Screen Readers

Question: How do different web structures affect screen reader performance?

Two HTML pages with the same content but different semantic structure were created. Version

A used semantic HTML5 tags (<main>, <nav>, <article>, <section>) and a correct

heading hierarchy. Version B relied on <div> tags with few IDs/classes and incorrect heading

order (e.g., jumping from <h1> to <h4>). NVDA (NonVisual Desktop Access) was used to test

both, and feedback was gathered from two blind users and one low-vision user.

Findings:

● NVDA navigated Version A in 40 seconds, with clear navigation points.

● Version B took over 90 seconds and resulted in frequent misreads.

● Feedback emphasized the importance of ARIA roles and heading hierarchy for

orientation and comprehension.

Implications: Semantic HTML not only improves accessibility for screen reader users but also

enhances SEO and future-proofing. Developers often underestimate its role, despite guidelines

from WCAG 2.2 and WebAIM.

4. Project 3: Page Load Speed and User Retention

Question: How does load speed affect user retention and satisfaction?

Two homepage versions were built: one optimized with Gzip compression, lazy loading, minified

JavaScript, and WebP images; the other loaded large images (PNG), unminified scripts, and

blocking CSS. Load speed was measured using Google Lighthouse. A group of 20 users

browsed both and completed a survey rating their satisfaction and likelihood to stay on the site.

Findings:

● Optimized page loaded in 1.4 seconds and retained 85% of users for more than 15

seconds.

● Slower page took 6.3 seconds and saw a 55% bounce rate.

● 70% of users reported frustration with slow load times; only 15% noticed differences in

visual quality.

Implications: Speed optimization is critical. According to Google research, every additional

second of load time increases bounce rate by 32%. Performance must be prioritized in modern

responsive web design.

5. Project 4: Web Form Design and Error Rates

Question: Does the layout of web forms impact the number of user input errors?

Two identical sign-up forms were tested: Version A used a single-column, vertically stacked

format; Version B used a two-column format with side-by-side fields. Both contained 8 input

fields (name, email, password, etc.). Ten students were timed filling out both forms, and errors

were tracked (e.g., incorrect email format, missed fields).

Findings:

● Version A resulted in an average completion time of 52 seconds with 4 total errors.

● Version B had an average time of 68 seconds and 9 total errors.

● Users stated that the two-column layout was confusing, especially on mobile.

Implications: The results confirm findings from the Nielsen Norman Group (2022), which

recommends single-column forms for better scanning and fewer input mistakes.

6. Project 5: AI Chatbot Integration and User Experience

Question: Does adding an AI chatbot improve user experience on a school resource website?

A school information site was created in two versions: one with and one without a chatbot

powered by OpenAI’s GPT API. Twelve students were asked to find three pieces of information

(e.g., office hours, counselor contact) and then rate their experience using the USE

Questionnaire (Usefulness, Satisfaction, Ease of use).

Findings:

● 75% of users found the chatbot-assisted version more helpful.

● Tasks were completed 30% faster on average using the chatbot.

● Some users preferred human-like interaction, while a few found the chatbot unnecessary

for simple queries.

Implications: AI chatbots improve self-service efficiency but must be clearly integrated and not

interruptive. As chatbots become more sophisticated, their role in education websites may

expand further.

7. Conclusion

This study highlights how individual web development decisions significantly impact user

engagement, usability, and accessibility. Minimalist interfaces aid focus, semantic HTML

improves accessibility, optimized speed reduces bounce rates, simple form designs minimize

errors, and AI chatbots enhance guidance. These insights can help both novice and

experienced developers create more effective digital experiences. For future research, scaling

the user base and using analytics tools (e.g., Hotjar, Google Analytics) could provide deeper

insights. Exploring voice interfaces, personalization, or multilingual access would also expand

the scope of inclusive design.

8. References

● Nielsen Norman Group. (2021). Visual Design for Attention and Comprehension

● Budiu, R. (2020). Flat vs. Skeuomorphic Design: Effects on Learning.

● UX Planet. (2023). Best Practices in Educational Website Design.

● WebAIM. (2023). Screen Reader User Survey #9.

● W3C. (2024). Web Content Accessibility Guidelines (WCAG) 2.2.

● Paciello Group. (2022). Accessible Web Development Fundamentals.

● Mozilla Developer Network (MDN). ARIA and Semantic HTML.

● Google Lighthouse. (2024). Performance Audits.

● Akamai Technologies. (2022). The State of Online Retail Performance.

● Google Developers. (2023). Core Web Vitals: Metrics & Benchmarks.

● HubSpot. (2022). Why Website Speed Matters.

● Nielsen Norman Group. (2022). UX Guidelines for Forms.

● Baymard Institute. (2023). Form Usability: 50 Guidelines Based on 190k+ Sessions.

● UX Collective. (2021). Best Practices in Form Layout and Field Design.

● OpenAI. (2025). Chatbot Integration Tools.

● IBM Watson. (2023). The Future of Conversational AI in Education.

● Salesforce Research. (2022). AI in Customer Support Trends.

● Nielsen Norman Group. (2022). Chatbots: 10 Guidelines for User-Centered Design.

● IBM Watson. (2023). The Future of Conversational AI in Education.

● Salesforce Research. (2022). AI in Customer Support Trends.

● Nielsen Norman Group. (2022). Chatbots: 10 Guidelines for User-Centered Design.