When to use Ajax


Published on

When should website incorporate rich interactivity? When should they use Ajax to support that rich interactivity. Presentation from AJAXWorld East 2008.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Joanne: Team introductions Purpose of meeting: Provide project read-out. Gain sponsor buy-in on recommendations – so team can proceed with developing details around recommendations. .
  • When to use Ajax

    1. 1. Ajax Applicability: When Should Ajax Be Used? Mike Padilla User Experience Manager @ Vanguard AJAXWorld East March 18, 2008
    2. 2. Using Ajax Appropriately Designer/Developer User HTML = crayons Ajax = markers
    3. 3. Using Ajax (In)Appropriately HTML Ajax Done with crayons Done with markers Ajax Done with markers GOOD BETTER BAD
    4. 4. What do we mean by Ajax? <ul><li>Lots of acronyms… </li></ul><ul><ul><li>Ajax, RIA, SPI, etc. </li></ul></ul><ul><li>One core concept </li></ul><ul><ul><li>Rich interactivity : the ability to manipulate the UI in real-time and update content in context (page refresh not required) </li></ul></ul>
    5. 5. When Should Ajax Be Used <ul><li>From the design side </li></ul><ul><ul><li>When rich interactivity is warranted and… </li></ul></ul><ul><li>From the development side </li></ul><ul><ul><li>When it is the best technology that supports the rich interactivity </li></ul></ul>
    6. 6. Prescribing Rich Interactivity - Overview
    7. 7. <ul><li>Design </li></ul><ul><li>Specifying Rich Interactivity </li></ul>
    8. 8. What does rich interactivity afford the user experience? <ul><li>Control </li></ul><ul><ul><li>The ability to manipulate the UI in real-time </li></ul></ul><ul><li>Context </li></ul><ul><ul><li>The ability to update content in context of existing content </li></ul></ul>
    9. 9. Rich interactivity – the latest technique in the designers tool box <ul><li>Original Web “1.0” techniques gave us 2D, linked pages </li></ul><ul><ul><li>Information architecture </li></ul></ul><ul><ul><li>Information design </li></ul></ul><ul><ul><li>Visual design </li></ul></ul><ul><li>Web “2.0” techniques gave us movement and discrete cause/effect </li></ul><ul><ul><li>Rich interactivity </li></ul></ul>
    10. 10. Static Design vs. Rich Interactivity <ul><li>Data Table </li></ul>Accordion
    11. 11. Static Design vs. Rich Interactivity <ul><li>Data Table </li></ul><ul><ul><li>Pros </li></ul></ul><ul><ul><ul><li>All data viewed together </li></ul></ul></ul><ul><ul><ul><li>Easy to use </li></ul></ul></ul><ul><ul><li>Cons </li></ul></ul><ul><ul><ul><li>Takes up valuable screen space </li></ul></ul></ul><ul><li>Accordion </li></ul><ul><ul><li>Pros </li></ul></ul><ul><ul><ul><li>Saves space </li></ul></ul></ul><ul><ul><ul><li>Engaging </li></ul></ul></ul><ul><ul><li>Cons </li></ul></ul><ul><ul><ul><li>Learn behaviors </li></ul></ul></ul><ul><ul><ul><li>Hidden content </li></ul></ul></ul>
    12. 12. A Word of Caution <ul><li>Prescribe rich interactivity judiciously </li></ul><ul><ul><li>Basic is simple </li></ul></ul><ul><ul><li>Complex may be enabling, but it can also be confusing. </li></ul></ul><ul><ul><li>Web “1.0” is great for what it was originally designed for: retrieving information from linked documents </li></ul></ul><ul><li>Jacob Nielsen: “There's no doubt that the pageview model of interaction provides a scaled-back UI. But this also means that it's a simple UI. When all they can do is click a link to get a new page, users know how to operate the UI . People are in control of their own user experience and thus focus on your content.” </li></ul>
    13. 13. Let’s Get Rich <ul><li>Rich interactivity is empowering when used where it is needed. </li></ul><ul><ul><li>Control </li></ul></ul><ul><ul><ul><li>Full applications need full UIs. </li></ul></ul></ul><ul><ul><ul><li>More variety of UI controls usually need more control (drag, drop, select, highlight, indicate edit, remove, etc.) </li></ul></ul></ul><ul><ul><ul><li>Imagine Photoshop on the Web </li></ul></ul></ul><ul><ul><li>Context </li></ul></ul><ul><ul><ul><li>What you’re viewing is more easily understood in relation to other content available on demand. </li></ul></ul></ul>
    14. 14. Rules of Thumb <ul><li>Control </li></ul><ul><ul><li>What type of actions does the website/app provide? More than just “get page”? </li></ul></ul><ul><ul><li>Is the website/app more like a program that you would install or is it more like a book? </li></ul></ul><ul><li>Context </li></ul><ul><ul><li>What percentages of pixels are changing on the screen as a result of an interaction? </li></ul></ul><ul><ul><li>What is the communication ratio between the user and the system? </li></ul></ul><ul><ul><li>Is the experience more of a continuous function or a step function? </li></ul></ul>
    15. 15. Well Prescribed Rich Interactivity <ul><li>Twitter </li></ul><ul><li>Google Maps </li></ul><ul><li>Gmail </li></ul><ul><li>Rich interactivity is transparent when done well. </li></ul>
    16. 16. Development Considerations for Ajax <ul><li>Now we know about specifying rich interactivity </li></ul><ul><li>Let’s look into the technologies that implement rich interactivity </li></ul>
    17. 17. Prescribing Rich Interactivity - Overview
    18. 18. <ul><li>Development </li></ul><ul><li>Implementing Rich Interactivity </li></ul>
    19. 19. What is Ajax? <ul><li>Ajax: Asynchronous JavaScript and XML </li></ul><ul><li>Breakdown: </li></ul><ul><ul><li>HTML (“static” pages) </li></ul></ul><ul><ul><li>HTML + JS + CSS = DHTML (control) </li></ul></ul><ul><ul><li>DHTML + XMLHttpRequest(XHR) = Ajax (control & context) </li></ul></ul><ul><li>Ajax loading techniques </li></ul><ul><ul><li>On demand, pre-fetching, facades </li></ul></ul><ul><li>Other rich technologies </li></ul><ul><ul><li>Flash, Silverlight, Applets, etc. </li></ul></ul>
    20. 20. User Benefits and Drawbacks of Ajax <ul><li>User Benefits </li></ul><ul><ul><li>Rich interactivity </li></ul></ul><ul><ul><li>No plug-in required </li></ul></ul><ul><li>User Drawbacks </li></ul><ul><ul><li>Loss of page state, the fundamental unit of the Web </li></ul></ul><ul><ul><ul><li>Back, forward, bookmarks, URL sharing </li></ul></ul></ul><ul><ul><li>Loss of caching </li></ul></ul><ul><ul><li>Loss of search engine visibility </li></ul></ul><ul><ul><li>Accessibility </li></ul></ul><ul><ul><ul><li>Screen readers, fine motor skills </li></ul></ul></ul><ul><ul><li>Metrics </li></ul></ul>
    21. 21. Evaluating the Use of Ajax <ul><li>From the design perspective </li></ul><ul><ul><li>Do the user benefits of the rich interaction outweigh the user drawbacks of the Ajax implementation? </li></ul></ul><ul><li>From the development perspective </li></ul><ul><ul><li>Do the user benefits of the rich interaction outweigh any resulting additional development complexity? </li></ul></ul><ul><ul><ul><li>Coding, QA, maintenance, compatibility = time & money </li></ul></ul></ul>
    22. 22. Designer Meet Developer <ul><li>With DHTML and more so Ajax, the user experience design and technical implementation are no longer isolated </li></ul><ul><ul><li>The user experience of “static” HTML websites were not affected by the technology that produced them: hand over the design flat </li></ul></ul><ul><ul><ul><li>.NET, Java, PHP, etc. </li></ul></ul></ul><ul><ul><li>With rich interactivity, the user experience design drives what technology to use and the technology used impacts the user experience. </li></ul></ul><ul><ul><ul><li>Example: Tabset with page refresh vs. Ajax </li></ul></ul></ul>
    23. 23. Use Ajax to be nice to your users