Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Mobile Ajax Workshop

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

  • Soyez le premier à commenter

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