1
Ajax – Design and Usability
William [email protected]/design
Copyright © 2006 Syntagm Ltd 2
Ajax – Design and UsabilityAbout Ajax
Ajax in contextHow Ajax worksHow Ajax is differentHow Ajax is similar
Computer-Human InteractionChange blindnessAttentional gamblingFlowFeedback
Design and usability guidelines
2
Copyright © 2006 Syntagm Ltd 3
Activity 1
Agree/elect/appoint a spokesperson/note takerDiscuss the issues raised on the worksheetsAt the end of the discussion the spokesperson will give a verbal summary (3 – 5 minutes) to the whole group
Copyright © 2006 Syntagm Ltd 4
Activity 1
Worksheet issues1. Introductions – name, company, job
role2. What does Ajax mean to you?3. Describe some of your most pressing
user experience problems. Do you think Ajax will help?
4. Do feel any pressure to use AJAX? What form does it take?
3
Copyright © 2006 Syntagm Ltd 5
Mandatory Image
Copyright © 2006 Syntagm Ltd 6
Optional Image
4
Copyright © 2006 Syntagm Ltd 7
Ajax in Context
AsynchronousJavaScriptAnd XML
AJAX
Copyright © 2006 Syntagm Ltd 8
Ajax in Context
AsynchronousJavaScriptAnd XML – not needed – client and server can use any convenient data format
AJAX
5
Copyright © 2006 Syntagm Ltd 9
Ajax in Context
AsynchronousJavaScript – not really, it could be any scripting language such as VBScript
AJ
Copyright © 2006 Syntagm Ltd 10
Ajax in Context
Asynchronous – only relative to page loading, to users it looks synchronous
A
6
Copyright © 2006 Syntagm Ltd 11
Ajax in Context
So what is Ajax?
Copyright © 2006 Syntagm Ltd 12
Ajax in Context
Ajax ≈ Remote ScriptingIt’s an approach for making server requests without reloading a page
Relies on non-standard server request facilities (XMLHttpRequests for example) supported by most browsersUses Document Object Model (DOM) scripting to make changes to the current page, for example:
Show popup windows (div elements)Change the contents of page elementsHide, delete or move page elements
7
Copyright © 2006 Syntagm Ltd 13
Ajax Example: Google Maps
Google Maps allows near-real-time scrolling and zooming
Copyright © 2006 Syntagm Ltd 14
How Ajax Works
…
Get Page
A standard page request without scripting
HTTP Page Returned (Eventually)
8
Copyright © 2006 Syntagm Ltd 15
How Ajax Works
Script HTTP request
Data Returned
.
.
.
EventHandler
An asynchronous request within a page
Copyright © 2006 Syntagm Ltd 16
How Ajax is DifferentWithout Ajax (in general)
Request is for a URLAnything that is returned must be a complete page with appropriate headers
With AjaxClient-side scripts use non-standard XMLHttpRequest to make a request for dataThe data does not have to be XML!Request can complete at any time but user is not left waiting for a new pageUpdates achieved through the Document Object Model
9
Copyright © 2006 Syntagm Ltd 17
Technical Benefits of AjaxUnit of information reduced from a complete page (or frame) – can be as little as a single character
Faster than returning a whole pageData-oriented requests means greater code reuse –especially server-side (in form validation, for example)Overall approach can be much more like a desktop application
a
A major benefit of Ajax is reduced granularity
Copyright © 2006 Syntagm Ltd 18
Ajax Example: Google Suggest
1) Just the ‘a’ is sent to the server
2) Only the visible list is returned (but in no obvious order)
10
Copyright © 2006 Syntagm Ltd 19
Technical Drawbacks of AjaxThe asynchronous data requests rely on technology that is not standard (yet)
Different code needed on different browsersRequests may not complete in a timely fashion (or at all)Pages laden with code will take longer to loadNetwork overheads may make short transfers slow in proportion
Copyright © 2006 Syntagm Ltd 20
How Ajax is Similar
Instal
lation
Speed
y Star
t
Granula
rity
Portab
ility
Mainten
ance
Sophis
ticati
on
HTML Only ***** **** * ***** ***** *Simple Client-Side Scripting ***** *** * ***** **** **DOM Scripting (with iFrames) ***** *** *** **** *** ***Flash *** ** *** *** *** ****Java Applets ** * ***** *** ** ****AJAX ***** ** ***** **** ** ****Desktop Applications * ***** ***** * * *****
More asterisks are better!
11
Copyright © 2006 Syntagm Ltd 21
How Ajax is SimilarInstallation
Plug-in or installation required (*=full installation)Speedy Start
How quickly users can start to interact (*=long wait)Granularity
The smallest unit of data updates (*=page)Portability
Portability across platforms (*=none)Maintenance
Difficulty of making and distributing changes (*=very)Sophistication
Richness of the user experience (*=limited)
Copyright © 2006 Syntagm Ltd 22
Ajax User ExperienceUser experience of Ajax can be better than the traditional page-at-a-time model (but not necessarily)We need to consider some Computer-Human Interaction (CHI) issues first:
Change blindnessAttentional gamblingFlowFeedback
12
Copyright © 2006 Syntagm Ltd 23
CHI – Change Blindness
(Diagram courtesy of Ron Rensink)
Change blindness means that we cannot easily see the differences between two images when they are separated by a blank field
Copyright © 2006 Syntagm Ltd 24
CHI – Change Blindness
Can you spot the difference in the two scenes?Can you spot the difference in the two scenes?
13
Copyright © 2006 Syntagm Ltd 25
CHI – Change Blindness
Color and large top margin used to draw attention to changes
Copyright © 2006 Syntagm Ltd 26
CHI – Change Blindness
Only 44% of observers noticed the gorilla while counting the number ofball passes between teams. The gorilla was on screen for 5 seconds!
The paper (called “Gorillas in our midst”) won an IgNoble prize in 2004.See http://www.wjh.harvard.edu/~cfc/Simons1999.pdf
14
Copyright © 2006 Syntagm Ltd 27
CHI – Change Blindness
Copyright © 2006 Syntagm Ltd 28
CHI – Attentional GamblingHaving performed an action, users must gamble on where to look next
Users complete the form and then look here Unfortunately they
need to look here
15
Copyright © 2006 Syntagm Ltd 29
CHI – Attentional GamblingUsually, having clicked in a left-navigation panel, users will focus their attention on the content area
Users gamble on looking at A but lose since B is where they needed to look
Copyright © 2006 Syntagm Ltd 30
CHI – Visual Perception SummaryChange blindness – changes will not be noticed, especially if…
A page reload is involvedUsers are distracted
Attentional gambling – users will not attend to content or navigation…
If it isn’t where they expected it to beIf they are distracted
Appropriate use of popups and animation can assist both problems but beware of
Distracting users andFlow…
16
Copyright © 2006 Syntagm Ltd 31
CHI – FlowMihaly Csikszentmihalyi’s theory of flow describes optimal psychological experience
Living in the momentLack of distraction (for CHI a “transparent interface”)Appropriate pacing of activityAppropriate degree of difficulty
Coupled with flow, we need to make sure that users feel
Their effort is rewardedThey are getting closer to their goal (information foraging theory)
Copyright © 2006 Syntagm Ltd 32
CHI – The Flow Curve
Adapted from Kathy Sierra’s Featuritis Curve
17
Copyright © 2006 Syntagm Ltd 33
CHI – FeedbackFeedback needs to be close to its cause in three aspects:
TimeSpaceMeaning
The time and space aspects are also related to attentional gambling (when and where users are expecting to look)
Copyright © 2006 Syntagm Ltd 34
Activity 2
Agree/elect/appoint a differentspokesperson/note takerDiscuss the issues raised on the worksheets and supplied handoutsAt the end of the discussion the spokesperson will give a verbal summary of the discussions (3 – 5 minutes) to the whole group
18
Copyright © 2006 Syntagm Ltd 35
Activity 2
Worksheet issues: Discuss the good and bad points of Ajax relative to
1. Change blindness2. Attentional gambling3. Flow4. Feedback
(See the separate handout for a reminder of these topics)
Copyright © 2006 Syntagm Ltd 36
Ajax and Change Blindness
Biggest contributor to change blindness is reloading the pageAjax can fix this, but there is also:
Attentional gambling (are users looking in the right place?) and“splash blindness” to contend with…
19
Copyright © 2006 Syntagm Ltd 37
“Splash Blindness”
See “Change blindness as a result of mudsplashes”in Nature, March 1999
Copyright © 2006 Syntagm Ltd 38
Ajax and Attentional Gambling
Updating pages without reloading is only effective if
users are looking in the right place orthe change attracts attention by being large, colourful or animated
20
Copyright © 2006 Syntagm Ltd 39
Ajax and Attentional Gambling
When nothing appears to happen, users focus on the progress bar –the update at the top of the page would be invisible, even with Ajax
Change is here
But users are looking here
Copyright © 2006 Syntagm Ltd 40
Ajax and Attentional GamblingOrder line shows popup detail when moused-over, but users still need to notice that it’s there
21
Copyright © 2006 Syntagm Ltd 41
Ajax and Flow
Of course, Ajax (or just DOM scripting) would let you do something like this:
Copyright © 2006 Syntagm Ltd 42
Ajax and Flow
But flow requires an optimum amount of feedback:
More Feedback ≠ Better
22
Copyright © 2006 Syntagm Ltd 43
Ajax and Feedback
For server-based validation Ajax can provide much more timely feedback than the page-at-a-time modelHowever, timely client-side validation requires only DOM scripting
Copyright © 2006 Syntagm Ltd 44
Ajax and Feedback
Confusingly, this whole page was reloaded when the delivery method changed, just so the delivery cost could be updated
23
Copyright © 2006 Syntagm Ltd 45
Design and Usability Guidelines
1. Do not focus on the technology: Use Ajax to address usability and user experience problems with the page-at-a-time model.
Copyright © 2006 Syntagm Ltd 46
Design and Usability Guidelines
Ajax used to “spice up” the user experience
On the same page changing quantity has no effect
Priority should have been given to fixing the serious usability problemcaused by requiring a page update – instead a popup was added
24
Copyright © 2006 Syntagm Ltd 47
Design and Usability Guidelines
Updating an expired credit cards takes forever on most web sites– on Amazon.co.uk it takes two clicks but with no Ajax in sight
Copyright © 2006 Syntagm Ltd 48
Design and Usability Guidelines
2. Do not be over-optimistic about update speeds. The recommendation for thin-client computing is a minimum of 100 MB/S (about 100 times better than many broadband connections)
Consider Ajax only for moderate volumes of code and data
25
Copyright © 2006 Syntagm Ltd 49
Design and Usability Guidelines
Google Maps is no Google Earth – this image eventuallytook a full minute to load at 512 KB/S
Copyright © 2006 Syntagm Ltd 50
Design and Usability Guidelines
3. Help users to gamble with their attention effectively – make updates:
visually obvious orwhere users’ attention will be focussed
26
Copyright © 2006 Syntagm Ltd 51
Design and Usability Guidelines
A temporary popup in the vicinity of the Add button is a safe bet
Copyright © 2006 Syntagm Ltd 52
Design and Usability Guidelines
4. Do not cause more problems than you solve with Ajax:
Make sure the browser back button still worksDeal with delayed or missing server responses by implementing timersOptimize flow by avoiding excessive feedback, especially message boxes that have to be dismissed by users
27
Copyright © 2006 Syntagm Ltd 53
Design and Usability Guidelines
5. Remember that most users do not really care about the technology
Copyright © 2006 Syntagm Ltd 54
Design and Usability Guidelines
Microsoft’s Outlook Web Access is a spectacular example of Ajax technology but most ordinary users wonder why it isn’t
more like the desktop version
28
Copyright © 2006 Syntagm Ltd 55
Questions?