Presentation by Stephanie Rieger of Yiibu for the Informa Mobile User Experience conference 11/09.

1. mobile ajax
or DHTML for the new millennium!
presented by Stephanie Rieger
Informa Mobile User Experience Workshop: 16 November 2009

2. what is AJAX?

3. AJAX creates desktop-like experiences
on modern browsers using HTML,
JavaScript and CSS

4. how the user perceives AJAX....

5. fast, responsive applications

6. adaptive interfaces

7. smooth update of data

8. no page reloads

9. how it works

10. dynamic (JavaScript)
AJAX used to be called DHTML
HTML

11. modern AJAX adds
a new dimension to DHTML

12. JavaScript
AJAX
asynchronous XML

13. “asynchronous events are those
occurring independently of the main
program flow.“

14. how traditional web sites work

15. 1. The user clicks 2. A request is sent 4. The new page loads.The user
to view comments to the server can now see the comments.
Server
3. The server sends back
a whole new page which
includes the comments

16. how AJAX sites work

17. 4. JavaScript is used to update
1. The user clicks 2. A request is sent only the parts of the page
to view comments. to the server.
AJAX that need to change.
scripts
Server
3. The server (only) sends
the comments back (in XML,
HTML or JSON format).

18. is that it?

19. not completely....

20. not all events and updates require
interaction with the server

21. JavaScript can also be used to
add, remove and/or manipulate
previously loaded content

22. like this...

23. 2. A message is sent to the 3. JavaScript is used to update
1. The user clicks
AJAX code telling it what the parts of the page that
to close the comments.
the user wants to do. need to change.
AJAX
scripts
Interaction with the server isn’t needed this time because
all the user wants to do is hide the comments.

24. how is mobile AJAX different?

25. in principle, AJAX on mobile
is the same as AJAX on the desktop

26. but...on mobile, AJAX functionality
and interactions are constrained
by the device

27. smaller screen
different
manipulation
models

28. limited text input

29. resource constraints
memory and
processing speed
unreliable bandwidth
device and
network latency

30. £££
high data costs

31. but...these constraints
also present opportunities to
improve the user experience using AJAX

32. (more on this later)

33. where is AJAX found on mobile?

34. 1. the mobile web

35. AJAX is used throughout web sites
in a similar manner to the desktop web

36. 2. widgets

37. widgets are applications
created using web technologies
(HTML, CSS, JavaScript)

38. Apple Dashboard widgets
Yahoo widgets
widgets are not new

39. on mobile, they are typically
implemented as....

40. idle/home screen widgets

41. bespoke icon multi-view standalone application
standalone apps

42. 3. hybrid apps

43. hybrid apps do not use AJAX per se

44. hybrid applications combine features of
native applications and web pages
e.g. JAVA, C++, i.e. HTML,
Objective C JavaScript, CSS

45. next generation platforms are also
increasingly incorporating web technologies
and approaches into UI frameworks

46. these enable the creation of
apps that make use of fast, flexible web
technologies for layout and design...

47. ...but can also take advantage
of the native platform to access
device capabilities such as the camera,
accelerometer, and hardware acceleration.

48. Palm PRE web OS iPhone Hybrid apps Nokia QT application
(using PhoneGap and and UI framework
other frameworks)

49. advantages

50. updating the display and accessing the
network have a high impact on battery life

51. a well designed AJAX application
can be highly responsive with
minimal impact on battery life

52. once data is loaded, refreshing portions
of the view can be more bandwidth efficient
than reloading the entire page

53. well built AJAX applications are faster,
more responsive and can provide superior
feedback and functionality

54. this makes users happy :-)

55. disadvantages

56. executing logic using JavaScript
also has an impact on battery life

57. AJAX is not yet pervasive on mobile

58. popular AJAX and JavaScript toolkits
are not yet optimized for mobile, so may be
resource intensive or unsupported

59. On some devices, JavaScript may be
supported, but disabled as default.

60. common use cases

61. showing and hiding content
• Optimizing content to the small screen by only
showing what is initially necessary, then enabling
the user to progressively reveal additional content
if and when it’s required.
e.g. showing only the top news categories but
enabling the user to expand the list if needed

62. near-immediate feedback
• Providing near-immediate feedback for a user
action.
e.g. immediately verifying a text input then
displaying success or error messages as soon as
the validity of the input has been confirmed

63. preloading media or content
• Prefetching content based on user behaviour,
or favourable network conditions (e.g. when an
active WIFI connection is detected).
• Using JavaScript permits the smooth reveal of
information once the user requests it.

64. visually disabling content or controls
• Visually (and/or functionally) disabling content or
controls which are unavailable due to login status,
loss of connectivity, or an ongoing process.
e.g. disabling access to account preferences if a
user is not logged in to an online store

65. enabling a subset of behaviour
• Enabling the user to input certain information
while offline or not logged in, and saving it for
upload at a later time.
e.g. enabling the user to add items to their
shopping cart while not yet logged in

66. managing risk of data loss
• Automatically (and unobtrusively) saving to
minimize data loss due to unreliable network.
• Smoothly and unobtrusively updating the display
to periodically notify the user that data has been
saved.

67. examples

68. m.wikipedia.org

69. expand/collapse article sections

70. m.flickr.com

71. view next/previous
image
mark favourites
lightwieght
wait animation
expand to reveal
commenting FAQ
multiple actions without page refresh

72. mobile wordpress

73. loading animation is displayed
expand to load and reveal comments

74. google mobile: search

75. 1. first use 2. predictive - suggestions 3. predictive - history
field has focus suggestions history is now
but no suggestions appear with input displayed on focus
predictive search and history

76. reveal related products expand search details
show/hide

77. loads next image
without page refresh
a quantity of previous
and next images are
always preloaded
anticipating behaviour

78. google mobile: reader

79. user interface adaptation

80. google mobile: mail

81. contextual menu more contextual
mark message
appears actions available
multi-layered interface

82. user initiated
progressive reveal
of information
fine-tune layout and information design

83. informationarchitects.jp

84. view is dimmed and disabled
while menu has focus
google
modal drop-down menus

85. thank you
steph@yiibu.com