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… <ul><li>The Page Metaphor </li></ul><ul><li>Its place in IA notation systems </li></ul><ul><li>And how...
<ul><li>&quot;Ideas about organization are always based on implicit images or metaphors that persuade us to see, understa...
<ul><li>“ Metaphors create insight. But they also distort. They have strengths. But they also have limitations.” </li><...
<ul><li>Technical structure: </li></ul><ul><ul><li>a network of geographically distributed machines connected via wires </...
What is a page anyway? <ul><li>Document </li></ul><ul><li>Viewed in a web browser </li></ul><ul><li>Delivered over the In...
<ul><li>“ The basic unit of user experience on the Web is, of course, the page , which we represent as a simple rectangle...
<ul><li>“ The [visual] vocabulary currently treats the page as something of a black box” </li></ul><ul><ul><li>Jesse Jame...
Page metaphor <ul><li>Page is basic presentation unit </li></ul><ul><li>Page is basic organizational unit </li></ul><u...
Page metaphor <ul><li>Page is basic presentation unit </li></ul><ul><ul><li>Panels, layers, plug-ins </li></ul></ul><ul>...
IA Notation Systems <ul><li>Flow diagrams (like the Visual Vocabulary) </li></ul><ul><li>Blueprints & Site Maps </li></ul>...
Disruptive Trends <ul><li>Rich Internet Applications </li></ul><ul><li>RSS, Atom, XML content </li></ul><ul><li>Blurred bo...
Rich Internet Applications <ul><li>Internet infrastructure (HTTP) </li></ul><ul><li>Software interface </li></ul><ul><li>F...
 
 
 
 
 
 
Impacts <ul><li>Change in focus </li></ul><ul><ul><li>From IA to Interaction & Interface design </li></ul></ul><ul><ul><li...
RSS, Atom, XML content <ul><li>Structured document </li></ul><ul><li>Built-in validation </li></ul><ul><li>Multiple nodes ...
c
c
 
Impact <ul><li>User chooses how to consume </li></ul><ul><li>User can choose interface </li></ul><ul><li>Multiple sources...
Blurred boundaries <ul><li>Desktop-web </li></ul><ul><li>Multiple syncable, sharable Devices </li></ul><ul><li>Personal-Pu...
Blurring of Desktop - Web <ul><li>RIAs </li></ul><ul><li>Macromedia Central </li></ul><ul><li>Longhorn </li></ul><ul><li>M...
 
 
 
 
Impacts <ul><li>Abstraction of IA </li></ul><ul><li>Push to re-use content </li></ul><ul><li>Design across devices </li></...
Things to think about <ul><li>Page metaphor is web 1.0 </li></ul><ul><li>Evolving tools </li></ul><ul><li>Content models <...
Tools to go beyond the page <ul><li>Wireflows </li></ul><ul><li>Canonical prototyping </li></ul><ul><li>Content models </l...
Wireflows <ul><li>Detail of wireframes </li></ul><ul><li>Page-level interaction </li></ul><ul><li>In-page details </li></u...
Fulcher, Glass, Leacock Method <ul><li>Simple vocabulary </li></ul><ul><li>In-page details </li></ul><ul><li>Supports stat...
 
 
 
Role/State example
Some cons of FGL <ul><li>Little abstraction </li></ul><ul><li>Too detailed? </li></ul><ul><li>Page based </li></ul><ul><li...
Canonical Prototyping <ul><li>Constantine & Lockwood </li></ul><ul><li>Toolkit for prototyping </li></ul><ul><li>Glyphs re...
Materials
Tools
Active Materials
Example
Cons to Canonical Prototyping <ul><li>Too abstract </li></ul><ul><li>No interplay between containers (aka, “okay, but we s...
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
<ul><li>Transmedia </li></ul><ul><li>Transpersonal </li></ul><ul><li>Transformative </li></ul><ul><li>Brenda Laurel </li><...
Upcoming SlideShare
Loading in …5
×

Beyond the Page

5,803 views

Published on

Presentation from IA Summit '05.

Published in: Technology, Education
License: CC Attribution-ShareAlike License
1 Comment
40 Likes
Statistics
Notes
no profile picture user
  • i have added it to my favourites , thanks!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
Show More
No Downloads
Views
Total views
5,803
On SlideShare
0
From Embeds
0
Number of Embeds
124
Actions
Shares
0
Downloads
101
Comments
1
Likes
40
Embeds 0
No embeds

No notes for slide

  • Beyond the Page

    1. 1. R.I.P. Beyond the Page
    2. 2. “ The page is dead.” - David Heller
    3. 3. Beyond the Page Information Architecture Summit March 7, 2005 Gene Smith “ Turn the Page” - Bob Seger
    4. 4. Craftsman vs. Conductor
    5. 5. “ Half of my website is in Flash.” - Dennis Schleicher
    6. 6. “ We’re in the last days of a static environment.” - Jim Leftwich
    7. 7. “ Interaction becomes less browser-centric. Wireframes fall apart.” - Bill DeRouchey
    8. 8. “ It’s all about patterns.” - Jim Leftwich
    9. 9. The Page
    10. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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>
    22. 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>
    23. 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>
    24. 30. c
    25. 31. c
    26. 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>
    27. 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>
    28. 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>
    29. 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>
    30. 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>
    31. 42. Tools to go beyond the page <ul><li>Wireflows </li></ul><ul><li>Canonical prototyping </li></ul><ul><li>Content models </li></ul>
    32. 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>
    33. 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>
    34. 48. Role/State example
    35. 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>
    36. 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>
    37. 51. Materials
    38. 52. Tools
    39. 53. Active Materials
    40. 54. Example
    41. 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>
    42. 56. R.I.P.?
    43. 57. “ The page is dead, long live the page.” - David Heller
    44. 58. “ The page is a constitutional monarchy” - Marianne Sweeny
    45. 59. “ Wherever there’s information… we need to be there architecting that puppy.” - Christina Wodtke
    46. 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>

    ×