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 ...
Pogo.com #1 - Best User Experience
 User has the required version of Java already
   installed




                       ...
5
6
Pogo.com #2 - Clunky User Experience
 The user has an old Java or Java is not installed
 No detection on web site
 User is...
8
9
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 ...
13
Customized
dialog box




       14
This is
 actually
java.com
(sneaky)




      15
16
17
18
After install
 completes, user
is routed back to
    pogo.com
             19
20
21
JavaFX PIE Example
 The following is an example of a JavaFX applet that
   has been deployed on the JavaFX.com website
 Ma...
PIE Example – Default User Experience




                                        23
PIE Example – media room (default)

                                     Big White
                                       ...
PIE Example – click to install Java

                                        JavaFX DT
                                   ...
PIE Example – Java install sequence
                                      java.com is
                                    ...
PIE Example – Java install sequence
                                      ActiveX warning
                                ...
PIE Example – Java install sequence
                                       IE Security
                                   ...
PIE Example – Java install
                             Installer starts




                                            29
PIE Example – Java install complete   When install is
                                       complete, DT
                ...
PIE Example – loading media room

                                   Default animated
                                   G...
PIE Example – media room applet starts
                                    Applet begins
                                 ...
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
 ...
PIE Example – home page




                          35
PIE Example – No Java
                         Customized
                           message
                         inse...
PIE Example – Install complete




                                 Your website
                                 maintain...
PIE Example – media room applet starts
                                   Custom loading
                                 ...
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:...
Application Deployment Flow
                       Applet      Loading


App Web   Determine          Drag to
 Page      S...
Application Deployment Flow
                        Applet        Loading
                           Can
                 ...
Application Deployment Flow
                        Applet       Loading


App Web   Determine           Drag to
 Page    ...
Application Deployment Flow
                       Applet       Loading
                                     Applet or Web...
Application Deployment Flow
                                                            Make your
                        ...
Application Deployment Flow
                       Applet      Loading


App Web   Determine          Drag to
 Page      S...
Customizing the Experience
Make it your own...
  What do you get by default?
    Java branded loading graphics
    Java br...
Java Branded Graphics
   Applet Loading         Web Start
                        Splash Screen




                      ...
Visual Design
Make a positive impression on the user
  Consumer user experiences are becoming more
    engaging...you need...
Linksys EasyLink Advisor




                           50
Linksys EasyLink Advisor




                           51
HP Total Care Advisor




                        52
HP Total Care Advisor   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 expe...
Resources
 Related Sessions
 Useful Links
 The End User's System
 Sample Deployment Toolkit (DT) Code
 Security Dialogs
 D...
More Info on the Deployment Toolkit
Check out these sessions
Name (Session ID)                 When?
                     ...
More Info on JavaFX Production Suite
A really great link between design and development
                       Previous Se...
www.timeanddate.com - IE
 Default detection & default message
 User is directed to another web site to get Java
 The only ...
61
62
63
www.timeanddate.com - FF
 Default detection & default message
 User is told that Java is missing
 After Java installation ...
65
66
67
68
69
70
71
72
www.cruisecheap.com - IE&FF
 No detection at all
 360° Viewer does not work and user does not know
   why because there is...
74
BMTtron game - FF
 User is told that Java is missing and is directed to
   another web site to get Java
 The only way how ...
76
77
78
79
80
81
82
Applet Deployment – Chemwriter


                                  Detects that
                                  Java is ...
Applet Deployment – Chemwriter (2)


                                     Launches
                                       ...
Applet Deployment – Chemwriter (3)


                                     Applet Running




                             ...
Applet Deployment – Chemwriter (4)


                                       Page describes
                               ...
Chemwriter Example
   Home Page                          Applet Running
                    Installer Panel




          ...
Customizing the Experience
Useful Links
 Pointers on how to update
   Applet loading graphic & loading strategies
      Fo...
Visual Design Useful Links
 JavaFX.com
   Finding Great Artwork for Your App
   Create Visual Appeal in Your UI
   More co...
The End User's System
What does the user need to run your app?
  Consider what's out there...
    Minimum: Java 5+
    Bes...
Determining the End User's Needs
Use the Deployment Toolkit (DT)
  If the users don't have what they need, the DT
      he...
When Java Needs to be Installed
Various installers are available...
  IFTW (Install from the Web) or Online Installer
    ...
Installer Details
  IFTW (JavaSetup6u14.exe)
    java.com (and DT) invokes this one by default
    setInstallerType: funct...
java.com Manual Download


                           Online/IFTW
                           installer for
               ...
Get the User Started
How does the user launch the app?
  Applet placed directly on a web page
  Application starts when th...
Simple DT Example
<script src=quot;http://java.com/js/deployJava.jsquot;></script>
<script>
    var list = deployJava.getJ...
Drag to Desktop
 Supported Browsers
   Internet Explorer 6+ on Windows XP and Vista
   Firefox 3 on Windows XP & Vista, So...
Menus, Shortcuts, Help
 <shortcut online=quot;truequot;>
     <desktop />
     <menu submenu=quot;Corp Appsquot;/>
 </shor...
Security Dialogs
When are they necessary?
 Users perceive these dialogs as a “speed bump” on
   the way to their goal (run...
Dealing with the Unexpected
Help the user get back on track...
  Integrated error handling will help get the user back
   ...
Jeff Hoffman
jeff.hoffman@sun.com
Jindrich Dinga
jindrich.dinga@sun.com
Karen Stanley
karen.stanley@sun.com

Java User Exp...
Upcoming SlideShare
Loading in...5
×

JavaOne 2009 Deploying Apps for Consumers Bof5150

2,661

Published on

Discussion at JavaOne 2009 about deploying Java and JavaFX applications for consumers.

Published in: Technology, News & Politics
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,661
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
119
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

JavaOne 2009 Deploying Apps for Consumers Bof5150

  1. 1. Creating JavaFX™ User Experiences That Work Jeff Hoffman Jindrich Dinga Karen Stanley Sun Microsystems, Inc. BOF-5150
  2. 2. Goals Provide some tips on how we would do things Share ideas 2
  3. 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 3
  4. 4. Pogo.com #1 - Best User Experience User has the required version of Java already installed 4
  5. 5. 5
  6. 6. 6
  7. 7. 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
  8. 8. 8
  9. 9. 9
  10. 10. Microsoft IE Dialog 10
  11. 11. Doesn’t really guide you through the process 11
  12. 12. 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
  13. 13. 13
  14. 14. Customized dialog box 14
  15. 15. This is actually java.com (sneaky) 15
  16. 16. 16
  17. 17. 17
  18. 18. 18
  19. 19. After install completes, user is routed back to pogo.com 19
  20. 20. 20
  21. 21. 21
  22. 22. 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. 23. PIE Example – Default User Experience 23
  24. 24. PIE Example – media room (default) Big White Box 24
  25. 25. PIE Example – click to install Java JavaFX DT JavaScript introduces this message 25
  26. 26. PIE Example – Java install sequence java.com is loaded 26
  27. 27. PIE Example – Java install sequence ActiveX warning (replaced with download dialog in 6u14) 27
  28. 28. PIE Example – Java install sequence IE Security Warning Dialog 28
  29. 29. PIE Example – Java install Installer starts 29
  30. 30. PIE Example – Java install complete When install is complete, DT takes you back to the original page 30
  31. 31. PIE Example – loading media room Default animated GIF on Big White Box 31
  32. 32. PIE Example – media room applet starts Applet begins (and loads more data) 32
  33. 33. PIE Example – media room applet running 33
  34. 34. 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. 35. PIE Example – home page 35
  36. 36. PIE Example – No Java Customized message inserted (no more big white box!) 36
  37. 37. PIE Example – Install complete Your website maintains it’s design during Java install 37
  38. 38. PIE Example – media room applet starts Custom loading GIF means no Big White Box! 38
  39. 39. PIE Example – media room applet running 39
  40. 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) 40
  41. 41. 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
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. 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
  48. 48. Java Branded Graphics Applet Loading Web Start Splash Screen 48
  49. 49. 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
  50. 50. Linksys EasyLink Advisor 50
  51. 51. Linksys EasyLink Advisor 51
  52. 52. HP Total Care Advisor 52
  53. 53. HP Total Care Advisor Nice icons, but function can be overshadowed 53
  54. 54. HP Machine Setup 54
  55. 55. Tech Test Train Application 55
  56. 56. 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
  57. 57. Resources Related Sessions Useful Links The End User's System Sample Deployment Toolkit (DT) Code Security Dialogs Dealing with Unexpected Events 57
  58. 58. 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
  59. 59. 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
  60. 60. 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
  61. 61. 61
  62. 62. 62
  63. 63. 63
  64. 64. 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
  65. 65. 65
  66. 66. 66
  67. 67. 67
  68. 68. 68
  69. 69. 69
  70. 70. 70
  71. 71. 71
  72. 72. 72
  73. 73. 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
  74. 74. 74
  75. 75. 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
  76. 76. 76
  77. 77. 77
  78. 78. 78
  79. 79. 79
  80. 80. 80
  81. 81. 81
  82. 82. 82
  83. 83. Applet Deployment – Chemwriter Detects that Java is not installed Takes the user to a custom page with instructions 83
  84. 84. Applet Deployment – Chemwriter (2) Launches Java Installer 84
  85. 85. Applet Deployment – Chemwriter (3) Applet Running 85
  86. 86. Applet Deployment – Chemwriter (4) Page describes install process in current site context 86
  87. 87. Chemwriter Example Home Page Applet Running Installer Panel Help Page 87
  88. 88. 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
  89. 89. Visual Design Useful Links JavaFX.com Finding Great Artwork for Your App Create Visual Appeal in Your UI More coming soon... 89
  90. 90. 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
  91. 91. 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
  92. 92. 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
  93. 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 93
  94. 94. java.com Manual Download Online/IFTW installer for Windows Offline installer for Windows 94
  95. 95. 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
  96. 96. 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
  97. 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=quot;my_applet.jarquot; code=quot;MyAppletquot; width=quot;300quot; height=quot;300quot;> <PARAM name=quot;draggablequot; value=quot;truequot;> </APPLET> 97
  98. 98. 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
  99. 99. 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
  100. 100. 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
  101. 101. Jeff Hoffman jeff.hoffman@sun.com Jindrich Dinga jindrich.dinga@sun.com Karen Stanley karen.stanley@sun.com Java User Experience Design
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×