designing
for interaction
Ajax
with

Ajax

Communicating with the
server without refreshing
the whole page.

speed

frames

frames
iframe

frames
iframe
Flash

frames
iframe
Flash
XMLHttpRequest

XMLHttpRequest

Microsoft
XMLHttpRequest

Microsoft IE5
XMLHttpRequest

Microsoft IE5
Mozilla Safari Opera
XMLHttpRequest

Microsoft IE5
Mozilla Safari Opera
W3C
XMLHttpRequest

asynchronous

asynchronous

asynchronous

asynchronous
XMLHttpRequest

thin client
browser « » server

thin client
browser « » server
storage

thin client
browser « » server
storage
processing

thin client
browser « » server
display storage
processing

rich client
browser server

rich client
browser « »XHR« » server

rich client
browser « »XHR« » server
storage

rich client
browser « »XHR« » server
display storage

rich client
browser « »XHR« » server
display storage
processing

progressive
enhancement

content

structure
content

presentation
structure
content

behaviour
presentation
structure
content

behaviour
presentation
structure HTML
content

behaviour
presentation CSS
structure HTML
content

behaviour JavaScript
presentation CSS
structure HTML
content

behaviour
presentation CSS
structure HTML
content

behaviour
presentation
structure HTML
content

progressive
enhancement

progressive
enhancement
XMLHttpRequest

Hijax

browser server

browser server
storage

browser server
storage
processing

browser server
display storage
processing

browser « »XHR« » server
display storage
processing

deceptively
rich client
browser « »XHR« » server
display storage
processing

browser server

{
navigation
search
main content
browser log on form
shopping cart
footer

navigation
search
main content
browser XHR log on form
shopping cart
footer

paradox?

paradox?
plan for Ajax from the start

paradox?
plan for Ajax from the start
implement Ajax at the end

pattern recognition

pattern recognition
sign up

pattern recognition
sign up
add to cart

pattern recognition
sign up
rate this add to cart

pattern recognition
sign upadd a comment
rate this add to cart

pattern recognition
sign upadd a comment
rate this add to cart
search results?

pattern recognition
sign upadd a comment
rate this add to cart
search results?
pagination?

feedback

feedback
what is happening?

feedback
what is happening?
what just happened?

conventions

conventions
status indicators

conventions
status indicators
yellow fade

conventions
status indicators
yellow fade
drag’n’drop

beyond the browser

beyond the browser
the back button

beyond the browser
the back button
bookmarking

user testing

adactio.com
http://flickr.com/photos/julianbleecker/3867804/
http://flickr.com/photos/ferricide/501816333/
http://flickr.com/photos/mollyeh11/13664426/
http://flickr.com/photos/chuckbiscuito/161971512/

thank you
adactio.com
http://flickr.com/photos/julianbleecker/3867804/
http://flickr.com/photos/ferricide/501816333/
http://flickr.com/photos/mollyeh11/13664426/
http://flickr.com/photos/chuckbiscuito/161971512/