Your SlideShare is downloading. ×
Ajax: User Experience
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Ajax: User Experience

1,795
views

Published on

Published in: Business, Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,795
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
61
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. by Georgi Petrov CSSU 11/14/2007
  • 2. What you are going to see
    • What is UX and Ajax?
    • Introduction to Ajax
    • Ajax in the real world
    • Usability issues with Ajax
    • Workarounds to them
    • Design Principles
    • Better experience based on Ajax patterns
  • 3. 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 perception
    • UX in following the Ajax architecture.
    “ They're not love handles, just a Rounded Corners Extender.” 
  • 4. Some UX Goals
    • Rewarding
    • Enjoyable
    • Entertaining
    • Helpful
    • Motivating
    • Fun
    What content should we put on the presentation layer?
  • 5. What is Ajax ?
    • A - Asynchronous
    • J - JavaScript
    • A - And
    • X – XML
    • Great marketing tool
    • XMLHttpRequest Object
    • A way of bringing software-like usability to the web
    • Rather technique or architecture than technology
  • 6. A little history
    • Java Applets
    • Action with DHTML
    • Then 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.
  • 7. Traditional vs. Ajax Model
    • Postback
    • Callback
  • 8. Show me Ajax
    • Simple Ajax implementations on backend of PHP and Python
    • Comparison with codeless MS AJAX on ASP.NET
    • Let’s see the demo 
  • 9. Ajax in the real world
    • Submission Forms
    • Malleable Content
    • Sliders and Other Controls
    • Draggable Content
    • Suggestions
    • Live Examples:
    • Gmail, Google Suggest, Google Maps
  • 10. Google Ajaxified
    • Why 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. ”
  • 11. Ajax Usability
    • Ajax can be usable enough, but its root logic is not
    • Ajax relies on JavaScript which is not very accessible by origin
    • IE: http= new ActiveXObject("Microsoft.XMLHTTP");
    • Mozilla, Opera, Safari: http=new XMLHttpRequest();
  • 12. Ajax issues concerning usability
    • Breaks back button support
    • URL's don't change as state changes
    • Cross Browser Issues can be a pain
    • Too much code makes the browser slow
    • “ Don’t make me wait for Ajax”
  • 13. 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?
  • 14. Cross Browser AJAX var 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(""); } }
  • 15. Frameworks and Toolkits
    • MS AJAX
    • Telerik RadAjax
    • ASP.NET AJAX Control Toolkit
    • Dojo Toolkit
  • 16. Recap
    • What is UX and Ajax?
    • Introduction to Ajax
    • Ajax in the real world
    • Usability issues with Ajax
    • Workarounds to them
    • Design Principles
    • Better experience based on Ajax patterns
  • 17. Design Principles
    • Minimize 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 .
  • 18. Ajax Patterns for better UX
    • Display Patterns
    • Interaction Patterns
    • Coding Patterns
    • Architectural Patterns
  • 19. Display Patterns
    • Rich 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 Status Synchronization status is important when we have continuous client-server interaction. Example: Telerik RadUpload
    • Embedded Text Embedding text in Ajax response is good for search engine robots and for enabling Cut-and-Paste user functionality. Example: Google Maps address balloon
  • 20. Interaction Patterns
    • Drag-and-drop
    • Popup data input
    • Highlighting
    • Live validation
    • Auto-Completion
  • 21. Coding Patterns
    • Browser-Agnostic Components Create cross-browser components, allowing programmers to reuse them without regard for browser compatibility.
    • Server-side code generation Use a server-side framework to generate the HTML and associated JavaScript.
  • 22. Architectural Patterns
    • Local Event-Handling
    • Local Cache
    • Predictive Download
    • Periodic Refresh
    • Distinct URLs
  • 23. Sources
    • http://ajaxpatterns.org
    • http://www.telerik.com/products/ajax/history-of-ajax.aspx
    • http://alexbosworth.backpackit.com/pub/67688
    • http://ajaxian.com/by/topic/usability/
    • http://en.wikipedia.org/wiki/Ajax_(programming)
  • 24. Thank You
    • Q & A