Download - Ajax: User Experience
![Page 1: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/1.jpg)
by Georgi PetrovCSSU 11/14/2007
![Page 2: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/2.jpg)
What you are going to seeWhat is UX and Ajax?Introduction to AjaxAjax in the real worldUsability issues with AjaxWorkarounds to themDesign PrinciplesBetter experience based on Ajax patterns
![Page 3: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/3.jpg)
What is User Experience?
“User experience, often abbreviated UX, is a term used to describe the overall experience and satisfaction a user has when using a product or system.”
User perceptionUX in following the Ajax architecture.
“They're not love handles, just a Rounded Corners Extender.”
![Page 4: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/4.jpg)
Some UX GoalsRewardingEnjoyableEntertainingHelpfulMotivatingFun
What content should we put on the presentation layer?
![Page 5: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/5.jpg)
What is Ajax ?A - AsynchronousJ - JavaScriptA - AndX – XML
Great marketing toolXMLHttpRequest ObjectA way of bringing software-like usability to the
webRather technique or architecture than technology
![Page 6: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/6.jpg)
A little historyJava AppletsAction with DHTMLThen emerged AJAX, new as acronym, not so
new as conception
Available ever since Internet Explorer 5.5 was released in July 2000, but not fully discovered before people started to talk about AJAX and Web 2.0 in 2005.
![Page 7: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/7.jpg)
Traditional vs. Ajax ModelPostbackCallback
![Page 8: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/8.jpg)
Show me AjaxSimple Ajax implementations on backend of
PHP and PythonComparison with codeless MS AJAX on
ASP.NETLet’s see the demo
![Page 9: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/9.jpg)
Ajax in the real worldSubmission FormsMalleable Content Sliders and Other Controls Draggable Content Suggestions
Live Examples:Gmail, Google Suggest, Google Maps
![Page 10: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/10.jpg)
Google AjaxifiedWhy Google.com is not ajaxified at all?
Performance concerns?Security issues?Poor programmers?
We can find part of the answer at Gmail:
“Basic HTML view lets you access your Gmail messages from almost any computer running almost any web browser, even old ones (not
just IE5.5+, Mozilla, and Safari). Especially great for traveling, since you never know what kind of browser that internet cafe in
Siberia is going to have.”
![Page 11: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/11.jpg)
Ajax Usability Ajax can be usable enough, but its root logic
is notAjax relies on JavaScript which is not very
accessible by origin
IE: http= new ActiveXObject("Microsoft.XMLHTTP");
Mozilla, Opera, Safari: http=new XMLHttpRequest();
![Page 12: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/12.jpg)
Ajax issues concerning usabilityBreaks back button supportURL's don't change as state changesCross Browser Issues can be a painToo much code makes the browser slow“Don’t make me wait for Ajax”
![Page 13: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/13.jpg)
Looking for workarounds…Back button workaround
- IFrame solution ?Problems with URL
- mod_rewrite or IISRewrite(e.g. http://me.com/article/110)- ajaxified headers and dynamic location
Cross-browser issues, showcase on next page
Any other suggestions for workaround?
![Page 14: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/14.jpg)
Cross Browser AJAXvar req;function loadXMLDoc(url) {
req = false; // branch for native XMLHttpRequest object if(window.XMLHttpRequest) { try {
req = new XMLHttpRequest(); } catch(e) {
req = false; } // branch for IE/Windows ActiveX version } else if(window.ActiveXObject) { try { req = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { req = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { req = false; }
} }
if(req) {req.onreadystatechange = processReqChange;req.open("GET", url, true);req.send("");
}}
![Page 15: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/15.jpg)
Frameworks and ToolkitsMS AJAXTelerik RadAjaxASP.NET AJAX Control ToolkitDojo Toolkit
![Page 16: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/16.jpg)
RecapWhat is UX and Ajax?Introduction to AjaxAjax in the real worldUsability issues with AjaxWorkarounds to themDesign PrinciplesBetter experience based on Ajax patterns
![Page 17: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/17.jpg)
Design PrinciplesMinimize traffic between browser and server so that
the user feels the application is responsive.Be clear on the interaction mode being used - regular
HTML, AJAX or desktop application so that the user can predict what will happen next .. no surprises.
While avoiding confusion, borrow from conventions of HTML and desktop applications so that the user can rapidly learn how to use your application.
Avoid distractions such as pointless animations so that the user can focus on the task at hand.
Stick with AJAX wherever possible - just say no to entire page downloads so that the user’s experience is consistent.
Adopt AJAX for usability, so that the user is engaged, and not immediately driven away by your nod to website splash screens, <blink tags>, popup ads, and other usability disasters of websites .
![Page 18: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/18.jpg)
Ajax Patterns for better UXDisplay PatternsInteraction Patterns Coding PatternsArchitectural Patterns
![Page 19: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/19.jpg)
Display PatternsRich CSS
We need our interface to be colorful and rich, but we should minimize the download time of images. Then we can reveal the real power of CSS and to use its capabilities.
Synchronization StatusSynchronization status is important when we have continuous client-server interaction. Example: Telerik RadUpload
Embedded TextEmbedding text in Ajax response is good for search engine robots and for enabling Cut-and-Paste user functionality.Example: Google Maps address balloon
![Page 20: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/20.jpg)
Interaction Patterns
Drag-and-dropPopup data inputHighlightingLive validationAuto-Completion
![Page 21: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/21.jpg)
Coding PatternsBrowser-Agnostic Components
Create cross-browser components, allowing programmers to reuse them without regard for browser compatibility.
Server-side code generationUse a server-side framework to generate the HTML and associated JavaScript.
![Page 22: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/22.jpg)
Architectural Patterns
Local Event-HandlingLocal Cache Predictive DownloadPeriodic RefreshDistinct URLs
![Page 23: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/23.jpg)
Sourceshttp://ajaxpatterns.orghttp://www.telerik.com/products/ajax/history-
of-ajax.aspxhttp://alexbosworth.backpackit.com/pub/
67688http://ajaxian.com/by/topic/usability/http://en.wikipedia.org/wiki/
Ajax_(programming)
![Page 24: Ajax: User Experience](https://reader036.vdocuments.site/reader036/viewer/2022081518/54c7cdcf4a7959ff238b4666/html5/thumbnails/24.jpg)
Thank You
Q & A