Sun Web Application Guidelines - Version 4.0

Developers.sun.com

A note from the authors

This document was created by a set of user interface designers, usability specialists, and visual designers, to outline a usable web application look and feel that can be followed consistently throughout a product line. We created it originally for use within Sun Microsystems, to be used for the web applications built here. However, we would like to share these guidelines with anyone else who may benefit from them for creating their own web applications. While some of the guidelines refer to Sun-specific elements and contexts, we are confident that you, the reader, will be able to interpret how they can be reapplied to your applications. We hope you find these guidelines valuable, and wish you success in creating your own powerful and highly usable web applications, building on these usability-tested and carefully designed guidelines.

For a list of authors and contributors to the Web Application Guidelines, past and present, see this list of contributors.

1 Introduction

1.1 Icons Used in These Guidelines

1.2 Application Structure

1.3 Resources for Application Developers

1.4 Resources for Application Designers

1.4.5 Content Page Titles and Other UI Text

1.4.6 Visual Elements and Line Graphs

1.4.7 Accessibility

1.4.8 Globalization

1.5 To Give Feedback

1 Introduction

The purpose of this style guide is to facilitate consistency in the user interface (UI) design of browser-based applications. These guidelines and components offer visual designers, usability engineers, and software developers the necessary tools for delivering usable browser-based applications.

If a company will be putting its own logo on their product, the user interface should be adjusted to reflect that company's brand.

By following the guidelines outlined here, you can obtain a significant level of consistency both within and among applications built using the Project Woodstock components.

This style guide is intended to be a concise and inclusive set of guidelines for designing browser-based applications.

This style guide cannot:

Answer or solve all your application design questions and problems
Substitute for the involvement of Human Computer Interaction (HCI) and visual design specialists in your application design and development efforts
Substitute for conducting usability tests and reviews by HCI specialists.

For editorial style guidance, Sun recommends referring to Read Me First! A Style Guide for the Computer Industry, Sun Technical Publications (ISBN: 0-13-142899-3).

These guidelines have been defined with the following goals in mind:

Aesthetic visual design
Ease of learning and use
Following the Sun look and feel
A fluid design that scales gracefully to user preferences and varying browser window sizes
Support for several browsers and platforms
Accessibility for users with disabilities

Note that the designs specified in this style guide target screen resolutions of 1024 x 768 or greater and the web browsers listed here: https://woodstock.dev.java.net/docs/SupportedBrowers.htm.

Although these guidelines work at screen resolutions under 1024 x 768, and might display reasonably when using non-targeted web browsers, the designs are not optimal when used under these conditions.

Multiple usability evaluations done from March 2001 to the present have informed the designs for navigation, wizards, properties, table manipulation and other user interface elements discussed in these guidelines. Usability testing on the designs to be included in future guidelines will continue, as needed.

Implementing web applications using these guidelines

To produce guidelines-compliant web applications, see Appendix A, Component Library Information.

Because the images in the guidelines are for illustration purposes only, do not use them to obtain color values and font specifications.

The correct colors, font sizes, and styles are provided by the Sun Common UI Component Library (in open source, the Project Woodstock components) and are specified by cascading style sheets appropriate for each browser.

For HTML examples and specifications, see Appendix B, Examples and Specifications. However, Sun recommends building web applications using the Sun Common UI Component Library. (see Appendix A, Component Library Information).

Also, note that product names used in the images in these guidelines do not necessarily reflect actual products and should not be interpreted as such.

Themes and Images

The components in the Sun Common UI Component Library (in open source, the Project Woodstock components) have been architected such that they can reference style information from an entity called a theme. A theme can be designed to specify such information as colors, text attributes, and component layout information. This information can be used to reflect a company's brand. The Sun Common UI Component Library uses the Sun Theme to convey the Sun brand.

The images in these guidelines reflect the Sun Theme.

1.1 Icons Used in These Guidelines

Throughout this style guide, icons call your attention to the look-and-feel design guidelines and to tips for implementing them.

Indicates required guidelines. These guidelines must be followed if the components are to be used as intended.

Indicates advised guidelines. These guidelines should be followed, if possible, in your application. Sometimes, these guidelines explain when following them is most appropriate or what usability trade-offs exist.

Indicates implementation tips for the guidelines. These tips are used by application developers.

1.2 Application Structure

No single application structure is clearly superior to the others. Each style has advantages and disadvantages which make it suitable for particular situations. The trade-offs are numerous and complex. Due to this, and the need to support a wide variety of project needs, the guidelines strive to be flexible enough to support a variety of application structures.

1.3 Resources for Application Developers

If you are developing an application, Sun recommends using the Sun Common UI Component Library (in open source, the Project Woodstock components). These components can be used to build web-based applications that are in accordance with these guidelines. Components have been implemented for most of the elements covered in these guidelines. See Appendix A, Component Library Information.

These guidelines specify the interface design and behavior for these components and describe how the elements should be used together to ensure a consistent and cohesive end product. The appearance of these designs is controlled through cascading style sheets. These style sheets are, in turn, used by the components.

If your application cannot be built using the component library, see Appendix E, Pixel Specifications for information about the layout of many of the elements in these guidelines.

1.4 Resources for Application Designers

This section includes information and pointers to web sites and documents that can provide useful details that extend beyond the scope of these guidelines.

In addition, for designs that may need to be extended beyond the basic usage of these guidelines, reviews and approvals may be recommended. This section identifies these situations and directs the reader to the types of individuals or groups best suited to provide the reviews and approvals.

1.4.1 Approvals

Refer to your internal development process to determine required approvals. It is generally recommended that all designs be reviewed and approved in accordance with standard development procedures. Reviews are especially important when designs extend these guidelines in any way.

For example, in the Product Name section of the main window masthead, if your product name does not fit onto one line, as expected in these guidelines, you might contact the appropriate design and approval bodies at your company for review.

1.4.2 Legal

Follow all legal requirements for trademark and copyright designation for your web-based applications.

1.4.3 Branding

Corporate branding can be represented through the design and presentation of your web-based applications. Consider brand in the design of your application's user interface.

1.4.4 Mastheads

There are a number of ways in which the application masthead may be extended. For example, the following customizations may be made:

providing your own custom buttons in the utility bar (see 4.1.1 Utility Bar)

making the user information a link (see 4.1.2 User Name, Current Role, and Management Server)

using the status are for application-specific purposes (see 4.1.4 Status Area)

Also, in rare situations, the product name displayed in the masthead may need to be longer than the one line that the masthead was designed for.

In any of these situations, designs should be reviewed by the appropriate individuals or groups since they extend these guidelines.

1.4.5 Content Page Titles and Other UI Text

For writing style for content page titles and other UI Text consult writing guides and standards or reference ReadMe First! A Style Guide for the Computer Industry/ (ISBN: 0-13-142899-3) by Sun Technical Publications.

1.4.6 Visual Elements and Line Graphs

Visual elements (icons, color palette, line graphs, etc.) used within web applications should be reviewed by visual designers and/or those individuals responsible for company brand.

1.4.7 Accessibility

Besides enabling users with disabilities to use your product, section 508 of the Federal Rehabilitation Act mandates that all products used by U.S. government agencies must provide "comparable access" for people with disabilities.

The types of disabilities that should be considered include visual, hearing, physical, and cognitive.

The primary resource for information on making web-based applications accessible is the World Wide Web Consortium (W3C). As part of its Web Accessibility Initiative, this organization has devised a set of web content accessibility guidelines (WCAG), available at http://www.w3.org/TR/WCAG10/full-checklist.html.

Also see the Electronic and Information Technology Accessibility Standards (Section 508), especially Subpart B -- Technical Standards, at http://www.access-board.gov/sec508/standards.htm.

For more information see Appendix D, Accessibility Requirements.

1.4.8 Globalization

Globalization refers to the combined tasks of making an application internationalized (suitable for the global marketplace) and localized (customized for a particular language or region).

The goal of globalizing software is to make it so that code changes are not needed in order to localize it. This reduces development costs when creating software for a global market.

For more information see Appendix H, Globalization.

1.5 To Give Feedback

If you would like to give feedback on these guidelines, click the 'Send Feedback' link in the masthead of any page in these guidelines.