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

1

AjaxEmakina Academy

2

Agenda

Part 1 - 09h30-10h30

�Welcome & Introduction

�About Emakina

�User Experience

�Prehistory of Ajax�B2B Problems

�Flash vs Ajax

Part 1 - 09h30-10h30

�Welcome & Introduction

�About Emakina

�User Experience

�Prehistory of Ajax�B2B Problems

�Flash vs Ajax

Part 2 - 10h30-11h30

Ajax & Usability

�Usability

�Business Aspects

�Selected Cases�Technical Overview

Part 2 - 10h30-11h30

Ajax & Usability

�Usability

�Business Aspects

�Selected Cases�Technical Overview

Part 3 - 11h30-12h30

Conclusions & Summary

�B2B Examples

�Ajax Opportunities

�Next Steps�Emakina methodology

Part 3 - 11h30-12h30

Conclusions & Summary

�B2B Examples

�Ajax Opportunities

�Next Steps�Emakina methodology

3

1.1Welcome & Introduction

Emakina Academy,September 13

4

Find the common thread

5

The answer

6

1.2About Emakina


7

Consulting

Strategy and planningMarketing studies ROI studies

Technology

E-Business platformsIntegrationWeb developmentHosting

Creation

ConceptGraphic Design

UsabilityContent

Marketing

Tactical actionsMulti-channel

Direct to 1-to-1

Emakina Model

SuccessfulE-Commerce

8

AWARENESS

AWARENESS

Customer Recruitment

CompanyCompany

WebsitesPromo-sites

WebsitesPromo-sites

Rich modulesGames

Rich modulesGames

Rewardmechanisms

Rewardmechanisms

Communicate Offer

Communicate Offer

BanneringNewslettersBannering

Newsletters

CUSTOMERSCUSTOMERS

Recruit VisitorsRecruit Visitors

CollectProspects

CollectProspects

Convert toCustomersConvert toCustomers

9

Multi-Channel Approach

YOURCOMPANY

YOURCOMPANY CUSTOMERSCUSTOMERSEMAKINAEMAKINA

Above the lineAgency

Above the lineAgency

Below the lineAgency

Below the lineAgency

IDE

AS

IDE

AS

IDE

AS

IDE

AS

Integrated communicationIntegrated communication

Integrated communicationIntegrated communication

BANNERINGBANNERING

IVRIVR

EMAILEMAIL

WORLD WIDE WEBWORLD WIDE WEB

VIRAL MARKETINGVIRAL MARKETING

SMS, MMSSMS, MMS

AFFILIATEAFFILIATE

SEARCH ENGINESEARCH ENGINE

RIC

H C

OM

MU

NIC

AT

ION

RIC

H C

OM

MU

NIC

AT

ION

10

Competence Center

� Internet technologies– Hosting, Security– HTML / DHTML (JavaScript)– XML / WML / VXML– Flash / Shockwave / VR / 3D– ColdFusion MX– Real / WMA / QuickTime– SOAP, Web Services– MS SQL Server / Oracle 9i– JAVA / JSP / J2EE– MS ASP / COM (Visual Basic)– ASP.NET / .Net– PHP– SAP (BAPI / Business connector)– C, C++, C#

� E-business applications– Application Server :

IBM Websphere Suite, ATG Dynamo, ColdFusion MX

– CMS :emagiC, Tridion R5

– Portal :SAP Portal, IBM Portal Server

– NetIQ Webtrends Reporting Center, ...

11

Customers

12

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

13

1.3The User Experience


14

Experience matters

15

The Experience Matters

>

16

Evolution of Economic Value

Market pricing Premium pricing

UndifferentiatedCompetitive

Position

UniqueCompetitive

Position

Relevant to CustomerNeeds

Irrelevant to CustomerNeeds

ExtractCommodities

ExtractCommodities

MakeGoods

MakeGoods

DeliverServices

DeliverServices

StageExperiences

StageExperiences

17

Examples of the Economics

$5.00 for a LatteCoffee costs 49 cents

$250 for a Birthday PartyEvolution of the

Birthday Experience

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

18

Evolution of Digital Experience

Market pricing Premium pricing

UndifferentiatedCompetitive

Position

UniqueCompetitive

Position

Relevant to CustomerNeeds

Irrelevant to CustomerNeeds

Presence(Flat HTML)

Presence(Flat HTML)

Function(Perl Script)

Function(Perl Script)

Features(Web Apps)

Features(Web Apps)

Experiences(RIAs)

Experiences(RIAs)

19

The Web Doesn’t Cut It

5

15

25

35

-25-30-50 -20 -15 -10 -5 0 5 10 15 20 25 50

Number of sitesin eachrangeof scores

Top score: 23

Sites are graded on 25 tests; each test isscored on a scale from -2 (crit ical failure) to 2 (exemplary pass)

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

Passing grade:

Average score overall:

Average B2C score:

Average B2B score:

25 or higher

-3.5

-2.2

-5.5

Commonly failed testsGuided searchComprehensive and precise searchAct ive personalizat ionProact ive customer serviceAccessibilityEfficient page layoutTask-specific interact ivitySite reliabilityEssent ial content availableConsistent navigat ion

Failure rate87%84%80%75%70%66%59%55%54%48%

Source: Forrester Research, Inc.

20

How We Got Here

User Interface

Deployment Low cost High cost High cost Low cost

None: only displays data sent by server

High: real-time computation coupled with access to server-side data

Medium: real-time computation, complicated information visualization

None: only displays data sent by server

Low: limited customization of page appearance

Medium: resizable components, configurable display, server-side data

High: resizable components, configurable display, local data, custom

shortcuts

None:No customization possible

Low:Point-and-click, form fill-in

High:Drag-and-drop, point-and-

click

High:Drag-and-drop, point-and-

click

None: dumb green-screen or command-line

terminals

Client/ServerDesktopMainframe Websites

Interactivity

Flexibility

Power


21

A New Solution is Needed – the X Internet

Forrester’s Definition:

Intelligent apps that execute code near the user to createrich, engaging user experienceson the Net


22

Forrester’s X-Internet Timeline

20012000 2002 2003 2004 2005 2006 2007 2008 2009 2010


23

Rich Internet Application Fit


TraditionalSoftware UI

ExecutableInternet UI

HTML UI

More value fromexisting applications

New classesof applications

24

Rich Internet Applications

25


√Easy to add communications features

√√Traditional n-tier development model

√√Works online

√√Scalable

√√Drag and Drop

√√Fast response times (no page refresh)

√√Interactive UI – validation, formatting

√√Standards-based: XML, SOAP, J2EE

√√Multimedia

√√Magazine-like layout

√√Progressive download

√√Cross-platform

√√Instant Deployment

Rich Internet AppsDesktopWeb

26

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

27

X Internet

Forrester Research:

"... browser-based applications deliversub par user experiences ...Executable Internet Technology will help companies return responsiveness and productivity to Net-based apps."


28

Summary

Rich Internet ApplicationsRich Internet Applications

ExperienceExperience

ResultsResults

29

1.4Prehistory of Ajax

Emakina Academy

30

Human nature

Abraham Maslow:

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

31

Web 2.0

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

32

The right tool for the right context

User generated content

Web 2.0 Buzzword B2BB2C

Works only for top brands (eg. Apple); others require moderation

Brand risk as it quickly becomes comparison platform

Collaboration

Usability Key success factor when applied methodologically

Perpetual beta Acceptable if limited outages(see Yahoo experience)

Unacceptable � no compromise on continuity

Strengthens the brand experience

Communities Requires moderation C2C communities not allowedPotential branded B2C academies

Slim Ajax applicationsLightweight DHTML

Mostly positive Requires large installed base(consider non-Ajax backup)

Key success factor

Web as platformApplications within browser

Positive Less dependency on plugins but requires large installed base

Brand risk for user2userOkay for assistant2customer

User feedbackContribution to roadmap

Positive as it gives valuable feedback Positive if applied systematically and discretely

Look and feel Requires discretionValuable service before branding

Key appeal factor

Personalization

Customization Requires good features(see Google homepage)

Seldom used(see myYahoo)

Key success factor when relevantKey success factor(see Amazon)

33

96 97 98 99 00 01 02 03 04 05

JavaScript

NS 2.0B3

CSS

IFrames

IE 3

JScript

Browser Wars

FF 1.0

CSS

ECMAScript

DOM

IE 4

DOM 1

Flash 3

Flash 9

Java AppletE4X

SVG

FF 2

XSL-T

XML

IE 5

XMLHTTP

DOM 3

XForms

XSL-T

XSL-T 2

The Web Depression Web 2.0

RDF

It Works!

IE 6

XHTML SVG

WSDL

Mozilla 1.0

A Brief History

06

34

In the beginning, there was DOS

35

Then…Windows

36

Windows UI Matures…

37

The Future…Maybe?

38

History repeats itself, over the Web

Watching grass grow,

watching paint dry,filling in forms, …

39

The new web

Don’t focus on technology,

focus on getting the work done

40

Example of Microsoft Ajax Application

Useful functions

Useful functions

Application like

behaviour

Application like

behaviour

Application like

behaviour

Application like

behaviour

Interactivity without full page reload




Contextual actions

Contextual actions

Integrated coexisting

applications with added value

Integrated coexisting

applications with added value

Rating system

Rating system

41

Key disadvantages of traditional web apps

Poor InteractivityUsers must wait for full page reloads after each interaction with the server.

Slow & UnresponsiveClassic web applications transfer the complete form data to the server, which in turn renders and sends back the full HTML markup of the page to the browser. Lots of bandwidth is consumed and the performance is significantly hindered.

Poor User ExperienceWe’re 2006, yet most web forms look like coming from 1996

Simplistic InterfacesThe requirement for full page postback whenever the user interface has to be changed imposes hefty limitations on the degree of sophistication of web user interfaces. Rich and smooth interfaces with on-demand update could only be implemented using host technologies

Wasted ResourcesPowerful PCs, sitting 99% idle while sophisticated servers are compiling multi-dimensional DB queries AND writing <tr><td>… at the same time

42

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 GarrettFebruary 15, 2005

43

Maslow’s Pyramid on Internet

FulfilmentActualization

Esteem needsStatus, recognition

Love, Belonging, Social needsIntegration, network, circle of friends

Safety and Security needsTruth, protection, integrity, …

Physiological needs:Act, communicate, interact, exchange, …

� Anti-Virus� Hoax Groups� Support Forums� Technical help

� Social Networks� Social bookmarking� Groupware� Knowledge sharing

Featured / ranked in� Wikipedia� Technorati� Slashdot / Digg

� Messenging� Information / Search� Online Web Apps� Publishing

Show your Expertise� Blogs� Communities� Forums

44

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,blurring the line between web-based and desktop applications

delivering rich, highly responsive and interactive interfaces

Ajax is a new development technique, not language,blurring the line between web-based and desktop applications

delivering rich, highly responsive and interactive interfaces

45

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 experiencesAjax is a tool (pattern) of many for building rich experiences

46

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.

47

So why is Ajax so hot—NOW?

Times are changing� Web2.0 Trend

� It has a name

� Recent Google applications have sparked people’s imagination:Google gmail, Google suggests, Google Maps

� Browser Consolidation� Open Standards & Toolkits

� Broadband means we can - and want to - do more

It addresses fundamental needs� Increase Usability of Web

Applications� Demand for richer applications is

growing without Flash

� Save Bandwidth� Download only data you need

� Faster interfaces (sometimes)

� People are thinking of building APPLICATIONS…not just site

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

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

48

Is it new?

� Not Really

� Hidden Frames

� IE5+, Mozilla 1.0+, Safari 1.2+, and Opera 7.6+� Java

� Applets

49

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.

50

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

– Formshttp://openrico.org/rico/demos.page?demo=rico_Ajax_complex

51

Before Ajax: Maps

http://www.mapquest.com

52

After Ajax: Maps

53

Ajax is about

Usability� Ease of use

� Ability to get things done faster

� Measurable� Easier to learn

� High performance

User experience� Hard to describe

� Users just get it

� Examples– iPod– Google Maps

� Competitive advantage

54

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

55

B2B expectations

Today’s reality� Applications are complex

and require a manual to use

� Applications are slow and people frequently wait 10-20s for a process to finish or a page to load

� Forms are just a sequential dump of input fields

� Fonts are small to compensate for long numbers and long lists

� Error handling is like “there is an error, please verify your data”

� Telephone numbers are hard to find

Tomorrow’s expectations� Applications should become

straightforward; manuals is for advanced features

� Like Amazon, precompile results where possible, use advanced caching techniques and Ajax

� Well structured dynamic forms, mandatory and optional blocks

� Drill down on details

� Shift from error reporting to proactive handling and solving

� Online contact, messaging,assistance is on stand-by

Business applications and tools should deliver dashboardsproviding quick access to key data leading to informed decision making

Business applications and tools should deliver dashboardsproviding quick access to key data leading to informed decision making

56

Usability

� An analysis of intranet portals found slimmer information architectures and a renewed emphasis on fresh content and usefulapplications � 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

57

Web services

Before� Previously websites had poorly

integrated applications (HTML scrubbing, interface redevelopment, poor CSS support, …)

� Users often bypassed portal to bookmark service directly (deeplinks)

Now� Application providers develop

documented web services� Sites can query web services and

present information a la carte

� Web Services are W3C endorsed� less vendor dependency

58

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

59

Collaboration

� Solve specific business problems using collaboration tools:Streamline business process with employees and partners

� Provide users with contextual collaborationCommunication tools as part of their day by day projects

� Reduce the pain associated with a proliferation of toolsMerging tools into single environment

� Benefit from increasingly rich collaboration platformsProvide tools and let users find an application that helps them in their normal business process � evolution, not revolution

� Embedded collaboration capabilitiesMore built-in support (teamwork, …)

� Product/platform vendor competitionStrive to push proprietary standards vs open standards makes interoperability not yet today’s reality

60

1.5Flash

Emakina Academy

61

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”

62

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

63

Leverages a Ubiquitous Client…

� 414 Million users have the Macromedia Flash Player

38

6363

76

9098

53

MacromediaFlash Player

Java AcrobatReader

WindowsMedia Player

MacromediaShockwave

Player

Real Player QuickTimePlayer

64

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

65

Internet

Server Side

Database &Integration

Client Side

Why Macromedia?


� Flash Player client is a

standard browser plug-in

� Flash Remoting provides an

optimized connection between the

Flash client and the Application

Server

� Flash Communication Server

seems the best choice for

streaming videos

DBDBDB

Application ServerApplication ServerApplication Server

Web ServerWeb ServerWeb Server

BrowserBrowserBrowser

.html.cfm

.swf

.xml

Flash

Client

Flash

Remoting

66

RIA Examples In this Section

� Example Applications– Advent Labs– Trio Motors– Pet Market– Jeremy Allaire Presentation

� Subaru Primal Quest

� Charles Schwab

� New York Stock Exchange� Bose

� Yankee Candle� Youth Hostel Association of

Australia� GMAC Real Estate

� Ambient Automation

� Grand Chiropractic Health Care

� Team Connect

67

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.

68

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.

69

Example > Ambient Automation

ChallengeDevelop a corporate information system that consolidates clients Great Plains accounting, Goldmine contact management, and t help desk databases into one advanced user interface

SolutionMacromedia Flash MX

Benefit50% overall reduction in time and 60% reduction in errors for entering and processing orders.

70

Example > Team Connect

ApplicationTeamConnect 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.

ChallengeCreate a project planning and scheduling application

Solution� Macromedia Flash MX� Macromedia Flash Communication

Server MX� Macromedia JRun 4

71

2.1Ajax & usability

Emakina academy

72

Short introduction aboutUsability

73

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

74

5 qualities of usability

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

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

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

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

SatisfactionHow pleasant is it to use the design?

Source : J.Nielsen

75

Fields of Usability

User experience maps user needs to business needs through

� Information architecture� Functional design

� Graphical design

� Information design� Interaction design

76

Usability as a part of UX

77

Actual Situation in web usability

� Perceptual usability Standards are known

� User behaviours have been studied

� User understands Client / browser interaction

78

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

79

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

80

2.2Business Benefits

Emakina academy

81

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

82

Ajax main features

On demand request on server without reload

Request data, validate business rules, store user activity without reloading page

Smoothness & speedFewer reload � more immersive experience

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

User interface is object oriented & controlled by eventsDOM + JavaScript event model propose a rich Object oriented userinterface

83

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 …

84

Ajax New Interactions patterns

Drag & drop, cursor based selection

Immediate feedback

Keystroke & arrows controls

Authoring experience vs fill a form

85

2.3Selected Cases

Emakina academy

86

Let’s see Ajax in action

Emakina Cases

87

Electrabel registration process

Ajax improves acquisition

88

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

89

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

90


91


Usability BalanceUsability Balance

� Learnability� Efficiency

Memorability� Errors � Satisfaction

92


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

93

Atofina navigation

Ajax improvesperformance & personalization

94

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

95


96

Atofina Scorecard


� Learnability� Efficiency � Memorability

Errors � Satisfaction

97


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

98

Electrabel localisator

Ajax guides userand improve efficiency

99


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

100


101



� Learnability� Efficiency

MemorabilityErrors

� Satisfaction

102


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

103

Porsche car configurator

Ajax provides an immersive experience

104


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 productidentity

105


106



� Learnability� Efficiency � Memorability� Errors � Satisfaction

107


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

108

Non Emakina cases

109

Bet & Win

Ajax improves conversion

110

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

111


112



� Learnability� Efficiency � Memorability

Errors Satisfaction

113


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

114

Netvibes.com

Ajax reinvents the portal experience

115

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

116


117



� Learnability� Efficiency � Memorability� Errors � Satisfaction

118


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

119

Global benefit

120

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

121

2.4Ajax conception methodology

Emakina Academy

122

What is the project methodologyto implement an Ajax based user interface?

123

Ajax conception methodology

User Test &optimizationUser Test &optimization

Specification &implementation Specification &implementation Conception Conception InceptionInception

124

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



125

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 designMoodboards, strategic screen, widget design



126

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



127

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



128

Ajax conception methodology

Goodyear Tire Online Sales

129

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

130

Goodyear TOS > Before

131

Goodyear TOS > Prototype

132


133


134


135

2.4Technical Overview

Emakina academy

136

Ajax Defined

� Asynchronous Javascript and XML– Term coined by Jesse James Garrett

– www.adaptivepath.com

� Ajax is not a new technology– 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

Mr. Ajax

137

What is Ajax?

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

AjaxJavaScript

XML

XHTMLCSS

XHR

138

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

139

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

140

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

141

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

142

Traditional web vs Ajax application model

Standard web app—many web pages, each refreshing the screen. Conversationalstate on server

Ajax app – client code delivered at login, requests processed on client or server without apparently interrupting workflow

143

Classic synchronous vs asynchronous Ajax model

144

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

Pick An Item‘Add To Cart’

Review CartEnter Data

Submit

ActionValidation

PersistenceForwarding

Error Page‘Can’t Order 500’

EnterShipping

Enter DataSubmit

ActionValidation


ActionValidation


Enter BillingEnter Data

Submit

145

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 EntryOrder Entry

Events/Actions

Validation

Persistence

Event Handlers

GUI Creation

Item List (DIV)

Shopping Cart (DIV)

Shipping Form (DIV)

Billing Form (DIV)

ErrorViewer(DIV)

ErrorViewer(DIV)

Ajax

ComponentsComponents

Item ListComponent

Item ListComponent

ShoppingCart

Component

ShoppingCart

Component

ShippingComponent

ShippingComponent

BillingComponent

BillingComponent

146

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

147

Case > Google Suggests

Wow..I didn’tknow soccer

teams did web programming..

148

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

149

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(""));

150

2.5Building Ajax

Emakina Academy

151

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 added valuefor your customers � More differentiation towards competition

More challenging � More rewarding � More added valuefor your customers � More differentiation towards competition

152

Ajax Toolkits & Frameworks

Frameworks� There are many proposed

libraries/frameworks� Survey of Ajax/JavaScript

Libraries:http://wiki.osafoundation.org/bin/view/Projects/AjaxLibraries

Examples� Ajax.Net

� Backbase

� Bitkraft (.NET)� Django

� DOJO

� DWR (Java) Microsoft Atlas

� MochiKit� Prototype

� Rico

� SAjax� Sarissa (XML/XSL)

� Script.aculo.us

153

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

154

Pick a Framework… any Framework

� www.Ajaxpatterns.org

� Pure JavaScript– DOJO (9/04)– Prototype (2001)– Open Rico (5/05)– Qooxdoo (5/05)

� Pure JavaScript Infrastructural– AjaxJS (5/05)– HTMLHttpRequest (2001)– Interactive Website Framework (5/05)– LibXMLHttpRequest (6/03)– RSLite– Sack (5/05)– Sarissa (2/03)– XHConn (4/05)

� Server-Side (Multi Language)– Cross-Platform Asynchronous Interface

Toolkit (5/05)– SAjax (3/05)– Javascript Object Notation (JSON) &

JSON-RPC– Javascript Remote Scripting (2000)

� Server-Side (Java)– Echo2 (3/05)– Direct Web Remoting (DWR) (2005)]– ThinkCAP Minerva (04/2005)

� Server-Side (Lisp)– CL-Ajax

� Server-Side (.NET)– Ajax.NET (305)

� Server-Side (PHP)– AjaxAC (4/05)– JPSpan– XAjax

� Server-Side (Ruby)– Ruby-On-Rails (3/05)

155

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

156

3.1B2B Ajax Examples

An Emakina Review

157

Project Collaboration > Basecamp

Visit site

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. Basecampmakes it simple to communicate and collaborate on projects.

158

Group Chat for Business > CampFire

Visit site

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.

159

Collaborative Writing > Writely

Visit site

• Put your words into Writelyquickly and easily.

• Keep them online and edit them from anywhere.

• Get them back out just as easily.

160

Online Writing > ZohoWriter

Visit site

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

161

Group Spreadsheets > Google

Visit site

• 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.

162

3.2Ajax Opportunities

Emakina Academy

163

Historical Web Development Problems

OtherOther

DB IntegrationDB Integration

AutomationAutomation

CrossCross--devicedevice

PersonalizationPersonalization

Development timeDevelopment time

Better interfacesBetter interfaces

“The web today is not good enough to pull money out of pockets.”

-- Forrester Research

“Despite advances…the browser cannot deliver experiences that are as responsive and interactive as those of client-based applications.”

-- Jupiter Media

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

This was correct 3 years ago,but today it has been solved

This was correct 3 years ago,but today it has been solved

164

DepartmentIT Apps

DepartmentIT Apps

EnterpriseIT Apps

EnterpriseIT Apps

Customer Apps

Customer Apps

EcommerceApps

EcommerceApps

InteractiveSites

InteractiveSites

In the Face of Enormous Opportunity….

InternetInternet ExtranetExtranet IntranetIntranet

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

--Forrester Research

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


Partner AppsPartner Apps

165

In the Face of Enormous Opportunity….

DepartmentIT Apps

DepartmentIT Apps

EnterpriseIT Apps

EnterpriseIT Apps

Customer Apps

Customer Apps

EcommerceApps

EcommerceApps

InteractiveSites

InteractiveSites


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

–AMR Research

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

–AMR Research


166

…Web Applications Used to Disappoint

DepartmentIT Apps

DepartmentIT Apps

EnterpriseIT Apps

EnterpriseIT Apps

Customer Apps

Customer Apps

EcommerceApps

EcommerceApps

InteractiveSites

InteractiveSites


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

--Jakob Nielsen

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

--Jakob Nielsen


167

…Web Applications Used to Disappoint

DepartmentIT Apps

DepartmentIT Apps

EnterpriseIT Apps

EnterpriseIT Apps

Customer Apps

Customer Apps

EcommerceApps

EcommerceApps

InteractiveSites

InteractiveSites


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


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



168

Ajax Saves Money

Hourly Labor RateX

Time Saved per Transaction X

Number of Transactions per year

� A hell of a lot of Money Saved

169

Sample Calculations

� Assumptions:– Hosted web app, high speed or

LAN– Hourly Labor Rate: $20 – Seconds Saved per Transaction:

36 Seconds – Number of Transactions per year:

50,000

� Savings: – $10,000– 500 Person Hours

� Assumptions:– Remote employee using dial-up

– Hourly Labor Rate: $20 – Seconds Saved per Transaction:

199.01 Seconds – Number of Transactions per year:

50,000

� Savings: – $55,281 – 2,764 Person Hours

170

Bottom Line

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

Web 2.0 Ajax Applications

171

Benefits

Measurable� Steps to complete a task

� Time spent waiting for data to be transmitted

� Time spent completing a particular task

� Bandwidth consumed for the entire task

Harder to measure� Familiar user interface

� Improved application responsiveness

� User experience

Data transfer Transmission time Process completion time

Easily 80% Typically 50% Average 66%

172

3.3Ajax Future

Emakina Academy

173

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

174

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 Platform4. Open Standards Based

5. Server Technology Agnostic

6. Web 2.07. Adoption Is Strong with Industry Leaders

8. Low Incremental Cost

9. Plays Nicely with Flex and Flash10.XAML, XUL, XForms...

Not Yet.

175

Usability and User Experience Are King

� Developers and designers are beginning to realize not only the large role user-experience plays in market success, but how it affects the cost of ownership .

� The success of Ajax-based applications such as Google Maps over more traditional alternatives like MapQuest show that success can come to products that provide better user experienc e.

� Ajax is playing a leading role in making Web applications usable. It allows pages to request small bits of information from the server instead of whole pages. This incremental updating of pages eliminates the page refresh problem and slow response that have plagued Web applications since their inception.

� People have learned they need decent user interface s 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



3. Low Incremental Cost4. Cross Browser and

Cross Platform5. Open Standards

Based6. Server Technology

Agnostic7. Web 2.08. Adoption Is Strong

with Industry Leaders

9. Plays Nicely with Flex and Flash

10.XAML, XUL, XForms...Not Yet.

176

Benefits of Regular Web Applications

� Ajax is the face of today's Web applications—and Web applications enjoy certain benefits over desktop-based ones.

� These include a lower cost of deployment, easier support, shorter development times, and no installation ; these are just some of the benefits that have caused businesses and consumers to adopt Web-based applications since the late 90s.

� Ajax will only help Web applications get better and achieve more for end users.







with Industry Leaders9. Plays Nicely with Flex

and Flash10.XAML, XUL,

XForms...Not Yet.

177

Incremental Skills, Tools and Technologies Upgrade

� Because Ajax is based on de facto standards that have been around for several years, many developers have at least been exposed to the technologies required to build Ajax applications.

� This means it's not huge learning curve for development teams toshift from vanilla HTML and form-based applications to rich Ajax style applications.

� It also means that development teams working on Web applicationscan incrementally upgrade their user interfaces to Ajax ; it doesn't require a wholesale upgrade and re-write of their Web 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.









XForms...Not Yet.

178

Cross Browser and Cross Platform

� IE and Mozilla-based FireFox have the lion's share of the market and are arguably the easiest browsers on which to build Ajax Webapplications, but now it's possible to build Ajax-based rich Internet applications that work on most modern Web browsers .

� This is an important reason why Ajax has become so popular.� Although many developers were aware this was possibly years ago

with Internet Explorer, it was overlooked because of the vendor lock-in factor. Thanks, Mozilla and FireFox.









XForms...Not Yet.

179

Open Standards Based

� Ajax is based on open standards supported by many browsers and platforms; this means there's no fear of vendor lock-in .

� Most of the technologies that make up Ajax have been used extensively for years. These aren't hot, new, untested technologies that will only work most of the time.

� Browsers are a trusted application platform for mos t users and enterprises now ; this wasn't the case five years ago.

� One of the turning points for Ajax was the Mozilla 1.0 release that FireFox is based on and supported the XML HTTP Request Object. 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









XForms...Not Yet.

180

Server Technology Agnostic

� Much like how Ajax is browser independent, it's also perfectly compatible with any standard Web server and server- side language . PHP, ASP. ASP.Net, Perl, JSP, Cold Fusion, and so forth—take your pick and start building.

� This has helped move Ajax along because all Web developers can use and talk about a common presentation layer.









XForms...Not Yet.

181

Web 2.0

� Love it or hate it. The Web 2.0 movement is in full swing and turning the heads of programmers, VCs, marketers, and end users alike.

� This is definitely helping Ajax adoption for the time being; when the hype eventually dies down, it will be interesting to see what happens.

� Ajax interfaces are a key component of many Web 2.0 applicationsfrom BackPack to Google Maps.

� Likely the hype will help accelerate the adoption of Ajax and the 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.









XForms...Not Yet.

182

Adoption Is Strong with Industry Leaders

� Widespread adoption of Ajax by industry leaders proves market acceptance and validity of this technology group. Everybody is jumping on the bandwagon, including Google, Yahoo, Amazon, and Microsoft (to name a few). It was really Google Maps that captured the attention of Web developers. When people began to investigate how Google was able to deliver such an incredible user experience in the browser without any plug-ins, they found Ajax under the hood.

� Of course, it's not enough for Google to do something for Ajax to make the leap to mainstream enterprise. But, if you look at the customer list of Ajax development companies such as eBusinessApplications (www.ebusinessapps.com) or Tibco(http://www.tibco.com), you'll see Fortune 500 enterprises including major financial institutions, government agencies, airlines, andother major industries adopting Ajax and they were doing so before the term "Ajax" was coined









XForms...Not Yet.

183

Plays Nicely with Flex and Flash

� Much of the development community is locked in a heated debate of Flash vs. Ajax.

� There are definitely advantages and disadvantages to both technologies in different situations, but there's also a lot of synergy and opportunity for them to work together.

� Many developers and vendors have realized this and have implemented some really great software using both Ajax and Flashin harmony. Macromedia is also keen to see these technologies work together









XForms...Not Yet.

184

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 supported by 90% of the browsers out there, it's not considered a practical solution for most purposes (yet). However, Ajax programmers should keep an eye on technologies such as XAML and XUL. There is no doubt these technologies would make it easier to develop rich Internet applications, but they are in conflict with each other and don't have the same market penetration or momentum yet.

� Many developers and technology companies are trying better technologies for RIA all the time. The fact of the matter is that Ajax is here today and working , it's cross-browser and cross-platform, and both users and developers like what it can do.

� High profile Ajax applications like Google Maps have emerged as clear 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 underlyi ng 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 toolk it, but a phenomenon that is changing the way Web application s 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.









XForms...Not Yet.

185

3.4Ajax Next Steps

Emakina Academy

186

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 scratchedthe surface of the rich interaction and responsiveness that Ajaxapplications 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

187

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

188

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

189

Typical Emakina project

User TestingOptimizationUser TestingOptimization

DevelopmentCoachingDevelopmentCoaching

RequirementsPrototypingRequirementsPrototyping

Business CaseConsultingBusiness CaseConsulting

IdeasConceptsObjectivesPriorities

IdeasConceptsObjectivesPriorities

WireframesProof of conceptArchitectureFeasibility

WireframesProof of conceptArchitectureFeasibility

Team assistanceProblem solvingKnowledge transferDocumentation

Team assistanceProblem solvingKnowledge transferDocumentation

Match end result vsexpectations

Human feedbackUsability finetuning

Match end result vsexpectations

Human feedbackUsability finetuning

190

Is Ajax ready for Prime Time?

They are… are you?They are… are you?