Your SlideShare is downloading. ×
0
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
Using Ajax to improve your user experience at Web Directions South 2009
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

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

2,990

Published on

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 …

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.

Published in: Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,990
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
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
  • “… 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.
  • Transcript

    • 1. Using AJAX to enhance your online user experience Web 2.0 Conference Presenter - Tania Lang 8 th October 2009 Improving user performance
    • 2. Who am I to talk about AJAX?
      • Attended Experienced Practitioner 1 day workshop on AJAX at UPA Conference in Austin 2007
      • Conducted extensive usability testing of websites and forms, many of which include AJAX for a range of clients:
    • 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
      • Source: Jesse James Garrett http://www.adaptivepath.com/publications/essays/archives/000385.php
    • 4. Does AJAX provide a performance gain? … no need to wait for pages to refresh It can improve efficiency and save users time…
    • 5.  
    • 6.  
    • 7. User engagement
      • … Slider bars, drag and drop, zoom in/out functions
      • AJAX can provide richer interactions on the web without the need to download plug-ins…
    • 8.  
    • 9. Using AJAX to apply heuristics and interaction design principles
    • 10.
      • Use of standards and conventions minimises learning time…
      Consistency & standards … use AJAX to replicate desktop applications and behaviour
    • 11.  
    • 12.
      • It may be necessary to provide help and documentation.
      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
    • 13.  
    • 14. Visibility of system status
      • The system should always keep users informed about what is going on, through appropriate feedback within reasonable time…
      … Use AJAX to provide immediate feedback for user actions Photo by Flickr user Criterion CC
    • 15.  
    • 16.  
    • 17.
      • Hide or don’t request information that does not apply to the majority of users…
      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
    • 18.  
    • 19. Progressive disclosure example - PBS
    • 20. ... use AJAX to allow users to add their own filters to sift out information not relevant to them
    • 21.  
    • 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
    • 23.  
    • 24. Example Budget Direct
        • www.budgetdirect.com.au
    • 25. But AJAX is not all roses
    • 26. DEVELOPERS WORKING ON SITE
    • 27. Technical issues
      • May break the Back button
      • Requires more from developers
      • Testing Ajax
      • Too much JavaScript makes the browser slow and increases initial page download time
    • 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
    • 30.  
    • 31. Accessibility issues
      • Requires more from the client than traditional forms
        • JavaScript has to be enabled
        • Browser has to support XMLHttpRequest object
      • Vision impaired users tend to read in a linear fashion – likely to miss small changes within the page
      • Are not able to access dynamic web content e.g. instant error messages
      • Rich Internet Application controls, such as menu and toolbar fail to convey important information to assistive technologies, such as state of the control
      • Keyboard users find it difficult to interact with RIA controls, such as drag-n-drop controls
      • Source: Barrier Break Technologies
    • 32. Common User Behaviour Observed during usability test sessions
    • 33. Common User Behaviour
      • #1 - Users don’t always expect to apply their knowledge of desktop and windows application behaviour to a website e.g. drag and drop
    • 34.  
    • 35. #2 - Use of AJAX sites raises user expectations
      • Use of popular sites using AJAX e.g. Facebook, Google maps raises expectations about how a site should behave
      Photo by Flickr user Jrsquee CC
    • 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
    • 38.  
    • 39.
      • #3 - Users often don’t notice changes in state
      [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?”
    • 40. Visual acuity plays a big part…
        • Visual acuity is approximately halved at 2.5 degrees from the point of eye fixation
        • Recommend a 5 degree diameter circle around an eye fixation point
        • Average viewing distance from a screen = 47.5cm
        • The size of the area on the screen of optimal visual acuity is 4.18cm
        • Source: Galitzm, W. (2002). The Essential Guide to User Interface Design John Wiley pp.68-69
      … the capacity of the eye to discriminate fine detail
    • 41. 8 cm
    • 42. iPhone screenshot
      • Zoomed in view of quote function…
      … What do I do now?
    • 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
    • 48. AJAX – Implementation guidelines
      • Know your users and their technologies
      • Around 5% of users don’t have JavaScript (Jan 08, W3C)
      • Detect JavaScript automatically and provide non-AJAX versions where feasible OR
      • Ensure the application will still function without JavaScript
        • e.g. Yahoo Mail on PDA (2007)
    • 49. Yes, Ajax can be made Accessible?
        • Design Accessible Ajax by implementing W3C’s “ WAI-ARIA “specification .
      WAI-ARIA defines the techniques to make dynamic web content and web applications accessible to people with disabilities
    • 50. Yes, Ajax can be made Accessible?
      • Allow dynamic interface changes to be accessible
      • Alert the user that a change in state has occurred - identify regions that dynamically change as a live region
      • Allow direct access to the updated content
        • Maintaining accessibility of content that is dynamic and may change within the page (e.g., AJAX content updates)
      • Providing the semantic structure of page areas and functionality (e.g., navigation, main content, search, etc.)
      • Allowing certain non-focusable page elements to receive keyboard focus through the tabindex property
        • (e.g. setting focus to an error message within the page)
      • Providing keyboard and screen reader accessibility with complex widgets and navigation elements
        • (e.g., sliders, drag-and-drop etc.)
      • Source: Barrier Break Technologies
    • 51. How can ARIA help?
        • Roles help to convey the information about the type of control
          • e.g. slider, menu, toolbar
        • Roles to define the web page structure
          • e.g. banner, navigation, main content
        • State helps to convey the information about the current control state
          • e.g. “checked” for a check box, “haspopup” for a menu
        • Properties help to define the live regions for presenting dynamically updating page information
          • e.g., stock prices, weather updates, form error messages
        • Drag-and-drop properties that help to convey the drag sources and drop targets
        • Techniques for providing keyboard navigation for different RIA user interface controls
        • Source: Barrier Break Technologies
    • 52. Accessible AJAX/RIA requirements
      • Use techniques proposed by W3c’s WAI-ARIA suite
      • Web browsers with ARIA support
      • Assistive technologies, such as screen readers and screen magnifiers with ARIA support
      • Testing with different Assistive technology user groups for effective implementation
        • Source: Barrier Break Technologies
    • 53. Challenges/Issues in implementing ARIA
      • ARIA is a draft document and not yet stable
      • Limited support of ARIA Roles, States and Properties in User Agents including browsers and assistive technologies
      • Requires JavaScript to be turned on
      • Requires latest browsers and assistive technologies
      • Assistive technology users are not aware about the dynamic functionality and means to access it
    • 54. AJAX – Implementation guidelines
      • Provide a mechanism to allow users to save AJAX pages in their revised state
        • ‘ save’ feature
        • unique URL
        • Sears URL after applying filters - http://www.sears.com/shc/s/s_10153_12605_Appliances_Dishwashers_Built-In#viewItems=40&pageNum=1&sortOption=ORIGINAL_SORT_ORDER&&filter=Brand|Bosch|Frigidaire^Color+Family|Black^Price|0-600&lastFilter=Price2
    • 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
    • 57.  
    • 58. AJAX – Implementation guidelines
      • Visual acuity – ensure change in state is close to where users are likely to be looking
      Source: http://www.uie.com/articles/visible_narratives
      • Apply Gestalt principle of proximity - Users will associate elements in close proximity to each other
      Source: http://www.uie.com/articles/visible_narratives
    • 59. How could you improve this page?
    • 60. AJAX – Implementation guidelines Ask if AJAX is appropriate for each page.
      • if major changes to a significant portion of the page
      • if the content you are planning to dynamically generate needs to be found by a search engine
      • don’t use if users likely to expect a new page e.g. secure credit card details page
      • you can’t make it fast and seamless
      • if there is no performance gain for the user
      Don’t use:
    • 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
    • 63. AJAX – Implementation guidelines
      • Don’t use AJAX to cram more stuff on a page and create large overwhelming forms...
      • … sometimes items should be chunked over separate pages
    • 64. AJAX – Resources
      • Yahoo and Google toolkit devs
      • http://www.ajaxtutorial.net/
      • http://www.w3schools.com/ajax/default.asp
      • http://www.asp.net/ajax/showcase/
      • http://ajaxpatterns.org
      • http://www.ajaxdaddy.com/
    • 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!
    • 67. Questions?
      • Tania Lang
      • [email_address]
      • 07 3839 9593
      • @peakusability
      • @tanialang
      • Sign up for our usability newsletter at:
      • www.peakusability.com.au

    ×