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

8 cm

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