Page & interaction design principles

Contents

Overview

Page and interaction design ensure users can access content and complete tasks even on older devices and on slow or unreliable networks.

Many modern pages are heavy due to large images, videos, scripts, fonts, and animations. These increase load times and can break or slow down interactions in low-resource environments. Designing for low bandwidth ensures core content loads quickly and remains usable in all conditions.

Key idea in the LRO context

Within the LRO framework, page design should prioritise the delivery of essential information and core interactions before loading optional enhancements.

Pages should:

  • Load quickly with minimal resources
  • Deliver content progressively
  • Provide alternative lightweight views
  • Avoid unnecessary downloads
  • Allow tasks to complete even when unstable connectivity

Why does this matter for LRO?

Many users face constraints such as:

  • Slow networks -> long load times, download failures
  • Mobile data limitations -> large pages consume significant portions of data plans
  • Low-end devices -> slow rendering due to limited CPU/memory
  • Unstable connections -> interrupted interactions and broken submissions

Common problems

Modern pages are often heavy due to design choices, including:

  • Large media assets (high-resolution images and videos)
  • Multiple external scripts (tracking, ads, analytics)
  • Heavy JavaScript frameworks and custom web fonts
  • Complex layouts and animations
  • Larger datasets involving interactive visualisations

Ignoring these factors leads to risks like user abandonment due to excessive loading times, incomplete content delivery, broken interactions (forms and buttons may fail), and reduced accessibility.

For organisations delivering public services or research information, these issues significantly reduce accessibility and reach.

Design principles involved

Effective page and interaction design for low-resource environments relies on several principles.

  • Content first design - Essential information should load before decorative elements
  • Simplicity - Interfaces should use minimal visual complexity
  • Efficiency - Only necessary resources should be downloaded
  • Progressive enhancement - Core functionality should work without advanced technologies
  • User control - Users should be able to choose lightweight alternatives
  • Scalable interaction design - Interfaces should remain usable on slower devices and networks

Simplified Design Strategies

1. Content Loading and Structure

  • Prioritise Critical Content: Ensure essential information loads quickly, using minimal resources.
  • Progressive Loading: Deliver content progressively, loading additional content only when scrolled, required or visible (e.g., text-first rendering and lazy loading of images).
  • Lightweight Alternatives: Provide simplified versions of pages or features (often called "lite" modes) that remove non-essential features, reduce image quality, and minimise animation and background scripts. Eg, Facebook Lite.
  • Data Management: Break large documents or datasets into smaller segments using pagination, content segmentation, image compression, or expandable sections.

2. Interactions and Navigation

  • Optimise Workflows: Improve forms and submission workflows with autosave functionality, step-by-step forms, and minimal validation scripts. Support offline submission to prevent data loss during unstable connections.
  • Search Efficiency: Minimise network requests for search pages through efficient queries, optimised autocomplete, loading results in smaller batches with pagination and reduced client-side computation with server-side search processing.
  • Simplified Navigation: Maintain clear hierarchies, minimal menu structures, consistent navigation patterns and limited interactive elements to reduce cognitive load and interaction delays.
  • Export Options: Offer lightweight export formats, such as CSV, TXT, or Plain HTML, instead of large spreadsheet or document formats. Offer compressed files (Zip format), low-resolution images and HTML reports as alternatives to PDF documents.

3. Sustainable and low-impact design

Low-resource design also supports sustainable web practices by reducing energy use across networks and data centres.

Reducing unnecessary data transfer lowers environmental impact while improving performance.

Key strategies:

  • Reduce page size - remove unnecessary scripts and assets
  • Efficient caching - reuse frequently accessed resources locally
  • Minimal design - avoid heavy visuals and animations

This improves both user experience and environmental sustainability.

Implementation guidance

  • Audit page weight. Identify what makes pages heavy:
    • Large images and media
    • Third-party scripts
    • Unused CSS/JavaScript
  • Prioritise critical content - Ensure essential information loads first.
  • Provide lightweight alternatives - Offer simplified versions of complex pages.
  • Use progressive loading - Load additional content only when required.
  • Optimise interaction design - Ensure that user actions, such as searching or submitting forms, require minimal resources.

Example (Lazy Loading)

Lazy loading delays the download of images until they are visible on the screen, reducing unnecessary network usage. 

<img src="image.jpg" loading="lazy" alt="Example image">

Images load only when visible, reducing initial page weight.

Real-world examples

  • Google Search - text-first, minimal assets for fast results
  • Wikipedia - lightweight, text-focused pages
  • Facebook Lite - reduced features for low-bandwidth users

Do / Don't

Do

  • Design pages that prioritise essential content
  • Provide lightweight versions of heavy features
  • Break large datasets into smaller chunks
  • Optimise forms and submission workflows
  • Reduce unnecessary scripts and assets

Don't

  • Automatically load large media files
  • Use complex animations that require heavy resources
  • Load large datasets all at once
  • Depend entirely on heavy JavaScript frameworks
  • Ignore performance in interaction design

Checklist (quick review)

Metrics and tools

Metrics

  • Page weight
  • FCP (First Contentful Paint)
  • Network requests
  • Data transfer size
  • Interaction response time

Tools

  • Lighthouse
  • WebPageTest
  • PageSpeed Insights

Related topics

  • Progressive enhancement
  • Graceful degradation
  • Data transparency and user control
  • Adaptive resource loading
  • Network optimisation strategies

Key takeaways

Efficient page and interaction design ensures fast, reliable access to content in low-resource environments by reducing unnecessary complexity and prioritising essential functionality.

These practices improve accessibility, reduce data consumption, and enhance the user experience worldwide.

Further reading


How can we improve this article?

Your feedback will help improve the framework and its documentation and will only be visible to the development team.

Back to top