Designing a cross-platform look and feel with Java

Learn how to fulfill the promise of "Write Once, Run Anywhere" with one-time GUI design methods

March 31, 1998 -- When designing interfaces for users with all kinds of computers and access, Web developers are actually ahead of Java developers. Web designers are used to testing their sites and pages on multiple platforms, screen resolutions, color ranges, and browsers. Good Web designers know they can't just create Web sites on and for their own high-powered, million-color development machines equipped with atypically large monitors and browsers-of-choice -- they must test their sites for look-and-feel aesthetics and efficiency on as many types of computers, color ranges, screen sizes, and browsers as they intend to support. If they failed to do this -- and, admittedly, some still do -- they would turn away a large segment of users due to technical inaccessibility.

When Java first arrived, most Java developers concentrated on just getting an applet or application to work; designing multiviewer support was an afterthought. But if developers want their apps to be taken seriously by a variety of users, they must put some thought and effort into designing multi-platform GUIs. In fact, such consideration is crucial to fulfilling JavaSoft's "Write Once, Run Anywhere" promise: If you have to redesign your app to work on each new platform you support, you might as well return to traditional programming methods.

In the "Designing a Cross-Platform Look and Feel" session at JavaOne, three Java design experts -- Harry Vertelney, manager of the JavaSoft Human Interface Group at Sun Microsystems; Chris Ryan, senior interface engineer at Sun Microsystems; and Steve Wilson, software engineer at K&A Software -- suggested exploiting the Java Foundation Classes (JFC) technology as a GUI design toolkit to implement a standard interface for Java apps.

Vertelney, Ryan, and Wilson discussed the historical problems surrounding Java GUI design: While it's easy enough to build a useful Java app, most developers continue to design their apps with one platform in mind, then redesign their original effort for other platforms. This method is time-consuming, Java-philosophy-defeating, and theoretically unnecessary.

To address this issue, begin by exploring the design problems that arise from platform to platform. First, look down at your right (or left) hand. How many buttons does your mouse have? Macintoshes have one button, while Windows, Unix-based GUIs, and other operating systems generally have two or three. Another consideration is that widgets -- such as windows, panels, text fields, buttons, radio buttons, check boxes, and menus -- that fulfill a standard look and behavior on Windows don't completely mesh with standard widgets on the Macintosh and on other platforms. Simple mouse-clicks represent another problem: Windows relies on the mouse's right-most button for alternative commands, whereas the Mac requires holding the mouse button down for a delayed period of time, or executing a combination of mouse and keyboard keys; in addition, the results of single- and double-clicking vary on each platform. Conflicting color palettes on each platform can also cause problems; for instance, the standard 256-color palette on Windows comprises different colors than the standard 256-color palette on the Mac. After looking at just a few examples, it's easy to understand the general problem facing Java GUI designers. Cross-platform Java developers need reliable solutions, and luckily, the GUI design experts posed some eloquent ones.

The first step is to become aware of the differences between the GUIs on each platform on which you intend to run your app. The next step is to shift your focus from designing a GUI for a proprietary platform to creating a generalized, Java-centric look and feel.

In an attempt to discover what this really means, Vertelney, Ryan, Wilson, and their associates held a design competition. They composed a design brief outlining the goals and invited a number of excellent Java developers and design experts to participate.

Screenshots of Java app design competition: http://java.sun.com/javaone/javaone98/sessions/T312/hv15_comp1.htm http://java.sun.com/javaone/javaone98/sessions/T312/hv15_1cm.htm http://java.sun.com/javaone/javaone98/sessions/T312/hv15_2cm.htm http://java.sun.com/javaone/javaone98/sessions/T312/hv16_comp2.htm http://java.sun.com/javaone/javaone98/sessions/T312/hv17_comp3.htm

They learned some interesting lessons from this exercise. One surprisingly non-trivial matter is that the color scheme used has an immediate affect on the way a user responds to an applet. Most GUI designers understand that it's best to use neutral colors in order to focus the user's attention on the purpose of the applet. If gray is the first color that comes to your mind, think again. These designers discovered that neutral colors comprise a bevy of interesting choices, from periwinkle to sage to goldenrod. For examples, check out the JFC's Organic (Santa Fe) and Organic (Vancouver) pluggable look and feel styles (see Resources, below). Another lesson learned was that it's best to stick with behaviors that have traditionally worked well on proprietary platforms. You can take examples of how menus, buttons, textareas, etc. work on Windows, the Macintosh, or various Unix GUIs, and follow their examples of logical and spatial organization when designing Java-centric interfaces -- just don't get caught in a single-platform-emulation mentality.

You're not finished developing your applet once you've designed the interface. The experts recommend testing, testing, and more testing. Run your applet on all the platforms you intend to support. (If you don't have a testing area with a machine representing each platform, set one up.) Check its appearance on monitors with different screen resolutions and with different display adapters that represent different color ranges. If you're designing apps to be used on NCs and Java-enabled gadgets, test them thoroughly on each non-desktop platform. After some experimentation, you may come up with a general design specification, which would make design decisions easier and testing time much shorter. For an excellent example of what a standard Java-centric interface design looks like, including a number of standard widgets, check out the Java Look and Feel screenshot (see Resources).

If you think you have your work cut out for you, you're not alone. JavaSoft engineers carefully consider feedback on Java GUI design from developers, and they have made some things easier in the later releases of the JFC, such as improving the usable ranges of colors and implementation of tabbed panes and scrollbars. In the future, they promise to conduct more usability testing, integrate more choices of color themes, incorporate a recognizable and consistent a system font, and even design an accessibility theme for the visually impaired.

A 10-year veteran of the Internet, Mariva H. Aviram is an Internet consultant and writer covering the computer industry. Mariva's published works include articles in c|net, NetscapeWorld, and InfoWorld. Recently, Mariva wrote the XML For Dummies Quick Reference, which is pending publication by IDG Books Worldwide. For more information, visit http://www.mariva.com/.

Learn more about this topic

  • JavaSoft Senior Interface Engineer Chris Ryan's "Designing the Java Look and Feel" JavaOne Session Slides http://java.sun.com/javaone/javaone98/sessions/T312/cr_index.htm
  • JavaSoft's Java Foundation Classes page http://java.sun.com/products/jfc/
  • PersonalJava targets non-desktop computers http://www.javaworld.com/jw-04-1998/jw-04-pjava.html
  • Organic Santa Fe look and feel http://java.sun.com/javaone/javaone98/sessions/T312/hv19_organicsf.htm
  • Organic Vancouver look and feel http://java.sun.com/javaone/javaone98/sessions/T312/hv20_organicva.htm
  • Java look and feel screenshot http://java.sun.com/javaone/javaone98/sessions/T312/hv22_jlf.htm
Join the discussion
Be the first to comment on this article. Our Commenting Policies