Dmeeker Finala

642 views
524 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
642
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dmeeker Finala

  1. 1. Next Generation User Experiences “RIA 2010? A look to the future” dave meeker, user experience strategist - roundarch dmeeker@roundarch.com
  2. 2. 2 Disclaimer As a professional that focuses on user experience, I can not manage to give a talk without first putting the subject matter into context.
  3. 3. 3 We might Jump Around a bit. bear with me?
  4. 4. 4 Why Are We Here ?
  5. 5. 5 in order to understand why we are here...we have to understand where we’ve been
  6. 6. 6 we have been on a constant search for tools to create better user experiences.
  7. 7. 7 1995 - 2000: “experimentation” Netscape Plugins ActiveX Controls Java Applets MS HTML Layout Control (IE3.0) CGI Push Video Framesets Shockwave MS Liquid Motion
  8. 8. 8 MS ActiveX Control Pad - 1996
  9. 9. 9 MS HTML Layout Control (ActiveX) - 1996
  10. 10. 10 Java Applet for Charting - 1996
  11. 11. 11 Java Applet Calculator - 1996 “Pocket Calc”
  12. 12. 12 Dynamic HTML, Cascading Menu - 1998 “DHTML” Cascading Menu
  13. 13. 13 We have been working to overcome the absurd rule of page-based applications, minimally-functional UI controls and “fetch --> display” nature of the Web.
  14. 14. 14 User Expectations > HTML are greater than Building “Real” Applications using HTML as the primary GUI technology doesn’t allow for the optimal experience that your users want. It gets you there, but could be so much better!
  15. 15. 15 2000 - 2004: “foundation” SOAP / Web Services XML Flash MX* Flash Remoting Macromedia Central Macromedia/Adobe Flex 1.0 MS .NET * With Flash MX, Macromedia Introduced the term “Rich Internet Application” to the Web Vernacular
  16. 16. 16 The Pet Market Application - Rich Become Real
  17. 17. 17 2005 - 2008: “revolution” Adobe Buys Macromedia SOA Adoption & Readiness AJAX Maturity Adobe Flex 2.0 - 3.0, AIR, Flash Player, FDS Microsoft Silverlight, Expression Studio, Surface Users now demand good experiences
  18. 18. 18 2009 - 2011: “the (near) future” Web Applications Benefit from Hardware Graphic Acceleration & OS Connectivity Desktop & Web Blurring Continues The Cloud Become Real: Personal Remote File Storage Becomes Preferential APIs, APIs, APIs & more APIs The Thin Client Returns Mobile Gets Real Semantic Data Voice / Touch Input Multi-Channel Becomes Essential
  19. 19. User Experience Not just an academic name for design! Becoming the key driver behind consumer and enterprise software development initiatives Over the last 10 years, we’ve really increased the possibilities of what can happen on the back-end Back-end applications have paved the way for what we can now leverage on the front-end Users are now demanding that applications adapt to their evolving skills, wants, and needs. If you are developing “RIAs” (in any technology) YOU care about user experience.
  20. 20. 20 The future is RIAs. That future is now.
  21. 21. Rich Internet Applications Do we still have to call them “RIAs”? “Rich” = “Software Like” not “Page-Based” Responsive Contextual Real-Time Motion-Capable Because we now have robust GUI technologies, shouldn’t “RIAs” be the new standard? RIAs are not about pushing technology, they are about enabling better user experiences.
  22. 22. What Are the Primary Technologies used to enable great user experiences (RIAs) ? MS Silverlight Flash Player (Flash, Flex) Adobe AIR Google’s Tools (Gears, Chrome, Javascript) JavaFX Laszlo Good ‘Ol HTML/Javascript Others
  23. 23. 23 all of this technology was created with a single goal... creating better user experiences
  24. 24. What other technologies have or will have an impact on our ability to make killer user experiences? SOA Business Logic Exposed via Services Application Enabling Services Image / Video Processing AI/Decision Making Services Recommendation Engines Audio Processing VOIP Context Generation & Search Services
  25. 25. 25 Fear Not: 3rd Party Integration
  26. 26. Mixing the best of the UI technologies with our highly developed back-end “brains” leads to next generation experiences.
  27. 27. We’ve built RIAs so that our Web applications would “Feel” more like Desktop Applications Sometimes “Feeling” isn’t enough. How can we combine the Web and the Desktop? It is happening now! Desktop Widgets AIR WPF Laszlo Webtop JavaFX
  28. 28. Look how far we’ve come already Examples of “rich connected” applications
  29. 29. What Helps to Enable Next- Generation Web Experiences? Utilizing 3-D Let’s not use the term “3-d”. We aren’t talking about virtual reality here, or bad movies from the 80s! 3-D = “Interfaces that take advantage of X,Y and Z Z = “Natural Objects” living in space Great for data visualization Great for putting different screen objects in context with one another Feels more “human” Boundless - Eliminating page-based boudaries Not possible on the Web prior to RIAs Not suitable for all applications, but exceptional for others. Why lock yourself into a box? Leaning on “the Cloud” Utilizing 3rd party functionality for storage & processing
  30. 30. What is on the Horizon? New forms of Input Voice Touch / Multi-Touch Screens Ambient Data (From Device, Location, etc) Broadband Everywhere Next-Generation Wireless Technologies Fiber Optics Connected Devices Mobile (of Course) Appliances Home Entertainment Systems Automobiles Signs / Ambient Displays
  31. 31. Look how far we’ve come already Touch-Screen Computers
  32. 32. Look how far we’ve come already Touch / Multi-Touch Input & Large Screens
  33. 33. Look how far we’ve come already Advanced, Touch-Enabled Smart Phones with Advanced Web Content Support
  34. 34. Look how far we’ve come already Cars, Appliances, TV’s... Oh My!
  35. 35. 35 All devices that contain screens provide opportunities for user experience design and development. It’s not just about the “computer” The coming years will introduce more advanced, network-connected devices for both business and consumer use. When web technology fuses with “legacy devices” such as automobiles, appliances and televisions, great user experience design is required to ensure adoption.
  36. 36. What RIA tool/technology to use? Remember: RIAs are about user experience! RIAs are NOT about Technology Use the right technology to enable the optimum user experience. Today, we need to start with design. Pick the right tool for the right job (and team, and client, etc)
  37. 37. 37 Financial Reporting Application
  38. 38. 38 Financial Reporting Application Why Adobe Flex? • Robust Flash Player / Handles 3-D GUI Fairly Well • Ability to use LiveCycle Data Services for Data Management • Integration with Web Services and SOA • Easy Conversion to Desktop Client (Adobe AIR) for speci c circumstances • Development Team was Familiar with Flex and Enterprise Portal Integration
  39. 39. Adobe Flex - Financial Reporting Application 39
  40. 40. Adobe Flex - Financial Reporting Application 40
  41. 41. Adobe Flex - Financial Reporting Application 41
  42. 42. Adobe Flex - Financial Reporting Application 42
  43. 43. Adobe Flex - Financial Reporting Application 43
  44. 44. Adobe Flex - Financial Reporting Application 44
  45. 45. Adobe Flex - Financial Reporting Application 45
  46. 46. Adobe Flex - Financial Reporting Application 46
  47. 47. Adobe Flex - Financial Reporting Application 47
  48. 48. Adobe Flex - Financial Reporting Application 48
  49. 49. 49 Video Player Application
  50. 50. 50 Video Player Application Why Microsoft Silverlight? • Robust Silverlight Player • Strong Streaming Video Support • Supported on both PC & Mac • DRM Integration • Interactive & Fast GUI • Microsoft wanted to show off Silverlight’s Capabilities
  51. 51. Microsoft Silverlight - Video Player Application 51
  52. 52. Microsoft Silverlight - Video Player Application 52
  53. 53. Microsoft Silverlight - Video Player Application 53
  54. 54. Microsoft Silverlight - Video Player Application 54
  55. 55. Microsoft Silverlight - Video Player Application 55
  56. 56. Microsoft Silverlight - Video Player Application 56
  57. 57. Microsoft Silverlight - Video Player Application 57
  58. 58. Microsoft Silverlight - Video Player Application 58
  59. 59. Microsoft Silverlight - Video Player Application 59
  60. 60. Microsoft Silverlight - Video Player Application 60
  61. 61. Microsoft Silverlight - Video Player Application 61
  62. 62. 62 & Global, Enterprise Device Troubleshooting Application
  63. 63. 63 Global, Enterprise Device Troubleshooting Application Why AJAX? • Must be Internationalized at Runtime - Up to 140 Countries / 60 Languages • Dynamic Visual Styling based on user, group or other LDAP data • Must Allow Web Page to Connect to Device Connected via USB • Must Front-End Siebel ERP System • Many Different Deployments - One Code Base • Client Staff Must Support Application
  64. 64. Picking a Technology: Motorola MotoTools “Real” solutions sometimes require a mixed-bag of tricks Create a solution to the problem, don’t introduce problems because of your solution! MS Windows Only IE AJAX ActiveX Flash Content Why? Connect Device to Web Application using existing Windows-Only Drivers
  65. 65. AJAX - Motorola Service & Repair Tools - Before 65
  66. 66. AJAX - Motorola Service & Repair Tools - Before 66
  67. 67. AJAX - Motorola Service & Repair Tools - Before 67
  68. 68. AJAX - Motorola Service & Repair Tools - Before 68
  69. 69. AJAX - Motorola Service & Repair Tools - Before 69
  70. 70. AJAX - Motorola Service & Repair Tools - Before 70
  71. 71. AJAX - Motorola Service & Repair Tools - Before 71
  72. 72. 72 You Get the Idea. “Out of the Box” Siebel Interface • Cumbersome • Lots of Pop-Up Windows • Requires a Lot of Training • Designed around Data, Not Designed Around Users • Culturally Insensitive?
  73. 73. 73 We Got an Idea! Custom RIA to Replace the Siebel GUI • Easy to Use Without a Lot of Training • Responsive • Connects Directly to Device(s) • Internationalized • Culturally Sensitive!
  74. 74. AJAX - Motorola Service & Repair Tools - After 74
  75. 75. AJAX - Motorola Service & Repair Tools - After 75
  76. 76. AJAX - Motorola Service & Repair Tools - After 76
  77. 77. AJAX - Motorola Service & Repair Tools - After 77
  78. 78. AJAX - Motorola Service & Repair Tools - After 78
  79. 79. AJAX - Motorola Service & Repair Tools - After 79
  80. 80. AJAX - Motorola Service & Repair Tools - After 80
  81. 81. AJAX - Motorola Service & Repair Tools - After 81
  82. 82. AJAX - Motorola Service & Repair Tools - After 82
  83. 83. AJAX - Motorola Service & Repair Tools - After 83
  84. 84. AJAX - Motorola Service & Repair Tools - After 84
  85. 85. AJAX - Motorola Service & Repair Tools - After 85
  86. 86. AJAX - Motorola Service & Repair Tools - After 86
  87. 87. AJAX - Motorola Service & Repair Tools - After 87
  88. 88. Enterprise Applications: Are no longer Boring, Bad and Unused. They have started to re ect the changes that have happened in the consumer space: Less Serious Feeling More Visually Appealing Easier to Understand “Signposting” Design Don’t have to feel monstrous, or overwhelming
  89. 89. The Challenges of Creating Next-Generation Experiences Building RIAs changes the way you work. A Great RIA design and development team are different people than your traditional “Web” development or “Desktop” development team. Internal team – Enterprise product development, etc – Building stuff “for us”. External team – Building stuff “for others” – Consulting / Pro services / design shop Your team make-up needs to change Your process must change Conceptual Designs Prototyping Lean on Iterative processes when at all possible
  90. 90. Hear what I’m saying? What I am NOT saying By 2010, all applications will be “Rich”, or will incorporate all of these concepts. What I AM saying Your Future starts with your NEXT DESIGN. Don’t wait for the future to leverage the best that User Experience can offer. Put Experience First, and your application will have a better chance at being #1 against the competition.
  91. 91. 91 Why Blur the Line when you can Erase it? Building a Bridge Between Adobe AIR and Java http://merapiproject.net
  92. 92. 92 What is Merapi? Merapi is a bridge between applications written in Java and those running in and created for Adobe AIR™ (Adobe Integrated Runtime™). Merapi has been designed to run on a user's machine, along with an Adobe AIR™application and provide a direct path between the Adobe AIR™ framework and Java, exposing the power and overall capabilities of the user's operating system, including 3rd party hardware devices & software services.
  93. 93. 93 Why Did We Create Merapi? For Adobe AIR To have access to the features of the Java language and the myriad of Java libraries For Java To have access to the powerful user interface framework available in Adobe Flex / AIR applications
  94. 94. 94 How Did We Create Merapi? Flex <-> Java Communication on a local socket using Adobe open source libraries for AMF serialization
  95. 95. 95 Ways to Use Merapi Connect an AIR™ application to any type of remote control that can be connected to your desktop Perform TWAIN Capturing of Video or Images from a camera or scanner Use AIR™ to talk to a phone plugged in via USB Connect Data on a Web page to virtually any desktop application Connect an AIR application UI to a GPS device Sending MIDI signals to instruments over a network using a Flex application GUI running in the AIR framework Create a new UI for a command-line Java application or Java Interface of any type. There are endless use cases on how Merapi can be used to erase the line between the Web and the desktop.
  96. 96. 96 Q&A dave meeker - roundarch - meekerd@gmail.com

×