Ajax, flash & rich internet applications harnessing the technological background of the web 2.0 revolution


Published on

Ajax, flash & rich internet applications harnessing the technological background of the web 2.0 revolution

Published in: Business, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Ajax, flash & rich internet applications harnessing the technological background of the web 2.0 revolution

  1. 1. Sieu thi dien may Viet Long - www.vietlongplaza.com.vn Ajax Emakina Academy 1
  2. 2. AgendaPart 1 --09h30-10h30Part 1 09h30-10h30 Part 2 --10h30-11h30 Part 2 10h30-11h30 Part 3 --11h30-12h30 Part 3 11h30-12h30 Welcome & Introduction Welcome & Introduction Ajax & Usability Ajax & Usability Conclusions & Summary Conclusions & Summary About Emakina About Emakina Usability Usability B2B Examples B2B Examples User Experience User Experience Business Aspects Business Aspects Ajax Opportunities Ajax Opportunities Prehistory of Ajax Prehistory of Ajax Selected Cases Selected Cases Next Steps Next Steps B2B Problems B2B Problems Technical Overview Technical Overview Emakina methodology Emakina methodology Flash vs Ajax Flash vs Ajax 2
  3. 3. 1.1Welcome & IntroductionEmakina Academy,September 13 3
  4. 4. Find the common thread 4
  5. 5. The answer 5
  6. 6. 1.2About EmakinaEmakina Academy,September 13 6
  7. 7. Emakina ModelConsulting MarketingStrategy and planning Tactical actionsMarketing studies Multi-channelROI studies Direct to 1-to-1 SuccessfulTechnology E-Commerce CreationE-Business platforms ConceptIntegration Graphic DesignWeb development UsabilityHosting Content 7
  8. 8. Customer Recruitment Reward Reward Convert to mechanisms mechanisms CustomersCUSTOMERSCUSTOMERS Collect S Rich modules Rich modules Games Prospects ES Games EN Websites Websites Communicate AR Promo-sites Promo-sites Offer AW Bannering Bannering Recruit RecruitCompany Newsletters Newsletters Visitors Visitors 8
  10. 10. Competence CenterInternet technologies E-business applications – Hosting, Security – Application Server : – HTML / DHTML (JavaScript) IBM Websphere Suite, ATG – XML / WML / VXML Dynamo, ColdFusion MX – Flash / Shockwave / VR / 3D – CMS : emagiC, Tridion R5 – ColdFusion MX – Portal : – Real / WMA / QuickTime SAP Portal, IBM Portal Server – SOAP, Web Services – NetIQ Webtrends Reporting – MS SQL Server / Oracle 9i Center, ... – JAVA / JSP / J2EE – MS ASP / COM (Visual Basic) – ASP.NET / .Net – PHP – SAP (BAPI / Business connector) – C, C++, C# 10
  11. 11. Customers 11
  12. 12. Emakina in a nutshell+90 team members and growingNumber 2 Belgium Web Agency(ranking Inside 2006)Number 1 Creative Agency(ranking Media Marketing 2006)A unique offering in e-marketing and e-businessIntegrated competences in Strategy,Creation & Design and IT DevelopmentStable and profitable environmentListed on Alternext (ALEMK) since june 2006Raised 7.3 Meuros for european expansionPrestigious references 12
  13. 13. 1.3The User ExperienceEmakina Academy,September 13 13
  14. 14. Experience matters 14
  15. 15. The Experience Matters> 15
  16. 16. Evolution of Economic Value Unique Relevant Stage Stage Competitive to Customer Experiences Experiences Position Needs Deliver Deliver Services Services Make Make Goods GoodsUndifferentiated Irrelevant Extract Extract to Customer Competitive Commodities Commodities Position Needs Market pricing Premium pricing 16
  17. 17. Examples of the Economics $5.00 for a Latte Coffee costs 49 cents $250 for a Birthday Party Evolution of the Birthday Experience $2,500 for a laptop computer “Think Different” 17
  18. 18. Evolution of Digital Experience Unique Relevant Experiences Experiences Competitive to Customer (RIAs) (RIAs) Position Needs Features Features (Web Apps) (Web Apps) Function Function (Perl Script) (Perl Script)Undifferentiated Irrelevant Presence Presence to Customer Competitive (Flat HTML) (Flat HTML) Position Needs Market pricing Premium pricing 18
  19. 19. The Web Doesn’t Cut It Dist ribut ion of scores from 158 Web site reviews conducted by Forrester, Dec. 1999 to May 2001 Sites are scored from -50 (low) to 50 (high) 35 Number 25 of sites Top score: 23 in each 15 range of scores 5 -50 -30 -25 -20 -15 -10 -5 0 5 10 15 20 25 50 Commonly failed tests Failure rate Guided search 87% Comprehensive and precise search 84% Passing grade: 25 or higher Act ive personalizat ion 80% Average score overall: -3.5 Proact ive customer service 75% Accessibilit y 70% Average B2C score: -2.2 Efficient page layout 66% Task-specific interact ivit y 59% Average B2B score: -5.5 Site reliability 55% Sites are graded on 25 test s; each test is Essent ial content available 54% scored on a scale from -2 (crit ical failure) Consistent navigat ion 48% to 2 (exemplary pass) 19Source: Forrester Research, Inc.
  20. 20. How We Got Here Mainframe Desktop Client/Server Websites None: dumb green-screen High: High: Interactivity Low: or command-line Drag-and-drop, point-and- Drag-and-drop, point-and- terminals Point-and-click, form fill-in click click User High: resizable Flexibility Medium: resizable Interface None: components, configurable display, local data, custom components, configurable Low: limited customization of page appearance No customization possible display, server-side data shortcuts Medium: real-time High: real-time Power None: only displays data computation, complicated computation coupled with None: only displays data sent by server sent by server information visualization access to server-side data Deployment Low cost High cost High cost Low cost 20Source: Forrester Research, Inc.
  21. 21. A New Solution is Needed – the X Internet Forrester’s Definition: Intelligent apps that execute code near the user to create rich, engaging user experiences on the Net 21Source: Forrester Research, Inc.
  22. 22. Forrester’s X-Internet Timeline 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 22Source: Forrester Research, Inc.
  23. 23. Rich Internet Application Fit Traditional Software UI New classes Executable of applications Internet UI More value from existing applications HTML UI 23Source: Forrester Research, Inc.
  24. 24. Rich Internet Applications 24
  25. 25. Rich Internet Applications Web Desktop Rich Internet AppsInstant Deployment √ √Cross-platform √ √Progressive download √ √Magazine-like layout √ √Multimedia √ √Standards-based: XML, SOAP, J2EE √ √Interactive UI – validation, formatting √ √Fast response times (no page refresh) √ √Drag and Drop √ √Scalable √ √Works online √ √Traditional n-tier development model √ √Easy to add communications features √ 25
  26. 26. Rich Internet Application Results35% increase in reservations year to year50% reduction in time entering ordersReduced page load time by 50%More than doubled the average number of bookings per session75% of first-time site visitors returnedGreater than a five-fold return on initial pilot project investment 26
  27. 27. X Internet Forrester Research: "... browser-based applications deliver sub par user experiences ... Executable Internet Technology will help companies return responsiveness and productivity to Net-based apps." 27Source: Forrester Research, Inc.
  28. 28. Summary Results Results Experience ExperienceRich Internet ApplicationsRich Internet Applications 28
  29. 29. 1.4Prehistory of AjaxEmakina Academy 29
  30. 30. Human natureAbraham Maslow:“If the only tool you know is a hammer,every problem looks like a nail” 30
  31. 31. Web 2.0Web 2.0 is set of buzzwords that point to the eradication of theclassical web model and indicate a more democratic andcollaborative web experience 31
  32. 32. The right tool for the right contextWeb 2.0 Buzzword B2C B2BUser generated content Works only for top brands (eg. Apple); Brand risk as it quickly becomes others require moderation comparison platformCollaboration Strengthens the brand experience Brand risk for user2user Okay for assistant2customerWeb as platform Positive Less dependency on plugins but requiresApplications within browser large installed baseUsability Key success factor Key success factor when applied methodologicallyLook and feel Key appeal factor Requires discretion Valuable service before brandingPerpetual beta Acceptable if limited outages Unacceptable no compromise on (see Yahoo experience) continuityCommunities Requires moderation C2C communities not allowed Potential branded B2C academiesSlim Ajax applications Mostly positive Requires large installed baseLightweight DHTML (consider non-Ajax backup)User feedback Positive as it gives valuable feedback Positive if applied systematically andContribution to roadmap discretelyPersonalization Key success factor Key success factor when relevant (see Amazon)Customization Requires good features Seldom used 32 (see Google homepage) (see myYahoo)
  33. 33. A Brief History FF 2 SVGJava Applet E4X ECMAScript XSL-T Mozilla 1.0 NS 2.0B3 JavaScript Flash 3 WSDL FF 1.0 CSS DOM 1 XHTML SVG Flash 996 98 05 06 97 99 00 01 02 03 04 XSL-T 2 IE 3 IE 4 IE 5 IE 6 XForms IFrames DOM XML It Works! DOM 3 CSS XSL-T RDF JScript XMLHTTP Browser Wars The Web Depression Web 2.0 33
  34. 34. In the beginning, there was DOS 34
  35. 35. Then…Windows 35
  36. 36. Windows UI Matures… 36
  37. 37. The Future…Maybe? 37
  38. 38. History repeats itself, over the Web Watching grass grow, watching paint dry, filling in forms, … 38
  39. 39. The new webDon’t focus on technology,focus on getting the work done 39
  40. 40. Example of Microsoft Ajax Application Useful Useful functions functions Integrated Integrated coexisting coexisting applications with applications with Contextual Contextual added value added value actions actionsApplication Application like likebehaviour behaviour Application Application Interactivity Interactivity like like without full without full behaviour behaviour page reload page reload Rating Rating system system 40
  41. 41. Key disadvantages of traditional web appsPoor Interactivity Simplistic Interfaces Users must wait for full page The requirement for full page reloads after each interaction with postback whenever the user the server. interface has to be changedSlow & Unresponsive imposes hefty limitations on the Classic web applications transfer degree of sophistication of web the complete form data to the user interfaces. Rich and smooth server, which in turn renders and interfaces with on-demand update sends back the full HTML markup could only be implemented using of the page to the browser. Lots of host technologies bandwidth is consumed and the Wasted Resources performance is significantly Powerful PCs, sitting 99% idle hindered. while sophisticated servers arePoor User Experience compiling multi-dimensional DB We’re 2006, yet most web forms queries AND writing <tr><td>… at look like coming from 1996 the same time 41
  42. 42. The rise of the new web“The Web as we know it is changingprobably more than it has since thefirst graphic showed up… The idea ofthe webpage itself is nearing itsuseful end. With the way Ajax allowsyou to build nearly statelessapplications that happen to be webaccessible, everything changes.”Jesse James GarrettFebruary 15, 2005 42
  43. 43. Maslow’s Pyramid on Internet Featured / ranked in Wikipedia Technorati Slashdot / Digg Fulfilment Actualization Show your Expertise Blogs Communities Esteem needs Forums Social Networks Status, recognition Social bookmarking Groupware Knowledge sharing Love, Belonging, Social needs Anti-Virus Integration, network, circle of friends Hoax Groups Support Forums Technical help Safety and Security needsMessenging Truth, protection, integrity, …Information / SearchOnline Web AppsPublishing Physiological needs: Act, communicate, interact, exchange, … 43
  44. 44. Enter AjaxAjax aims to deliver: – Rich applications in browsers – No issues with installation – Built on existing infrastructure: (TCP/IP, SSL, HTTP, XML…)Concept & Mechanics – Acronym stands for “Asynchronous JavaScript + XML”. – The core idea behind Ajax is to make the communication with the server asynchronous, so that data is transferred and processed in the background. – As a result the user can continue working on the other parts of the page without interruption. – In an Ajax-enabled application only the relevant page elements are updated, only when this is necessary. Ajax is a new development technique, not language, Ajax is a new development technique, not language, blurring the line between web-based and desktop applications blurring the line between web-based and desktop applications delivering rich, highly responsive and interactive interfaces delivering rich, highly responsive and interactive interfaces 44
  45. 45. Ajax – The detailsMotivation: – 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 yearsVery good for improving form interactionsUsually insufficient by itself for building applications Ajax is a tool (pattern) of many for building rich experiences Ajax is a tool (pattern) of many for building rich experiences 45
  46. 46. Direct AdvantagesBetter Performance and Efficiency: Small amount of data transferred from the server. Beneficial for data-intensive applications as well as for low- bandwidth networks.More Responsive Interfaces: The improved performance give the feeling that updates are happening instantly. Ajax web applications appear to behave much like their desktop counterparts.Reduced or Eliminated "Waiting" Time: Only the relevant page elements are updates, with the rest of the page remaining unchanged. This decreases the idle waiting time.Increased Usability: Users can work with the rest of the page while data is being transferred in the background. 46
  47. 47. So why is Ajax so hot—NOW?Times are changing It addresses fundamental needs Web2.0 Trend Increase Usability of Web It has a name Applications Recent Google applications have Demand for richer applications is sparked people’s imagination: growing without Flash Google gmail, Google suggests, Save Bandwidth Google Maps Download only data you need Browser Consolidation Faster interfaces (sometimes) Open Standards & Toolkits People are thinking of building Broadband means we can - and APPLICATIONS…not just site want to - do moreThe Tipping Point:The Tipping Point:All of this has made rich internet apps reach its tipping pointAll of this has made rich internet apps reach its tipping pointwhere adoption spreads rapidly and dramaticallywhere adoption spreads rapidly and dramatically 47
  48. 48. Is it new?Not ReallyHidden FramesIE5+, Mozilla 1.0+, Safari 1.2+, and Opera 7.6+JavaApplets 48
  49. 49. Ajax ApplicationsApplications that have highest benefit from Ajax: Highly interactive, data rich applicationsExamples: Google Spreadsheet: Data visualization – visualizing large datasets Google Maps: Scroll, pan, zoom… all without Flash Data input & validation: it’s possible to validate the data the user enters, while they are entering it. They can then receive feedback (using the server’s intelligence) without the page being posted back. 49
  50. 50. Some examplesAmazon A9 Search EngineFlickrGoogle Labs & Apps– Orkut: social network– GMail: web based email– Google Maps– Google Spreadsheets– Google Suggests– Google Toolkit Demo > School rosterDemos– Drag & drop shop: http://demo.script.aculo.us/shop– Forms http://openrico.org/rico/demos.page?demo=rico_Ajax_complex 50
  51. 51. Before Ajax: Mapshttp://www.mapquest.com 51
  52. 52. After Ajax: Maps 52
  53. 53. Ajax is aboutUsability User experience Ease of use Hard to describe Ability to get things done faster Users just get it Measurable Examples Easier to learn – iPod High performance – Google Maps Competitive advantage 53
  54. 54. The 8-Hour RuleQuestion: Can your users work with your application for 8 hours a day without getting frustrated?Answer: Traditional web applications fail this rule miserablySolution: Ajax to the rescue 54
  55. 55. B2B expectationsToday’s reality Tomorrow’s expectations Applications are complex Applications should become and require a manual to use straightforward; manuals is for advanced features Applications are slow and people Like Amazon, precompile results frequently wait 10-20s for a where possible, use advanced process to finish or a page to load caching techniques and Ajax Forms are just a sequential dump Well structured dynamic forms, of input fields mandatory and optional blocks Fonts are small to compensate for Drill down on details long numbers and long lists Error handling is like “there is an Shift from error reporting to error, please verify your data” proactive handling and solving Telephone numbers are hard to Online contact, messaging, find assistance is on stand-by Business applications and tools should deliver dashboards Business applications and tools should deliver dashboards providing quick access to key data leading to informed decision making providing quick access to key data leading to informed decision making 55
  56. 56. UsabilityAn analysis of intranet portals found slimmer informationarchitectures and a renewed emphasis on fresh content and usefulapplications KISS modelThe initial objective/mantra“We need a website”has been replaced by“We need a user friendly and usable website”Arrival of usability groups: – SAP Design Guild – Jakob Nielsen – Governmental guidelines –…Specialized skills – Usability experts ≠ development skills 56
  57. 57. Web servicesBefore Now Previously websites had poorly Application providers develop integrated applications (HTML documented web services scrubbing, interface Sites can query web services and redevelopment, poor CSS support, present information a la carte …) Web Services are W3C endorsed Users often bypassed portal to less vendor dependency bookmark service directly (deeplinks) 57
  58. 58. Presence based servicesPresence integration – Users can determine the online status of site members quickly by sending e-mail or an instant message, adding the member to a contact list, and viewing current free/busy status.Examples – Show which users are online, and start an instant messaging conversation with them 58
  59. 59. CollaborationSolve specific business problems using collaboration tools:Streamline business process with employees and partnersProvide users with contextual collaborationCommunication tools as part of their day by day projectsReduce the pain associated with a proliferation of toolsMerging tools into single environmentBenefit from increasingly rich collaboration platformsProvide tools and let users find an application that helps them intheir normal business process evolution, not revolutionEmbedded collaboration capabilitiesMore built-in support (teamwork, …)Product/platform vendor competitionStrive to push proprietary standards vs open standards makesinteroperability not yet today’s reality 59
  60. 60. 1.5FlashEmakina Academy 60
  61. 61. Macromedia FlashDispelling the myths – “Flash is an animation tool” – “Flash is for games and web intros, not for business applications” – “Only graphic designers can use Flash” – “ActionScript is not a real programming language” – “ActionScript is convoluted and hard to maintain” – “Flash will not fit into an MVC J2EE architecture” 61
  62. 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.comDNP, printer supplies University of North Carolina, Medical log Brocade, sales performance 62
  63. 63. Leverages a Ubiquitous Client… 414 Million users have the Macromedia Flash Player 98 90 76 63 63 53 38Macromedia Java Acrobat Windows Macromedia Real Player QuickTimeFlash Player Reader Media Player Shockwave Player Player 63
  64. 64. Technical BenefitsEase of development and deploymentIntegrates into legacy environmentsExtends existing applications without re-workFits into current development processSupports a broad range of platforms and devicesCuts QA time for cross-platform support 64
  65. 65. Why Macromedia? Rich Internet ApplicationsClient Flash Player client is aSide Browser Browser standard browser plug-in Flash Client Flash Remoting provides an optimized connection between theInternet .html .swf .cfm .xml Flash client and the ApplicationServer ServerSide Web Server Web Server Flash Communication Server seems the best choice for Flash Remoting streaming videos Application Server Application ServerDatabase &Integration DB DB 65
  66. 66. RIA Examples In this SectionExample Applications Yankee Candle – Advent Labs Youth Hostel Association of – Trio Motors Australia – Pet Market – Jeremy Allaire Presentation GMAC Real EstateSubaru Primal Quest Ambient AutomationCharles Schwab Grand Chiropractic Health CareNew York Stock Exchange Team ConnectBose 66
  67. 67. Example > Charles SchwabChallenge Charles Schwab executives needed an easy to use tool to help them see how budget is being allocated across market campaignsSolution Macromedia FlashBenefit These new tools help Schwab make more efficient use of their marketing budgets. 67
  68. 68. Example > Bose CorporationChallenge Help customers visualize an entertainment system in their homeSolution Macromedia Flash MXBenefit Developed an online guide that both supports and educates the customer throughout the buying process with interactive, instant and relevant product information delivered in a visually engaging way. 68
  69. 69. Example > Ambient AutomationChallenge Develop a corporate information system that consolidates clients Great Plains accounting, Goldmine contact management, and t help desk databases into one advanced user interfaceSolution Macromedia Flash MXBenefit 50% overall reduction in time and 60% reduction in errors for entering and processing orders. 69
  70. 70. Example > Team ConnectApplication TeamConnect is a powerful way of ensuring a business can take on more projects and yet be able to deliver additional results more reliably and profitably than competitors.Challenge Create a project planning and scheduling applicationSolution Macromedia Flash MX Macromedia Flash Communication Server MX Macromedia JRun 4 70
  71. 71. 2.1Ajax & usabilityEmakina academy 71
  72. 72. Short introduction about Usability 72
  73. 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 73
  74. 74. 5 qualities of usabilityLearnability How easy is it for users to accomplish basic tasks the first time they encounter the design?Efficiency Once users have learned the design, how quickly can they perform tasks?Memorability When users return to the design after a period of not using it, how easily can they reestablish proficiency?Errors How many errors do users make, how severe are these errors, and how easily can they recover from the errors?Satisfaction How pleasant is it to use the design?Source : J.Nielsen 74
  75. 75. Fields of UsabilityUser experience maps user needs to business needs through Information architecture Information design Functional design Interaction design Graphical design 75
  76. 76. Usability as a part of UX 76
  77. 77. Actual Situation in web usabilityPerceptual usability Standards are knownUser behaviours have been studiedUser understands Client / browser interaction 77
  78. 78. LimitationsLimitation of existing client/browser HTML experience Experience is less rich than Desktop applications Form based experience : Limited User Interface element vocabulary no intelligent fields , autocomplete, specialized selectors Difficult to handle large amount of datas Wysywyg capabilities are poor Interaction capabilities are poor No keystroke controls, no selections, poor arrow control Poor selection, no drag & drop control You need to refresh the page to get/post new datas Business rules must be server side 78
  79. 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 79
  80. 80. 2.2Business BenefitsEmakina academy 80
  81. 81. How can Ajax improve usability and user experience toincrease your business benefits? 81
  82. 82. Ajax main featuresOn demand request on server without reload Request data, validate business rules, store user activity without reloading pageSmoothness & speed Fewer reload more immersive experienceHigher level of interactions and controls User experience can be similar 99% to a desktop application browser as a platform User know very well this interaction environment!User interface is object oriented & controlled by events DOM + JavaScript event model propose a rich Object oriented user interface 82
  83. 83. Ajax new UI elementsIntelligent fields Auto complete / suggest, validation rules, large datas selectorsEditable areas Click and edit text fields, wysywig area, auto SaveAdvanced UI elements Widgets, overlayer, floating window, floating pannels, cascading menus, sortable datagridsAnd a lot more still to create … 83
  84. 84. Ajax New Interactions patternsDrag & drop, cursor based selectionImmediate feedbackKeystroke & arrows controlsAuthoring experience vs fill a form 84
  85. 85. 2.3Selected CasesEmakina academy 85
  86. 86. Let’s see Ajax in action Emakina Cases 86
  87. 87. Electrabel registration process Ajax improves acquisition 87
  88. 88. Case Electrabel registrationDescription 2006 Allow Electrabel’s visitors to register to self service online applications Potential audience : 4,5 millions consumersBusiness objectives : Decrease administrative cost through online services usage Electronic billing Online Administrative service 88
  89. 89. Identified IssuesLot of user starts process but gives up during the processLooks too complicate and too longRequires 3 steps and lot of business rulesRequires complex information input : billing information, highlysecured password policy,High level of security 89
  90. 90. Case Electrabel registration 90
  91. 91. Case Electrabel registrationUsability BalanceUsability Balance Learnability Efficiency Memorability Errors Satisfaction 91
  92. 92. Case Electrabel registrationAjax Solution Guides user within all the process Simplify the form perception Help user to input complex forms Ensure quality of data acquisitionBusiness benefits Increase conversion rate increase usage of online applications 92
  93. 93. Atofina navigation Ajax improvesperformance & personalization 93
  94. 94. Atofina Navigation systemDescription Already in 2002 International communication company portal High level of personalization required Large amount of data IBM Portal serverBusiness objectives : Increase employee self appropriation of the tool Increase visibility of all content available Increase speed to find information 94
  95. 95. Atofina Navigation system 95
  96. 96. Atofina ScorecardUsability BalanceUsability Balance Learnability Efficiency Memorability Errors Satisfaction 96
  97. 97. Atofina Navigation systemAjax 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 serverBusiness benefits Increase employees satisfaction Save employees time to find information 97
  98. 98. Electrabel localisator Ajax guides userand improve efficiency 98
  99. 99. Electrabel localisatorDescription 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 questionBusiness objectives : Make it as efficient as possible 99
  100. 100. Electrabel localisator 100
  101. 101. Electrabel localisatorUsability BalanceUsability Balance Learnability Efficiency Memorability Errors Satisfaction 101
  102. 102. Electrabel localisatorAjax Solution Auto suggest within all belgian localities and CP Avoid any mistakes for 1 CP n LocalitiesBusiness benefits Very fast and efficient process Reusable UI component for all Forms 102
  103. 103. Porsche car configuratorAjax provides an immersive experience 103
  104. 104. Electrabel localisatorDescription 2000 User configures his model in the huge choice of options Show price as i select option Linked to real options databaseBusiness objectives : Make it as simple as possible Make it ludic and create an emotion associated with the product identity 104
  105. 105. Porsche car configurator 105
  106. 106. Porsche car configuratorUsability BalanceUsability Balance Learnability Efficiency Memorability Errors Satisfaction 106
  107. 107. Porsche car configuratorAjax Solution Better experience than form based configurator Real time price calculation Large amount of options possible Highly maintainableBusiness benefits High impact on consumer Efficiency to configure a car and get a price in a complex pricing model product 107
  108. 108. Non Emakina cases 108
  109. 109. Bet & WinAjax improves conversion 109
  110. 110. Bet & win : betting processDescription Process to place a bet on a bookmaker website Audience : gambler, compulsive gamblerBusiness objectives : Increase the number of bets placed by visitors Increase amounts of each bets Place a bet as fast as possible 110
  111. 111. Bet & win : betting process 111
  112. 112. Bet & win : betting processUsability BalanceUsability Balance Learnability Efficiency Memorability Errors Satisfaction 112
  113. 113. Bet & win : betting processAjax Solution Few clicks to place a bet High level of fluidity Provides immediate preview of the potential gainBusiness benefits Increase conversion rate Exploit the compulsive behaviors of gambler 113
  114. 114. Netvibes.comAjax reinvents the portal experience 114
  115. 115. Netvibes portal experienceDescription A new generation of portal providing a new experience Web2.0 projectBusiness objectives : Be ahead of competition with a total new experience Propose an experience as new as possible Propose an extremely fluid experience 115
  116. 116. Netvibes portal experience 116
  117. 117. Netvibes portal experienceUsability BalanceUsability Balance Learnability Efficiency Memorability Errors Satisfaction 117
  118. 118. Netvibes portal experienceAjax Solution Personalize without saving Rich interaction model : drag & drop Easy switch between view & edit Side panel Widget based user interfaceBusiness benefits Self explanatory 3’000’000 register user in less than 1 year ! Rich product identity 118
  119. 119. Global benefit 119
  120. 120. OutcomeAjax & Business benefits investment optimization Increase sales through higher conversion & aquisition rates Increase productivity and reduce human cost More usable than competitors be ahead of competition Product experience user centric business & identity Reduce training & support 120
  121. 121. 2.4Ajax conception methodologyEmakina Academy 121
  122. 122. What is the project methodologyto implement an Ajax based user interface? 122
  123. 123. Ajax conception methodology Specification & Specification & User Test & User Test &InceptionInception Conception Conception implementation implementation optimization optimization 123
  124. 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 Specification & Specification & User Test & User Test &InceptionInception Conception Conception implementation implementation optimization optimization 124
  125. 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 design Moodboards, strategic screen, widget design Specification & Specification & User Test & User Test &InceptionInception Conception Conception implementation implementation optimization optimization 125
  126. 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 Specification & Specification & User Test & User Test &InceptionInception Conception Conception implementation implementation optimization optimization 126
  127. 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 Specification & Specification & User Test & User Test &InceptionInception Conception Conception implementation implementation optimization optimization 127
  128. 128. Ajax conception methodologyGoodyear Tire Online Sales 128
  129. 129. Goodyear TOSDescription B2B Tyres order application Business critical : 20 % of Goodyear Europe sales made through TOS interfaceBusiness objectives : Propose a user experience similar to phone order Be ahead of competition Drive more consumer to online platform Efficiency, Fluidity Use Asynchronous process to handle long response time of SAP 129
  130. 130. Goodyear TOS > Before 130
  131. 131. Goodyear TOS > Prototype 131
  132. 132. Goodyear TOS > Prototype 132
  133. 133. Goodyear TOS > Prototype 133
  134. 134. Goodyear TOS > Prototype 134
  135. 135. 2.4Technical OverviewEmakina academy 135
  136. 136. Ajax DefinedAsynchronous Javascript and XML – Term coined by Jesse James Garrett – www.adaptivepath.comAjax is not a new technology Mr. Ajax – Google calls their technique: Javascript – Also known as XMLHTTP technique – In use since at least 1997A bundle of techniques – XML data interchange only – Passing Javascript methods to client – DHTML widgets – XML & XSLTsCore techniques are centered around asynchronouscommunication to the server without a page refresh 136
  137. 137. What is Ajax? A web development technique that allows developers to build rich user experiences similar to desktop applications in a web browser.JavaScript Ajax XHR CSS XHTML XML 137
  138. 138. Ajax building blocksVocabulary HTML and CSS: Presentation, with standardized style informationInterpreted in DOM Document Object Model (DOM) Dynamic display of and interaction with the HTML pageManipulated by a Scripting language Javascript: Client-side code controls actions (controller pattern)Interaction with server XMLHttpRequest object: Asynchronously retrieves data from web server 138
  139. 139. Ajax building blocks > Dynamic Object ModelThe DOM exposes a web page to the JavaScript engineTree-structured format – DOM structure well defined byWorld-Wide Web Consortium (W3C) – Each DOM element is a nodeDOM can be read, and also updated (change, insert)Programming recommendations: – Use of “id” attribute to make finding elements easy – CSS styles applied using node’s className attribute: – Use of XHTML 139
  140. 140. Ajax building blocks > Asynchronous Data LoadingTwo techniques: IFrames, XMLHttpRequestIFrames (Inline Frames) are an old technique given new life withAjax – Invisible frame, in line with other HTML – IFrame owns the processingXMLHttpRequest: DOM extensions allowing asynchronous callsIssue with both: browser compatibilityDeveloper owns implementation, testing burden…Or we implement using a toolkit and make it someone else’sproblem 140
  141. 141. Ajax building blocks > JavaScriptSolid browser-based programming languageSource of pop-up windows, back button hacks, image rolloversNot Java, but from the same familyJava-like syntaxLoosely-typed variables, dynamically interpretedFunctions are objectsCan be involved from outside a classCan use OOP-like style, but not required 141
  142. 142. Traditional web vs Ajax application modelStandard web Ajax app – client codeapp—many web delivered at login,pages, each requests processedrefreshing the on client or serverscreen. without apparentlyConversational interrupting workflowstate on server 142
  143. 143. Classic synchronous vs asynchronous Ajax model 143
  144. 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 Action Action Enter ActionPick An Item Validation Review Cart Validation Validation Enter Billing Persistence Enter Data Persistence Shipping Persistence Enter Data ‘Add To Cart’ Enter Data Submit Submit Forwarding Forwarding Submit Forwarding Error Page ‘Can’t Order 500’ 144
  145. 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 timeOrder EntryOrder Entry Components Components Item List (DIV) Events/Actions Shopping Shopping Validation Item List Item List CartShopping Cart (DIV) Component Cart Component Component Component Persistence Ajax Event HandlersShipping Form (DIV) GUI Creation Shipping Shipping Billing Billing Billing Form (DIV) Component Component Component Component ErrorViewer ErrorViewer (DIV) (DIV) 145
  146. 146. XMLHttpRequest Object: Methodsopen(“method”, “URL”)open(“method”, “URL”, async, username, password) – Assigns destination URL, method, etc.send(content) – Sends request including postable string or DOM object dataabort() – Terminates current requestgetAllResponseHeaders() – Returns headers (labels + values) as a stringgetResponseHeader(“header”) – Returns value of a given headersetRequestHeader(“label”,”value”) – Sets Request Headers before sending 146
  147. 147. Case > Google Suggests Wow..I didn’t know soccerteams did webprogramming.. 147
  148. 148. How It WorksFires 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 keystrokesCreates a hidden DIV that is shown when you start typingDIV is populated with return results from serverText field is set to include the next word from the server list andeverything 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 fieldResults cached; if you backspace, server is not called againHas a timer adjustment to increase or slow down server calls – Slow dialup sessions hit server fewer times – Fast broadband hits a lot 148
  149. 149. JavaScript ReturnedsendRPCDone( frameElement, "the k", new Array("the killers", "theknot", "the killers lyrics", "the keg", "the kills", "the kinks", "the killersband", "the kite runner", "the king and i", "the killers hot fuss"), newArray("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,000results"), new Array("")); 149
  150. 150. 2.5Building AjaxEmakina Academy 150
  151. 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 challenging More rewarding More rewarding More added value More added valuefor your customers for your customers More differentiation towards competition More differentiation towards competition 151
  152. 152. Ajax Toolkits & FrameworksFrameworks Examples There are many proposed Ajax.Net libraries/frameworks Backbase Survey of Ajax/JavaScript Bitkraft (.NET) Libraries: Django http://wiki.osafoundation.org/bin/vi ew/Projects/AjaxLibraries DOJO DWR (Java) Microsoft Atlas MochiKit Prototype Rico SAjax Sarissa (XML/XSL) Script.aculo.us 152
  153. 153. Ajax FrameworksPure 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 functionalityServer-Side Framework – HTML/JavaScript Generation Server provides complete HTML/JS code generation and browser  server coordination Browser-side coding is for customization – Remote Invocation JavaScript calls routed directly to server-side functions (Java Methods) and returned back to Javascript callback handlers 153
  154. 154. Pick a Framework… any Frameworkwww.Ajaxpatterns.org Server-Side (Multi Language) – Cross-Platform Asynchronous Interface Toolkit (5/05)Pure JavaScript – SAjax (3/05) – DOJO (9/04) – Javascript Object Notation (JSON) & – Prototype (2001) JSON-RPC – Open Rico (5/05) – Javascript Remote Scripting (2000) – Qooxdoo (5/05) Server-Side (Java)Pure JavaScript Infrastructural – Echo2 (3/05) – AjaxJS (5/05) – Direct Web Remoting (DWR) (2005)] – HTMLHttpRequest (2001) – ThinkCAP Minerva (04/2005) – Interactive Website Framework (5/05) Server-Side (Lisp) – LibXMLHttpRequest (6/03) – CL-Ajax – RSLite – Sack (5/05) Server-Side (.NET) – Sarissa (2/03) – Ajax.NET (305) – XHConn (4/05) Server-Side (PHP) – AjaxAC (4/05) – JPSpan – XAjax Server-Side (Ruby) – Ruby-On-Rails (3/05) 154
  155. 155. A New Way of Building ApplicationsAjax Applications Are: 3-tier client/server apps – Browser ↔ App Server ↔ Data Source Event driven – User clicks, user drags, user changes data Graphics Intensive – Visual Effects, Rich Visual Controls Are Data Oriented – Users are manipulating and entering data Are Complex – Pages hold many more controls and data than page-oriented applications – Multiple Master-Detail Relationships in one page 155
  156. 156. 3.1B2B Ajax ExamplesAn Emakina Review 156
  157. 157. Project Collaboration > Basecamp Basecamp is a unique project collaboration tool. Projects dont fail from a lack of charts, graphs, or reports, they fail from a lack of communication and collaboration. Basecamp makes it simple to communicate and collaborate on projects. 157 Visit site
  158. 158. Group Chat for Business > CampFire Campfire is a web-based group chat tool that lets you set up password-protected chat rooms in just seconds. Invite a client, colleague, or vendor to chat, collaborate, and make decisions. Set up a room on your intranet for internal communications. 158 Visit site
  159. 159. Collaborative Writing > Writely • Put your words into Writely quickly and easily. • Keep them online and edit them from anywhere. • Get them back out just as easily. 159 Visit site
  160. 160. Online Writing > ZohoWriter • Online tool to create documents, edit them your way, and share with anyone... 160 Visit site
  161. 161. Group Spreadsheets > Google • Choose who can access your spreadsheets. • Share documents instantly. • Edit with others in real time. • Multiple people can edit or view your spreadsheet at the same time as you - their names will appear in an on- screen chat window. 161 Visit site
  162. 162. 3.2Ajax OpportunitiesEmakina Academy 162
  163. 163. User Interfaces Evolve Beyond the Web Internet users are expecting more The HTML page model was too limiting for applications Business are seeing increased ROI with improved user experiences “The web today is not good enough to pull money out of pockets.” Historical Web Development Problems -- Forrester Research Other “Despite advances…the browser DB Integration cannot deliver experiences that are as Automation responsive and interactive as those of client-based applications.” Cross-device Cross- -- Jupiter Media PersonalizationDevelopment timeBetter interfaces This was correct 3 years ago, This was correct 3 years ago, but today it has been solved but today it has been solved 163
  164. 164. In the Face of Enormous Opportunity…. Internet Internet Extranet Extranet Intranet IntranetInteractive Ecommerce Customer Enterprise Department Interactive Ecommerce Customer Partner Apps Enterprise Department Sites Apps Apps Partner Apps IT Apps IT Apps Sites Apps Apps IT Apps IT Apps Global 3,500 executives…expect eCommerce revenues to comprise 20% of Global 3,500 executives…expect eCommerce revenues to comprise 20% of their revenues five years from now. their revenues five years from now. --Forrester Research --Forrester Research 164
  165. 165. In the Face of Enormous Opportunity…. Internet Internet Extranet Extranet Intranet IntranetInteractive Ecommerce Customer Enterprise Department Interactive Ecommerce Customer Partner Apps Enterprise Department Sites Apps Apps Partner Apps IT Apps IT Apps Sites Apps Apps IT Apps IT AppsA better online customer experience can actually drive profitability…improvingA better online customer experience can actually drive profitability…improving margins by 25 percent. margins by 25 percent. –AMR Research –AMR Research 165
  166. 166. …Web Applications Used to Disappoint Internet Internet Extranet Extranet Intranet IntranetInteractive Ecommerce Customer Enterprise Department Interactive Ecommerce Customer Partner Apps Enterprise Department Sites Apps Apps Partner Apps IT Apps IT Apps Sites Apps Apps IT Apps IT Apps E-commerce sites lose almost half of their potential sales because users E-commerce sites lose almost half of their potential sales because users cannot use the site. cannot use the site. --Jakob Nielsen --Jakob Nielsen 166
  167. 167. …Web Applications Used to Disappoint Internet Internet Extranet Extranet Intranet IntranetInteractive Ecommerce Customer Enterprise Department Interactive Ecommerce Customer Partner Apps Enterprise Department Sites Apps Apps Partner Apps IT Apps IT Apps Sites Apps Apps IT Apps IT AppsTo compensate for hard-to-use apps, firms pony up for additional training...andTo compensate for hard-to-use apps, firms pony up for additional training...and application redesign [that] can approach the $1 million mark. application redesign [that] can approach the $1 million mark. --Forrester Research --Forrester Research 167
  168. 168. Ajax Saves MoneyHourly Labor Rate XTime Saved per Transaction XNumber of Transactions per year A hell of a lot of Money Saved 168
  169. 169. Sample CalculationsAssumptions: Assumptions: – Hosted web app, high speed or – Remote employee using dial-up LAN – Hourly Labor Rate: $20 – Hourly Labor Rate: $20 – Seconds Saved per Transaction: – Seconds Saved per Transaction: 36 Seconds 199.01 Seconds – Number of Transactions per year: – Number of Transactions per year: 50,000 50,000Savings: Savings: – $10,000 – $55,281 – 500 Person Hours – 2,764 Person Hours 169
  170. 170. Bottom LineLow Cost of Web Apps (Web 1.0)+Usability of Desktop ApplicationsWeb 2.0 Ajax Applications 170
  171. 171. Benefits Measurable Harder to measure Steps to complete a task Familiar user interface Time spent waiting for data to be Improved application transmitted responsiveness Time spent completing a particular task User experience Bandwidth consumed for the entire taskEasily 80% Typically 50% Average 66% Data transfer Transmission time Process completion time 171
  172. 172. 3.3Ajax FutureEmakina Academy 172
  173. 173. The Future of AjaxMoving past the hype:Making cool apps that are actually beneficial to the user!Moving forward with the Ajax “technique” – Usability – Desktop on the Web / “WebOS”We will see more integration with – Flash – Scaling Vector Graphics (SVG) – XForms – XHTML 2 / HTML 5 173
  174. 174. Top 10 Reasons Why Ajax is here to stay1. Usability and User Experience Are King2. Benefits of Regular Web Applications3. Cross Browser and Cross Platform4. Open Standards Based5. Server Technology Agnostic6. Web 2.07. Adoption Is Strong with Industry Leaders8. Low Incremental Cost9. Plays Nicely with Flex and Flash10. XAML, XUL, XForms... Not Yet. 174