Emakina Academy 4 - AJAX, Flash & Rich Internet Applications: harnessing the technological background of the Web 2.0 revolution

Ajax
Emakina Academy

1

Agenda

Part 1 --09h30-10h30 Part 2 --10h30-11h30 Part 3 --11h30-12h30
Part 1 09h30-10h30 Part 2 10h30-11h30 Part 3 11h30-12h30

Welcome & Introduction Ajax & Usability Conclusions & Summary
Welcome & Introduction Ajax & Usability Conclusions & Summary
About Emakina Usability B2B Examples
About Emakina Usability B2B Examples
User Experience Business Aspects Ajax Opportunities
User Experience Business Aspects Ajax Opportunities
Prehistory of Ajax Selected Cases Next Steps
Prehistory of Ajax Selected Cases Next Steps
B2B Problems Technical Overview Emakina methodology
B2B Problems Technical Overview Emakina methodology
Flash vs Ajax
Flash vs Ajax

2

1.1
Welcome & Introduction
Emakina Academy,
September 13

3

Find the common thread

4

1.2
About Emakina
Emakina Academy,
September 13

6

Emakina Model

Consulting Marketing
Strategy and planning Tactical actions
Marketing studies Multi-channel
ROI studies Direct to 1-to-1

Successful
E-Commerce
Technology Creation
E-Business platforms Concept
Integration Graphic Design
Web development Usability
Hosting Content

7

Customer Recruitment

Convert to
Reward
Reward
mechanisms
Customers
mechanisms

CUSTOMERS
CUSTOMERS

Collect

S
Rich modules
Rich modules
Games Prospects

ES
Games

EN
Communicate
Websites
Websites

AR
Promo-sites Offer
Promo-sites

AW
Bannering Recruit
Bannering Recruit
Company Newsletters Visitors
Newsletters Visitors

8

Multi-Channel Approach

Above the line
Agency

WORLD WIDE WEB
WORLD WIDE WEB
IDEAS
IDEAS

Integrated communication
EMAIL
EMAIL

RICH COMMUNICATION
RICH COMMUNICATION
BANNERING
BANNERING

YOUR AFFILIATE
AFFILIATE
EMAKINA CUSTOMERS
COMPANY SMS, MMS
SMS, MMS

IVR
IVR
IDEAS
IDEAS

SEARCH ENGINE
SEARCH ENGINE

VIRAL MARKETING
VIRAL MARKETING

Below the line
Agency

9

Competence Center

Internet technologies E-business applications
– Hosting, Security – Application Server :
IBM Websphere Suite, ATG
– HTML / DHTML (JavaScript)
Dynamo, ColdFusion MX
– XML / WML / VXML
– CMS :
– Flash / Shockwave / VR / 3D
emagiC, Tridion R5
– ColdFusion MX
– Portal :
– Real / WMA / QuickTime SAP Portal, IBM Portal Server
– SOAP, Web Services – NetIQ Webtrends Reporting
– MS SQL Server / Oracle 9i Center, ...
– JAVA / JSP / J2EE
– MS ASP / COM (Visual Basic)
– ASP.NET / .Net
– PHP
– SAP (BAPI / Business connector)
– C, C++, C#

10

Emakina in a nutshell

+90 team members and growing
Number 2 Belgium Web Agency
(ranking Inside 2006)
Number 1 Creative Agency
(ranking Media Marketing 2006)
A unique offering in e-marketing and e-business
Integrated competences in Strategy,
Creation & Design and IT Development
Stable and profitable environment
Listed on Alternext (ALEMK) since june 2006
Raised 7.3 Meuros for european expansion
Prestigious references

12

1.3
The User Experience
Emakina Academy,
September 13

13

Experience matters

14

The Experience Matters

>
15

Evolution of Economic Value

Unique Relevant
Stage
Stage
Competitive to Customer
Experiences
Experiences
Position Needs

Deliver
Deliver
Services
Services

Make
Make
Goods
Goods
Irrelevant
Undifferentiated
Extract to Customer
Extract
Competitive
Commodities
Commodities Needs
Position

Market pricing Premium pricing

16

Examples of the Economics

$5.00 for a Latte
Coffee costs 49 cents

$250 for a Birthday Party
Evolution of the
Birthday Experience

$2,500 for a laptop computer
“Think Different”

17

Evolution of Digital Experience

Unique Relevant
Experiences
Experiences
Competitive to Customer
(RIAs)
(RIAs)
Position Needs

Features
Features
(Web Apps)
(Web Apps)

Function
Function
(Perl Script)
(Perl Script)
Irrelevant
Undifferentiated
Presence to Customer
Presence
Competitive
(Flat HTML)
(Flat HTML) Needs
Position

Market pricing Premium pricing

18

The Web Doesn’t Cut It

Dist ribut ion of scores from 158 Web site reviews conducted by Forrester, Dec. 1999 to May 2001
Sites are scored from -50 (low) to 50 (high)
35

Number 25
of sites Top score: 23
in each
15
range
of scores
5

-50 -30 -25 -20 -15 -10 -5 0 5 10 15 20 25 50
Commonly failed tests Failure rate
Guided search 87%
Passing grade: 25 or higher
Comprehensive and precise search 84%
Act ive personalizat ion 80%
Average score overall: -3.5
Proact ive customer service 75%
Accessibilit y 70% Average B2C score: -2.2
Efficient page layout 66%
Average B2B score: -5.5
Task-specific interact ivit y 59%
Site reliability 55% Sites are graded on 25 test s; each test is
Essent ial content available 54% scored on a scale from -2 (crit ical failure)
Consistent navigat ion 48% to 2 (exemplary pass)

19
Source: Forrester Research, Inc.

How We Got Here

Mainframe Desktop Client/Server Websites

High: High:
None: dumb green-screen
Interactivity Low:
or command-line Drag-and-drop, point-and- Drag-and-drop, point-and-
Point-and-click, form fill-in
terminals click click

User High: resizable
Flexibility Medium: resizable
Interface None: components, configurable Low: limited customization
components, configurable
display, local data, custom of page appearance
No customization possible display, server-side data
shortcuts

Medium: real-time High: real-time
Power None: only displays data None: only displays data
computation, complicated computation coupled with
sent by server sent by server
information visualization access to server-side data

High cost High cost Low cost
Low cost
Deployment

20

A New Solution is Needed – the X Internet

Forrester’s Definition:

Intelligent apps that execute code
near the user to create
rich, engaging user experiences
on the Net

21

Forrester’s X-Internet Timeline

2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010
22

Rich Internet Application Fit

Traditional
Software UI

New classes
Executable of applications
Internet UI

More value from
existing applications
HTML UI

23

Rich Internet Applications

24


Web Desktop Rich Internet Apps

√
√
Instant Deployment

√
√
Cross-platform

√
√
Progressive download

√
√
Magazine-like layout

√
√
Multimedia

√
√
Standards-based: XML, SOAP, J2EE

√
√
Interactive UI – validation, formatting

√
√
Fast response times (no page refresh)

√
√
Drag and Drop

√
√
Scalable

√
√
Works online

√
√
Traditional n-tier development model

√
Easy to add communications features

25

Rich Internet Application Results

35% increase in reservations year to year
50% reduction in time entering orders
Reduced page load time by 50%
More than doubled the average number of bookings per session
75% of first-time site visitors returned
Greater than a five-fold return on initial pilot project investment

26

X Internet

Forrester Research:

quot;... browser-based applications deliver
sub par user experiences ...
Executable Internet Technology will help
companies return responsiveness and
productivity to Net-based apps.quot;

27

Summary

Results
Results

Experience
Experience


28

1.4
Prehistory of Ajax
Emakina Academy

29

Human nature

Abraham Maslow:

“If the only tool you know is a hammer,
every problem looks like a nail”

30

Web 2.0

Web 2.0 is set of buzzwords that point to the eradication of the
classical web model and indicate a more democratic and
collaborative web experience

31

The right tool for the right context

Web 2.0 Buzzword B2C B2B
User generated content Works only for top brands (eg. Apple); Brand risk as it quickly becomes
others require moderation comparison platform

Collaboration Strengthens the brand experience Brand risk for user2user
Okay for assistant2customer

Web as platform Positive Less dependency on plugins but requires
Applications within browser large installed base

Usability Key success factor Key success factor when applied
methodologically

Look and feel Key appeal factor Requires discretion
Valuable service before branding

Perpetual beta Acceptable if limited outages Unacceptable no compromise on
(see Yahoo experience) continuity

Communities Requires moderation C2C communities not allowed
Potential branded B2C academies

Slim Ajax applications Mostly positive Requires large installed base
Lightweight DHTML (consider non-Ajax backup)

User feedback Positive as it gives valuable feedback Positive if applied systematically and
Contribution to roadmap discretely

Personalization Key success factor Key success factor when relevant
(see Amazon)

Customization Requires good features Seldom used
32
(see Google homepage) (see myYahoo)

A Brief History

FF 2
SVG
Java Applet
E4X
XSL-T
ECMAScript Mozilla 1.0
NS 2.0B3
JavaScript WSDL FF 1.0
Flash 3
Flash 9
SVG
CSS DOM 1 XHTML

96 06
98 05
97 99 00 01 02 03 04

XSL-T 2
IE 3 XForms
IE 6
IE 4 IE 5
IFrames It Works!
DOM XML
DOM 3
CSS XSL-T
RDF
JScript XMLHTTP

Browser Wars The Web Depression Web 2.0

33

In the beginning, there was DOS

34

Windows UI Matures…

36

The Future…Maybe?

37

History repeats itself, over the Web

Watching grass grow,
watching paint dry,
filling in forms, …

38

The new web

Don’t focus on technology,
focus on getting the work done
39

Example of Microsoft Ajax Application

Useful
Useful
functions
functions Integrated
Integrated
coexisting
coexisting
applications with
applications with Contextual
Contextual
added value
added value actions
actions

Application
Application
like
like
behaviour
behaviour

Application
Application
Interactivity like
Interactivity like
without full behaviour
without full behaviour
page reload
page reload

Rating
Rating
system
system

40

Key disadvantages of traditional web apps

Poor Interactivity Simplistic Interfaces
Users must wait for full page The requirement for full page
reloads after each interaction with postback whenever the user
the server. interface has to be changed
imposes hefty limitations on the
Slow & Unresponsive
degree of sophistication of web
Classic web applications transfer
user interfaces. Rich and smooth
the complete form data to the
interfaces with on-demand update
server, which in turn renders and
could only be implemented using
sends back the full HTML markup
host technologies
of the page to the browser. Lots of
bandwidth is consumed and the Wasted Resources
performance is significantly Powerful PCs, sitting 99% idle
hindered. while sophisticated servers are
compiling multi-dimensional DB
Poor User Experience
queries AND writing <tr><td>… at
We’re 2006, yet most web forms
the same time
look like coming from 1996

41

The rise of the new web

“The Web as we know it is changing
probably more than it has since the
first graphic showed up… The idea of
the webpage itself is nearing its
useful end. With the way Ajax allows
you to build nearly stateless
applications that happen to be web
accessible, everything changes.”

Jesse James Garrett
February 15, 2005

42

Maslow’s Pyramid on Internet

Featured / ranked in
Wikipedia
Technorati
Fulfilment
Slashdot / Digg
Show your Expertise
Actualization
Blogs
Communities
Esteem needs Forums

Status, recognition
Social Networks
Social bookmarking
Groupware
Knowledge sharing
Love, Belonging, Social needs
Anti-Virus
Integration, network, circle of friends Hoax Groups
Support Forums
Technical help
Safety and Security needs
Messenging Truth, protection, integrity, …
Information / Search
Online Web Apps
Physiological needs:
Publishing

Act, communicate, interact, exchange, …
43

Enter Ajax

Ajax aims to deliver:
– Rich applications in browsers
– No issues with installation
– Built on existing infrastructure: (TCP/IP, SSL, HTTP, XML…)
Concept & Mechanics
– Acronym stands for “Asynchronous JavaScript + XML”.
– The core idea behind Ajax is to make the communication with the
server asynchronous, so that data is transferred and processed in the
background.
– As a result the user can continue working on the other parts of the page
without interruption.
– In an Ajax-enabled application only the relevant page elements are
updated, only when this is necessary.

Ajax is a new development technique, not language,
Ajax is a new development technique, not language,
blurring the line between web-based and desktop applications
blurring the line between web-based and desktop applications
delivering rich, highly responsive and interactive interfaces
delivering rich, highly responsive and interactive interfaces
44

Ajax – The details

Motivation:
– HTTP never intended to dynamically serve content
– Pages always reload, but never get updated
– Users wait for the entire page to load even if a single piece of data is
needed
– Single request/response restrictions: no middle ground between “this
page” and “next page”
Describes a simple development pattern
– Asynchronously request data from the server
– Process the Result
– Update the Page
– Technology has been around for many years
Very good for improving form interactions
Usually insufficient by itself for building applications

Ajax is a tool (pattern) of many for building rich experiences
Ajax is a tool (pattern) of many for building rich experiences
45

Direct Advantages

Better Performance and Efficiency:
Small amount of data transferred from the server.
Beneficial for data-intensive applications as well as for low-
bandwidth networks.
More Responsive Interfaces:
The improved performance give the feeling that updates are
happening instantly.
Ajax web applications appear to behave much like their desktop
counterparts.
Reduced or Eliminated quot;Waitingquot; Time:
Only the relevant page elements are updates, with the rest of the
page remaining unchanged. This decreases the idle waiting time.
Increased Usability:
Users can work with the rest of the page while data is being
transferred in the background.

46

So why is Ajax so hot—NOW?

Times are changing It addresses fundamental needs
Web2.0 Trend Increase Usability of Web
Applications
It has a name
Demand for richer applications is
Recent Google applications have
growing without Flash
sparked people’s imagination:
Google gmail, Google suggests, Save Bandwidth
Google Maps Download only data you need
Browser Consolidation Faster interfaces (sometimes)
Open Standards & Toolkits People are thinking of building
Broadband means we can - and APPLICATIONS…not just site
want to - do more

The Tipping Point:
The Tipping Point:
All of this has made rich internet apps reach its tipping point
All of this has made rich internet apps reach its tipping point
where adoption spreads rapidly and dramatically
where adoption spreads rapidly and dramatically
47

Is it new?

Not Really
Hidden Frames
IE5+, Mozilla 1.0+, Safari 1.2+, and Opera 7.6+
Java
Applets

48

Ajax Applications

Applications that have highest benefit from Ajax:
Highly interactive, data rich applications

Examples:
Google Spreadsheet:
Data visualization – visualizing large datasets
Google Maps:
Scroll, pan, zoom… all without Flash
Data input & validation:
it’s possible to validate the data the user enters, while they are
entering it. They can then receive feedback (using the server’s
intelligence) without the page being posted back.

49

Some examples

Amazon A9 Search Engine
Flickr
Google Labs & Apps
– Orkut: social network
– GMail: web based email
– Google Maps
– Google Spreadsheets
– Google Suggests
– Google Toolkit Demo > School roster
Demos
– Drag & drop shop:
http://demo.script.aculo.us/shop
– Forms
http://openrico.org/rico/demos.page?demo=rico_Ajax_complex

50

Before Ajax: Maps

http://www.mapquest.com

51

After Ajax: Maps

52

Ajax is about

Usability User experience
Ease of use Hard to describe
Ability to get things done faster Users just get it
Measurable Examples
– iPod
Easier to learn
– Google Maps
High performance
Competitive advantage

53

The 8-Hour Rule

Question:
Can your users work with your application for 8 hours a day without
getting frustrated?

Answer:
Traditional web applications fail this rule miserably

Solution:
Ajax to the rescue

54

B2B expectations

Today’s reality Tomorrow’s expectations
Applications are complex Applications should become
and require a manual to use straightforward; manuals is for
advanced features
Applications are slow and people Like Amazon, precompile results
frequently wait 10-20s for a where possible, use advanced
process to finish or a page to load caching techniques and Ajax
Forms are just a sequential dump Well structured dynamic forms,
of input fields mandatory and optional blocks
Fonts are small to compensate for Drill down on details
long numbers and long lists
Error handling is like “there is an Shift from error reporting to
error, please verify your data” proactive handling and solving
Telephone numbers are hard to Online contact, messaging,
find assistance is on stand-by

Business applications and tools should deliver dashboards
Business applications and tools should deliver dashboards
providing quick access to key data leading to informed decision making
providing quick access to key data leading to informed decision making
55

Usability

An analysis of intranet portals found slimmer information
architectures and a renewed emphasis on fresh content and useful
applications KISS model
The initial objective/mantra
“We need a website”
has been replaced by
“We need a user friendly and usable website”
Arrival of usability groups:
– SAP Design Guild
– Jakob Nielsen
– Governmental guidelines
–…
Specialized skills
– Usability experts ≠ development skills

56

Web services

Before Now
Previously websites had poorly Application providers develop
integrated applications (HTML documented web services
scrubbing, interface Sites can query web services and
redevelopment, poor CSS support, present information a la carte
…) Web Services are W3C endorsed
Users often bypassed portal to less vendor dependency
bookmark service directly
(deeplinks)

57

Presence based services

Presence integration
– Users can determine the online status of site members quickly by
sending e-mail or an instant message, adding the member to a contact
list, and viewing current free/busy status.

Examples
– Show which users are online, and start an instant messaging
conversation with them

58

Collaboration

Solve specific business problems using collaboration tools:
Streamline business process with employees and partners
Provide users with contextual collaboration
Communication tools as part of their day by day projects
Reduce the pain associated with a proliferation of tools
Merging tools into single environment
Benefit from increasingly rich collaboration platforms
Provide tools and let users find an application that helps them in
their normal business process evolution, not revolution
Embedded collaboration capabilities
More built-in support (teamwork, …)
Product/platform vendor competition
Strive to push proprietary standards vs open standards makes
interoperability not yet today’s reality

59

1.5
Flash
Emakina Academy

60

Macromedia Flash

Dispelling the myths
– “Flash is an animation tool”
– “Flash is for games and web intros, not for business applications”
– “Only graphic designers can use Flash”
– “ActionScript is not a real programming language”
– “ActionScript is convoluted and hard to maintain”
– “Flash will not fit into an MVC J2EE architecture”

61

Real-World Business Applications Using Macromedia Flash

Dai Nippon Printing Group:
www.dnpribbons.com/tools_and_resources/ribbon_runner/
Breckenridge Communications CommCenter:
http://commcenter.breckcomm.com
Code Alloy – Shopping Client:
http://www.codealloy.com/shoppingclient_download.htm
Nike Golf: http://www.nike.com/nikegolf/
More case studies can be found in the Macromedia Showcase at
www.macromedia.com

DNP, printer supplies University of North Carolina, Medical log Brocade, sales performance

62

Leverages a Ubiquitous Client…

414 Million users have the Macromedia Flash Player

98
90
76
63 63
53
38

Macromedia Java Acrobat Windows Macromedia Real Player QuickTime
Flash Player Reader Media Player Shockwave Player
Player

63

Technical Benefits

Ease of development and deployment
Integrates into legacy environments
Extends existing applications without re-work
Fits into current development process
Supports a broad range of platforms and devices
Cuts QA time for cross-platform support

64

Why Macromedia?

Client Flash Player client is a
Side Browser
Browser
standard browser plug-in
Flash
Client
Flash Remoting provides an
optimized connection between the
.swf
.html
Internet Flash client and the Application
.xml
.cfm
Server
Server
Web Server
Side Web Server Flash Communication Server
seems the best choice for
Flash
Remoting streaming videos
Application Server
Application Server

Database &
Integration
DB
DB
65

RIA Examples In this Section

Example Applications
Yankee Candle
– Advent Labs
Youth Hostel Association of
– Trio Motors
Australia
– Pet Market
GMAC Real Estate
– Jeremy Allaire Presentation
Ambient Automation
Subaru Primal Quest
Grand Chiropractic Health Care
Charles Schwab
Team Connect
New York Stock Exchange
Bose

66

Example > Charles Schwab

Challenge
Charles Schwab executives
needed an easy to use tool to
help them see how budget is
being allocated across market
campaigns
Solution
Macromedia Flash
Benefit
These new tools help Schwab
make more efficient use of
their marketing budgets.

67

Example > Bose Corporation

Challenge
Help customers visualize an
entertainment system in their home

Solution
Macromedia Flash MX

Benefit
Developed an online guide that both
supports and educates the customer
throughout the buying process with
interactive, instant and relevant product
information delivered in a visually
engaging way.

68

Example > Ambient Automation

Challenge
Develop a corporate information
system that consolidates clients
Great Plains accounting,
Goldmine contact management,
and t help desk databases into
one advanced user interface
Solution
Macromedia Flash MX
Benefit
50% overall reduction in time and
60% reduction in errors for
entering and processing orders.

69

Example > Team Connect

Application
TeamConnect is a powerful way of
ensuring a business can take on
more projects and yet be able to
deliver additional results more
reliably and profitably than
competitors.
Challenge
Create a project planning and
scheduling application

Solution
Macromedia Flash MX
Macromedia Flash Communication
Server MX
Macromedia JRun 4

70

2.1
Ajax & usability
Emakina academy

71

Short introduction about
Usability

72

Introduction

What is usability?

It’s the quality measuring how User Interface is
easy to use,
easy to learn &
provides a positive feedback to user

73

5 qualities of usability

Learnability
How easy is it for users to accomplish basic tasks the first time they
encounter the design?

Efficiency
Once users have learned the design, how quickly can they perform tasks?

Memorability
When users return to the design after a period of not using it, how easily can
they reestablish proficiency?

Errors
How many errors do users make, how severe are these errors, and how
easily can they recover from the errors?

Satisfaction
How pleasant is it to use the design?

Source : J.Nielsen

74

Fields of Usability

User experience maps user needs to business needs through

Information architecture Information design
Functional design Interaction design
Graphical design

75

Usability as a part of UX

76

Actual Situation in web usability

Perceptual usability Standards are known

User behaviours have been studied

User understands Client / browser interaction

77

Limitations

Limitation of existing client/browser HTML experience
Experience is less rich than Desktop applications
Form based experience :
Limited User Interface element vocabulary
no intelligent fields , autocomplete, specialized selectors
Difficult to handle large amount of datas
Wysywyg capabilities are poor
Interaction capabilities are poor
No keystroke controls, no selections, poor arrow control
Poor selection, no drag & drop control
You need to refresh the page to get/post new datas
Business rules must be server side

78

Usability & user experience : why?

Of course : satisfaction of users and consumers !!!

Business benefits investment optimization

Higher acquisition, conversion rates
optimize sales and advertising investments
Increase efficiency & productivity (time per task)
reduce human cost
More usable than competitors
be ahead of competition
Product experience
user centric business & identity
Reduce training & support

79

2.2
Business Benefits
Emakina academy

80

How can Ajax improve
usability and user experience to
increase your business benefits?

81

Ajax main features

On demand request on server without reload
Request data, validate business rules, store user activity without
reloading page

Smoothness & speed
Fewer reload more immersive experience

Higher level of interactions and controls
User experience can be similar 99% to a desktop application
browser as a platform
User know very well this interaction environment!

User interface is object oriented & controlled by events
DOM + JavaScript event model propose a rich Object oriented user
interface
82

Ajax new UI elements

Intelligent fields
Auto complete / suggest, validation rules, large datas selectors

Editable areas
Click and edit text fields, wysywig area, auto Save

Advanced UI elements
Widgets, overlayer, floating window, floating pannels, cascading
menus, sortable datagrids

And a lot more still to create …

83

Ajax New Interactions patterns

Drag & drop, cursor based selection

Immediate feedback

Keystroke & arrows controls

Authoring experience vs fill a form

84

2.3
Selected Cases
Emakina academy

85

Let’s see Ajax in action

Emakina Cases

86

Electrabel registration process

Ajax improves acquisition

87

Case Electrabel registration

Description
2006
Allow Electrabel’s visitors to register to self service online
applications
Potential audience : 4,5 millions consumers

Business objectives :
Decrease administrative cost through online services usage
Electronic billing
Online Administrative service

88

Identified Issues

Lot of user starts process but gives up during the process
Looks too complicate and too long
Requires 3 steps and lot of business rules
Requires complex information input : billing information, highly
secured password policy,
High level of security

89


90


Usability Balance
Usability Balance

Learnability
Efficiency
Memorability
Errors
Satisfaction

91


Ajax Solution

Guides user within all the process
Simplify the form perception
Help user to input complex forms
Ensure quality of data acquisition

Business benefits
Increase conversion rate
increase usage of online applications

92

Atofina navigation

Ajax improves
performance & personalization

93

Atofina Navigation system

Description
Already in 2002
International communication company portal
High level of personalization required
Large amount of data
IBM Portal server

Increase employee self appropriation of the tool
Increase visibility of all content available
Increase speed to find information

94


95

Atofina Scorecard

Usability Balance
Usability Balance

Learnability
Efficiency
Memorability
Errors
Satisfaction

96


Ajax Solution
Autoscroll and adapt to screen size
Cascading menu User Interface elements
Drag & drop interaction, expand collapse
Light code : objects are generated client side (no html code is
downloaded)
DOM based and integrated in IBM portal server

Business benefits
Increase employees satisfaction
Save employees time to find information

97

Electrabel localisator

Ajax guides user
and improve efficiency

98


Description
2006
User must localize himself to have access to information related to
energetic market liberalization
Require user locality (high level of precision)
Require a large amount of choices and data
Require efficiency because highly intrusive question

Make it as efficient as possible

99


100


Usability Balance
Usability Balance

Learnability
Efficiency
Memorability
Errors
Satisfaction

101


Ajax Solution
Auto suggest within all belgian localities and CP
Avoid any mistakes for 1 CP n Localities

Business benefits
Very fast and efficient process
Reusable UI component for all Forms

102

Porsche car configurator

Ajax provides an immersive experience

103


Description

2000
User configures his model in the huge choice of options
Show price as i select option
Linked to real options database

Make it as simple as possible
Make it ludic and create an emotion associated with the product
identity

104


105


Usability Balance
Usability Balance

Learnability
Efficiency
Memorability
Errors
Satisfaction

106


Ajax Solution
Better experience than form based configurator
Real time price calculation
Large amount of options possible
Highly maintainable

Business benefits
High impact on consumer
Efficiency to configure a car and get a price in a complex pricing
model product

107

Non Emakina cases

108

Bet & Win

Ajax improves conversion

109

Bet & win : betting process

Description
Process to place a bet on a bookmaker website
Audience : gambler, compulsive gambler

Increase the number of bets placed by visitors
Increase amounts of each bets
Place a bet as fast as possible

110


111


Usability Balance
Usability Balance

Learnability
Efficiency
Memorability
Errors
Satisfaction

112


Ajax Solution
Few clicks to place a bet
High level of fluidity
Provides immediate preview of the potential gain

Business benefits
Increase conversion rate
Exploit the compulsive behaviors of gambler

113

Netvibes.com

Ajax reinvents the portal experience

114

Netvibes portal experience

Description
A new generation of portal providing a new experience
Web2.0 project

Be ahead of competition with a total new experience
Propose an experience as new as possible
Propose an extremely fluid experience

115


116


Usability Balance
Usability Balance

Learnability
Efficiency
Memorability
Errors
Satisfaction

117


Ajax Solution
Personalize without saving
Rich interaction model : drag & drop
Easy switch between view & edit
Side panel
Widget based user interface

Business benefits
Self explanatory
3’000’000 register user in less than 1 year !
Rich product identity

118

Outcome

Ajax & Business benefits investment optimization

Increase sales through higher conversion & aquisition rates
Increase productivity and reduce human cost
More usable than competitors be ahead of competition
Product experience user centric business & identity
Reduce training & support

120

2.4
Ajax conception methodology
Emakina Academy

121

What is the project methodology
to implement an Ajax based user interface?

122


Specification & User Test &
Inception Conception
Inception Conception implementation optimization
implementation optimization

123

Inception

Inception
Acquire the business knowledge
Acquire the user knowledge
persona, user interview, interview with consumer related services
Define the business objectives

Deliverable
Mission statement document
Requirements document
Sectorial benchmark

124

Conception

Conception
Strategy and user experience definition
Flow maps definition:
– Sitemap, functionnal flows, use case, user interaction diagrams
Wireframe definition
– General interface wireframe
– Screen wireframe
– Animated screen flow wireframe
– Widget and reusable UI element definition
– Clickable prototypes
Graphical design
Moodboards, strategic screen, widget design

125

Specification & implementation

Specification
Specification of all user interface interactions & behaviours
Specification of all web services logic

Implementation
HTML slicing
Client side development
Javascript & Ajax development
Development of a reusable custom library
Usage of Ajax framework or javascript library
Integration with data sources & test

126

User Test & optimization cycle

User Test & optimization cycle
User test
Pre or post release usability user test
Live observation session with real user of predefined scenarios

Optimization cycle
Integration of web metrics / KPI (conversion rate, CTR, error rate,
time to perform)
Observation of web metrics
Definition of candidate improvement
Implementation and release of 1 improvement
Observation of improvement
Conclusion

127


Goodyear Tire Online Sales

128

Goodyear TOS

Description
B2B Tyres order application
Business critical : 20 % of Goodyear Europe sales made through
TOS interface

Propose a user experience similar to phone order
Be ahead of competition
Drive more consumer to online platform
Efficiency, Fluidity
Use Asynchronous process to handle long response time of SAP

129

Goodyear TOS > Before

130

Goodyear TOS > Prototype

131


132


133


134

2.4
Technical Overview
Emakina academy

135

Ajax Defined

Asynchronous Javascript and XML
– Term coined by Jesse James Garrett
– www.adaptivepath.com
Ajax is not a new technology
Mr. Ajax
– Google calls their technique: Javascript
– Also known as XMLHTTP technique
– In use since at least 1997
A bundle of techniques
– XML data interchange only
– Passing Javascript methods to client
– DHTML widgets
– XML & XSLTs
Core techniques are centered around asynchronous
communication to the server without a page refresh

136

What is Ajax?

A web development technique that allows developers to build rich
user experiences similar to desktop applications in a web browser.

JavaScript Ajax XHR

CSS XHTML

XML

137

Ajax building blocks

Vocabulary
HTML and CSS:
Presentation, with standardized style information

Interpreted in DOM
Document Object Model (DOM)
Dynamic display of and interaction with the HTML page

Manipulated by a Scripting language
Javascript:
Client-side code controls actions (controller pattern)

Interaction with server
XMLHttpRequest object:
Asynchronously retrieves data from web server

138

Ajax building blocks > Dynamic Object Model

The DOM exposes a web page to the JavaScript engine
Tree-structured format
– DOM structure well defined byWorld-Wide Web Consortium (W3C)
– Each DOM element is a node
DOM can be read, and also updated (change, insert)
Programming recommendations:
– Use of “id” attribute to make finding elements easy
– CSS styles applied using node’s className attribute:
– Use of XHTML

139

Ajax building blocks > Asynchronous Data Loading

Two techniques: IFrames, XMLHttpRequest
IFrames (Inline Frames) are an old technique given new life with
Ajax
– Invisible frame, in line with other HTML
– IFrame owns the processing
XMLHttpRequest: DOM extensions allowing asynchronous calls

Issue with both: browser compatibility
Developer owns implementation, testing burden…
Or we implement using a toolkit and make it someone else’s
problem

140

Ajax building blocks > JavaScript

Solid browser-based programming language
Source of pop-up windows, back button hacks, image rollovers
Not Java, but from the same family
Java-like syntax
Loosely-typed variables, dynamically interpreted
Functions are objects
Can be involved from outside a class
Can use OOP-like style, but not required

141

Traditional web vs Ajax application model

Ajax app – client code
Standard web
delivered at login,
app—many web
requests processed
pages, each
on client or server
refreshing the
without apparently
screen.
interrupting workflow
Conversational
state on server

142

Classic synchronous vs asynchronous Ajax model

143

Traditional Web Applications: Pages & Actions

Unit of work is a page
Client code concerned with validation
Submits sent to actions
Actions perform work and then forward to next page
Page refresh for each submit

Enter
Action Action Action
Review Cart Enter Billing
Pick An Item Validation Validation Validation
Shipping
Enter Data Enter Data
Persistence Persistence Persistence
‘Add To Cart’ Enter Data
Submit Submit
Forwarding Forwarding Forwarding
Submit

Error Page
‘Can’t Order 500’

144

Ajax Changes Web Apps: Components & Events

Unit of work is a component
Three-Tier Client/Server Model
Client code has validation, flow, layout, data interchange
No submit buttons—save buttons
Only parts of pages are updated at a time

Order Entry
Order Entry Components
Components
Item List (DIV)
Events/Actions
Shopping
Shopping
Item List
Item List Cart
Validation
Cart
Component
Shopping Cart (DIV) Component Component
Component
Persistence
Ajax
Event Handlers
Shipping Form (DIV)
GUI Creation
Shipping Billing
Shipping Billing
Component Component
Billing Form (DIV)
Component Component
ErrorViewer
ErrorViewer
(DIV)
(DIV)
145

XMLHttpRequest Object: Methods

open(“method”, “URL”)
open(“method”, “URL”, async, username, password)
– Assigns destination URL, method, etc.
send(content)
– Sends request including postable string or DOM object data
abort()
– Terminates current request
getAllResponseHeaders()
– Returns headers (labels + values) as a string
getResponseHeader(“header”)
– Returns value of a given header
setRequestHeader(“label”,”value”)
– Sets Request Headers before sending

146

Case > Google Suggests

Wow..I didn’t
know soccer
teams did web
programming..

147

How It Works

Fires roughly every keystroke
– Uses a timer to determine when to send a request to the server
– If you type at “typical” user typing speed—every keystroke
– If you type at “programmer” typing speed—every few keystrokes
Creates a hidden DIV that is shown when you start typing
DIV is populated with return results from server
Text field is set to include the next word from the server list and
everything to the right of the cursor position is highlighted
– If you hit the right arrow, it assumes you want that text and positions
you at the end of the text field
Results cached; if you backspace, server is not called again
Has a timer adjustment to increase or slow down server calls
– Slow dialup sessions hit server fewer times
– Fast broadband hits a lot

148

JavaScript Returned

sendRPCDone( frameElement, quot;the kquot;, new Array(quot;the killersquot;, quot;the
knotquot;, quot;the killers lyricsquot;, quot;the kegquot;, quot;the killsquot;, quot;the kinksquot;, quot;the killers
bandquot;, quot;the kite runnerquot;, quot;the king and iquot;, quot;the killers hot fussquot;), new
Array(quot;5,980,000 resultsquot;, quot;5,050,000 resultsquot;, quot;339,000 resultsquot;,
quot;1,580,000 resultsquot;, quot;10,800,000 resultsquot;, quot;1,350,000 resultsquot;,
quot;876,000 resultsquot;, quot;204,000 resultsquot;, quot;25,100,000 resultsquot;, quot;388,000
resultsquot;), new Array(quot;quot;));

149

2.5
Building Ajax
Emakina Academy

150

What is needed to build Ajax
applications?

In some ways, Ajax development is more challenging than
traditional web development.
– Many more moving parts
more granular
events
– JavaScript & DOM
– CrossBrowser Issues
Tools & frameworks needed to make things easier

But in the end:

More challenging More rewarding
More rewarding More added value
More challenging More added value
for your customers More differentiation towards competition
for your customers More differentiation towards competition
151

Ajax Toolkits & Frameworks

Frameworks Examples
There are many proposed Ajax.Net
libraries/frameworks Backbase
Survey of Ajax/JavaScript Bitkraft (.NET)
Libraries: Django
http://wiki.osafoundation.org/bin/vi
DOJO
ew/Projects/AjaxLibraries
DWR (Java) Microsoft Atlas
MochiKit
Prototype
Rico
SAjax
Sarissa (XML/XSL)
Script.aculo.us

152

Ajax Frameworks

Pure JavaScript Framework
– Infrastructure
Provides basic piping & portable browser abstractions
Content up to developer
Typical Functionality:
– Wrapper around XMLHttpRequest
– XML manipulation & interrogation
– DOM manipulations based on responses from XMLHttpRequest
– Application Framework
Includes basic Infrastruture functionality

Server-Side Framework
– HTML/JavaScript Generation
Server provides complete HTML/JS code generation and browser 
server coordination
Browser-side coding is for customization
– Remote Invocation
JavaScript calls routed directly to server-side functions (Java Methods) and
returned back to Javascript callback handlers

153

Pick a Framework… any Framework

www.Ajaxpatterns.org Server-Side (Multi Language)
– Cross-Platform Asynchronous Interface
Toolkit (5/05)
Pure JavaScript
– SAjax (3/05)
– DOJO (9/04)
– Javascript Object Notation (JSON) &
– Prototype (2001) JSON-RPC
– Open Rico (5/05) – Javascript Remote Scripting (2000)
– Qooxdoo (5/05)
Server-Side (Java)
Pure JavaScript Infrastructural – Echo2 (3/05)
– AjaxJS (5/05) – Direct Web Remoting (DWR) (2005)]
– HTMLHttpRequest (2001) – ThinkCAP Minerva (04/2005)
– Interactive Website Framework (5/05)
Server-Side (Lisp)
– LibXMLHttpRequest (6/03)
– CL-Ajax
– RSLite
Server-Side (.NET)
– Sack (5/05)
– Ajax.NET (305)
– Sarissa (2/03)
Server-Side (PHP)
– XHConn (4/05)
– AjaxAC (4/05)
– JPSpan
– XAjax
Server-Side (Ruby)
– Ruby-On-Rails (3/05)

154

A New Way of Building Applications

Ajax Applications Are:

3-tier client/server apps
– Browser ↔ App Server ↔ Data Source
Event driven
– User clicks, user drags, user changes data
Graphics Intensive
– Visual Effects, Rich Visual Controls
Are Data Oriented
– Users are manipulating and entering data
Are Complex
– Pages hold many more controls and data than page-oriented
applications
– Multiple Master-Detail Relationships in one page

155

3.1
B2B Ajax Examples
An Emakina Review

156

Project Collaboration > Basecamp

Basecamp is a unique project
collaboration tool. Projects
don't fail from a lack of charts,
graphs, or reports, they fail
from a lack of communication
and collaboration. Basecamp
makes it simple to
communicate and collaborate
on projects.

157
Visit site

Group Chat for Business > CampFire

Campfire is a web-based group
chat tool that lets you set up
password-protected chat rooms
in just seconds. Invite a client,
colleague, or vendor to chat,
collaborate, and make
decisions. Set up a room on
your intranet for internal
communications.

158
Visit site

Collaborative Writing > Writely

• Put your words into Writely
quickly and easily.
• Keep them online and edit them
from anywhere.
• Get them back out just as easily.

159
Visit site

Online Writing > ZohoWriter

• Online tool to create
documents, edit them
your way, and share with
anyone...

160
Visit site

Group Spreadsheets > Google

• Choose who can access your
spreadsheets.
• Share documents instantly.
• Edit with others in real time.
• Multiple people can edit or
view your spreadsheet at the
same time as you - their
names will appear in an on-
screen chat window.

161
Visit site

3.2
Ajax Opportunities
Emakina Academy

162

User Interfaces Evolve Beyond the Web

Internet users are expecting more
The HTML page model was too limiting for applications
Business are seeing increased ROI with improved user experiences

“The web today is not good enough to
pull money out of pockets.”
Historical Web Development
-- Forrester Research
Problems

Other
“Despite advances…the browser
DB Integration cannot deliver experiences that are as
responsive and interactive as those of
Automation
client-based applications.”
Cross-device
Cross-
-- Jupiter Media
Personalization
Development time
This was correct 3 years ago,
This was correct 3 years ago,
Better interfaces
but today it has been solved
but today it has been solved
163

In the Face of Enormous Opportunity….

Internet Extranet Intranet

Interactive Ecommerce Customer Enterprise Department
Partner Apps
Partner Apps
Sites Apps Apps IT Apps IT Apps

Global 3,500 executives…expect eCommerce revenues to comprise 20% of
Global 3,500 executives…expect eCommerce revenues to comprise 20% of
their revenues five years from now.
their revenues five years from now.

--Forrester Research
164

In the Face of Enormous Opportunity….


Partner Apps
Partner Apps

A better online customer experience can actually drive profitability…improving
A better online customer experience can actually drive profitability…improving
margins by 25 percent.
margins by 25 percent.

–AMR Research
–AMR Research
165

…Web Applications Used to Disappoint


Partner Apps
Partner Apps

E-commerce sites lose almost half of their potential sales because users
E-commerce sites lose almost half of their potential sales because users
cannot use the site.
cannot use the site.

--Jakob Nielsen
--Jakob Nielsen
166

…Web Applications Used to Disappoint


Partner Apps
Partner Apps

To compensate for hard-to-use apps, firms pony up for additional training...and
To compensate for hard-to-use apps, firms pony up for additional training...and
application redesign [that] can approach the $1 million mark.
application redesign [that] can approach the $1 million mark.

167

Ajax Saves Money

Hourly Labor Rate
X
Time Saved per Transaction
X
Number of Transactions per year

A hell of a lot of Money Saved

168

Sample Calculations

Assumptions: Assumptions:
– Hosted web app, high speed or – Remote employee using dial-up
LAN
– Hourly Labor Rate: $20 – Hourly Labor Rate: $20
– Seconds Saved per Transaction: – Seconds Saved per Transaction:
36 Seconds 199.01 Seconds
– Number of Transactions per year: – Number of Transactions per year:
50,000 50,000
Savings: Savings:
– $10,000 – $55,281
– 500 Person Hours – 2,764 Person Hours

169

Bottom Line

Low Cost of Web Apps (Web 1.0)
+
Usability of Desktop Applications

Web 2.0 Ajax Applications

170

Benefits

Measurable Harder to measure
Steps to complete a task Familiar user interface
Time spent waiting for data to be Improved application
transmitted responsiveness
Time spent completing a
User experience
particular task
Bandwidth consumed for the
entire task

Easily 80% Typically 50% Average 66%

Data transfer Transmission time Process completion time
171

3.3
Ajax Future
Emakina Academy

172

The Future of Ajax

Moving past the hype:
Making cool apps that are actually beneficial to the user!
Moving forward with the Ajax “technique”
– Usability
– Desktop on the Web / “WebOS”
We will see more integration with
– Flash
– Scaling Vector Graphics (SVG)
– XForms
– XHTML 2 / HTML 5

173

Top 10 Reasons Why Ajax is here to stay

1. Usability and User Experience Are King
2. Benefits of Regular Web Applications
3. Cross Browser and Cross Platform
4. Open Standards Based
5. Server Technology Agnostic
6. Web 2.0
7. Adoption Is Strong with Industry Leaders
8. Low Incremental Cost
9. Plays Nicely with Flex and Flash
10. XAML, XUL, XForms...
Not Yet.

174

Usability and User Experience Are King

1. Usability and User
Developers and designers are beginning to realize not only the
Experience Are King
2. Benefits of Regular
large role user-experience plays in market success, but how it
Web Applications
affects the cost of ownership.
4. Cross Browser and
Cross Platform
The success of Ajax-based applications such as Google Maps over
5. Open Standards
Based

more traditional alternatives like MapQuest show that success can
6. Server Technology
Agnostic

come to products that provide better user experience.
7. Web 2.0
8. Adoption Is Strong
with Industry Leaders
Ajax is playing a leading role in making Web applications usable. It
9. Plays Nicely with Flex
allows pages to request small bits of information from the server
and Flash
10.XAML, XUL,
instead of whole pages. This incremental updating of pages
XForms...
Not Yet.
eliminates the page refresh problem and slow response that have
plagued Web applications since their inception.
People have learned they need decent user interfaces and are
willing to invest in it. The bottom line here is that if users can get
things done faster there's value in that whether the application is an
internal intranet application, or a public Web service

175

Benefits of Regular Web Applications

Ajax is the face of today's Web applications—and Web applications
Experience Are King
enjoy certain benefits over desktop-based ones.
Web Applications
These include a lower cost of deployment, easier support,
Cross Platform
shorter development times, and no installation; these are just
5. Open Standards
Based

some of the benefits that have caused businesses and consumers
Agnostic

to adopt Web-based applications since the late 90s.
7. Web 2.0
Ajax will only help Web applications get better and achieve more for
and Flash
end users.
10.XAML, XUL,
XForms...
Not Yet.

176

Incremental Skills, Tools and Technologies Upgrade

Because Ajax is based on de facto standards that have been
Experience Are King
around for several years, many developers have at least been
Web Applications
exposed to the technologies required to build Ajax applications.
Cross Platform
This means it's not huge learning curve for development teams to
5. Open Standards
Based

shift from vanilla HTML and form-based applications to rich Ajax
Agnostic

style applications.
7. Web 2.0
It also means that development teams working on Web applications
and Flash
can incrementally upgrade their user interfaces to Ajax; it
10.XAML, XUL,
XForms...
doesn't require a wholesale upgrade and re-write of their Web
Not Yet.

applications.
Given the large investments that have been made in deploying
browser-based applications since the late 90s, it's very appealing to
be able to leverage existing systems and improve the user
experience.

177

Cross Browser and Cross Platform

IE and Mozilla-based FireFox have the lion's share of the market
Experience Are King
and are arguably the easiest browsers on which to build Ajax Web
Web Applications
applications, but now it's possible to build Ajax-based rich Internet
Cross Platform
applications that work on most modern Web browsers.
5. Open Standards
Based

This is an important reason why Ajax has become so popular.
Agnostic
7. Web 2.0
Although many developers were aware this was possibly years ago
with Internet Explorer, it was overlooked because of the vendor
and Flash
lock-in factor. Thanks, Mozilla and FireFox.
10.XAML, XUL,
XForms...
Not Yet.

178

Emakina Academy 4 - AJAX, Flash & Rich Internet Applications: harnessing the technological background of the Web 2.0 revolution

Emakina Academy 4 - AJAX, Flash & Rich Internet Applications: harnessing the technological background of the Web 2.0 revolution

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (18)

Similar a Emakina Academy 4 - AJAX, Flash & Rich Internet Applications: harnessing the technological background of the Web 2.0 revolution

Similar a Emakina Academy 4 - AJAX, Flash & Rich Internet Applications: harnessing the technological background of the Web 2.0 revolution (20)

Más de Emakina

Más de Emakina (20)

Último

Último (20)

Emakina Academy 4 - AJAX, Flash & Rich Internet Applications: harnessing the technological background of the Web 2.0 revolution