1.
R.I.P. Beyond the Page

2.
“ The page is dead.” - David Heller

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

4.
Craftsman vs. Conductor

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

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

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

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

9.
The Page

10.
This talk is about… <ul><li>The Page Metaphor </li></ul><ul><li>Its place in IA notation systems </li></ul><ul><li>And how we think about IA </li></ul><ul><li>Trends </li></ul><ul><li>Alternatives </li></ul>

11.
<ul><li>&quot;Ideas about organization are always based on implicit images or metaphors that persuade us to see, understand, and manage situations in a particular way.” </li></ul>

12.
<ul><li>“ Metaphors create insight. But they also distort. They have strengths. But they also have limitations.” </li></ul><ul><li>Gareth Morgan </li></ul><ul><ul><li>Imaginization </li></ul></ul>

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

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

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

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

17.
Page metaphor <ul><li>Page is basic presentation unit </li></ul><ul><li>Page is basic organizational unit </li></ul><ul><li>Web is consumed as pages </li></ul><ul><li>Stuff is assembled into pages </li></ul>

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

19.
IA Notation Systems <ul><li>Flow diagrams (like the Visual Vocabulary) </li></ul><ul><li>Blueprints & Site Maps </li></ul><ul><li>Wireframes </li></ul>

20.
Disruptive Trends <ul><li>Rich Internet Applications </li></ul><ul><li>RSS, Atom, XML content </li></ul><ul><li>Blurred boundaries </li></ul>

21.
Rich Internet Applications <ul><li>Internet infrastructure (HTTP) </li></ul><ul><li>Software interface </li></ul><ul><li>Flash, Ajax, Java </li></ul><ul><li>Reduced latency </li></ul><ul><li>Transparent transitions </li></ul>

28.
Impacts <ul><li>Change in focus </li></ul><ul><ul><li>From IA to Interaction & Interface design </li></ul></ul><ul><ul><li>From content to software </li></ul></ul><ul><li>Growth in XML </li></ul><ul><li>Metrics </li></ul>

29.
RSS, Atom, XML content <ul><li>Structured document </li></ul><ul><li>Built-in validation </li></ul><ul><li>Multiple nodes </li></ul><ul><li>Simple, flexible content model </li></ul>

30.
c

31.
c

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

34.
Blurred boundaries <ul><li>Desktop-web </li></ul><ul><li>Multiple syncable, sharable Devices </li></ul><ul><li>Personal-Public IA </li></ul><ul><li>Web 1.0 – Web 2.0 </li></ul>

35.
Blurring of Desktop - Web <ul><li>RIAs </li></ul><ul><li>Macromedia Central </li></ul><ul><li>Longhorn </li></ul><ul><li>Mozilla XUL </li></ul>

40.
Impacts <ul><li>Abstraction of IA </li></ul><ul><li>Push to re-use content </li></ul><ul><li>Design across devices </li></ul><ul><li>Design across channels </li></ul>

41.
Things to think about <ul><li>Page metaphor is web 1.0 </li></ul><ul><li>Evolving tools </li></ul><ul><li>Content models </li></ul><ul><li>Improving metrics </li></ul>

42.
Tools to go beyond the page <ul><li>Wireflows </li></ul><ul><li>Canonical prototyping </li></ul><ul><li>Content models </li></ul>

43.
Wireflows <ul><li>Detail of wireframes </li></ul><ul><li>Page-level interaction </li></ul><ul><li>In-page details </li></ul><ul><li>State, widgets, flow </li></ul>

44.
Fulcher, Glass, Leacock Method <ul><li>Simple vocabulary </li></ul><ul><li>In-page details </li></ul><ul><li>Supports states and roles </li></ul><ul><li>Minimal system details </li></ul>

48.
Role/State example

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

50.
Canonical Prototyping <ul><li>Constantine & Lockwood </li></ul><ul><li>Toolkit for prototyping </li></ul><ul><li>Glyphs representing </li></ul><ul><ul><li>Materials </li></ul></ul><ul><ul><li>Tools (operations & actions) </li></ul></ul><ul><ul><li>Active materials (stuff you can do) </li></ul></ul><ul><li>Micro-patterns </li></ul>

51.
Materials

52.
Tools

53.
Active Materials

54.
Example

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

56.
R.I.P.?

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

58.
“ The page is a constitutional monarchy” - Marianne Sweeny

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

60.
<ul><li>Transmedia </li></ul><ul><li>Transpersonal </li></ul><ul><li>Transformative </li></ul><ul><li>Brenda Laurel </li></ul><ul><li>IA Summit 2004 </li></ul>