Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Using Ajax to improve your user experience at Web Directions South 2009

AJAX is changing the way that users interact with websites - it has the potential to provide richer and more interactive online user experiences but also introduces its own set of usability and accessibility problems. This session presents views from leading usability experts from around the world from an experienced practitioner workshop conducted at the Usability Professionals Conference in USA.

We will also discuss key usability issues we have unveiled through our own usability testing of a range of websites using AJAX over the last 2 years. The session highlights some of the pitfalls and user frustrations with AJAX as well as how AJAX can be used to enhance the user experience. We will present usability and accessibility issues and common user behaviours with AJAX applications.

Finally we discuss interaction design guidelines for developing user friendly AJAX designs.

  • Login to see the comments

Using Ajax to improve your user experience at Web Directions South 2009

  1. 1. Using AJAX to enhance your online user experience Web 2.0 Conference Presenter - Tania Lang 8 th October 2009 Improving user performance
  2. 2. Who am I to talk about AJAX? <ul><li>Attended Experienced Practitioner 1 day workshop on AJAX at UPA Conference in Austin 2007 </li></ul><ul><li>Conducted extensive usability testing of websites and forms, many of which include AJAX for a range of clients: </li></ul>
  3. 3. What is AJAX? AJAX: Asynchronous JavaScript and XML … exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time.” Wikipedia <ul><li>Source: Jesse James Garrett </li></ul>
  4. 4. Does AJAX provide a performance gain? … no need to wait for pages to refresh It can improve efficiency and save users time…
  5. 7. User engagement <ul><li>… Slider bars, drag and drop, zoom in/out functions </li></ul><ul><li>AJAX can provide richer interactions on the web without the need to download plug-ins… </li></ul>
  6. 9. Using AJAX to apply heuristics and interaction design principles
  7. 10. <ul><li>Use of standards and conventions minimises learning time… </li></ul>Consistency & standards … use AJAX to replicate desktop applications and behaviour
  8. 12. <ul><li>It may be necessary to provide help and documentation. </li></ul>Help and user support … Use AJAX to provide inline help, support, instructions and additional information when needed Instructions for use of the system should be visible or easily retrievable Recognition rather than recall
  9. 14. Visibility of system status <ul><li>The system should always keep users informed about what is going on, through appropriate feedback within reasonable time… </li></ul>… Use AJAX to provide immediate feedback for user actions Photo by Flickr user Criterion CC
  10. 17. <ul><li>Hide or don’t request information that does not apply to the majority of users… </li></ul>Aesthetic and minimalist design … use AJAX and progressive disclosure to show or request information relevant to the user Photo by Flickr user John Morton CC
  11. 19. Progressive disclosure example - PBS
  12. 20. ... use AJAX to allow users to add their own filters to sift out information not relevant to them
  13. 22. Help users recognize, diagnose, and recover from errors… … use AJAX to do server-side validation as users type into the form and provide error messages as soon as they occur
  14. 24. Example Budget Direct <ul><ul><li> </li></ul></ul>
  15. 25. But AJAX is not all roses
  17. 27. Technical issues <ul><li>May break the Back button </li></ul><ul><li>Requires more from developers </li></ul><ul><li>Testing Ajax </li></ul><ul><li>Too much JavaScript makes the browser slow and increases initial page download time </li></ul>
  18. 28. Search engine I don’t like AJAX Can affect search engine optimisation as search engines can’t find dynamically generated content
  19. 29. AJAX sites may break users’ mental models
  20. 31. Accessibility issues <ul><li>Requires more from the client than traditional forms </li></ul><ul><ul><li>JavaScript has to be enabled </li></ul></ul><ul><ul><li>Browser has to support XMLHttpRequest object </li></ul></ul><ul><li>Vision impaired users tend to read in a linear fashion – likely to miss small changes within the page </li></ul><ul><li>Are not able to access dynamic web content e.g. instant error messages </li></ul><ul><li>Rich Internet Application controls, such as menu and toolbar fail to convey important information to assistive technologies, such as state of the control </li></ul><ul><li>Keyboard users find it difficult to interact with RIA controls, such as drag-n-drop controls </li></ul><ul><li>Source: Barrier Break Technologies </li></ul>
  21. 32. Common User Behaviour Observed during usability test sessions
  22. 33. Common User Behaviour <ul><li>#1 - Users don’t always expect to apply their knowledge of desktop and windows application behaviour to a website e.g. drag and drop </li></ul>
  23. 35. #2 - Use of AJAX sites raises user expectations <ul><li>Use of popular sites using AJAX e.g. Facebook, Google maps raises expectations about how a site should behave </li></ul>Photo by Flickr user Jrsquee CC
  24. 36. [after unsuccessfully trying to click and drag the map to reposition it] “ I thought it would work like Google maps?” Indicative quote
  25. 37. Imagine you are going on a holiday and need travel insurance
  26. 39. <ul><li>#3 - Users often don’t notice changes in state </li></ul>[after waiting several seconds and the page changing state] “ Is something happening?” [after changing an option and not noticing the total price change…] “ I guess that may affect the price?”
  27. 40. Visual acuity plays a big part… <ul><ul><li>Visual acuity is approximately halved at 2.5 degrees from the point of eye fixation </li></ul></ul><ul><ul><li>Recommend a 5 degree diameter circle around an eye fixation point </li></ul></ul><ul><ul><li>Average viewing distance from a screen = 47.5cm </li></ul></ul><ul><ul><li>The size of the area on the screen of optimal visual acuity is 4.18cm </li></ul></ul><ul><ul><li>Source: Galitzm, W. (2002). The Essential Guide to User Interface Design John Wiley pp.68-69 </li></ul></ul>… the capacity of the eye to discriminate fine detail
  28. 41. 8 cm
  29. 42. iPhone screenshot <ul><li>Zoomed in view of quote function… </li></ul>… What do I do now?
  30. 43. #4 - When completing forms, users often jump ahead to the next field… … as they are not expecting another field to appear Photo by Flickr user tumsdebab CC
  31. 44. [after receiving several error messages and missing fields that had dynamically appeared] “ I can’t believe I missed all of these fields. I must have scrolled down or something?” Listen to what one user had to say…
  32. 45. #5 – Users don’t like to wait… = … especially after each field input … please wait
  33. 46. [after a progress indicator appeared for a couple of seconds after each field entry…] “ Now I am ready to choke it… … they’re not serious are they?... … this doesn’t go on through the whole thing?” Listen to what other users had to say…
  34. 47. Implementation guidelines Overcoming some of these problems
  35. 48. AJAX – Implementation guidelines <ul><li>Know your users and their technologies </li></ul><ul><li>Around 5% of users don’t have JavaScript (Jan 08, W3C) </li></ul><ul><li>Detect JavaScript automatically and provide non-AJAX versions where feasible OR </li></ul><ul><li>Ensure the application will still function without JavaScript </li></ul><ul><ul><li>e.g. Yahoo Mail on PDA (2007) </li></ul></ul>
  36. 49. Yes, Ajax can be made Accessible? <ul><ul><li>Design Accessible Ajax by implementing W3C’s “ WAI-ARIA “specification . </li></ul></ul>WAI-ARIA defines the techniques to make dynamic web content and web applications accessible to people with disabilities
  37. 50. Yes, Ajax can be made Accessible? <ul><li>Allow dynamic interface changes to be accessible </li></ul><ul><li>Alert the user that a change in state has occurred - identify regions that dynamically change as a live region </li></ul><ul><li>Allow direct access to the updated content </li></ul><ul><ul><li>Maintaining accessibility of content that is dynamic and may change within the page (e.g., AJAX content updates) </li></ul></ul><ul><li>Providing the semantic structure of page areas and functionality (e.g., navigation, main content, search, etc.) </li></ul><ul><li>Allowing certain non-focusable page elements to receive keyboard focus through the tabindex property </li></ul><ul><ul><li>(e.g. setting focus to an error message within the page) </li></ul></ul><ul><li>Providing keyboard and screen reader accessibility with complex widgets and navigation elements </li></ul><ul><ul><li>(e.g., sliders, drag-and-drop etc.) </li></ul></ul><ul><li>Source: Barrier Break Technologies </li></ul>
  38. 51. How can ARIA help? <ul><ul><li>Roles help to convey the information about the type of control </li></ul></ul><ul><ul><ul><li>e.g. slider, menu, toolbar </li></ul></ul></ul><ul><ul><li>Roles to define the web page structure </li></ul></ul><ul><ul><ul><li>e.g. banner, navigation, main content </li></ul></ul></ul><ul><ul><li>State helps to convey the information about the current control state </li></ul></ul><ul><ul><ul><li>e.g. “checked” for a check box, “haspopup” for a menu </li></ul></ul></ul><ul><ul><li>Properties help to define the live regions for presenting dynamically updating page information </li></ul></ul><ul><ul><ul><li>e.g., stock prices, weather updates, form error messages </li></ul></ul></ul><ul><ul><li>Drag-and-drop properties that help to convey the drag sources and drop targets </li></ul></ul><ul><ul><li>Techniques for providing keyboard navigation for different RIA user interface controls </li></ul></ul><ul><ul><li>Source: Barrier Break Technologies </li></ul></ul>
  39. 52. Accessible AJAX/RIA requirements <ul><li>Use techniques proposed by W3c’s WAI-ARIA suite </li></ul><ul><li>Web browsers with ARIA support </li></ul><ul><li>Assistive technologies, such as screen readers and screen magnifiers with ARIA support </li></ul><ul><li>Testing with different Assistive technology user groups for effective implementation </li></ul><ul><ul><li>Source: Barrier Break Technologies </li></ul></ul>
  40. 53. Challenges/Issues in implementing ARIA <ul><li>ARIA is a draft document and not yet stable </li></ul><ul><li>Limited support of ARIA Roles, States and Properties in User Agents including browsers and assistive technologies </li></ul><ul><li>Requires JavaScript to be turned on </li></ul><ul><li>Requires latest browsers and assistive technologies </li></ul><ul><li>Assistive technology users are not aware about the dynamic functionality and means to access it </li></ul>
  41. 54. AJAX – Implementation guidelines <ul><li>Provide a mechanism to allow users to save AJAX pages in their revised state </li></ul><ul><ul><li>‘ save’ feature </li></ul></ul><ul><ul><li>unique URL </li></ul></ul><ul><ul><li>Sears URL after applying filters -|Bosch|Frigidaire^Color+Family|Black^Price|0-600&lastFilter=Price2 </li></ul></ul>
  42. 55. AJAX – Implementation guidelines Ensure Browser buttons work how users expect e.g. Back button… … The Back button is fixable but must be remembered in the design
  43. 56. AJAX – Implementation guidelines Provide users with clear and visible feedback for every user action… … Use spotlight transition (“Yellow Fade Technique”) to show subtle changes in the page state then fade it out within a second
  44. 58. AJAX – Implementation guidelines <ul><li>Visual acuity – ensure change in state is close to where users are likely to be looking </li></ul>Source: <ul><li>Apply Gestalt principle of proximity - Users will associate elements in close proximity to each other </li></ul>Source:
  45. 59. How could you improve this page?
  46. 60. AJAX – Implementation guidelines Ask if AJAX is appropriate for each page. <ul><li>if major changes to a significant portion of the page </li></ul><ul><li>if the content you are planning to dynamically generate needs to be found by a search engine </li></ul><ul><li>don’t use if users likely to expect a new page e.g. secure credit card details page </li></ul><ul><li>you can’t make it fast and seamless </li></ul><ul><li>if there is no performance gain for the user </li></ul>Don’t use:
  47. 61. AJAX – Implementation guidelines Don’t eliminate acceptance (Forgiveness principle)… … allow users to explore, edit and add info, without committing to the change and return to the original state Photo by Flickr user Kevin Dooley CC
  48. 62. AJAX – Implementation guidelines Make it fast! Minimise traffic between browser and server so that the user feels the application is responsive… ...Don’t make the user wait longer for AJAX - responsiveness is generally more important to user experience than benefits of AJAX
  49. 63. AJAX – Implementation guidelines <ul><li>Don’t use AJAX to cram more stuff on a page and create large overwhelming forms... </li></ul><ul><li>… sometimes items should be chunked over separate pages </li></ul>
  50. 64. AJAX – Resources <ul><li>Yahoo and Google toolkit devs </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul>
  51. 65. Remember ‘AJAX is a tool not a toy’
  52. 66. If there is no performance gain for the user, don’t risk the side effects of AJAX!
  53. 67. Questions? <ul><li>Tania Lang </li></ul><ul><li>[email_address] </li></ul><ul><li>07 3839 9593 </li></ul><ul><li>@peakusability </li></ul><ul><li>@tanialang </li></ul><ul><li>Sign up for our usability newsletter at: </li></ul><ul><li> </li></ul>