Beyond the Page

5,680 views
5,563 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>

×