mobile ajax
or DHTML for the new millennium!
    presented by Stephanie Rieger




                 Informa Mobile User Ex...
what is AJAX?
AJAX creates desktop-like experiences
  on modern browsers using HTML,
         JavaScript and CSS
how the user perceives AJAX....
fast, responsive applications
adaptive interfaces
smooth update of data
no page reloads
how it works
dynamic (JavaScript)



AJAX used to be called DHTML

                            HTML
modern AJAX adds
a new dimension to DHTML
JavaScript




         AJAX
asynchronous                XML
“asynchronous events are those
occurring independently of the main
           program flow.“
how traditional web sites work
1. The user clicks   2. A request is sent           4. The new page loads.The user
to view comments          to the server...
how AJAX sites work
4. JavaScript is used to update
 1. The user clicks   2. A request is sent              only the parts of the page
to view...
is that it?
not completely....
not all events and updates require
    interaction with the server
JavaScript can also be used to
add, remove and/or manipulate
   previously loaded content
like this...
2. A message is sent to the        3. JavaScript is used to update
    1. The user clicks
                                ...
how is mobile AJAX different?
in principle, AJAX on mobile
is the same as AJAX on the desktop
but...on mobile, AJAX functionality
 and interactions are constrained
          by the device
smaller screen




 different
manipulation
  models
limited text input
resource constraints

      memory and
    processing speed


   unreliable bandwidth


        device and
     network la...
£££
high data costs
but...these constraints
     also present opportunities to
improve the user experience using AJAX
(more on this later)
where is AJAX found on mobile?
1. the mobile web
AJAX is used throughout web sites
in a similar manner to the desktop web
2. widgets
widgets are applications
created using web technologies
    (HTML, CSS, JavaScript)
Apple Dashboard widgets



                          Yahoo widgets


                     widgets are not new
on mobile, they are typically
    implemented as....
idle/home screen widgets
bespoke icon         multi-view standalone application




               standalone apps
3. hybrid apps
hybrid apps do not use AJAX per se
hybrid applications combine features of
  native applications and web pages

       e.g. JAVA, C++,      i.e. HTML,
      ...
next generation platforms are also
increasingly incorporating web technologies
    and approaches into UI frameworks
these enable the creation of
apps that make use of fast, flexible web
 technologies for layout and design...
...but can also take advantage
      of the native platform to access
  device capabilities such as the camera,
accelerome...
Palm PRE web OS    iPhone Hybrid apps   Nokia QT application
                  (using PhoneGap and    and UI framework
   ...
advantages
updating the display and accessing the
network have a high impact on battery life
a well designed AJAX application
  can be highly responsive with
 minimal impact on battery life
once data is loaded, refreshing portions
of the view can be more bandwidth efficient
       than reloading the entire page
well built AJAX applications are faster,
more responsive and can provide superior
       feedback and functionality
this makes users happy :-)
disadvantages
executing logic using JavaScript
also has an impact on battery life
AJAX is not yet pervasive on mobile
popular AJAX and JavaScript toolkits
are not yet optimized for mobile, so may be
     resource intensive or unsupported
On some devices, JavaScript may be
supported, but disabled as default.
common use cases
showing and hiding content
• Optimizing content to the small screen by only
  showing what is initially necessary, then en...
near-immediate feedback
• Providing near-immediate feedback for a user
  action.

  e.g. immediately verifying a text inpu...
preloading media or content
• Prefetching content based on user behaviour,
  or favourable network conditions (e.g. when a...
visually disabling content or controls
• Visually (and/or functionally) disabling content or
  controls which are unavaila...
enabling a subset of behaviour
• Enabling the user to input certain information
  while offline or not logged in, and savi...
managing risk of data loss
• Automatically (and unobtrusively) saving to
  minimize data loss due to unreliable network.
•...
examples
m.wikipedia.org
expand/collapse article sections
m.flickr.com
view next/previous
                       image


                  mark favourites




                                  ...
mobile wordpress
loading animation is displayed




expand to load and reveal comments
google mobile: search
1. first use            2. predictive - suggestions   3. predictive - history




     field has focus         suggestions...
reveal related products       expand search details




                          show/hide
loads next image
                    without page refresh

                    a quantity of previous
                    ...
google mobile: reader
user interface adaptation
google mobile: mail
contextual menu   more contextual
mark message
                           appears       actions available




            ...
user initiated
                      progressive reveal
                        of information




fine-tune layout and in...
informationarchitects.jp
view is dimmed and disabled
       while menu has focus




             google




modal drop-down menus
thank you
steph@yiibu.com
Upcoming SlideShare
Loading in …5
×

Mobile Ajax Workshop

3,092 views

Published on

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

Published in: Design, Technology

Mobile Ajax Workshop

  1. 1. mobile ajax or DHTML for the new millennium! presented by Stephanie Rieger Informa Mobile User Experience Workshop: 16 November 2009
  2. 2. what is AJAX?
  3. 3. AJAX creates desktop-like experiences on modern browsers using HTML, JavaScript and CSS
  4. 4. how the user perceives AJAX....
  5. 5. fast, responsive applications
  6. 6. adaptive interfaces
  7. 7. smooth update of data
  8. 8. no page reloads
  9. 9. how it works
  10. 10. dynamic (JavaScript) AJAX used to be called DHTML HTML
  11. 11. modern AJAX adds a new dimension to DHTML
  12. 12. JavaScript AJAX asynchronous XML
  13. 13. “asynchronous events are those occurring independently of the main program flow.“
  14. 14. how traditional web sites work
  15. 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. 16. how AJAX sites work
  17. 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. 18. is that it?
  19. 19. not completely....
  20. 20. not all events and updates require interaction with the server
  21. 21. JavaScript can also be used to add, remove and/or manipulate previously loaded content
  22. 22. like this...
  23. 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. 24. how is mobile AJAX different?
  25. 25. in principle, AJAX on mobile is the same as AJAX on the desktop
  26. 26. but...on mobile, AJAX functionality and interactions are constrained by the device
  27. 27. smaller screen different manipulation models
  28. 28. limited text input
  29. 29. resource constraints memory and processing speed unreliable bandwidth device and network latency
  30. 30. £££ high data costs
  31. 31. but...these constraints also present opportunities to improve the user experience using AJAX
  32. 32. (more on this later)
  33. 33. where is AJAX found on mobile?
  34. 34. 1. the mobile web
  35. 35. AJAX is used throughout web sites in a similar manner to the desktop web
  36. 36. 2. widgets
  37. 37. widgets are applications created using web technologies (HTML, CSS, JavaScript)
  38. 38. Apple Dashboard widgets Yahoo widgets widgets are not new
  39. 39. on mobile, they are typically implemented as....
  40. 40. idle/home screen widgets
  41. 41. bespoke icon multi-view standalone application standalone apps
  42. 42. 3. hybrid apps
  43. 43. hybrid apps do not use AJAX per se
  44. 44. hybrid applications combine features of native applications and web pages e.g. JAVA, C++, i.e. HTML, Objective C JavaScript, CSS
  45. 45. next generation platforms are also increasingly incorporating web technologies and approaches into UI frameworks
  46. 46. these enable the creation of apps that make use of fast, flexible web technologies for layout and design...
  47. 47. ...but can also take advantage of the native platform to access device capabilities such as the camera, accelerometer, and hardware acceleration.
  48. 48. Palm PRE web OS iPhone Hybrid apps Nokia QT application (using PhoneGap and and UI framework other frameworks)
  49. 49. advantages
  50. 50. updating the display and accessing the network have a high impact on battery life
  51. 51. a well designed AJAX application can be highly responsive with minimal impact on battery life
  52. 52. once data is loaded, refreshing portions of the view can be more bandwidth efficient than reloading the entire page
  53. 53. well built AJAX applications are faster, more responsive and can provide superior feedback and functionality
  54. 54. this makes users happy :-)
  55. 55. disadvantages
  56. 56. executing logic using JavaScript also has an impact on battery life
  57. 57. AJAX is not yet pervasive on mobile
  58. 58. popular AJAX and JavaScript toolkits are not yet optimized for mobile, so may be resource intensive or unsupported
  59. 59. On some devices, JavaScript may be supported, but disabled as default.
  60. 60. common use cases
  61. 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. 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. 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. 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. 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. 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. 67. examples
  68. 68. m.wikipedia.org
  69. 69. expand/collapse article sections
  70. 70. m.flickr.com
  71. 71. view next/previous image mark favourites lightwieght wait animation expand to reveal commenting FAQ multiple actions without page refresh
  72. 72. mobile wordpress
  73. 73. loading animation is displayed expand to load and reveal comments
  74. 74. google mobile: search
  75. 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. 76. reveal related products expand search details show/hide
  77. 77. loads next image without page refresh a quantity of previous and next images are always preloaded anticipating behaviour
  78. 78. google mobile: reader
  79. 79. user interface adaptation
  80. 80. google mobile: mail
  81. 81. contextual menu more contextual mark message appears actions available multi-layered interface
  82. 82. user initiated progressive reveal of information fine-tune layout and information design
  83. 83. informationarchitects.jp
  84. 84. view is dimmed and disabled while menu has focus google modal drop-down menus
  85. 85. thank you steph@yiibu.com

×