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

Using AJAX to enhance your online user experience Web 2.0 Conference Presenter - Tania Lang 8 th October 2009 Improving user performance

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:

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

Does AJAX provide a performance gain? … no need to wait for pages to refresh It can improve efficiency and save users time…

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…

Using AJAX to apply heuristics and interaction design principles

Use of standards and conventions minimises learning time…
Consistency & standards … use AJAX to replicate desktop applications and behaviour

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

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

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

Progressive disclosure example - PBS

... use AJAX to allow users to add their own filters to sift out information not relevant to them

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

Example Budget Direct
www.budgetdirect.com.au

But AJAX is not all roses

DEVELOPERS WORKING ON SITE

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

Search engine I don’t like AJAX Can affect search engine optimisation as search engines can’t find dynamically generated content

AJAX sites may break users’ mental models

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

Common User Behaviour Observed during usability test sessions

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

#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

[after unsuccessfully trying to click and drag the map to reposition it] “ I thought it would work like Google maps?” Indicative quote

Imagine you are going on a holiday and need travel insurance

#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?”

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

iPhone screenshot
Zoomed in view of quote function…
… What do I do now?

#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

[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…

#5 – Users don’t like to wait… = … especially after each field input … please wait

[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…

Implementation guidelines Overcoming some of these problems

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)

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

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.)

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

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

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

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

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

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

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

How could you improve this page?

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:

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

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

Don’t use AJAX to cram more stuff on a page and create large overwhelming forms...
… sometimes items should be chunked over separate pages

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/

Remember ‘AJAX is a tool not a toy’

If there is no performance gain for the user, don’t risk the side effects of AJAX!

Questions?
Tania Lang
[email_address]
07 3839 9593
@peakusability
@tanialang
Sign up for our usability newsletter at:
www.peakusability.com.au

http://www.webdirections.org	105
http://www.slideshare.net	1
http://blackboard.ic.uva.nl	1

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

by Peak Usability on Oct 07, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 107

Statistics

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