Date post: | 17-Oct-2014 |
Category: |
Business |
View: | 25,670 times |
Download: | 0 times |
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
Emakina Academy,September 13
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
Emakina Academy,September 13
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
Source: Forrester Research, Inc.
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
Source: Forrester Research, Inc.
22
Forrester’s X-Internet Timeline
20012000 2002 2003 2004 2005 2006 2007 2008 2009 2010
Source: Forrester Research, Inc.
23
Rich Internet Application Fit
Source: Forrester Research, Inc.
TraditionalSoftware UI
ExecutableInternet UI
HTML UI
More value fromexisting applications
New classesof applications
24
Rich Internet Applications
25
Rich Internet Applications
√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."
Source: Forrester Research, Inc.
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
Interactivity without full page reload
Interactivity without full page reload
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?
Rich Internet Applications
� 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
Case Electrabel registration
91
Case Electrabel registration
Usability BalanceUsability Balance
� Learnability� Efficiency
Memorability� Errors � Satisfaction
92
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
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
Business objectives :
� Increase employee self appropriation of the tool� Increase visibility of all content available
� Increase speed to find information
95
Atofina Navigation system
96
Atofina Scorecard
Usability BalanceUsability Balance
� Learnability� Efficiency � Memorability
Errors � Satisfaction
97
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
98
Electrabel localisator
Ajax guides userand improve efficiency
99
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
100
Electrabel localisator
101
Electrabel localisator
Usability BalanceUsability Balance
� Learnability� Efficiency
MemorabilityErrors
� Satisfaction
102
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
103
Porsche car configurator
Ajax provides an immersive experience
104
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 productidentity
105
Porsche car configurator
106
Porsche car configurator
Usability BalanceUsability Balance
� Learnability� Efficiency � Memorability� Errors � Satisfaction
107
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
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
Business objectives :
� Increase the number of bets placed by visitors� Increase amounts of each bets
� Place a bet as fast as possible
111
Bet & win : betting process
112
Bet & win : betting process
Usability BalanceUsability Balance
� Learnability� Efficiency � Memorability
Errors Satisfaction
113
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
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
Business objectives :
� Be ahead of competition with a total new experience� Propose an experience as new as possible
� Propose an extremely fluid experience
116
Netvibes portal experience
117
Netvibes portal experience
Usability BalanceUsability Balance
� Learnability� Efficiency � Memorability� Errors � Satisfaction
118
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
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
User Test &optimizationUser Test &optimization
Specification &implementation Specification &implementation Conception Conception InceptionInception
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
User Test &optimizationUser Test &optimization
Specification &implementation Specification &implementation Conception Conception InceptionInception
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
User Test &optimizationUser Test &optimization
Specification &implementation Specification &implementation Conception Conception InceptionInception
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
User Test &optimizationUser Test &optimization
Specification &implementation Specification &implementation Conception Conception InceptionInception
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
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
130
Goodyear TOS > Before
131
Goodyear TOS > Prototype
132
Goodyear TOS > Prototype
133
Goodyear TOS > Prototype
134
Goodyear TOS > Prototype
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
PersistenceForwarding
ActionValidation
PersistenceForwarding
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.
--Forrester Research
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
InternetInternet ExtranetExtranet IntranetIntranet
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
Partner AppsPartner Apps
166
…Web Applications Used to Disappoint
DepartmentIT Apps
DepartmentIT Apps
EnterpriseIT Apps
EnterpriseIT Apps
Customer Apps
Customer Apps
EcommerceApps
EcommerceApps
InteractiveSites
InteractiveSites
InternetInternet ExtranetExtranet IntranetIntranet
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
Partner AppsPartner Apps
167
…Web Applications Used to Disappoint
DepartmentIT Apps
DepartmentIT Apps
EnterpriseIT Apps
EnterpriseIT Apps
Customer Apps
Customer Apps
EcommerceApps
EcommerceApps
InteractiveSites
InteractiveSites
InternetInternet ExtranetExtranet IntranetIntranet
To compensate for hard-to-use apps, firms pony up for additional training...and application redesign [that] can approach the $1 million mark.
--Forrester Research
To compensate for hard-to-use apps, firms pony up for additional training...and application redesign [that] can approach the $1 million mark.
--Forrester Research
Partner AppsPartner Apps
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
1. Usability and User Experience Are King
2. Benefits of Regular Web Applications
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.
1. Usability and User Experience Are King
2. Benefits of Regular Web Applications
3. Low Incremental Cost4. Cross Browser and
Cross Platform5. Open Standards
Based6. Server Technology
Agnostic7. Web 2.08. Adoption Is Strong
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.
1. Usability and User Experience Are King
2. Benefits of Regular Web Applications
3. Low Incremental Cost4. Cross Browser and
Cross Platform5. Open Standards
Based6. Server Technology
Agnostic7. Web 2.08. Adoption Is Strong
with Industry Leaders9. Plays Nicely with Flex
and Flash10.XAML, XUL,
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.
1. Usability and User Experience Are King
2. Benefits of Regular Web Applications
3. Low Incremental Cost4. Cross Browser and
Cross Platform5. Open Standards
Based6. Server Technology
Agnostic7. Web 2.08. Adoption Is Strong
with Industry Leaders9. Plays Nicely with Flex
and Flash10.XAML, XUL,
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
1. Usability and User Experience Are King
2. Benefits of Regular Web Applications
3. Low Incremental Cost4. Cross Browser and
Cross Platform5. Open Standards
Based6. Server Technology
Agnostic7. Web 2.08. Adoption Is Strong
with Industry Leaders9. Plays Nicely with Flex
and Flash10.XAML, XUL,
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.
1. Usability and User Experience Are King
2. Benefits of Regular Web Applications
3. Low Incremental Cost4. Cross Browser and
Cross Platform5. Open Standards
Based6. Server Technology
Agnostic7. Web 2.08. Adoption Is Strong
with Industry Leaders9. Plays Nicely with Flex
and Flash10.XAML, XUL,
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.
1. Usability and User Experience Are King
2. Benefits of Regular Web Applications
3. Low Incremental Cost4. Cross Browser and
Cross Platform5. Open Standards
Based6. Server Technology
Agnostic7. Web 2.08. Adoption Is Strong
with Industry Leaders9. Plays Nicely with Flex
and Flash10.XAML, XUL,
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
1. Usability and User Experience Are King
2. Benefits of Regular Web Applications
3. Low Incremental Cost4. Cross Browser and
Cross Platform5. Open Standards
Based6. Server Technology
Agnostic7. Web 2.08. Adoption Is Strong
with Industry Leaders9. Plays Nicely with Flex
and Flash10.XAML, XUL,
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
1. Usability and User Experience Are King
2. Benefits of Regular Web Applications
3. Low Incremental Cost4. Cross Browser and
Cross Platform5. Open Standards
Based6. Server Technology
Agnostic7. Web 2.08. Adoption Is Strong
with Industry Leaders9. Plays Nicely with Flex
and Flash10.XAML, XUL,
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.
1. Usability and User Experience Are King
2. Benefits of Regular Web Applications
3. Low Incremental Cost4. Cross Browser and
Cross Platform5. Open Standards
Based6. Server Technology
Agnostic7. Web 2.08. Adoption Is Strong
with Industry Leaders9. Plays Nicely with Flex
and Flash10.XAML, XUL,
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?