R.I.P. Beyond the Page

“ The page is dead.” - David Heller

Beyond the Page Information Architecture Summit March 7, 2005 Gene Smith “ Turn the Page” - Bob Seger

Craftsman vs. Conductor

“ Half of my website is in Flash.” - Dennis Schleicher

“ We’re in the last days of a static environment.” - Jim Leftwich

“ Interaction becomes less browser-centric. Wireframes fall apart.” - Bill DeRouchey

“ It’s all about patterns.” - Jim Leftwich

The Page

This talk is about… The Page Metaphor Its place in IA notation systems And how we think about IA Trends Alternatives

The Page Metaphor

Its place in IA notation systems

And how we think about IA

Trends

Alternatives

"Ideas about organization are always based on implicit images or metaphors that persuade us to see, understand, and manage situations in a particular way.”

"Ideas about organization are always based on implicit images or metaphors that persuade us to see, understand, and manage situations in a particular way.”

“ Metaphors create insight. But they also distort. They have strengths. But they also have limitations.” Gareth Morgan Imaginization

“ Metaphors create insight. But they also distort. They have strengths. But they also have limitations.”

Gareth Morgan

Imaginization

Technical structure: a network of geographically distributed machines connected via wires organized in a conceptual network of hyperlinks Conceptual structure Moving on a path Toward and into information Paul Maglio & Teenie Matlock “ Metaphors We Surf the Web By” Metaphors we surf by…

Technical structure:

a network of geographically distributed machines connected via wires

organized in a conceptual network of hyperlinks

Conceptual structure

Moving on a path

Toward and into information

Paul Maglio & Teenie Matlock

“ Metaphors We Surf the Web By”

What is a page anyway? Document Viewed in a web browser Delivered over the Internet via HTTP Linked to other documents Node on a path to some goal Deeply ingrained in IA literature, tools, deliverables

Document

Viewed in a web browser

Delivered over the Internet via HTTP

Linked to other documents

Node on a path to some goal

Deeply ingrained in IA literature, tools, deliverables

“ The basic unit of user experience on the Web is, of course, the page , which we represent as a simple rectangle.” Jesse James Garrett “ A visual vocabulary”

“ The basic unit of user experience on the Web is, of course, the page , which we represent as a simple rectangle.”

Jesse James Garrett

“ A visual vocabulary”

“ The [visual] vocabulary currently treats the page as something of a black box” Jesse James Garrett “ The Visual Vocabulary Three Years Later: An Interview with Jesse James Garrett”

“ The [visual] vocabulary currently treats the page as something of a black box”

Jesse James Garrett

“ The Visual Vocabulary Three Years Later: An Interview with Jesse James Garrett”

Page metaphor Page is basic presentation unit Page is basic organizational unit Web is consumed as pages Stuff is assembled into pages

Page is basic presentation unit

Page is basic organizational unit

Web is consumed as pages

Stuff is assembled into pages

Page metaphor Page is basic presentation unit Panels, layers, plug-ins Page is basic organizational unit Granular units (e.g. post) Web is consumed as pages Web is a platform Stuff is assembled into pages “ Stuff” delivered outside the browser

Page is basic presentation unit

Panels, layers, plug-ins

Page is basic organizational unit

Granular units (e.g. post)

Web is consumed as pages

Web is a platform

Stuff is assembled into pages

“ Stuff” delivered outside the browser

IA Notation Systems Flow diagrams (like the Visual Vocabulary) Blueprints & Site Maps Wireframes

Flow diagrams (like the Visual Vocabulary)

Blueprints & Site Maps

Wireframes

Disruptive Trends Rich Internet Applications RSS, Atom, XML content Blurred boundaries

Rich Internet Applications

RSS, Atom, XML content

Blurred boundaries

Rich Internet Applications Internet infrastructure (HTTP) Software interface Flash, Ajax, Java Reduced latency Transparent transitions

Internet infrastructure (HTTP)

Software interface

Flash, Ajax, Java

Reduced latency

Transparent transitions

Impacts Change in focus From IA to Interaction & Interface design From content to software Growth in XML Metrics

Change in focus

From IA to Interaction & Interface design

From content to software

Growth in XML

Metrics

RSS, Atom, XML content Structured document Built-in validation Multiple nodes Simple, flexible content model

Structured document

Built-in validation

Multiple nodes

Simple, flexible content model

c

c

Impact User chooses how to consume User can choose interface Multiple sources, one interface RSS remix: splicing (union), intersection, frequency, length RSS feeds for everything Need for good content models

User chooses how to consume

User can choose interface

Multiple sources, one interface

RSS remix: splicing (union), intersection, frequency, length

RSS feeds for everything

Need for good content models

Blurred boundaries Desktop-web Multiple syncable, sharable Devices Personal-Public IA Web 1.0 – Web 2.0

Desktop-web

Multiple syncable, sharable Devices

Personal-Public IA

Web 1.0 – Web 2.0

Blurring of Desktop - Web RIAs Macromedia Central Longhorn Mozilla XUL

RIAs

Macromedia Central

Longhorn

Mozilla XUL

Impacts Abstraction of IA Push to re-use content Design across devices Design across channels

Abstraction of IA

Push to re-use content

Design across devices

Design across channels

Things to think about Page metaphor is web 1.0 Evolving tools Content models Improving metrics

Page metaphor is web 1.0

Evolving tools

Content models

Improving metrics

Tools to go beyond the page Wireflows Canonical prototyping Content models

Wireflows

Canonical prototyping

Content models

Wireflows Detail of wireframes Page-level interaction In-page details State, widgets, flow

Detail of wireframes

Page-level interaction

In-page details

State, widgets, flow

Fulcher, Glass, Leacock Method Simple vocabulary In-page details Supports states and roles Minimal system details

Simple vocabulary

In-page details

Supports states and roles

Minimal system details

Role/State example

Some cons of FGL Little abstraction Too detailed? Page based Could be adapted to support RIAs More details (and other tools): http:// leacock.com /deliverables

Little abstraction

Too detailed?

Page based

Could be adapted to support RIAs

More details (and other tools): http:// leacock.com /deliverables

Canonical Prototyping Constantine & Lockwood Toolkit for prototyping Glyphs representing Materials Tools (operations & actions) Active materials (stuff you can do) Micro-patterns

Constantine & Lockwood

Toolkit for prototyping

Glyphs representing

Materials

Tools (operations & actions)

Active materials (stuff you can do)

Micro-patterns

Materials

Tools

Active Materials

Example

Cons to Canonical Prototyping Too abstract No interplay between containers (aka, “okay, but we still have to deal with pages”) Not plug and play? More details: http:// www.foruse.com/articles/canonical.pdf

Too abstract

No interplay between containers (aka, “okay, but we still have to deal with pages”)

Not plug and play?

More details:

http:// www.foruse.com/articles/canonical.pdf

R.I.P.?

“ The page is dead, long live the page.” - David Heller

“ The page is a constitutional monarchy” - Marianne Sweeny

“ Wherever there’s information… we need to be there architecting that puppy.” - Christina Wodtke

Transmedia Transpersonal Transformative Brenda Laurel IA Summit 2004

Transmedia

Transpersonal

Transformative

Brenda Laurel

IA Summit 2004