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
"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
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…
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
“ 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”
Page metaphor 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
IA Notation Systems Flow diagrams (like the Visual Vocabulary) Blueprints & Site Maps Wireframes
Disruptive Trends Rich Internet Applications RSS, Atom, XML content Blurred boundaries
Rich Internet Applications 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
RSS, Atom, XML content 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
Blurred boundaries 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
 
 
 
 
Impacts 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
Tools to go beyond the page Wireflows Canonical prototyping Content models
Wireflows 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
 
 
 
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
Canonical Prototyping 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
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

Beyond the Page

  • 1.
  • 2.
    “ The pageis dead.” - David Heller
  • 3.
    Beyond the PageInformation Architecture Summit March 7, 2005 Gene Smith “ Turn the Page” - Bob Seger
  • 4.
  • 5.
    “ Half ofmy website is in Flash.” - Dennis Schleicher
  • 6.
    “ We’re inthe last days of a static environment.” - Jim Leftwich
  • 7.
    “ Interaction becomesless browser-centric. Wireframes fall apart.” - Bill DeRouchey
  • 8.
    “ It’s allabout patterns.” - Jim Leftwich
  • 9.
  • 10.
    This talk isabout… The Page Metaphor Its place in IA notation systems And how we think about IA Trends Alternatives
  • 11.
    "Ideas about organizationare always based on implicit images or metaphors that persuade us to see, understand, and manage situations in a particular way.”
  • 12.
    “ Metaphors createinsight. But they also distort. They have strengths. But they also have limitations.” Gareth Morgan Imaginization
  • 13.
    Technical structure: anetwork 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…
  • 14.
    What is apage 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
  • 15.
    “ The basicunit of user experience on the Web is, of course, the page , which we represent as a simple rectangle.” Jesse James Garrett “ A visual vocabulary”
  • 16.
    “ 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”
  • 17.
    Page metaphor Pageis basic presentation unit Page is basic organizational unit Web is consumed as pages Stuff is assembled into pages
  • 18.
    Page metaphor Pageis 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
  • 19.
    IA Notation SystemsFlow diagrams (like the Visual Vocabulary) Blueprints & Site Maps Wireframes
  • 20.
    Disruptive Trends RichInternet Applications RSS, Atom, XML content Blurred boundaries
  • 21.
    Rich Internet ApplicationsInternet infrastructure (HTTP) Software interface Flash, Ajax, Java Reduced latency Transparent transitions
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
    Impacts Change infocus From IA to Interaction & Interface design From content to software Growth in XML Metrics
  • 29.
    RSS, Atom, XMLcontent Structured document Built-in validation Multiple nodes Simple, flexible content model
  • 30.
  • 31.
  • 32.
  • 33.
    Impact User chooseshow 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
  • 34.
    Blurred boundaries Desktop-webMultiple syncable, sharable Devices Personal-Public IA Web 1.0 – Web 2.0
  • 35.
    Blurring of Desktop- Web RIAs Macromedia Central Longhorn Mozilla XUL
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
    Impacts Abstraction ofIA Push to re-use content Design across devices Design across channels
  • 41.
    Things to thinkabout Page metaphor is web 1.0 Evolving tools Content models Improving metrics
  • 42.
    Tools to gobeyond the page Wireflows Canonical prototyping Content models
  • 43.
    Wireflows Detail ofwireframes Page-level interaction In-page details State, widgets, flow
  • 44.
    Fulcher, Glass, LeacockMethod Simple vocabulary In-page details Supports states and roles Minimal system details
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
    Some cons ofFGL Little abstraction Too detailed? Page based Could be adapted to support RIAs More details (and other tools): http:// leacock.com /deliverables
  • 50.
    Canonical Prototyping Constantine& Lockwood Toolkit for prototyping Glyphs representing Materials Tools (operations & actions) Active materials (stuff you can do) Micro-patterns
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
    Cons to CanonicalPrototyping 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
  • 56.
  • 57.
    “ The pageis dead, long live the page.” - David Heller
  • 58.
    “ The pageis a constitutional monarchy” - Marianne Sweeny
  • 59.
    “ Wherever there’sinformation… we need to be there architecting that puppy.” - Christina Wodtke
  • 60.
    Transmedia Transpersonal TransformativeBrenda Laurel IA Summit 2004