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

(more on this later)

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

google

modal drop-down menus

view is dimmed and disabled while menu has focus

thank yousteph@yiibu.com