Download slides for 'What do AJAX, RIAs and Web 2.0 Really ...
-
Upload
sampetruda -
Category
Documents
-
view
473 -
download
1
description
Transcript of Download slides for 'What do AJAX, RIAs and Web 2.0 Really ...
David Heller
March 2006 IA Summit 2006
synapticburn.com
What do AJAX and Web 2.0 Really Mean for IAs?
David Hellerwww.synapticburn.com
March 2006IA Summit 2006
Vancouver, British Columbia, Canada
David Heller
March 2006 IA Summit 2006
synapticburn.com
Buzz, Hype - So What?
David Heller
March 2006 IA Summit 2006
synapticburn.com
How we got here - Web 1.0
• Publishing• Transacting• Communicating• Collaborating
• Documents• Forms• Frames• Thin Client
David Heller
March 2006 IA Summit 2006
synapticburn.com
What is Web 2.0?
David Heller
March 2006 IA Summit 2006
synapticburn.com
And then there is this …
David Heller
March 2006 IA Summit 2006
synapticburn.com
What’s the biggest deal(s)?Primary● Letting it go free
– Access to content and services -- RSS, APIs● Playing with others
– The economy of mediating participation in concert with consumption
Secondary● Shaking up the page
– Desktop metaphors– Cinematic visual behaviors
● Mashing it up
● Systemic Changes to HOW–Offshore–Small team–No designers–Agile–Short turn aroundWhat other qualities do you all think?
David Heller
March 2006 IA Summit 2006
synapticburn.com
Patterns of Web 2.0● Spaces for collaboration
– Rate– Review– Comment– Tag– Blog– Feed
● Re-mixing & Mashing– Combining different content sources– Letting people use your content source– Enabling content and services to be mixed
David Heller
March 2006 IA Summit 2006
synapticburn.com
Defining AJAX• Uses technology from the 90’s
• Actually Microsoft DID do something constructive
• Simple Explanation– I can make any part of the browser do an HTML request
– I can retain entire (fairly large) datasets in memory
– I can then act on those datasets
• For the techies– XMLHttpRequest - this is a JavaScript method
– XML - a means of structuring data
– Asynchronous - Well, all the web is asynchronous.
JJ Garrett-Ajax: A New Approach to Web Applications
David Heller
March 2006 IA Summit 2006
synapticburn.com
Just for Fun - Comet
QuickTime™ and aTIFF (LZW) decompressor
are needed to see this picture.
Alex Russell’s - Coment: Low Latency Data for Browsers - alex.dojotoolkit.org
David Heller
March 2006 IA Summit 2006
synapticburn.com
Historical Contextthin
thick
mainframe
Client-server
Web 1.0
RIA
David Heller
March 2006 IA Summit 2006
synapticburn.com
It used to be about content
David Heller
March 2006 IA Summit 2006
synapticburn.com
Time is our new constant companion
David Heller
March 2006 IA Summit 2006
synapticburn.com
Changing our ways● Prototyping vs. Documenting● New patterns for people designing for the web
● Planning to let people control your content
David Heller
March 2006 IA Summit 2006
synapticburn.com
Changing the Magic
Our primary job is to do what?● Design● Validate● Communicate● Document
David Heller
March 2006 IA Summit 2006
synapticburn.com
What happen to our precious page?
“There is no [page].” - Neo
“There is no page; only pathways”-- Emily Chang & Max Kiesler of ideacodes
A page is a metaphor of a moment of uninterrupted context
David Heller
March 2006 IA Summit 2006
synapticburn.com
The old page - Orbitz
David Heller
March 2006 IA Summit 2006
synapticburn.com
The new page - Paguna
David Heller
March 2006 IA Summit 2006
synapticburn.com
Wireframes aren’t enough● Time is now our driving axis
– Needs to be explored like other parameters● Meat is in the details
– And the details are behavioral– And compartmental
● (no longer are we purely interested in the whole)● Gotta learn your tech● Breaking down interaction from structure from presentation
● Can’t test for use in the context of time without interaction
David Heller
March 2006 IA Summit 2006
synapticburn.com
Should everything be a desktop app?● What is a desktop application?
– Responsive– Content creation– Specific metaphors (i.e. WIMP)– Cinematic interaction with animation
● Mac OSX Dock with Genie Animation● What about ubiquitous Web metaphors?
– Back-button– Hyperlink– No windows (?)
● Do we really know what users want?– MS research and Apple designs are really pointing the way
● Progressive Display vs. Everything from Everywhere
David Heller
March 2006 IA Summit 2006
synapticburn.com
AJAX Interaction Patterns
● Inline editing● Data set manipulation● In line/in context validation(s)● “instant” query results (version of progressive display)
● Contextual intelligent navigation and information display
● Data display from multiple interacting sources
David Heller
March 2006 IA Summit 2006
synapticburn.com
Examples from the public Internet
AJAX Examples• Yahoo Maps• Wufoo• Zimbra
Web 2.0 Examples• Frappr.com• Wayfaring• Shadows• Ning
Offline Web 2.0??
David Heller
March 2006 IA Summit 2006
synapticburn.com
Yahoo Maps Beta
David Heller
March 2006 IA Summit 2006
synapticburn.com
Yahoo Maps Beta
David Heller
March 2006 IA Summit 2006
synapticburn.com
Wufoo.com
David Heller
March 2006 IA Summit 2006
synapticburn.com
More Wufoo.com
David Heller
March 2006 IA Summit 2006
synapticburn.com
Zimbra - email+mashing API’s
David Heller
March 2006 IA Summit 2006
synapticburn.com
Zimbra e-mail client
David Heller
March 2006 IA Summit 2006
synapticburn.comZimbra email w/ Desktop
Interactions
David Heller
March 2006 IA Summit 2006
synapticburn.com
Frappr.com - Social Mashing
David Heller
March 2006 IA Summit 2006
synapticburn.com
Wayfaring.com - mapmashing
David Heller
March 2006 IA Summit 2006
synapticburn.com
Shadow Pages
David Heller
March 2006 IA Summit 2006
synapticburn.com
Shadow pages
David Heller
March 2006 IA Summit 2006
synapticburn.com
Shadow Pages - creating one
David Heller
March 2006 IA Summit 2006
synapticburn.com
Issues with AJAX & Web2.0● Accessibility● Too open?
– Abuse through all kinds of spam, phishing, etc.– Should all brands be open?– Should all brands promote participation?
● Controlling access? Loosing to our competitors?
● How to differentiate● X-browser concerns● Scalability - too many connections to the server?
David Heller
March 2006 IA Summit 2006
synapticburn.com
Rules of Design Engagement● Outline your story or choreograph your dance
– Interaction is indeed a play or dance● So many interacting aesthetic elements at play to create a whole
● Keep your developers in the loop during design– I mean it!– Dangerous moment of Serendipity– Scale and performance are key to design success
● This is software– Requires deep dive into pathways
● Exceptions will abound and need to be designed for
David Heller
March 2006 IA Summit 2006
synapticburn.com
Some take home advice● Don’t require a submit button for single field forms● Be careful of too much interaction inside of a table
– Unexpected & confusing● Control the back button (you can control it)● Dialogs are a powerful tool towards creating contextual modality
– WARNING: this is a desktop app metaphor– Dialog != popup window
● Even if done with a browser window (test for popup-blockers)● DHTML dialogs are very useful indeed
● Imitation is flattery– If you’ve seen it in a desktop app, try it out in your web app.
BE CREATIVE!
David Heller
March 2006 IA Summit 2006
synapticburn.com
Resources● Ajaxian.comGreat mix of technical insights and survey of examplesmix of contributors
● eHub - http://www.emilychang.com/go/ehub Listing of Web 2.0 apps with interviews of those making themEmily Chang
● Functioning Form - http://functioningform.com/ Insights on design issues about all types of interfaces including those rich and on the Internet.Luke Wroblewski
● Too many others to mention here. My reading list here: http://synapticburn.com/more.php?id=112_0_1_0_M3
Surf or drown!
David Heller
March 2006 IA Summit 2006
synapticburn.com
Thanx … questions?
David Hellerhttp://synapticburn.com/