• Save
When to use Ajax
Upcoming SlideShare
Loading in...5
×
 

When to use Ajax

on

  • 1,917 views

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

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

Statistics

Views

Total Views
1,917
Views on SlideShare
1,917
Embed Views
0

Actions

Likes
1
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 When to use Ajax Presentation Transcript

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