View
475
Download
3
Category
Tags:
Preview:
Citation preview
Next Generation User Experiences
“RIA 2010? A look to the future”dave meeker, user experience strategist - roundarch
dmeeker@roundarch.com
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.
2
We might Jump Around a bit.
bear with me?
3
Why Are We Here ?
4
in order to understand why we
are here...we have to understand where
we’ve been
5
we have been on a constant search for tools to create
better user experiences.
6
1995 - 2000: “experimentation”
7
Netscape Plugins
ActiveX Controls
Java Applets
MS HTML Layout Control (IE3.0)
CGI Push Video
Framesets
Shockwave
MS Liquid Motion
MS ActiveX Control Pad - 1996
8
MS HTML Layout Control (ActiveX) - 1996
9
Java Applet for Charting - 1996
10
Java Applet Calculator - 1996
11
“Pocket Calc”
Dynamic HTML, Cascading Menu - 1998
12
“DHTML” Cascading Menu
We have been working to overcome the absurd rule of page-based applications, minimally-functional UI controls and “fetch --> display” nature of the Web.
13
14
User Expectations > HTML
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!
are greater than
2000 - 2004: “foundation”
15
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
The Pet Market Application - Rich Become Real
16
2005 - 2008: “revolution”
17
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
2009 - 2011: “the (near) future”
18
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
User ExperienceNot 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-endBack-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.
The future is RIAs.
That future is now.
20
Rich Internet Applications
Do we still have to call them “RIAs”?
“Rich” = “Software Like” not “Page-Based”ResponsiveContextualReal-TimeMotion-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.
What Are the Primary Technologies used to enable great user experiences (RIAs) ?
MS SilverlightFlash Player (Flash, Flex)Adobe AIRGoogle’s Tools (Gears, Chrome, Javascript)JavaFX Laszlo Good ‘Ol HTML/JavascriptOthers
all of this technology was created with a
single goal...
creating better user experiences
23
What other technologies have or will have an impact on our ability to make killer user experiences?
SOABusiness Logic Exposed via Services
Application Enabling ServicesImage / Video Processing AI/Decision Making ServicesRecommendation EnginesAudio ProcessingVOIPContext Generation & Search Services
25
Fear Not: 3rd Party Integration
Mixing the best of the UI technologies with our highly developed back-end “brains” leads to next generation experiences.
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 WidgetsAIRWPFLaszlo WebtopJavaFX
Look how far we’ve come already
Examples of “rich connected” applications
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 visualizationGreat for putting different screen objects in context with one anotherFeels more “human”
Boundless - Eliminating page-based boudaries Not possible on the Web prior to RIAsNot 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
What is on the Horizon?New forms of Input
VoiceTouch / Multi-Touch ScreensAmbient Data (From Device, Location, etc)
Broadband EverywhereNext-Generation Wireless Technologies Fiber Optics
Connected DevicesMobile (of Course)AppliancesHome Entertainment SystemsAutomobilesSigns / Ambient Displays
Look how far we’ve come already
Touch-Screen Computers
Look how far we’ve come already
Touch / Multi-Touch Input & Large Screens
Look how far we’ve come already
Advanced, Touch-Enabled Smart Phones with Advanced Web Content Support
Look how far we’ve come already
Cars, Appliances, TV’s... Oh My!
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.
35
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)
Financial Reporting Application
37
Financial Reporting Application
38
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
39Adobe Flex - Financial Reporting Application
40Adobe Flex - Financial Reporting Application
41Adobe Flex - Financial Reporting Application
42Adobe Flex - Financial Reporting Application
43Adobe Flex - Financial Reporting Application
44Adobe Flex - Financial Reporting Application
45Adobe Flex - Financial Reporting Application
46Adobe Flex - Financial Reporting Application
47Adobe Flex - Financial Reporting Application
48Adobe Flex - Financial Reporting Application
Video Player Application
49
Video Player Application
50
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
51Microsoft Silverlight - Video Player Application
52Microsoft Silverlight - Video Player Application
53Microsoft Silverlight - Video Player Application
54Microsoft Silverlight - Video Player Application
55Microsoft Silverlight - Video Player Application
56Microsoft Silverlight - Video Player Application
57Microsoft Silverlight - Video Player Application
58Microsoft Silverlight - Video Player Application
59Microsoft Silverlight - Video Player Application
60Microsoft Silverlight - Video Player Application
61Microsoft Silverlight - Video Player Application
Global, Enterprise Device Troubleshooting Application
62
&
Global, Enterprise Device Troubleshooting Application
63
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
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 OnlyIEAJAX ActiveXFlash Content
Why? Connect Device to Web Application using existing Windows-Only Drivers
65AJAX - Motorola Service & Repair Tools - Before
66AJAX - Motorola Service & Repair Tools - Before
67AJAX - Motorola Service & Repair Tools - Before
68AJAX - Motorola Service & Repair Tools - Before
69AJAX - Motorola Service & Repair Tools - Before
70AJAX - Motorola Service & Repair Tools - Before
71AJAX - Motorola Service & Repair Tools - Before
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
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!
74AJAX - Motorola Service & Repair Tools - After
75AJAX - Motorola Service & Repair Tools - After
76AJAX - Motorola Service & Repair Tools - After
77AJAX - Motorola Service & Repair Tools - After
78AJAX - Motorola Service & Repair Tools - After
79AJAX - Motorola Service & Repair Tools - After
80AJAX - Motorola Service & Repair Tools - After
81AJAX - Motorola Service & Repair Tools - After
82AJAX - Motorola Service & Repair Tools - After
83AJAX - Motorola Service & Repair Tools - After
84AJAX - Motorola Service & Repair Tools - After
85AJAX - Motorola Service & Repair Tools - After
86AJAX - Motorola Service & Repair Tools - After
87AJAX - Motorola Service & Repair Tools - After
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
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 changeConceptual DesignsPrototypingLean on Iterative processes when at all possible
Hear what I’m saying?
By 2010, all applications will be “Rich”, or will incorporate all of these concepts.
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.
What I am NOT saying
What I AM saying
Why Blur the Line when you can Erase it?
91
h t t p : / / m e r a p i p r o j e c t . n e t
Building a Bridge Between Adobe AIR and Java
What is Merapi?
92
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.
Why Did We Create Merapi?
93
For Adobe AIR
For Java
To have access to the features of the Java language and the myriad of Java libraries
To have access to the powerful user interface framework available in Adobe Flex / AIR applications
How Did We Create Merapi?
94
Flex <-> Java
Communication on a local socket using Adobe open source libraries for AMF serialization
Ways to Use Merapi
95
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.
Q & Adave meeker - roundarch - meekerd@gmail.com
96
Recommended