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

The answer
5

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
Integrated communication
EMAIL
EMAIL
RICH COMMUNICATION
RICH COMMUNICATION
BANNERING
BANNERING
YOUR AFFILIATE
AFFILIATE
EMAKINA CUSTOMERS
COMPANY SMS, MMS
SMS, MMS
IVR
IVR
IDEAS
IDEAS
Integrated communication
Integrated communication
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

Customers
11

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
Source: Forrester Research, Inc.

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
Source: Forrester Research, Inc.

Forrester’s X-Internet Timeline
2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010
22
Source: Forrester Research, Inc.

Rich Internet Application Fit
Traditional
Software UI
New classes
Executable of applications
Internet UI
More value from
existing applications
HTML UI
23
Source: Forrester Research, Inc.

Rich Internet Applications
24

Rich Internet Applications
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:
\"... browser-based applications deliver
sub par user experiences ...
Executable Internet Technology will help
companies return responsiveness and
productivity to Net-based apps.\"
27
Source: Forrester Research, Inc.

Summary
Results
Results
Experience
Experience
Rich Internet Applications
Rich Internet Applications
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

Then…Windows
35

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 \"Waiting\" 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?
Rich Internet Applications
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

Case Electrabel registration
90

Case Electrabel registration
Usability Balance
Usability Balance
Learnability
Efficiency
Memorability
Errors
Satisfaction
91

Case Electrabel registration
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
Business objectives :
Increase employee self appropriation of the tool
Increase visibility of all content available
Increase speed to find information
94

Atofina Navigation system
95

Atofina Scorecard
Usability Balance
Usability Balance
Learnability
Efficiency
Memorability
Errors
Satisfaction
96

Atofina Navigation system
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

Electrabel localisator
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
Business objectives :
Make it as efficient as possible
99

Electrabel localisator
100

Electrabel localisator
Usability Balance
Usability Balance
Learnability
Efficiency
Memorability
Errors
Satisfaction
101

Electrabel localisator
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

Electrabel localisator
Description
2000
User configures his model in the huge choice of options
Show price as i select option
Linked to real options database
Business objectives :
Make it as simple as possible
Make it ludic and create an emotion associated with the product
identity
104

Porsche car configurator
105

Porsche car configurator
Usability Balance
Usability Balance
Learnability
Efficiency
Memorability
Errors
Satisfaction
106

Porsche car configurator
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
Business objectives :
Increase the number of bets placed by visitors
Increase amounts of each bets
Place a bet as fast as possible
110

Bet & win : betting process
111

Bet & win : betting process
Usability Balance
Usability Balance
Learnability
Efficiency
Memorability
Errors
Satisfaction
112

Bet & win : betting process
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
Business objectives :
Be ahead of competition with a total new experience
Propose an experience as new as possible
Propose an extremely fluid experience
115

Netvibes portal experience
116

Netvibes portal experience
Usability Balance
Usability Balance
Learnability
Efficiency
Memorability
Errors
Satisfaction
117

Netvibes portal experience
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

Global benefit
119

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

Ajax conception methodology
Specification & User Test &
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
Specification & User Test &
Specification & User Test &
Inception Conception
Inception Conception implementation optimization
implementation optimization
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
Specification & User Test &
Specification & User Test &
Inception Conception
Inception Conception implementation optimization
implementation optimization
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
Specification & User Test &
Specification & User Test &
Inception Conception
Inception Conception implementation optimization
implementation optimization
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
Specification & User Test &
Specification & User Test &
Inception Conception
Inception Conception implementation optimization
implementation optimization
127

Ajax conception methodology
Goodyear Tire Online Sales
128

Goodyear TOS
Description
B2B Tyres order application
Business critical : 20 % of Goodyear Europe sales made through
TOS interface
Business objectives :
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

Goodyear TOS > Prototype
132

Goodyear TOS > Prototype
133

Goodyear TOS > Prototype
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, \"the k\", new Array(\"the killers\", \"the
knot\", \"the killers lyrics\", \"the keg\", \"the kills\", \"the kinks\", \"the killers
band\", \"the kite runner\", \"the king and i\", \"the killers hot fuss\"), new
Array(\"5,980,000 results\", \"5,050,000 results\", \"339,000 results\",
\"1,580,000 results\", \"10,800,000 results\", \"1,350,000 results\",
\"876,000 results\", \"204,000 results\", \"25,100,000 results\", \"388,000
results\"), new Array(\"\"));
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
Internet Extranet Intranet
Interactive Ecommerce Customer Enterprise Department
Interactive Ecommerce Customer Enterprise Department
Partner Apps
Partner Apps
Sites Apps Apps IT Apps IT 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
--Forrester Research
164

In the Face of Enormous Opportunity….
Internet Extranet Intranet
Internet Extranet Intranet
Interactive Ecommerce Customer Enterprise Department
Interactive Ecommerce Customer Enterprise Department
Partner Apps
Partner Apps
Sites Apps Apps IT Apps IT Apps
Sites Apps Apps IT Apps IT 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
Internet Extranet Intranet
Internet Extranet Intranet
Interactive Ecommerce Customer Enterprise Department
Interactive Ecommerce Customer Enterprise Department
Partner Apps
Partner Apps
Sites Apps Apps IT Apps IT Apps
Sites Apps Apps IT Apps IT 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
Internet Extranet Intranet
Internet Extranet Intranet
Interactive Ecommerce Customer Enterprise Department
Interactive Ecommerce Customer Enterprise Department
Partner Apps
Partner Apps
Sites Apps Apps IT Apps IT Apps
Sites Apps Apps IT Apps IT 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.
--Forrester Research
--Forrester Research
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
3. Low Incremental Cost
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
1. Usability and User
Ajax is the face of today's Web applications—and Web applications
Experience Are King
2. Benefits of Regular
enjoy certain benefits over desktop-based ones.
Web Applications
3. Low Incremental Cost
These include a lower cost of deployment, easier support,
4. Cross Browser and
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
6. Server Technology
Agnostic
to adopt Web-based applications since the late 90s.
7. Web 2.0
8. Adoption Is Strong
with Industry Leaders
Ajax will only help Web applications get better and achieve more for
9. Plays Nicely with Flex
and Flash
end users.
10.XAML, XUL,
XForms...
Not Yet.
176

Incremental Skills, Tools and Technologies Upgrade
1. Usability and User
Because Ajax is based on de facto standards that have been
Experience Are King
2. Benefits of Regular
around for several years, many developers have at least been
Web Applications
3. Low Incremental Cost
exposed to the technologies required to build Ajax applications.
4. Cross Browser and
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
6. Server Technology
Agnostic
style applications.
7. Web 2.0
8. Adoption Is Strong
with Industry Leaders
It also means that development teams working on Web applications
9. Plays Nicely with Flex
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
1. Usability and User
IE and Mozilla-based FireFox have the lion's share of the market
Experience Are King
2. Benefits of Regular
and are arguably the easiest browsers on which to build Ajax Web
Web Applications
3. Low Incremental Cost
applications, but now it's possible to build Ajax-based rich Internet
4. Cross Browser and
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.
6. Server Technology
Agnostic
7. Web 2.0
Although many developers were aware this was possibly years ago
8. Adoption Is Strong
with Industry Leaders
with Internet Explorer, it was overlooked because of the vendor
9. Plays Nicely with Flex
and Flash
lock-in factor. Thanks, Mozilla and FireFox.
10.XAML, XUL,
XForms...
Not Yet.
178

Open Standards Based
1. Usability and User
Ajax is based on open standards supported by many browsers and
Experience Are King
2. Benefits of Regular
platforms; this means there's no fear of vendor lock-in.
Web Applications
3. Low Incremental Cost
Most of the technologies that make up Ajax have been used
4. Cross Browser and
Cross Platform
extensively for years. These aren't hot, new, untested technologies
5. Open Standards
Based
that will only work most of the time.
6. Server Technology
Agnostic
7. Web 2.0
Browsers are a trusted application platform for most users and
8. Adoption Is Strong
with Industry Leaders
enterprises now; this wasn't the case five years ago.
9. Plays Nicely with Flex
and Flash
One of the turning points for Ajax was the Mozilla 1.0 release that
10.XAML, XUL,
XForms...
FireFox is based on and supported the XML HTTP Request Object.
Not Yet.
This allowed the same asynchronous data transfer that had been
possible in IE for years.
That support and FireFox's rapid adoption really helped people
understand that cross-browser rich Internet applications were
possible
179

Server Technology Agnostic
1. Usability and User
Much like how Ajax is browser independent, it's also perfectly
Experience Are King
2. Benefits of Regular
compatible with any standard Web server and server-side
Web Applications
3. Low Incremental Cost
language. PHP, ASP. ASP.Net, Perl, JSP, Cold Fusion, and so
4. Cross Browser and
Cross Platform
forth—take your pick and start building.
5. Open Standards
Based
This has helped move Ajax along because all Web developers can
6. Server Technology
Agnostic
use and talk about a common presentation layer.
7. Web 2.0
8. Adoption Is Strong
with Industry Leaders
9. Plays Nicely with Flex
and Flash
10.XAML, XUL,
XForms...
Not Yet.
180

Web 2.0
1. Usability and User
Love it or hate it. The Web 2.0 movement is in full swing and
Experience Are King
2. Benefits of Regular
turning the heads of programmers, VCs, marketers, and end users
Web Applications
3. Low Incremental Cost
alike.
4. Cross Browser and
Cross Platform
This is definitely helping Ajax adoption for the time being; when the
5. Open Standards
Based
hype eventually dies down, it will be interesting to see what
6. Server Technology
Agnostic
happens.
7. Web 2.0
8. Adoption Is Strong
with Industry Leaders
Ajax interfaces are a key component of many Web 2.0 applications
9. Plays Nicely with Flex
and Flash
from BackPack to Google Maps.
10.XAML, XUL,
XForms...
Likely the hype will help accelerate the adoption of Ajax and the
Not Yet.
usability benefits will keep it around.
One of the key principles of Web 2.0 is using the Web as a
platform for application development, instead of merely Web
pages.
Highly usable and interactive user interfaces are a key part of
any application platform.
181

Adoption Is Strong with Industry Leaders
1. Usability and User
Widespread adoption of Ajax by industry leaders proves market
Experience Are King
2. Benefits of Regular
acceptance and validity of this technology group. Everybody is
Web Applications
3. Low Incremental Cost
jumping on the bandwagon, including Google, Yahoo, Amazon, and
4. Cross Browser and
Cross Platform
Microsoft (to name a few). It was really Google Maps that captured
5. Open Standards
Based
the attention of Web developers. When people began to investigate
6. Server Technology
Agnostic
how Google was able to deliver such an incredible user experience
7. Web 2.0
8. Adoption Is Strong
in the browser without any plug-ins, they found Ajax under the
with Industry Leaders
9. Plays Nicely with Flex
hood.
and Flash
10.XAML, XUL,
Of course, it's not enough for Google to do something for Ajax to
XForms...
Not Yet.
make the leap to mainstream enterprise. But, if you look at the
customer list of Ajax development companies such as eBusiness
Applications (www.ebusinessapps.com) or Tibco
(http://www.tibco.com), you'll see Fortune 500 enterprises including
major financial institutions, government agencies, airlines, and
other major industries adopting Ajax and they were doing so before
the term \"Ajax\" was coined
182

Plays Nicely with Flex and Flash
1. Usability and User
Much of the development community is locked in a heated debate
Experience Are King
2. Benefits of Regular
of Flash vs. Ajax.
Web Applications
3. Low Incremental Cost
There are definitely advantages and disadvantages to both
4. Cross Browser and
Cross Platform
technologies in different situations, but there's also a lot of synergy
5. Open Standards
Based
and opportunity for them to work together.
6. Server Technology
Agnostic
7. Web 2.0
Many developers and vendors have realized this and have
8. Adoption Is Strong
with Industry Leaders
implemented some really great software using both Ajax and Flash
9. Plays Nicely with Flex
and Flash
in harmony. Macromedia is also keen to see these technologies
10.XAML, XUL,
XForms...
work together
Not Yet.
183

Next-Gen RIA Technologies for the Web Aren't Here Yet
It would be great to build applications today in XUL, but because it's not
1. Usability and User
Experience Are King
supported by 90% of the browsers out there, it's not considered a practical
2. Benefits of Regular
solution for most purposes (yet). However, Ajax programmers should keep
Web Applications
3. Low Incremental Cost
an eye on technologies such as XAML and XUL. There is no doubt these
4. Cross Browser and
technologies would make it easier to develop rich Internet applications, but
Cross Platform
5. Open Standards
they are in conflict with each other and don't have the same market
Based
penetration or momentum yet.
6. Server Technology
Agnostic
Many developers and technology companies are trying better technologies
7. Web 2.0
for RIA all the time. The fact of the matter is that Ajax is here today and
8. Adoption Is Strong
with Industry Leaders
working, it's cross-browser and cross-platform, and both users and
9. Plays Nicely with Flex
developers like what it can do.
and Flash
10.XAML, XUL,
High profile Ajax applications like Google Maps have emerged as clear
XForms...
Not Yet.
leaders in their field (who uses MapQuest anymore?). Likewise, leading
Fortune 500 enterprises are using Ajax and are even contributing tools back
to the community. In general, the industry has agreed on the underlying
Ajax technologies and is using them. Renewed emphasis on rich Internet
applications and a key advancement in browser technologies has made
Ajax not simply a new tool in the developer's toolkit, but a
phenomenon that is changing the way Web applications are written.
Nobody can say for sure with what or when it will be replaced as the
preferred platform for rich Internet applications, but many factors support a
sustained Ajax presence over the next couple years.
184

3.4
Ajax Next Steps
Emakina Academy
185

Nothing new beneath the sun
These projects demonstrate that Ajax is not only technically sound,
but also practical for real-world applications. This isn’t another
technology that only works in a laboratory. We’ve only scratched
the surface of the rich interaction and responsiveness that Ajax
applications can provide. Ajax is an important development for Web
applications, and its importance is only going to grow.
Ajax applications can be any size, from the very simple, single-
function Google Suggest to the very complex and sophisticated
Google Maps.
At Emakina, we have a long experience with all of the fundamentals
that contribute to Ajax and have used it in various projects. It’s only
recently that the combination became familiar
186

Moving forward
The biggest challenges in creating Ajax applications are not
technical. The core Ajax technologies are mature, stable, and well
understood. Instead, the challenges are for the designers of these
applications: to forget what we think we know about the limitations
of the Web, and begin to imagine a wider, richer range of
possibilities.
The biggest challenge is… YOU
Do you already have the creativity, the insight to see what matters
for your users and customers?
At Emakina we can assist you with any step of the proces
187

Building Rich Web Applications
There is more to building rich applications than Ajax
– Put \"Engineering\" into your client
– Flesh out the intended scenarios and application flow
– Avoid (or minimize) breaking the Web Model
Invest wisely…
– Invest smartly and don't lose sight of your customer
– Its your customer, not the technology you apply, that matters
– But if you let your customer profit, you will profit as well
– All time that the customer can save while interacting with your tasks,
services, … can be invested into human2human contact
It’s going to be fun
188

Typical Emakina project
Business Case Requirements Development User Testing
Business Case Requirements Development User Testing
Consulting Prototyping Coaching Optimization
Consulting Prototyping Coaching Optimization
Ideas Wireframes Team assistance Match end result vs
Ideas Wireframes Team assistance Match end result vs
Concepts Proof of concept Problem solving expectations
Concepts Proof of concept Problem solving expectations
Objectives Architecture Knowledge transfer Human feedback
Objectives Architecture Knowledge transfer Human feedback
Priorities Feasibility Documentation Usability finetuning
Priorities Feasibility Documentation Usability finetuning
189

Is Ajax ready for Prime Time?
They are… are you?
They are… are you? 190