Mobile Ajax Workshop
Upcoming SlideShare
Loading in...5
×
 

Mobile Ajax Workshop

on

  • 3,681 views

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

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

Statistics

Views

Total Views
3,681
Slideshare-icon Views on SlideShare
3,678
Embed Views
3

Actions

Likes
6
Downloads
71
Comments
0

1 Embed 3

http://www.slideshare.net 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobile Ajax Workshop Mobile Ajax Workshop Presentation Transcript

    • mobile ajax or DHTML for the new millennium! presented by Stephanie Rieger Informa Mobile User Experience Workshop: 16 November 2009
    • 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 can now see the comments. Server 3. The server sends back a whole new page which includes the comments
    • 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 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).
    • 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 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.
    • 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 latency
    • £££ 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, Objective C JavaScript, CSS
    • 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, accelerometer, and hardware acceleration.
    • Palm PRE web OS iPhone Hybrid apps Nokia QT application (using PhoneGap and and UI framework other frameworks)
    • 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 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
    • 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
    • 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.
    • 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
    • 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
    • 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.
    • examples
    • m.wikipedia.org
    • expand/collapse article sections
    • m.flickr.com
    • view next/previous image mark favourites lightwieght wait animation expand to reveal commenting FAQ multiple actions without page refresh
    • 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 history is now but no suggestions appear with input displayed on focus predictive search and history
    • reveal related products expand search details show/hide
    • loads next image without page refresh a quantity of previous and next images are always preloaded anticipating behaviour
    • google mobile: reader
    • user interface adaptation
    • google mobile: mail
    • contextual menu more contextual mark message appears actions available multi-layered interface
    • user initiated progressive reveal of information fine-tune layout and information design
    • informationarchitects.jp
    • view is dimmed and disabled while menu has focus google modal drop-down menus
    • thank you steph@yiibu.com