Creating JavaFX™ User Experiences That Work

Jeff HoffmanJindrich DingaKaren StanleySun Microsystems, Inc.BOF-5150

2

Provide some tips on how we would do things

Share ideas

Goals

3

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

4

User has the required version of Java already installed

Pogo.com #1 - Best User Experience

5

6

7

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

Pogo.com #2 - Clunky User Experience

8

9

10

Microsoft IE Dialog

11

Doesn’t really guide you through the process

12

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

Pogo.com #3 - Smoother User Experience

13

14

Customized dialog box

15

This is actually

java.com (sneaky)

16

17

18

19

After install completes, user is routed back to

pogo.com

20

21

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

23

PIE Example – Default User Experience

24

PIE Example – media room (default)

Big White Box

25

PIE Example – click to install Java

JavaFX DT JavaScript

introduces this message

26

PIE Example – Java install sequence java.com is

loaded

27

PIE Example – Java install sequence ActiveX warning (replaced with

download dialog in 6u14)

28

PIE Example – Java install sequenceIE Security

Warning Dialog

29

PIE Example – Java install

Installer starts

30

PIE Example – Java install complete When install is complete, DT

takes you back to the original

page

31

PIE Example – loading media room

Default animated GIF on Big White

Box

32

PIE Example – media room applet starts

Applet begins (and loads more

data)

33

PIE Example – media room applet running

JavaFX PIE Example - Smoother User Experience

Remove some of the steps

Add custom touches to keep the user involved in the web experience

34

35

PIE Example – home page

36

PIE Example – No Java Customized

message inserted (no

more big white box!)

37

PIE Example – Install complete

Your website maintains it’s design during Java install

38

PIE Example – media room applet starts

Custom loading GIF means no Big White Box!

39

PIE Example – media room applet running

40

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)

41

Application Deployment Flow

DetermineSystem

RequiredJava?

InstallJava

IFTW or Kernel

Applet

Web Start

App Web Page

Loading

Help Page

Splash

RunningDrag to Desktop

Error Page

Loading

42

Application Deployment Flow

DetermineSystem

RequiredJava?

InstallJava

IFTW or Kernel

Applet

Web Start

App Web Page

Loading

Help Page

Splash

RunningDrag to Desktop

Error Page

Loading

Can Customize the

UE based on OS or Browser

43

Application Deployment Flow

DetermineSystem

RequiredJava?

InstallJava

IFTW or Kernel

Applet

Web Start

App Web Page

Loading

Help Page

Splash

RunningDrag to Desktop

Error Page

Loading

Route the user as necessary. Consider using another page

44

Application Deployment Flow

DetermineSystem

RequiredJava?

InstallJava

IFTW or Kernel

Applet

Web Start

App Web Page

Loading

Help Page

Splash

RunningDrag to Desktop

Error Page

Loading

Applet or Web Start? Both now

use JNLP!

45

Application Deployment Flow

DetermineSystem

RequiredJava?

InstallJava

IFTW or Kernel

Applet

Web Start

App Web Page

Loading

Help Page

Splash

RunningDrag to Desktop

Error Page

Loading

Make your applet behave like a

Web Start app

46

Application Deployment Flow

DetermineSystem

RequiredJava?

InstallJava

IFTW or Kernel

Applet

Web Start

App Web Page

Loading

Help Page

Splash

RunningDrag to Desktop

Error Page

Loading

Point to java.com help or

roll your own

47

Customizing the ExperienceMake 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...

48

Java Branded Graphics

Applet Loading Web StartSplash Screen

49

Visual DesignMake 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.

Linksys EasyLink Advisor

50

Linksys EasyLink Advisor

51

HP Total Care Advisor

52

HP Total Care Advisor

53

Nice icons, but function can be overshadowed

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

58

More Info on the Deployment ToolkitCheck out these sessionsName (Session ID) When?When?

Upcoming SessionUpcoming SessionUpcoming Session

Distributing JavaFX™ Applications with Java™ Web Start Software/Maven Repository Manager (TS-4388)

Friday June 05 4:10PM

Previous SessionsPrevious SessionsPrevious Sessions

Deploying Java™ Technology to The Masses: How Sun Deploys The JavaFX™ Runtime (TS-4381)

Tuesday June 02 10:50 AM

Meet the Java™ Deployment Team (BOF-4383) Tuesday June 02 7:30PM

59

More Info on JavaFX Production SuiteA really great link between design and development

Previous SessionsPrevious SessionsPrevious Sessions

Getting the Most from the Designers with the JavaFX™ Production Suite (TS-5494)

Tuesday June 02 4:40 PM

Quo Vadis JavaFX™ Production Suite (BOF-5493)

Tuesday June 02 7:30 PM

JavaFX™ Technology in Action: From Design Tool to Desktop to Mobile Device (TS-4069)

Wednesday June 03 11:05 AM

60

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

www.timeanddate.com - IE

61

62

63

64

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

www.timeanddate.com - FF

65

66

67

68

69

70

71

72

73

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

www.cruisecheap.com - IE&FF

74

75

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/

BMTtron game - FF

76

77

78

79

80

81

82

83

Detects that Java is not installed

Takes the user to a custom page with

instructions

Applet Deployment – Chemwriter

84

Applet Deployment – Chemwriter (2)

LaunchesJava

Installer

85

Applet Deployment – Chemwriter (3)

Applet Running

86

Applet Deployment – Chemwriter (4)

Page describes install process in

current site context

87

Chemwriter Example

Home Page

Help Page

Installer PanelApplet Running

88

Customizing the ExperienceUseful Links

Pointers on how to update

Applet loading graphic & loading strategies

For example, see this jGuru articleGetting 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

Visual Design Useful Links

JavaFX.com

Finding Great Artwork for Your App

Create Visual Appeal in Your UI

More coming soon...

89

90

The End User's SystemWhat 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

91

Determining the End User's NeedsUse 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

92

When Java Needs to be InstalledVarious 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

93

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

94

java.com Manual Download

Online/IFTW installer for Windows

Offline installer for Windows

95

Get the User StartedHow 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

96

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

if (result == "") { document.writeln("<p>You no Java installed."); deployJava.installLatestJRE(); } else { document.writeln("<p>You have Java installed."); }</script>

97

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="my_applet.jar" code="MyApplet" width="300" height="300">

<PARAM name="draggable" value="true">

</APPLET>

98

Menus, Shortcuts, Help

<shortcut online="true"> <desktop /> <menu submenu="Corp Apps"/></shortcut>

<information> <title> MyApp </title> <homepage href="myapp.html"></information>

99

Security DialogsWhen 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 SessionUpcoming SessionUpcoming SessionNew Security Features in JDK™ Releases 6 and 7 (BOF-5102) Wednesday June 03 7:45PM

100

Dealing with the UnexpectedHelp 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)

Jeff Hoffmanjeff.hoffman@sun.comJindrich Dingajindrich.dinga@sun.comKaren Stanleykaren.stanley@sun.com

Java User Experience Design