Beyond the Page
-
Upload
gsmith -
Category
Technology
-
view
10.213 -
download
0
description
Transcript of Beyond the Page
![Page 1: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/1.jpg)
R.I.P.
Beyond the Page
![Page 2: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/2.jpg)
“The page is dead.”
- David Heller
![Page 3: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/3.jpg)
Beyond the Page
Information Architecture Summit
March 7, 2005Gene Smith
“Turn the Page”
- Bob Seger
![Page 4: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/4.jpg)
Craftsman vs. Conductor
![Page 5: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/5.jpg)
“Half of my website is in Flash.”
- Dennis Schleicher
![Page 6: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/6.jpg)
“We’re in the last days of a static environment.”
- Jim Leftwich
![Page 7: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/7.jpg)
“Interaction becomes less browser-centric. Wireframes fall apart.”
- Bill DeRouchey
![Page 8: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/8.jpg)
“It’s all about patterns.”
- Jim Leftwich
![Page 9: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/9.jpg)
The Page
![Page 10: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/10.jpg)
This talk is about…
• The Page Metaphor• Its place in IA notation systems• And how we think about IA• Trends• Alternatives
![Page 11: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/11.jpg)
"Ideas about organization are always based on implicit images or metaphors that persuade us to see, understand, and manage situations in a particular way.”
![Page 12: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/12.jpg)
“Metaphors create insight. But they also distort. They have strengths. But they also have limitations.”
Gareth MorganImaginization
![Page 13: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/13.jpg)
• 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…
![Page 14: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/14.jpg)
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
![Page 15: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/15.jpg)
“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”
![Page 16: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/16.jpg)
“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 17: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/17.jpg)
Page metaphor
• Page is basic presentation unit• Page is basic organizational unit• Web is consumed as pages• Stuff is assembled into pages
![Page 18: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/18.jpg)
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
![Page 19: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/19.jpg)
IA Notation Systems
• Flow diagrams (like the Visual Vocabulary)
• Blueprints & Site Maps• Wireframes
![Page 20: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/20.jpg)
Disruptive Trends
1. Rich Internet Applications2. RSS, Atom, XML content3. Blurred boundaries
![Page 21: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/21.jpg)
Rich Internet Applications• Internet infrastructure (HTTP)• Software interface• Flash, Ajax, Java• Reduced latency• Transparent transitions
![Page 22: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/22.jpg)
![Page 23: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/23.jpg)
![Page 24: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/24.jpg)
![Page 25: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/25.jpg)
![Page 26: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/26.jpg)
![Page 27: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/27.jpg)
![Page 28: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/28.jpg)
Impacts
• Change in focus– From IA to Interaction & Interface design– From content to software
• Growth in XML• Metrics
![Page 29: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/29.jpg)
RSS, Atom, XML content
• Structured document• Built-in validation• Multiple nodes• Simple, flexible content model
![Page 30: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/30.jpg)
c
![Page 31: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/31.jpg)
c
![Page 32: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/32.jpg)
![Page 33: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/33.jpg)
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
![Page 34: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/34.jpg)
Blurred boundaries
• Desktop-web• Multiple syncable, sharable Devices• Personal-Public IA• Web 1.0 – Web 2.0
![Page 35: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/35.jpg)
Blurring of Desktop - Web• RIAs• Macromedia Central• Longhorn• Mozilla XUL
![Page 36: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/36.jpg)
![Page 37: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/37.jpg)
![Page 38: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/38.jpg)
![Page 39: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/39.jpg)
![Page 40: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/40.jpg)
Impacts
• Abstraction of IA• Push to re-use content• Design across devices• Design across channels
![Page 41: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/41.jpg)
Things to think about
• Page metaphor is web 1.0• Evolving tools• Content models• Improving metrics
![Page 42: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/42.jpg)
Tools to go beyond the page• Wireflows• Canonical prototyping• Content models
![Page 43: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/43.jpg)
Wireflows
• Detail of wireframes• Page-level interaction• In-page details• State, widgets, flow
![Page 44: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/44.jpg)
Fulcher, Glass, Leacock Method• Simple vocabulary• In-page details• Supports states and roles• Minimal system details
![Page 45: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/45.jpg)
![Page 46: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/46.jpg)
![Page 47: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/47.jpg)
![Page 48: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/48.jpg)
Role/State example
![Page 49: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/49.jpg)
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
![Page 50: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/50.jpg)
Canonical Prototyping• Constantine & Lockwood• Toolkit for prototyping• Glyphs representing
– Materials– Tools (operations & actions)– Active materials (stuff you can do)
• Micro-patterns
![Page 51: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/51.jpg)
Materials
![Page 52: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/52.jpg)
Tools
![Page 53: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/53.jpg)
Active Materials
![Page 54: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/54.jpg)
Example
![Page 55: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/55.jpg)
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
![Page 56: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/56.jpg)
R.I.P.?
![Page 57: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/57.jpg)
“The page is dead, long live the page.”
- David Heller
![Page 58: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/58.jpg)
“The page is a constitutional monarchy”
- Marianne Sweeny
![Page 59: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/59.jpg)
“Wherever there’s information… we need to be there architecting that puppy.”
- Christina Wodtke
![Page 60: Beyond the Page](https://reader033.fdocuments.in/reader033/viewer/2022061306/54b456394a7959c63e8b4582/html5/thumbnails/60.jpg)
TransmediaTranspersonal
Transformative- Brenda LaurelIA Summit 2004