IBM intranet design standards

w3v8 design tutorial

What’s new and improved

WelcomeWelcome to the w3v8 design standards. The new w3v8 design reflects the vision of one user experience across the domain. The goal is to assist the user in completing tasks quickly through an easy-to-use, intuitive design.

The purpose of this tutorial is two-fold:

• Introduce the major changes and improvements made in the w3v8 design

• Introduce the organization of the updated w3v8 design standards

The topics in this tutorial are presented in the same order as the w3 design standards on the IBM Intranet Standards site.

After completing the tutorial, explore the standards site to learn the details of implementing the w3v8 design.

Using the standardsWhen designing your site or page, start with the Requirements checklist. The standards listed in the checklist cover the w3v8 requirements for all w3 sites. The requirements checklist provides descriptions of each standard and links to more detailed information to help guide site developers in the creation of standards-compliant sites.

The requirements are categorized into the following tables:

Required elements: A list of w3 standards that must be met for all w3v8 sites.

Other elements: A list of w3 standards for optional site elements (such as tables, forms …).

Code and HTML: A list of w3 standards for code and html.

Accessibility: A list of IBM Web Accessibility standards that must be met for all w3 sites.

Although an element might be considered “optional,” you must follow the standards for that element if you choose to use it on your w3v8 site or page.

Standards topicsEach design requirement in the w3v8 Requirements checklist points to a topic in the w3v8 design standards that provides detailed information on that requirement.

Also each requirement has a unique codification number. The codification provides a systematic approach for identifying and resolving compliance issues, so developers can create compliant sites more easily.

Standards topicsEach standards topic includes a requirements checklist specific to that topic. The topic-level requirements checklist briefly describes the requirements for that particular page element.

The detailed requirements, accessible from the topic-specific requirements checklist, provides specific details of how to meet that requirement.

Topics pagesEach topic in the w3v8 design standards includes a base set of sections:

• Introduction• Requirements checklist• Usage• Detailed requirements• Dates for compliance

Other sections areincluded when additionalinformation is needed, such as descriptions of specific types of an element, additionalrecommendations forease of use, and specialaccessibility requirements.

Anchor links at the top ofthe topic page make thesections easily accessible.

Dates for complianceAll IBM intranet sites must adhere to a set of design standards.

The w3v8 standards become effective in 2004 according to the following schedule:

• If you exit Plan after 15 Feb 2004, compliance is required at deployment. • If you exit Plan before 15 Feb 2004, compliance is required before 31 Dec

2004.

If your development project did not exit Plan Phase by 15 February 2004, then you must comply with the “Browser support” requirements for v8 prior to deploying your Web site. All other intranet Web sites and Web applications must comply with the “Browser support” topic by 31 December 2004.

Dates for compliance

Progress checkNow, let’s look at the new design and the standards. We will start with the page styles and templates available for w3v8 pages.

► Page styles and templates

► Navigation

► Content area elements

► Graphics and images

► Interactive content

► Secondary windows

► Local search

► Portal design

► Portlet design

Page styles and templatesAll w3 pages share common page elements that promote ease of use and a corporate look and feel. Consistency among pages provides a common user experience for IBM employees no matter where they travel on the intranet.

The new w3v8 site has been designed to make it very easy to implement. It is flexible and can adapt to your specific content.

The page templates provide the common elements that will aid in providing a consistent look to each w3v8 page. This section describes the common elements across all pages and provides sample pages so you can choose the template that will best suit your development needs.

Page stylesTo support the many uses of the w3 intranet, the new w3v8 design allows for a variety of page styles. You can choose the one that best fits your site’s needs.

Single portal page

Two-column page with left navigation menu

MastheadThe masthead is a required element that appears at the top of every w3 page.

The masthead will vary slightly depending on the type of page and the personalization functions available for the site.

w3 site markSite title

w3 searchPersonalization

IBM logoPersistent links

Terms of useNew to w3v8 is the mandatory Terms of use link at the bottom of every page. This link is a legal requirement and displays standard legal text disclosing the use of the content of w3 intranet pages and applications.

There are two Terms of use pages. The one you link depends on the content of your page. Information based pages link to a simplified version of the legal statement. Application pages require additional text on the Terms of use page.

Cascading style sheets (CSS)The w3v8 templates link to a collection of cascading style sheets that define the presentation characteristics of many page elements. By defining the presentation of content elements, using cascading style sheets allows developers to focus on the content itself.

The w3v8 template includes the following CSS files:• screen.css • interior.css • interior-1-col.css • interior-no-nav.css • portal.css • icons.css • tables.css • popup-window.css • popup-help.css • print.css • v4-screen.css

For more information on using the w3v8 templates and cascading style sheets, refer to the Technical standards section of the IBM Intranet Standards site.

What else does the template do?In addition to providing the required elements on a page (masthead, Terms of use, and the look and feel), the w3v8 templates provides this functionality:

Accessibility prologThe accessibility prolog provides quick navigation for the page. It details the access keys that have been implemented to allow the user to skip navigation elements quickly.

Browser notificationThe browser notification includes detection code to determine the browser level being used. If an unsupported browser is detected, only a simplified masthead and a notification appear. The notification explains that the page is best viewed in a modern browser and provides a link to ISSI so the user can download a newer version of the browser.

Template generatorUse of the w3v8 templates is now required. The w3v8 templates make extended use of cascading style sheets to ensure a consistent user experience across the w3 domain.

To get started with interior pages, visit the Template generator within the w3 design standards. The generator offers templates for the following page styles:

Two-column with left navigation menuSingle-column with left navigation menuSingle-column page with no left navigation menuPop-up window and custom dialog box

For portal pages, see the “Portal themes” topic in the design standards to download the w3v8 themes and skins the template.

For a Notes template, visit the developer’s depot.

Progress checkThe next section describes the navigation schemes available for w3v8 sites. Standards have been defined for the left navigation menu, a tabbed interface, lower-level navigation, page-level navigation and supplemental navigation pages.


► Navigation





► Local search

► Portal design

► Portlet design

Navigationw3v8 provides more flexible navigation options to meet the needs of the most demanding information architecture.

The w3 design allows for a variety of navigational systems to support different information architectures for sites.

Some important notes about your site’s information architecture:

• Create a robust information architecture.

• Reflect the information architecture in the site’s navigation scheme.

The w3 design standards include a topic on information architecture to aide you in designing the navigation and structure of your site.

Left navigation menu

The left navigation menu is the primary navigation device on w3 Web sites. With some exceptions, all pages that occur in the first, second, and third levels of a site's information hierarchy are represented within the left navigation menu.

Also, the left navigation menu is no longer a required element on the page. There are certain instances where a page without left navigation is most appropriate.

What’s most important when designing a site’s navigation is that the user can easily navigate between the site’s pages and quickly find the information they need.

Lower-level navigation optionsNew lower-level navigation devices may be used in conjunction with the left navigation menu to expose 4th and lower-level pages within a site. You now have the following options for lower-level navigation:

Tabs

Graphic tabs are another new navigation device available for w3v8 design. Tabs can be used at three different levels of the information architecture:

• Site-level tabs• Page-level tabs• Section tabs

Page-level navigationProviding a consistent and predictable set of navigation links on a page gives the user a sense of the page and its place within the site's organization. Page-level links also make the logic and order of the page visually explicit.

Page-level navigation options include:

• Anchor links• Embedded links• Link lists• Paging links• Icon links

Supplemental navigationNew standards have also been defined for supplemental navigation elements, including directory lists, site maps, and site indexes.

Progress checkThe next section describes the content area elements that typically appear within a w3v8 page. Content area elements include page titles, headings, body text, tables and discussion areas.


► Navigation





► Local search

► Portal design

► Portlet design

Content area elementsThe content area is flexible to accommodate a variety of presentation needs. The w3v8 templates define the proper placement and visual treatment of most elements on a page to ensure a consistent user experience across the intranet.

The design of the content area elements is based on user-centered design principles and studies on how people most efficiently use Web pages.

Content area layoutThe content area is the space not required for the masthead or left navigation. The size of the content area will vary depending on the overall style of your page.

The areas outlined in red indicate the primary content area available on the page designs. The layout within the content area is flexible to accommodate many page types. Sample layouts are shown below.

Content headerThe area at the top of an interior page, directly below the masthead, is reserved for several content header elements, including a page date and breadcrumbs. Content within these elements is optional; however, they must follow the standards when used on a page.

Page elementsDesign standards have been defined for most common elements on a Web page, including the following:

• Page title• Headings• Text treatments• Primary content• Sidebar content• Tables

Table design

There is now a common style sheet for tables used on w3. The tables.css provides many of the basic elements of a table to make coding easier. For example, the common style sheet sets attributes, including font and font size, table borders, alignment of table headers and alternating row colors.

The tables.css includes classes for the different colors available for table headers. These colors comply with the w3v8 color palette.

For more information on the tables.css and how to implement it, refer to the Technical standards section of the IBM Intranet Standards site.

Progress check

The next section describes the use of graphics and images on w3v8 pages. The Graphics and images section of the standards cover requirements for color palette, icons and buttons, charts and graphs, and placement of images on a page.

►Page styles and templates

► Navigation





► Local search

► Portal design

► Portlet design

Graphics and imagesUsing graphics and images on your Web pages can enhance the user experience and the information provided by the page. Graphics include original illustrations, photographs, and charts.

Color paletteThe w3v8 style provides four distinct color palettes. The cascading style sheets define class names for each color to make them easier to incorporate on your pages.

Primary color palette

Secondary color palette

Supporting color palette

Alert color palette

Icons and buttonsThe w3v8 template includes a new set of stylized icons that complement the color palette. W3 intranet sites should use only the approved icons. Here is a sampling of the common icons available.

Buttons

Document icons

Security icons

Status icons

Sort icons

Link icons

Charts and graphsIn addition to the new icons and color palettes, new templates are available for creating charts in Adobe PhotoShop, Lotus Freelance Graphics, and Microsoft Excel. The basic design of charts has remained the same. The templates have been updated to use the colors from the secondary and supporting color palettes to coordinate with

the primary colors in the design.

Progress checkThe next section describes the use of interactive content on a w3v8 site. Interactive content elements include forms, messages, page tools and multimedia presentations.


► Navigation





► Local search

► Portal design

► Portlet design

Interactive contentInteractive content engages the user and can be an effective means of sharing information. Interactive content means that the user interacts with the site. Interactive content gives the user something more to do than read.

The interactive content supported on w3v8 sites include:

• Multimedia• Forms• Message design• Page tools• Country and language selection

Many of these elements are new to w3 and have new requirements for including on w3 pages.

Multimedia

Multimedia elements incorporated in w3 pages can give your users an interactive and engaging experience. Multimedia elements can enhance the delivery of information and training and draw the user's attention to important points on a page.

Macromedia® Flash can provide a rich, interactive, engaging experience to site visitors and can enhance the delivery of information.

Use animated GIFs if they accomplish specific communication goals more effectively than a static image.

Video is also an appropriate method for sharing information. For example, video is a great way to show how to repair a system.

Audio provides another way of delivering information to IBM employees. Although you could just provide a script, hearing the inflections in someone's voice can add meaning to the message.

Each type of multimedia element has certain requirements and considerations when used on a w3 page.

Form design

Forms provide a way for users to enter information to complete specific tasks, such as indicating medical and dental plan choices, providing feedback, or filling out an order to purchase products. Electronic forms may have paper equivalents in the real world.

The form design standards have not changed much since the previous version of w3. The main enhancement is the new stylized action buttons that complete the other page design elements.

Message designMessage design is a new topic within the design standards. With consistent messages across applications on the w3 domain, the users will quickly learn to recognize and correct errors when they occur.

The w3v8 design allows both message dialogs and in-context messages. How you display your messages should depend on the application and how the

messages would best serve the user.

Page toolsNew option for extending the user experience include these page tools:

• • •

These page tools are typically grouped together on the page. If used, they must be placed at the bottom of the main content area. They can also be placed in a section

within the sidebar.

Country and language selectionIBM web sites should function as a global resource, with links, where appropriate, to country-specific information and news presented in the appropriate national language. A given web site is usable only if all individuals that access it can effectively understand the content and navigate the site's pages. The standards provide information on means of providing users access

to content in multiple languages.

Progress checkThe next section describes the use of secondary pop-up windows and custom dialog boxes.


► Navigation





► Local search

► Portal design

► Portlet design

Secondary windowsA pop-up window is a smaller, secondary browser window that appears on top of the primary browser window. Pop-up windows have unique design elements to distinguish them from primary browser windows. Pop-up windows are best used to display supplemental information pertinent to the task at hand, such as online help.

A pop-up window displays a simplified masthead to maintain the connection with w3.

Custom dialog boxesCustom dialog boxes are used to collect input from users. They can contain a variety of interface objects, such as text fields, radio buttons, check boxes, list boxes, and so on. These interface objects should be well grouped and sized to fit within the dialog boundaries.

In the w3v8 design, custom dialog boxes can be expanded to show additional information. For example, if a custom dialog box is used to collect data, the expanded section of the dialog box could display online help for completing the fields in the dialog.

Progress checkThe local search section describes the implementation of a site-level search function for a w3v8 site. There are three options for providing a search dialog. There are also requirements for displaying the search results.


► Navigation





► Local search

► Portal design

► Portlet design

Local search

The w3 search dialog appears in the masthead throughout the intranet. Local search can also be included in the masthead, using the local search option.

Providing a local search function allows users to search part, or all, of your Web site for content matching a specific search string. The results are restricted to your particular site or a subsection of it, as opposed to searches across the w3 intranet. Through a local search users can find information relevant to their particular interest.

The Local search standards provides extensive coverage of custom simple search and custom complex search dialogs.

Search dialogs

There are three types of search dialogs. The requirements differ for each type.

• Basic local search• Custom simple search• Custom complex search

Search resultsSearch results pages summarize the content that has been retrieved. The information displayed on the search results pages of your site should depend on the content that is being searched and the information needs of the site's users.

Site owners must provide a search results page if the site provides a local search facility. Also provide a Empty results page for cases when no matches are found for the search criteria.

A w3v8 template of a well-designed search results page is available from the design standards.

Table of contentsThe next section describes the requirements for deploying portal pages on the w3 domain. These requirements are grounded in research performed by a Portal Workgroup across many organizations within IBM.


► Navigation





► Local search

► Portal design

► Portlet design

Portal designA portal provides a single point of access to multiple information sources, tools, and applications. Each information source can be accessed through a "portlet." Portlets provide access to applications, web-based content, and other resources (for example, Web pages, Web services, applications, and content feeds from information sources, like a news feed).

w3v8 provides new standards on portal design, defining portal functionality and look and feel, as well as tools and methods for ensuring consistent design across w3.

The portal and portlet standards are grounded in research performed by the Portal Workgroup and special interest groups. The workgroup was a collaborative effort involving designers, human factors professionals, information designers and others from organizations across IBM. The special interest groups investigated various design elements of portals and portlets that make them easier to use. The standards provide a roadmap to follow in designing and deploying portals on w3.

• All portals designed for the w3 intranet must use the WebSphere Portal Server (WPS) technology.

• Portals must follow the defined portal deployment process.

w3v8 portal theme

There are two main user interface enablers on WPS, the theme and the skin. The theme establishes the design framework, the "look and feel" for the masthead, the portal page navigation device, if applicable, and columns within the content space.

• w3v8 has implemented a new w3v8 theme that must be used by all portals to control the look and feel of the portal. The theme is available for download.

• w3v8 provides a portal page template to be used for all portal pages.

• Portal pages may contain onlyportlets and not HTML content.

• Through the portal templates, w3v8 provides both portal tabs and left navigation menu to

navigate between portal pages.

Portal personalization

Common profile data is available through several sources within IBM, including w3 profile cookie, w3 profile API and BluePages.

You must use the data from these sources if it contains the data values you need. First check the data values in the w3 profile cookie, then the w3 profile API, and, finally, the BluePages record.

Portal customizationWebSphere Portal Server (WPS) supports user-driven customized portals. w3v8 provides a “Page layout” application to be used by portals to provide the functions of customizing portal pages.

Progress checkThe next section describes the requirements for designing and implementing portlets on portal pages.


► Navigation





► Local search

► Portal design

► Portlet design

Portlet design

w3v8 provides thoroughly revised standards on portlet design, defining portlet functionality and look and feel, as well as tools and methods for ensuring consistent design across w3. The standards provide a roadmap to follow in designing and deploying portlets on w3 and for the On Demand Workplace.

All portlets designed for the w3 intranet must use the WebSphere Portal Server technology.

Portlets must follow the applicable portal deployment process

Portlet skins

Portlets deployed on the IBM intranet must use the w3v8 skins to conform to the w3 common look and feel. The skins are comprised of the following elements: • Title bar • Portlet title • Color • Borders • Icons

The skins are available for download within the ‘Portlet skins” topic in the w3 design standards.

Portlet icons

Portlet icons help users navigate through the portlet. They provide different views of the portlet's content. These icons are a part of the portlet skin.

Portlet icons are placed on the right side of the portlet title bar. Although there are a fixed set of portlet icons, the ones displayed in a portlet will vary according to the functions associated with that portlet.

Portlet viewsThe standards define the portlet views, when to use those views, how to design navigation to and from those views, and how to design content for those views. This includes the following views:

• Default• Minimize• Maximize• Edit portlet settings • Help• Configure

Dependent portlets

Portlets, which provide access to various sources of information, can be independent of all other portlets or they can depend on content or functionality from other portlets.

Portlets are able to drive content in other portlets in peer-to-peer or parent-to-child relationships. With some restrictions, w3v8 allows interdependent portlets to be deployed on portals other than the On Demand Workplace.

Designing portlets for theOn Demand Workplace

On Demand Workplace (ODW) portlets must meet specific design and deployment criteria, in addition to the standards for portlet design.

Keeping up with changes

As the standards are revised, the What’s new page will list changes and their effective dates. Visit this page often to ensure you are familiar with the latest set of standards.

Thank you

We hope you have found this tutorial helpful and informative. Please see the w3 design standards for complete details on the requirements for designing and developing Web sites, pages and applications for the w3 intranet.

To exit the tutorial, simply close the window.

IBM intranet design standards

Documents

Transcript of IBM intranet design standards