JavaOne 2009 Deploying Apps for Consumers Bof5150

Creating JavaFX™ User Experiences That Work Jeff Hoffman Jindrich Dinga Karen Stanley Sun Microsystems, Inc. BOF-5150

Goals Provide some tips on how we would do things Share ideas 2

Agenda Examples Customizing the Experience Visual Design Resources (more examples, links & code samples) This presentation is available at the Design at Sun blog http://blogs.sun.com/designatsun 3

Pogo.com #1 - Best User Experience User has the required version of Java already installed 4

Pogo.com #2 - Clunky User Experience The user has an old Java or Java is not installed No detection on web site User is left on his own - Bad user experience 7

Microsoft IE Dialog 10

Doesn’t really guide you through the process 11

Pogo.com #3 - Smoother User Experience Required version of Java is not installed JavaScript detection on web site User is directed to Java.com web site and then sent back to the original web page 12

Customized dialog box 14

This is actually java.com (sneaky) 15

After install completes, user is routed back to pogo.com 19

JavaFX PIE Example The following is an example of a JavaFX applet that has been deployed on the JavaFX.com website Machine without Java Installed 22

PIE Example – Default User Experience 23

PIE Example – media room (default) Big White Box 24

PIE Example – click to install Java JavaFX DT JavaScript introduces this message 25

PIE Example – Java install sequence java.com is loaded 26

PIE Example – Java install sequence ActiveX warning (replaced with download dialog in 6u14) 27

PIE Example – Java install sequence IE Security Warning Dialog 28

PIE Example – Java install Installer starts 29

PIE Example – Java install complete When install is complete, DT takes you back to the original page 30

PIE Example – loading media room Default animated GIF on Big White Box 31

PIE Example – media room applet starts Applet begins (and loads more data) 32

PIE Example – media room applet running 33

JavaFX PIE Example - Smoother User Experience Remove some of the steps Add custom touches to keep the user involved in the web experience 34

PIE Example – home page 35

PIE Example – No Java Customized message inserted (no more big white box!) 36

PIE Example – Install complete Your website maintains it’s design during Java install 37

PIE Example – media room applet starts Custom loading GIF means no Big White Box! 38

PIE Example – media room applet running 39

PIE Example – some lessons Using Deployment Toolkit (DT) JavaFX DT: http://dl.javafx.com/1.2/dtfx.js Java DT: http://java.com/js/deployJava.js Java install invoked via customized button Can customize the DT code and deploy on your own site (it's just JavaScript) 40

Application Deployment Flow Applet Loading App Web Determine Drag to Page System Running Desktop Required Java? Web Start Splash Loading Help Install Page Java IFTW or Error Kernel Page 41

Application Deployment Flow Applet Loading Can Customize the App Web Determine UE basedDrag to on OS Page System or Browser Running Desktop Required Java? Web Start Splash Loading Help Install Page Java IFTW or Error Kernel Page 42

Application Deployment Flow Applet Loading App Web Determine Drag to Page System Running Desktop Required Java? Web Start Splash Loading Help Install Route the user as Page Java necessary. Consider using another page IFTW or Error Kernel Page 43

Application Deployment Flow Applet Loading Applet or Web Start? Both now App Web Determine Drag to use JNLP! Page System Running Desktop Required Java? Web Start Splash Loading Help Install Page Java IFTW or Error Kernel Page 44

Application Deployment Flow Make your applet behave like a Applet Loading Web Start app App Web Determine Drag to Page System Running Desktop Required Java? Web Start Splash Loading Help Install Page Java IFTW or Error Kernel Page 45

Application Deployment Flow Applet Loading App Web Determine Drag to Page System Running Desktop Required Java? Web Start Splash Loading Point to Help Install java.com help or Page Java roll your own IFTW or Error Kernel Page 46

Customizing the Experience Make it your own... What do you get by default? Java branded loading graphics Java branded splash screen Where you can define your own experiences... Applet loading graphic & loading strategies (such as loading a small applet that in turn loads the rest) Web Start splash screen Desktop/Start Menu items How to invoke “Drag to the desktop” Web page appearance if Java isn't installed yet... 47

Java Branded Graphics Applet Loading Web Start Splash Screen 48

Visual Design Make a positive impression on the user Consumer user experiences are becoming more engaging...you need to think like a movie producer. Catch the user's attention and make them want to install Java to run your app. Take advantage of JavaFX Production Suite to make incorporating artwork in your app easy. 49

Linksys EasyLink Advisor 50

Linksys EasyLink Advisor 51

HP Total Care Advisor 52

HP Total Care Advisor Nice icons, but function can be overshadowed 53

HP Machine Setup 54

Tech Test Train Application 55

Key Take Aways Don't just do the default - it's not much effort to make a big difference Keep users in your web experience Visual design is important to keep the user engaged This presentation is available at the Design at Sun blog http://blogs.sun.com/designatsun 56

Resources Related Sessions Useful Links The End User's System Sample Deployment Toolkit (DT) Code Security Dialogs Dealing with Unexpected Events 57

More Info on the Deployment Toolkit Check out these sessions Name (Session ID) When? Upcoming Session Distributing JavaFX™ Applications with Java™ Web Start Software/ Friday June 05 4:10PM Maven Repository Manager (TS-4388) Previous Sessions Deploying Java™ Technology to The Masses: How Sun Deploys Tuesday June 02 10:50 AM The JavaFX™ Runtime (TS-4381) Meet the Java™ Deployment Tuesday June 02 7:30PM Team (BOF-4383) 58

More Info on JavaFX Production Suite A really great link between design and development Previous Sessions Getting the Most from the Designers with the JavaFX™ Tuesday June 02 4:40 PM Production Suite (TS-5494) Quo Vadis JavaFX™ Production Tuesday June 02 7:30 PM Suite (BOF-5493) JavaFX™ Technology in Action: Wednesday June From Design Tool to Desktop to 11:05 AM 03 Mobile Device (TS-4069) 59

www.timeanddate.com - IE Default detection & default message User is directed to another web site to get Java The only way how to get the content running is using Back button to navigate back to the original page or type the URL again This user experience may result in the user being unsuccessful in getting back to the original page and running the content www.timeanddate.com/worldclock/ personalapplet.html 60

www.timeanddate.com - FF Default detection & default message User is told that Java is missing After Java installation the browser does not load Java automatically and displays that Java is still missing In order to run the content, the user must restart browser manually This user experience may result in the user being unsuccessful in getting their content and installing Java over and over again www.timeanddate.com/worldclock/ personalapplet.html 64

www.cruisecheap.com - IE&FF No detection at all 360° Viewer does not work and user does not know why because there is no information that Java is needed in order to start using Viewer This user experience falls short of providing users what they were promised. Although user may still get the information (placeholder content), they will not see the viewer and will not know why. www.cruisecheap.com/virtual_ship_tours.asp 73

BMTtron game - FF User is told that Java is missing and is directed to another web site to get Java The only way how to get the content running is using Back button to navigate back to the original page or type the URL again and reload the browser This user experience may result in the user being unsuccessful in getting back to the original page and running the content www.hotscripts.com/category/java/applets/games- entertainment/ 75

Applet Deployment – Chemwriter Detects that Java is not installed Takes the user to a custom page with instructions 83

Applet Deployment – Chemwriter (2) Launches Java Installer 84

Applet Deployment – Chemwriter (3) Applet Running 85

Applet Deployment – Chemwriter (4) Page describes install process in current site context 86

Chemwriter Example Home Page Applet Running Installer Panel Help Page 87

Customizing the Experience Useful Links Pointers on how to update Applet loading graphic & loading strategies For example, see this jGuru article Getting Started with WebStart Blog Entry • Web Start splash screen • Desktop/Start Menu items Drag to the desktop experience Web page appearance if Java isn't installed yet... Web Start JNLP has many options – see this article JavaScript for Getting User Information from a web page visitor 88

Visual Design Useful Links JavaFX.com Finding Great Artwork for Your App Create Visual Appeal in Your UI More coming soon... 89

The End User's System What does the user need to run your app? Consider what's out there... Minimum: Java 5+ Best: Latest (Java 6 Update 14 on Windows) Possible situations – the machine has: The version they need and it's loaded The version they need, but it's not loaded No Java at all A version of Java that's too old for the app Runs an OS that isn't supported by the app 90

Determining the End User's Needs Use the Deployment Toolkit (DT) If the users don't have what they need, the DT helps you make sure they can run your app. DT JavaScript can be used to: Determine which version of Java (and JavaFX) is on the user's system (if any) Launch the Java installer (when necessary) Return the user to the appropriate page 91

When Java Needs to be Installed Various installers are available... IFTW (Install from the Web) or Online Installer renamed to JavaSetup6u14.exe “Currently the most popular”, Approx 7MB overall, Initial download < 1MB Kernel Installer “Just the essentials...and the rest comes later”, Initial download < 1MB, Java apps can run after about 4MB. The rest trickles down in the background as needed. See Google Chrome. Offline Installer (backup option) “Everything and the kitchen sink”, approx 14MB 92

Installer Details IFTW (JavaSetup6u14.exe) java.com (and DT) invokes this one by default setInstallerType: function(“online”) Kernel setInstallerType: function(“kernel”) Offline Direct the user to the java.com manual download page and ask them to select the Offline Installer 93

java.com Manual Download Online/IFTW installer for Windows Offline installer for Windows 94

Get the User Started How does the user launch the app? Applet placed directly on a web page Application starts when the user clicks on a button Download an executable JAR Drag a running applet from the browser to the desktop The application then behaves like it was launched via Web Start 95

Simple DT Example <script src=quot;http://java.com/js/deployJava.jsquot;></script> <script> var list = deployJava.getJREs(); var result = quot;quot;; result = list[0]; for (var i=1; i<list.length; i++) { result += quot;, quot; + list[i]; } document.writeln(quot;<p> You have installed:n quot;+ result); if (result == quot;quot;) { document.writeln(quot;<p>You no Java installed.quot;); deployJava.installLatestJRE(); } else { document.writeln(quot;<p>You have Java installed.quot;); } </script> 96

Drag to Desktop Supported Browsers Internet Explorer 6+ on Windows XP and Vista Firefox 3 on Windows XP & Vista, Solaris, Linux Simple APPLET code <APPLET archive=quot;my_applet.jarquot; code=quot;MyAppletquot; width=quot;300quot; height=quot;300quot;> <PARAM name=quot;draggablequot; value=quot;truequot;> </APPLET> 97

Menus, Shortcuts, Help <shortcut online=quot;truequot;> <desktop /> <menu submenu=quot;Corp Appsquot;/> </shortcut> <information> <title> MyApp </title> <homepage href=quot;myapp.htmlquot;> </information> 98

Security Dialogs When are they necessary? Users perceive these dialogs as a “speed bump” on the way to their goal (running YOUR app) JavaFX now lets you perform many useful functions without signing your app Full Screen Video (on user initiated action) Cross Domain Access Local storage via the JNLP Persistence API, updated for JavaFX Upcoming Session New Security Features in JDK™ Wednesday June 03 7:45PM Releases 6 and 7 (BOF-5102) 99

Dealing with the Unexpected Help the user get back on track... Integrated error handling will help get the user back on the right track. As simple as pointing to the help pages on java.com, or giving your own advice as it pertains to your application (i.e. Chemwriter example) 100

Jeff Hoffman jeff.hoffman@sun.com Jindrich Dinga jindrich.dinga@sun.com Karen Stanley karen.stanley@sun.com Java User Experience Design

http://blogs.oracle.com	148
http://blogs.sun.com	86
https://blogs.oracle.com	30
http://products.metamolecular.com	20
http://www.fachak.com	2
http://www.slideshare.net	2
http://planets.sun.com	1
http://translate.googleusercontent.com	1
http://www.linkedin.com	1

JavaOne 2009 Deploying Apps for Consumers Bof5150

by Jeff Hoffman on Jun 03, 2009

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 291

Statistics

JavaOne 2009 Deploying Apps for Consumers Bof5150 Presentation Transcript