Improving User Experience on Chemistry Websites: A Case Study of Common Accessibility and Usability Challenges and potential solutions.
I. Introduction
Purpose
I performed an analysis of existing chemistry education websites, focusing on navigation, content hierarchy, readability, accessibility, responsiveness, and interactive learning tools. The findings informed key design decisions, including simplified navigation, improved equation formatting, responsive layouts, and enhanced accessibility for the STEM community.
Target Audience
- Students
- Educators
- Researchers
- Science professionals
- Hobbyists
- Website designers and developers
II. Problem 1: Websites Filled with Advertisements
Problem
Many chemistry websites contain excessive advertisements, drawbacks include:
- Visual clutter and distractions
- Slower page loading
- Pop-ups blocking important content
- Ads often contain spammy or unsavory content (e.g. get rich quick scams)
Impact
- Reduced focus during learning
- Difficult navigation
- Ads appearing suddenly can be jarring
- Lower credibility and professionalism
- Poor mobile experience
Potential Solutions
- Limit advertisements to designated sidebars or footers.
- Use ads sparingly, max 3 per page.
- Avoid pop-ups or other intrusive ads.
- Offer alternative monetization methods, such as an online store.
- Prioritize educational content over advertising.
Key Takeaways
- Clean interfaces improve concentration.
- Less clutter leads to faster information retrieval.
- There are other ways to monetize a website
- Educational websites should emphasize learning over advertising revenue.
- Clicking the ad takes the user away from the website.
III. Problem 2: Excessive Clicking Required to Retrieve Information
Problem
Users must navigate through multiple pages before reaching desired content.
Examples:
- Finding molecular properties
- Looking up chemical equations
- Accessing safety information
- Locating periodic trends
Impact
- Increased frustration
- Lost productivity
- Higher cognitive load
- Users abandon the website
Proposed Solutions
- Implement powerful search functionality.
- Create centralized topic pages.
- Reduce unnecessary navigation levels.
- Use expandable sections instead of multiple pages.
- Always include a “HOME” link in the navigation.
Key Takeaways
- Information should be accessible within one or two clicks.
- Fewer navigation steps improve user satisfaction.
- Efficient navigation supports faster learning.
IV. Problem 3: Excessive Scrolling
Problem
Important information is spread across long webpages requiring continuous scrolling.
Impact
- Users lose their place.
- Hard to compare related information.
- Important data becomes buried.
- Difficult on mobile devices.
Proposed Solutions
- Use collapsible sections.
- Add sticky navigation menus.
- Use expandable sections if that information may not be relevant to all.
- Include “Back to Top” buttons.
- Break content into logical sections.
- Provide table of contents navigation.
Key Takeaways
- Organized pages reduce fatigue.
- Better navigation improves comprehension.
- Shorter content sections enhance readability.
V. Problem 4: Poor Information Organization
Problem
Content lacks logical structure.
Examples:
- Definitions separated from examples
- Data tables scattered throughout pages
- Related concepts placed on different pages
- Inconsistent page layouts
Impact
- Difficult to locate information
- Increased study time
- Reduced knowledge retention
- Confusing user experience
Proposed Solutions
- Group related concepts together.
- Use consistent page layouts.
- Apply clear heading hierarchy.
- Include summary sections.
- Improve search filters.
Key Takeaways
- Logical organization improves learning.
- Consistent layouts reduce cognitive effort.
- Well-structured content increases efficiency.
VI. Problem 5: Chemical Equations Not Accessible
Problem
Chemical equations are often presented as images or poorly formatted text.
Examples:
- Missing superscripts
- Missing subscripts
- Screen readers unable to interpret equations
- Poor scaling on mobile devices
Impact
- Accessibility barriers
- Difficult for visually impaired users
- Reduced readability
- Inaccurate scientific communication
Proposed Solutions
- Use MathML or accessible mathematical markup to display equations.
- Include alternative text descriptions for images.
- Ensure screen-reader compatibility.
- Maintain proper superscript and subscript formatting.
Key Takeaways
- Accessible equations benefit all users.
- Proper formatting improves scientific accuracy.
- Accessibility should be integrated into website design from the beginning.
VII. Problem 6: Charts and Tables Display Incorrectly
Problem
Large visual elements (especially the periodic table) become:
- Squashed
- Cropped
- Unreadable
- Difficult to interact with on smaller screens
Impact
- Missing information
- Poor mobile usability
- Increased zooming and scrolling
- Frustration during study
Proposed Solutions
- Use responsive design principles.
- Allow horizontal scrolling for large tables.
- Provide zoom functionality.
- Offer downloadable PDF versions.
- Create interactive periodic tables optimized for all screen sizes.
Key Takeaways
- Scientific visuals must remain readable on every device.
- Responsive layouts improve accessibility.
- Interactive charts enhance engagement.
VIII. Overall Recommendations
Improve Accessibility
- WCAG-compliant design
- Screen reader support
- Keyboard navigation
- High-contrast themes
- Accessible equation formatting
Improve Navigation
- Better search tools
- Sticky (stay to top) navigation header
- Fewer clicks
- Consistent menus
- Breadcrumb navigation
Improve Content Organization
- Clear headings
- Logical grouping
- Summary boxes
- Related-resource links
Improve Mobile Experience
- Responsive layouts
- Optimized charts
- Touch-friendly navigation
- Fast loading pages
IX. Overall Key Findings
| Challenge | Primary Solution | Benefit |
| Too many advertisements | Reduce visual clutter | Better concentration |
| Excessive clicking | Simplify navigation | Faster information retrieval |
| Excessive scrolling | Organize content into sections | Easier reading |
| Poor organization | Logical content hierarchy | Improved learning efficiency |
| Inaccessible equations | Use accessible math formatting | Greater accessibility and scientific accuracy |
| Cut-off charts and periodic tables | Responsive and interactive design | Improved usability across devices |
X. Conclusion
This case study highlights several recurring usability issues found on chemistry websites, including intrusive advertisements, inefficient navigation, excessive scrolling, disorganized content, inaccessible chemical notation, and poorly displayed scientific visuals. Addressing these issues through user-centered design and accessibility best practices can significantly improve the experience for the STEM community. By prioritizing clarity, accessibility, and responsive design, chemistry and other scientific websites can become more effective educational resources that support efficient learning and inclusive access to scientific information.