Java Look-and-Feel Design Guidelines – Part II

Eileen KraemerUniversity of GeorgiaCSCI 4800/600

Applet versus Application

Application:Stand-alone

AppletRuns in browser

Issues:Distribution, maintenanceSecurity

Distribution

Applet Click on link (easy) Access is to central web

server; easy maintenance Need to be online to use HTML should be

configured to handle Java plug-in where needed

Application Cd, floppy, download Multiple copies on

computers in enterprise, may complicate maintenance

Security Issues

Applet Usually can’t access

user’s hard drive; no file i/o

Ok as DB front-end

Application Can read and write

files on user’s hard disk

Placement of Applets

Current browser window

Ok if user performs single task; then resumes browsing

should NOT include a menu bar; multiple menu bars confuse users

Hard to predict which mnemonics in use (or not) in browser itself

Need to figure out expected browser mnemonics and try not to conflict

Separate browser windows If applet involves more than one

task or if users might want to visit other web pages before completing

users can interact with applet and maintain the original browser window for other

To simplify design, remove browser's normal menu and navigation controls;

avoids confusion between the browser's menu and controls and the applet's menus and controls

also avoids l conflicts between mnemonics.

Designing for Accessibility

Accessibility the removal of barriers that prevent people with

disabilities from participating in social, professional, and practical life activities

“curb cuts” In software design

requires taking into account the needs of people with functional differences

users who can’t use “regular” mouse or keyboard users who can’t see display at “usual” resolution or color

choices or at all

Benefits of Accessibility

increased sales of product opportunities for employment, independence, and productivity for

the approximately 750 million people worldwide with disabilities. Also:

Mnemonics and keyboard shortcuts make all users more productive. Keyboard navigation is preferred by many users; good for RSI

(repetitive stress injury) issues. Customizable fonts enable users to pick fonts that reduce eye strain and

display well on many monitors Customizable colors let apps fit into desktop well; work on systems ithe

limited colors Satisfies requirements of ADA and Section 508 of the Federal

Rehabilitation Act

To achieve accessible design:

1. Follow the standards in Java L&F design guidelines

2. Provide accessible names and descriptions for components

3. Employ mnemonics and keyboard shortcuts throughout your application

4. Provide proper keyboard navigation and activation

5. Perform usability studies with disabled users

Accessible Names and Descriptions provide for each component in your application. Usually picked up automatically from component's label or tool tip. If you set accessibility properties directly and add unique strings to your

application, store the new information in your appl's resource bundle. When the bundle is localized, the accessibility values are included.

accessibleName provides name for component; distinguishes it from other components of same

type assistive technologies use this to tell users the name of the component that has

input focus For labels, buttons, and menu items w/non-editable text, the accessibleName

property is set automatically to the text. For components with JLabels, use JLabel.setLabelFor method

accessibleDescription provides information about component works. Automatically set from “tool tips”, which should be set for all components

Mnemonics and Keyboard Shortcuts Should be provided Example at right:

if keyboard focus is within the dialog box, pressing Alt-W moves keyboard focus to the Whole Word checkbox and selects it.

Text field label contains mnemonic ; use labelFor property to associate label with other component -- component becomes active when the label's mnemonic is activated..

Sample code

Keyboard Focus and Tab Traversal

assign initial keyboard focus (where the next keystrokes will take effect) See keyboard focus for details

specify tab traversal order (the sequence in which components receive keyboard focus on successive presses of the Tab key) typically, traversal order follows the reading order of the users' locale See Tab traversal order for details

test your application; see if users can access all functions and interactive components from keyboard Unplug the mouse and use only the keyboard when testing

Usability Studies

Try out the application with a variety of users to see how well it provides for accessibility.

Low-vision users, for example, are sensitive to font sizes and color, as well as layout and context problems.

Blind users are affected by interface flow, tab order, layout, and terminology.

Users with mobility impairments can be sensitive to tasks that require an excessive number of steps or a wide range of movement.

Planning for Internationalization and Localization Internationalization

the process of writing an application that takes into account variations in regions, languages, and cultures.

localization, the process of customizing an application for a particular

language or region.

The language, meaning, or format of the following types of data can vary with locale: Colors , Currency formats, Date and time formats, Graphics,

Icons, Labels, Messages, Number formats, Online help, Page layouts, Personal titles, Phone numbers, Postal addresses, Reading order, Sounds, Units of measurement

Benefits of Global Planning

more customers; also, some countries require that companies purchase applications that support their language and culture.

ensures that application is easier to translate and maintain

Global Design

Use JFC-supplied layout managers and resource bundles.

take into account differences around the world in reading order, word order, mnemonics, graphics, formats, sorting orders, and fonts.

Layout Managers

use a layout manager to control the size and location of the components in your app

In this example, the Sound File label becomes longer when it is translated from English to Japanese. The spacing between the Sound File label and its text field, however, is the same in both dialog boxes.

Resource Bundles

use these to store locale-specific data, such as text, colors, graphics, fonts, and mnemonics.

make your application easier to localize by isolating locale-specific data so that it can be translated without changing the application source code.

Internationalization tutorial

Reading Order

When you lay out your app, place components according to users' reading order.

helps users understand the components quickly as they read through them.

Reading order varies among locales English: left to right and top to bottom. Middle Eastern languages: right to left and top to bottom.

In design guidelines, might read: "put labels before the component they describe." The term "before" is determined by the reading order of the user's language.

In the JFC, component orientation features can be used to adapt your appl to different reading orders.

In the Java 2 SDK, the layout managers FlowLayout and BorderLayout are sensitive to the reading order of the locale.

Word Order

varies among languages English: adjective noun French: noun adjective

Mnemonics

must be careful when choosing mnemonics, might change in different languages.

Store mnemonics in resource bundles with the rest of your application's text.

Be sure that the characters you choose for your mnemonics are available on keyboards in the target countries for your application.

Graphics

can make localization easier by using globally understood graphics whenever possible.

Many graphics that are easily understood in one locale are puzzling in another locale. For example, using a mailbox to represent an email

application is problematic because the shape and size of mailboxes vary by locale.

Graphics that represent everyday objects, holidays, and seasons are difficult to localize, as are graphics that include text.

Avoid graphics that might be offensive in some locales: Images that contain text. For example, if an image

contains English text, the text (and graphic) must be localized for each locale.

Images that contain numbers. Numbers have different connotations in different locales. For example, just as the number 13 has an unlucky connotation in the United States, the number 4 connotes death in both Japan and Hong Kong.

Images containing hand gestures. A gesture that is appropriate or meaningful in one locale can be offensive or meaningless in another locale.

Avoid graphics that might be offensive in some locales Images that represent a play on words. For

instance, puns don't translate well. Images of animals. Just as the image of a dog to

represent food would be unsettling to most people in the United States, the image of a cow in the same context can offend people in India.

Images of people or faces. Depictions of certain facial expressions, nontraditional gender dynamics, and uncovered skin can be offensive to users in some locales.

Graphics, continued

Like text, you can place graphics in resource bundles so that translators can change them without changing the application source code.

Test your graphics by showing them to users in the target locales. A low-cost way to test graphics is to solicit feedback on the proposed icons from salespeople in different locales.

Formats

J2SDK provides formatting classes for numbers, currencies, dates, and times automatically formats for a specific locale. English: July 26, 1987 , 3:17 p.m. German: 26. Juli 1987, 15:17 Uhr.

NumberFormat For numbers and currencies see java.text.NumberFormat

DateFormat for dates and times see java.text.DateFormat

MessageFormat. for strings that contain variable data see java.text.MessageFormat

Sort Order

J2SDK provides collator classes enables the sorting of strings by locale. For example, in Roman languages, sorting is

commonly based on alphabetical order (which might vary from one language to another).

In other languages, sorting might be based on phonetics, character radicals, the number of character strokes, and so on.

see java.text.Collator for locale-sensitive string sorting.

Fonts

can place fonts in resource bundles so that they can be changed by the localizers.

With the Java 2 SDK, the Lucida font (a cross-platform font) is available for use in your applications.

size of fonts is also an important consideration for users with visual limitations provide user control over font size in your application.

Usability Studies

Two kinds of studies done early in the design process can show you how well your application works in the global marketplace. First, you can send draft designs of your application to your

translators. Second, you can try out your application with users from the

locales you are targeting (for example, test a Japanese version of the application with Japanese users).

will help you to determine whether users understand how to use the product, if they perceive the graphics and colors as you intended them, and if there is anything offensive in the product.

Visual Design