Web 2.0 for IA's
10 likes1,653 views
This document summarizes AJAX and Web 2.0 technologies and their implications for information architects (IAs). It discusses how these technologies have changed web design from static pages to more interactive experiences, allowing for real-time updates, social features, and mashups. The document provides examples of early AJAX and Web 2.0 sites and offers advice for designers to embrace new interaction patterns while ensuring accessibility, security, and performance.
![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](https://image.slidesharecdn.com/web-20-for-ias-9653/85/Web-2-0-for-IA-s-15-320.jpg)
Web 2.0 for IA's
- 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. 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?
- 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 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
- 9. Just for Fun - Comet Alex Russell’s - Coment: Low Latency Data for Browsers - alex.dojotoolkit.org
- 10. Historical Context thin thick mainframe Client-server Web 1.0 RIA
- 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 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
- 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 - email+mashing API’s
- 28. Zimbra email w/ Desktop Interactions
- 29. Frappr.com - Social Mashing
- 31. Shadow Pages
- 32. Shadow pages
- 33. Shadow Pages - creating one
- 34. 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
- 35. 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?
- 36. 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
- 37. 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!
- 38. 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!
- 39. Thanx … questions? David Heller http://synapticburn.com/