multimedia and World Wide Web

Notes

Study Notes

HCI Notes: Multimedia and the World Wide Web

Focus: Multimedia and the World Wide Web

Integration, challenges, and design principles for digital media on the Web.

1. What is Multimedia?

**Multimedia** is the combination of different content forms—such as text, audio, images, animations, video, and interactive content—delivered via a single integrated platform. When integrated with hypertext, it forms **Hypermedia**, the foundation of the modern Web.

Media Classification:

  • **Static Media:** Requires a physical space and is time-independent (e.g., Text, Images).
  • **Dynamic Media:** Requires time to be presented (e.g., Audio, Video, Animation).
  • **Discrete Media:** Data consists of discrete samples (e.g., Image pixels).
  • **Continuous Media:** Data must be presented within specified time constraints (e.g., Video frames, Streaming audio).

2. Web Integration and Standards

Early web multimedia relied on plugins, but modern standards (HTML5) have fully integrated core media types directly into the browser.

HTML5 Native Elements

Standardized elements that allow browsers to handle media without proprietary software.

  • **Image:** ``
  • **Video:** `
  • **Audio:** `
  • **Canvas:** `` (for complex graphics, games, and dynamic drawing)

Delivery Mechanisms

The method by which continuous media is delivered to the user.

  • **Progressive Download:** File downloads in chunks; playback starts before the file is complete.
  • **Adaptive Streaming (HLS/DASH):** Content dynamically adjusts video quality based on the user's current network bandwidth.

3. HCI Design Principles

Effective multimedia design adheres to both general usability heuristics and specific principles governing multiple modalities.

A. Dual Coding Theory (Paivio)

Information encoded simultaneously through two modalities (e.g., visual and auditory) is more effectively retrieved than information encoded through a single modality.

  • **Application:** Combining a voice narration with relevant images in an explainer video for better learning.

B. Minimizing Extraneous Load (Mayer)

Avoid presenting extraneous information that distracts from the core content, as this increases cognitive load.

  • **Example:** Don't include background music in a tutorial video if it isn't directly related to the content being explained.

C. Accessibility and Redundancy

Provide multiple pathways to access the same information to support users with disabilities or varying contexts (Universal Design Principle 4: Perceptible Information).

  • **Requirement:** All time-based media (audio/video) must have synchronized **captions or transcripts**.

4. Usability and Performance Challenges

Poorly implemented multimedia can severely degrade the user experience.

Performance Issues

Large media files are the primary cause of slow load times and high bandwidth consumption.

  • **Design Fix:** Use appropriate compression (e.g., WebP for images, H.265 for video) and lazy loading for off-screen media.

Control and Intrusion

Unexpectedly starting audio or video can be jarring and disruptive (violating User Control and Freedom).

  • **Design Fix:** **Never autoplay** media with sound. Always provide clear, visible controls (pause, volume).

Navigation

hypertext Back to Module
Module Complete