Your SlideShare is downloading. ×
What do AJAX and Web 2.0  Really Mean for IAs? David Heller www.synapticburn.com March 2006 IA Summit 2006 Vancouver, Brit...
Buzz, Hype - So What?
How we got here - Web 1.0 <ul><li>Publishing </li></ul><ul><li>Transacting </li></ul><ul><li>Communicating </li></ul><ul><...
What is Web 2.0?
And then there is this …
What’s the biggest deal(s)? <ul><li>Primary </li></ul><ul><li>Letting it go free </li></ul><ul><ul><li>Access to content a...
Patterns of Web 2.0 <ul><li>Spaces for collaboration </li></ul><ul><ul><li>Rate </li></ul></ul><ul><ul><li>Review </li></u...
Defining AJAX <ul><li>Uses technology from the 90’s </li></ul><ul><li>Actually Microsoft DID do something constructive </l...
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 <ul><li>Prototyping vs. Documenting </li></ul><ul><li>New patterns for people designing for the web </li...
Changing the Magic <ul><li>Our primary job is to do what? </li></ul><ul><li>Design </li></ul><ul><li>Validate </li></ul><u...
What happen to our precious page? “ There is no [page].” - Neo “ There is no page; only pathways” -- Emily Chang & Max Kie...
The old page - Orbitz
The new page - Paguna
Wireframes aren’t enough <ul><li>Time is now our driving axis </li></ul><ul><ul><li>Needs to be explored like other parame...
Should everything be a desktop app? <ul><li>What is a desktop application? </li></ul><ul><ul><li>Responsive </li></ul></ul...
AJAX Interaction Patterns <ul><li>Inline editing </li></ul><ul><li>Data set manipulation </li></ul><ul><li>In line/in cont...
Examples from the public Internet <ul><li>AJAX Examples </li></ul><ul><li>Yahoo Maps </li></ul><ul><li>Wufoo </li></ul><ul...
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 <ul><li>I will review examples of … </li></ul><ul><li>Incorporating both AJAX and other Web 2.0 func...
Issues with AJAX & Web2.0 <ul><li>Accessibility </li></ul><ul><li>Too open? </li></ul><ul><ul><li>Abuse through all kinds ...
Rules of Design Engagement <ul><li>Outline your story or choreograph your dance </li></ul><ul><ul><li>Interaction is indee...
Some take home advice <ul><li>Don’t require a submit button for single field forms </li></ul><ul><li>Be careful of too muc...
Resources <ul><li>Ajaxian.com Great mix of technical insights and survey of examples mix of contributors </li></ul><ul><li...
Thanx … questions?  David Heller http://synapticburn.com/
Upcoming SlideShare
Loading in...5
×

Web 2.0 for IA's

3,355

Published on

A presentation teaching IA's why they should care about emerging trends known as Web 2.0

Published in: Technology
1 Comment
10 Likes
Statistics
Notes
  • Great demonstration about the need to innovate business models; how you can represent them succinctly; together with the need to make innovation initiatives actionable. Excellent use of photos and obvious to see illustrative samples.
    Sharika
    http://winkhealth.com http://financewink.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,355
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide
  • Transcript of "Web 2.0 for IA's"

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

    ×