What do AJAX and Web 2.0 Really Mean for IAs

1
What do AJAX and Web 2.0 Really Mean for IAs?

• David Heller
• www.synapticburn.com
• March 2006
• IA Summit 2006
• Vancouver, British Columbia, Canada

2
Buzz, Hype - So What?
3
How we got here - Web 1.0

• Publishing
• Transacting
• Communicating
• Collaborating

• Documents
• Forms
• Frames
• Thin Client

4
What is Web 2.0?
5
And then there is this
6
Whats 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 around

What other qualities do you all think?
7
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

8
Defining AJAX

• Uses technology from the 90s
• 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
9
Just for Fun - Comet
Alex Russells - Coment Low Latency Data for
Browsers - alex.dojotoolkit.org
10
Historical Context
thin
mainframe
Web 1.0
RIA
Client-server
thick
11
It used to be about content
12
Time is our new constant companion
13
Changing our ways

• Prototyping vs. Documenting
• New patterns for people designing for the web
• Planning to let people control your content

14
Changing the Magic

• Our primary job is to do what?
• Design
• Validate
• Communicate
• Document

15
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
16
The old page - Orbitz
17
The new page - Paguna
18
Wireframes arent 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
  
• Cant test for use in the context of time without
  interaction

19
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

20
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

21
Examples from the public Internet

• AJAX Examples
• Yahoo Maps
• Wufoo
• Zimbra

• Web 2.0 Examples
• Frappr.com
• Wayfaring
• Shadows
• Ning

Offline Web 2.0??
22
Yahoo Maps Beta
23
Yahoo Maps Beta
24
Wufoo.com
25
More Wufoo.com
26
Zimbra - emailmashing APIs
27
Zimbra e-mail client
28
Zimbra email w/ Desktop Interactions
29
Frappr.com - Social Mashing
30
Wayfaring.com - mapmashing
31
Shadow Pages
32
Shadow pages
33
Shadow Pages - creating one
34
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?

35
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
  

36
Some take home advice

• Dont 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 youve seen it in a desktop app, try it out in
  your web app.
  
• BE CREATIVE!

37
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?id112_0_1_
  0_M3
  
• Surf or drown!

38
Thanx questions?

• David Heller
• http//synapticburn.com/