mobile ajax or DHTML for the new millennium! Informa Mobile User Experience Workshop: 16 November 2009 presented by Stephanie Rieger
Jan 28, 2015
mobile ajaxor DHTML for the new millennium!
Informa Mobile User Experience Workshop: 16 November 2009
presented by Stephanie Rieger
what is AJAX?
AJAX creates desktop-like experienceson 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
AJAX used to be called DHTML
dynamic (JavaScript)
HTML
modern AJAX addsa new dimension to DHTML
AJAXasynchronous
JavaScript
XML
“asynchronous events are those occurring independently of the main
program flow.“
how traditional web sites work
3. The server sends backa whole new page which includes the comments
2. A request is sent to the server
Server
1. The user clicksto view comments
4. The new page loads.The user can now see the comments.
how AJAX sites work
1. The user clicksto view comments.
3. The server (only) sends the comments back (in XML,
HTML or JSON format).
Server
2. A request is sent to the server.
4. JavaScript is used to update only the parts of the page
that need to change.AJAXscripts
is that it?
not completely....
not all events and updates requireinteraction with the server
JavaScript can also be used toadd, remove and/or manipulate
previously loaded content
like this...
1. The user clicksto close the comments.
2. A message is sent to the AJAX code telling it what
the user wants to do.
3. JavaScript is used to update the parts of the page that
need to change.
Interaction with the server isn’t needed this time becauseall the user wants to do is hide the comments.
AJAXscripts
how is mobile AJAX different?
in principle, AJAX on mobileis the same as AJAX on the desktop
but...on mobile, AJAX functionalityand interactions are constrained
by the device
different manipulation
models
smaller screen
limited text input
resource constraints
memory andprocessing speed
unreliable bandwidth
device andnetwork latency
£££high data costs
but...these constraintsalso present opportunities to
improve the user experience using AJAX
where is AJAX found on mobile?
1. the mobile web
AJAX is used throughout web sitesin a similar manner to the desktop web
2. widgets
widgets are applicationscreated using web technologies
(HTML, CSS, JavaScript)
widgets are not new
Apple Dashboard widgets
Yahoo widgets
on mobile, they are typicallyimplemented as....
idle/home screen widgets
standalone apps
bespoke icon multi-view standalone application
3. hybrid apps
hybrid apps do not use AJAX per se
hybrid applications combine features ofnative applications and web pages
e.g. JAVA, C++, Objective C
i.e. HTML, JavaScript, CSS
next generation platforms are alsoincreasingly 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 advantageof the native platform to access
device capabilities such as the camera, accelerometer, and hardware acceleration.
Palm PRE web OS iPhone Hybrid apps (using PhoneGap and
other frameworks)
Nokia QT application and UI framework
advantages
updating the display and accessing the network have a high impact on battery life
a well designed AJAX applicationcan be highly responsive withminimal impact on battery life
once data is loaded, refreshing portionsof 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 JavaScriptalso has an impact on battery life
AJAX is not yet pervasive on mobile
popular AJAX and JavaScript toolkitsare 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
• 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.
preloading media or content
• 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
visually disabling content or controls
• 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
enabling a subset of behaviour
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
multiple actions without page refresh
view next/previous image
expand to reveal commenting FAQ
mark favourites
lightwieghtwait animation
mobile wordpress
expand to load and reveal comments
loading animation is displayed
google mobile: search
predictive search and history
1. first use 2. predictive - suggestions 3. predictive - history
suggestions appear with input
history is nowdisplayed on focus
field has focusbut no suggestions
reveal related products expand search details
show/hide
loads next imagewithout page refresh
a quantity of previous and next images are
always preloaded
anticipating behaviour
google mobile: reader
user interface adaptation
google mobile: mail
more contextual actions available
multi-layered interface
contextual menu appearsmark message
fine-tune layout and information design
user initiated progressive reveal
of information
informationarchitects.jp
modal drop-down menus
view is dimmed and disabled while menu has focus