Dmeeker Finala

Next Generation User Experiences

“RIA 2010? A look to the future”dave meeker, user experience strategist - roundarch

[email protected]

mailto:[email protected]


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


Touch-Screen Computers


Touch / Multi-Touch Input & Large Screens


Advanced, Touch-Enabled Smart Phones with Advanced Web Content Support


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










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











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







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














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

http://merapiproject.net

http://merapiproject.net

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 - [email protected]

96

