Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Beyond the Page

5,861 views

Published on

Presentation from IA Summit '05.

Published in: Technology, Education

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>

×