Using Ajax to improve your user experience at Web Directions South 2009
•
5 likes•2,060 views
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.
![Who am I to talk about AJAX? ,[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
Viewers also liked
Viewers also liked (10)
Similar to Using Ajax to improve your user experience at Web Directions South 2009
Similar to Using Ajax to improve your user experience at Web Directions South 2009 (20)
Recently uploaded
Recently uploaded (20)
Using Ajax to improve your user experience at Web Directions South 2009
- 1. Using AJAX to enhance your online user experience Web 2.0 Conference Presenter - Tania Lang 8 th October 2009 Improving user performance
- 4. Does AJAX provide a performance gain? … no need to wait for pages to refresh It can improve efficiency and save users time…
- 9. Using AJAX to apply heuristics and interaction design principles
- 19. Progressive disclosure example - PBS
- 20. ... use AJAX to allow users to add their own filters to sift out information not relevant to them
- 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
- 25. But AJAX is not all roses
- 26. DEVELOPERS WORKING ON SITE
- 28. Search engine I don’t like AJAX Can affect search engine optimisation as search engines can’t find dynamically generated content
- 29. AJAX sites may break users’ mental models
- 32. Common User Behaviour Observed during usability test sessions
- 36. [after unsuccessfully trying to click and drag the map to reposition it] “ I thought it would work like Google maps?” Indicative quote
- 37. Imagine you are going on a holiday and need travel insurance
- 41. 8 cm
- 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
- 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…
- 45. #5 – Users don’t like to wait… = … especially after each field input … please wait
- 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…
- 47. Implementation guidelines Overcoming some of these problems
- 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
- 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 http://developer.yahoo.com/ypatterns/richinteraction/transition/spotlight.html
- 59. How could you improve this page?
- 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
- 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
- 65. Remember ‘AJAX is a tool not a toy’
- 66. If there is no performance gain for the user, don’t risk the side effects of AJAX!
Editor's Notes
- “… is a web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by 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 the user requests a change. This is meant to increase the web page's interactivity, speed, and usability. ” Source: Wikipedia http://en.wikipedia.org/wiki/AJAX More information: Jesse James Garrett, Ajax: A New Approach to Web Applications - h ttp://www.adaptivepath.com/publications/essays/archives/000385.php AJAX and Accessibility - http://www.standards-schmandards.com/2005/ajax-and-accessibility
- Providing users with more responsive and smoother interactions as AJAX separates presentation from data exchange between client and server Avoiding the need to load a ‘confirmation’ page
- To provide interactive experiences and functionality consistent with desktop / Windows applications e.g. Google and Yahoo Mail
- Requires more from the client than traditional forms – Javascript to be enabled and browser has to support the XMLHttpRequest object Search engine optimisation - Because displayed data is loaded dynamically, it’s not part of the page and the keywords are not used by search engine robots May break the Back button. This is fixable but must be remembered in the design Developers lack UI skills and UI standards. Ajax is an emergent tech and while many are trying to fill the gap (yahoo, Google, Ajax toolkit devs) lack of standards, accepted Ajax Patterns and training in UI interactions can cause trouble in creating elegant Ajax widgets Testing Ajax. Depending on the app there can be some many interactions that Ajax can be very difficult to comprehensively test Breaking users’ mental models. Instead of clicking and navigating to a new page for info, users stay on the same page - may not behave how users expect e.g. shopping application: add to cart > shipping > payment etc Difficult to bookmark AJAX pages - Add to favorites Too much JavaScript makes the browser slow. Since JavaScript are executed in the browser and the browser has no or limited storage space, too much JavaScript can make the browse slow or even crash Can take a long time for pages to download and page elements to refresh – issue for dial-up users More information: Jesse James Garrett, Ajax: A New Approach to Web Applications - h ttp://www.adaptivepath.com/publications/essays/archives/000385.php AJAX and Accessibility - http://www.standards-schmandards.com/2005/ajax-and-accessibility
- RIA controls, such as menu and toolbar fail to convey important information to assistive technologies, such as state of the control: checked/unchecked, relationship between the controls: menus and sub-menus;
- E.g. Share my Story – Users didn’t realise once they uploaded their photo that they could pick up photo and drag it within the frame to see where it would crop. No instructions available.
- How many people noticed the premium update? We haven’t tested this website but I suspect users may not notice the premium change.
- Users get confused when they do something and the page does not appear to change state in any way
- More information: Galitzm, W. (2002). The Essential Guide to User Interface Design John Wiley pp.68-69 Visual acuity - The capacity of the eye to discriminate fine detail The relative visual acuity is approximately halved at 2.5 degrees from the point of eye fixation Hence, a 5 degree diameter circle centred around an eye fixation point on a display is recommended The eye’s sensitivity is higher for characters closer to the fixation point and decreases towards the edge of the circle
- When using progressive disclosure Users assume it is their fault when they miss fields that dynamically appear – this can be frustrating and affect their online experience
- Around 5% of all users don’t have JavaScript (Jan 08, W3C browser statistics) W3C Browser stats: http://www.w3schools.com/browsers/browsers_stats.asp WCAG require that web applications function when JavaScript is disabled or not supported
- Accessibility of AJAX Applications - Accessibility Issues http://www.w3.org/TR/wai-aria/#Using_intro http://www.webaim.org/techniques/ajax/ Refer to WAI-ARIA (Accessible Rich Internet Applications or ARIA) - http://webaim.org/techniques/aria/ Excerpt: WAI-ARIA (Accessible Rich Internet Applications or ARIA) is a W3C protocol for enhancing and supporting accessibility of scripted and dynamic content. ARIA provides accessible interactive controls (such as tree menus, drag and drop, sliders, sort controls, etc.), content roles for identifying page structure (navigation, search, main content, etc.), areas that can be dynamically updated (called "live regions" in ARIA), better support for keyboard accessibility and interactivity, and much more. ARIA is supported by most up-to-date browsers and screen readers. It is also supported by many script libraries. Perhaps the biggest current barrier to ARIA implementation is the lack of support in Internet Explorer. However, Internet Explorer 8 will have full support for ARIA. Although ARIA is not yet universally supported, when used with existing HTML and scripting accessibility techniques, it can provide additional accessibility support where it is supported while not causing compatibility issues where it is not yet supported.
- Accessibility of AJAX Applications - Accessibility Issues http://www.webaim.org/techniques/ajax/ Refer to WAI-ARIA (Accessible Rich Internet Applications or ARIA) - http://webaim.org/techniques/aria/ Excerpt: WAI-ARIA (Accessible Rich Internet Applications or ARIA) is a W3C protocol for enhancing and supporting accessibility of scripted and dynamic content. ARIA provides accessible interactive controls (such as tree menus, drag and drop, sliders, sort controls, etc.), content roles for identifying page structure (navigation, search, main content, etc.), areas that can be dynamically updated (called "live regions" in ARIA), better support for keyboard accessibility and interactivity, and much more. ARIA is supported by most up-to-date browsers and screen readers. It is also supported by many script libraries. Perhaps the biggest current barrier to ARIA implementation is the lack of support in Internet Explorer. However, Internet Explorer 8 will have full support for ARIA. Although ARIA is not yet universally supported, when used with existing HTML and scripting accessibility techniques, it can provide additional accessibility support where it is supported while not causing compatibility issues where it is not yet supported.
- ARIA support by User Agents ARIA is supported by leading browsers including: Mozilla Firefox version 3 and later Microsoft Internet Explorer version 8 Opera 9.5 beta 1 (basic ARIA implementation) Safari 4 Google Chrome 2.0 Note: For maximum ARIA support, we recommend using Firefox with latest versions of screen readers and screen magnifiers. Screen readers and screen magnifiers that include ARIA support: NVDA JAWS Window-Eyes Firevox – talking browser extension for Firefox Zoom Magnifier
- call attention to the change with a lightweight confirmation. For example, change the background color of the content area or data value to a light pastel color. The color difference from the background needs to have enough contrast to be distinct from the normal background color but not too much as to be overwhelming. Have the highlight appear instantly when the change occurs and then fade out within one second or less.
- The usability principle of “Forgiveness” allows users to explore your interface, add and edit info, without actually changing anything. This is important to remember since most web apps don’t offer an undo button.