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

Buzz, Hype - So What?

How we got here - Web 1.0 Publishing Transacting Communicating Collaborating Documents Forms Frames Thin Client

Publishing

Transacting

Communicating

Collaborating

Documents

Forms

Frames

Thin Client

What is Web 2.0?

And then there is this …

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

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

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

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

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

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.

Just for Fun - Comet Alex Russell’s - Coment: Low Latency Data for Browsers - alex.dojotoolkit.org

Historical Context thin thick mainframe Client-server Web 1.0 RIA

It used to be about content

Time is our new constant companion

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

Prototyping vs. Documenting

New patterns for people designing for the web

Planning to let people control your content

Changing the Magic Our primary job is to do what? Design Validate Communicate Document

Our primary job is to do what?

Design

Validate

Communicate

Document

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

The old page - Orbitz

The new page - Paguna

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

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

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

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

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

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

Examples from the public Internet AJAX Examples Yahoo Maps Wufoo Zimbra Web 2.0 Examples Frappr.com Wayfaring Shadows Ning Offline Web 2.0??

AJAX Examples

Yahoo Maps

Wufoo

Zimbra

Web 2.0 Examples

Frappr.com

Wayfaring

Shadows

Ning

Yahoo Maps Beta

Yahoo Maps Beta

Wufoo.com

More Wufoo.com

Zimbra - email+mashing API’s

Zimbra e-mail client

Zimbra email w/ Desktop Interactions

Frappr.com - Social Mashing

Wayfaring.com - mapmashing

Shadow Pages

Shadow pages

Shadow Pages - creating one

Examples from my work I will review examples of … Incorporating both AJAX and other Web 2.0 functionality into our system How we are changing the way we communicate and do design. Gotta come to see

I will review examples of …

Incorporating both AJAX and other Web 2.0 functionality into our system

How we are changing the way we communicate and do design.

Gotta come to see

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?

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?

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

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

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!

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!

Resources Ajaxian.com Great mix of technical insights and survey of examples mix of contributors eHub - http://www.emilychang.com/go/ehub Listing of Web 2.0 apps with interviews of those making them Emily 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!

Ajaxian.com Great mix of technical insights and survey of examples mix of contributors

eHub - http://www.emilychang.com/go/ehub Listing of Web 2.0 apps with interviews of those making them Emily 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!

Thanx … questions? David Heller http://synapticburn.com/