When to use Ajax

Slide 1: Ajax Applicability: When Should Ajax Be Used? Mike Padilla User Experience Manager @ Vanguard AJAXWorld East March 18, 2008

Slide 2: Using Ajax Appropriately Designer/Developer User HTML = crayons Ajax = markers >2

Slide 3: Using Ajax (In)Appropriately HTML Ajax Ajax D E R O T D A Done with crayons Done with markers Done with markers O E T B G B >3

Slide 4: 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) >4

Slide 5: 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 >5

Slide 6: Prescribing Rich Interactivity - Overview RACI Specification Responsible: Design Accountable: Design Does the Consulted: Dev interaction call Informed: Dev No for rich interactivity? Yes Do rich Non RIA interactivity No design pros outweigh the cons Yes Yes RACI Implementation Responsible: Dev Which Accountable: Dev technology? Consulted: Design DHTML, Informed: Design Ajax, Flash, etc. Does rich interactivity Reassess introduce inordinate Yes design complexity (increased options time, cost, maintenance) No Develop design as specified >6

Slide 7: Design Specifying Rich Interactivity >7

Slide 8: 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 >8

Slide 9: Rich interactivity – the latest technique in the designers tool box Home • Original Web “1.0” techniques gave us 2D, linked pages – Information architecture – Information design Page 1 Page 3 Page 3 – Visual design • Web “2.0” techniques gave us movement and discrete cause/effect – Rich interactivity >9

Slide 10: Static Design vs. Rich Interactivity Data Table Accordion > 10

Slide 11: Static Design vs. Rich Interactivity • Data Table • Accordion – Pros – Pros – All data viewed together – Saves space – Easy to use – Engaging – Cons – Cons – Takes up valuable – Learn behaviors screen space – Hidden content > 11

Slide 12: 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.” > 12

Slide 13: 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. > 13

Slide 14: 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? > 14

Slide 15: Well Prescribed Rich Interactivity • Twitter • Google Maps • Gmail • Rich interactivity is transparent when done well. > 15

Slide 16: Development Considerations for Ajax • Now we know about specifying rich interactivity • Let’s look into the technologies that implement rich interactivity > 16

Slide 17: Prescribing Rich Interactivity - Overview RACI Specification Responsible: Design Accountable: Design Does the Consulted: Dev interaction call Informed: Dev No for rich interactivity? Yes Do rich Non RIA interactivity No design pros outweigh the cons Yes Yes RACI Implementation Responsible: Dev Which Accountable: Dev technology? Consulted: Design DHTML, Informed: Design Ajax, Flash, etc. Does rich interactivity Reassess introduce inordinate Yes design complexity (increased options time, cost, maintenance) No Develop design as specified > 17

Slide 18: Development Implementing Rich Interactivity > 18

Slide 19: 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. > 19

Slide 20: 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 > 20

Slide 21: 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 > 21

Slide 22: 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 > 22

Slide 23: Use Ajax to be nice to your users > 23