Module 9. Incorporating interactivity

Hypertext and hypermedia

Cue Column

  • Definitions of hypertext and hypermedia

  • Origin of terms

  • Relation to the World Wide Web

  • Difference between Web and Internet

Notes Column

  1. Definitions

    • Hypertext:

      • Non-linear text

      • Contains links to other texts

      • Coined by Ted Nelson around 1965

    • Hypermedia:

      • Extends hypertext beyond text

      • Can include graphics, videos, sounds, etc.

      • Also coined by Ted Nelson

  2. Concepts vs. Products

    • Hypertext and hypermedia are conceptual frameworks, not specific products.

  3. World Wide Web (Web)

    • Special case of hypermedia.

    • Comprises interlinked hypertext documents on various connected computers.

    • Formed by the network of computers known as the Internet.

  4. Distinguishing Web and Internet

    • Web and Internet are technically different:

      • Internet: The physical network connecting computers.

      • Web: A system of interlinked hypertext documents.

    • In everyday language, terms are often used interchangeably.

Summary (to be filled out after notes review)

  • Hypertext and hypermedia are fundamental concepts that structure information on the Internet. Understanding their definitions and relations helps clarify the unique characteristics of the World Wide Web in contrast to the broader Internet.

What is the World Wide Web

Key Points (Notes):

  1. Distinction Between Internet and WWW:

    • The Internet is a global network of interconnected computers.

    • The World Wide Web (WWW) is a collection of web pages accessed via the Internet.

    • Common misconception: People often confuse the internet with the WWW.

  2. Functionality:

    • Web browsers are used to access the WWW through the internet.

    • Example: Saying "Can I look at some of the World Wide Web?" is more accurate than saying "Can I go on the internet?"

  3. History:

    • Invented in 1989 by Sir Tim Berners-Lee to facilitate data sharing among scientists.

    • The WWW operates on the existing internet infrastructure.

  4. Analogy:

    • Internet = roads and transport routes.

    • WWW = shops and businesses on those routes.

    • Web servers host websites, and content travels like vehicles on roads.

  5. Accessing Information:

    • Web browsers send requests for webpages and display the received information.

    • The first web browser was developed by Tim Berners-Lee.

  6. Evolution of the Web:

    • Early websites: simple text and images.

    • Modern websites: diverse content (videos, animations, quizzes).

    • Emergence of Web 2.0: allows more user-generated content and interaction.

  7. Future of the Web:

    • Accessing the web has expanded beyond computers to tablets, smartphones, smart TVs, and more.

    • Devices can provide notifications for new information.

Summary (Cue Column):

  • The internet and the World Wide Web are not the same; the former is the infrastructure, while the latter is an application running on it.

  • Tim Berners-Lee's invention of the WWW revolutionized information sharing.

  • The web has evolved from basic pages to interactive content, with ongoing advancements in access through various devices.

Designing Hypermedia Material

Main Ideas

  • Key considerations: Directionality and Structure

  • Importance of correctly linking documents and media for user experience.

Directionality

  • Definition: Hypermedia often exhibits unidirectionality in links.

  • Example: Non-existent links pose a problem, as no notification occurs to pages referencing these links.

  • Critique: Ted Nelson critiques this in his 2007 paper proposing Xanadu.

    • Xanadu: A system where content is "transclusible"—links are aware of origin and changes.

    • Benefit: If original content updates, all linked documents refresh automatically.

Structure

  • Importance of careful planning when linking documents and media.

  • Match structure to the user experience:

    • Different structures for various content formats: tutorials vs. interactive stories.

  • Structural Models:

    • Linear: Simple, stepwise navigation.

    • Hierarchical (Tree): Organized by levels.

    • Radial (Starfish): Central node with branching information.

    • Highly connected: Less hierarchy, more connectivity.

    • Loosely connected: Minimal connections, diverse paths.

  • Reference: Barfield (2004) discusses planning and implementing hypermedia structures.

Critique of Highly-Connected Structures

  • Critics argue that overly connected information can negatively affect cognitive abilities.

  • Further exploration of this argument in Unit 4.

Summary

  • Designing hypermedia requires attention to directionality and structure. Understanding how links function and are structured can enhance user experience and content effectiveness.

Mapping the structure of an interactive film

Main Ideas

  • Interactive Cinema: Definition and significance of Bandersnatch.

  • Interaction Patterns: Evolution and types in digital media.

Interactive Cinema

  • Definition: A hybrid of digital games and traditional cinema that allows viewer control over the narrative (Vosmeer & Schouten, 2014; MediaLAB Amsterdam, 2015).

  • Significance of Bandersnatch:

    • Released by Netflix in December 2018.

    • First interactive movie produced by a major Hollywood media company.

  • Viewer Engagement:

    • Within hours of release, viewers began mapping the structure of Bandersnatch.

    • A definitive map was created by a Reddit contributor, prompting discussions about its accuracy (Figure 9.1).

Interaction Patterns

  • Historical Context: Early interactivity linked to navigation through hypermedia, allowing nonlinear document traversal.

  • Modern Interactivity: Expanded to include various media types:

    • Text, Audio, 2D/3D Graphics: Enhanced manipulation and engagement.

    • Manipulation Patterns:

      • Undo, Redo, Drilling Down (for information).

      • Panning, Zooming, Rotating (for spatial software).

      • Stopping, Playing, Slowing Down, Speeding Up (for temporal media).

      • Hitting, Pulling, Carving, Nudging (for virtual physical environments).

  • Emerging Interaction Types: Constantly evolving; can be simple yet transformative.

    • Example: Tinder's Swipe: Revolutionized online dating by introducing a simple interaction pattern (Pierce, 2012).

Summary

  • Bandersnatch exemplifies the potential of interactive cinema, engaging viewers in unique narrative experiences. The evolution of interaction patterns reflects the growing complexity and capabilities of digital media.

Gestural interactions

Introduction to Touchscreen Gestures

The rise of touchscreen devices has revolutionized how users interact with technology. One of the most significant developments is the use of gestural interactions, which enable intuitive and direct manipulation of digital interfaces.

Common Touchscreen Gestures

Figure 9.4 presents a list of common touchscreen gestures that users frequently employ to interact with apps and devices. These gestures allow for a more seamless and engaging user experience.

Relationship Between Gestures and Interaction Patterns

  • Gestures and Interaction Patterns: There is a close relationship between gestures and interaction patterns. Each gesture is mapped to specific interaction patterns that define how users engage with digital content.

  • Popularization in Apps: Many gestures gain popularity through specific applications and products, influencing user expectations and behaviors.

Examples of Gestural Interactions

  1. Swipe Gestures:

    • Context: Popularized by Tinder, users swipe left or right to either reject or accept potential matches, demonstrating a quick, intuitive method of making choices.

  2. Innovative Gestures in Apps:

    • Clear App:

      • Spreading Gesture: Users can spread their fingers to insert an item between two existing items in a list, enhancing item management and organization.

      • Pinching Gesture: Users can pinch to collapse a list, allowing for a quick return to a broader view of the content, facilitating navigation and comprehension.