User experience guidelines for IBM® Lotus® rich client applications and plug-ins (for IBM Lotus Notes®, IBM Lotus Sametime®, IBM Lotus Symphony™, IBM Lotus Expeditor, and composite applications) Mary Beth Raven Lead User Experience Designer for IBM Lotus Notes 8 and IBM Lotus Expeditor Westford, Massachusetts January, 2008 © Copyright International Business Machines Corporation 2008. All rights reserved. This white paper describes user-interface design and interaction guidelines for designers and developers who are building IBM® Lotus® Notes® applications (formerly called databases), Lotus Sametime® version 7.5 or later plug-ins, Lotus Symphony™, Lotus Expeditor plug-ins (Lotus Expeditor is a rich client based on Eclipse), or Composite applications (assembling any mixture of plug-ins, Lotus Notes applications, and components built with Lotus Component designer). To get the most out of this article, you should be familiar with Lotus Notes 8 and Lotus Sametime 8. It also helps to have familiarity with either IBM Lotus Domino® Designer or the Eclipse integrated development environment.

1

Table of Contents 1 Introduction ...................................................................................................................... 4

1.1. Elements of the Lotus Notes 8 Client ................................................................................ 4 1.2. Elements of the Sametime 7.5.x client .............................................................................. 5 1.3. Elements of Lotus Symphony........................................................................................... 8 1.4. Elements of the Lotus Expeditor client .............................................................................. 9 1.5. Planning your application ............................................................................................. 10 1.6. Visual style............................................................................................................... 12

1.6.1. The visual system.................................................................................................. 12 1.6.2. Making your Lotus Notes application conform to the Notes 8 visual style................................ 13 1.6.3. Icon style............................................................................................................ 15 1.6.4. Visual style considerations for composite applications...................................................... 16

2 Title bars .........................................................................................................................16 2.1 Title bars of dialog boxes ............................................................................................. 17 2.2 Composite application component title bars....................................................................... 17

3 Menu bar and menus........................................................................................................18 3.1 Menus for Lotus Notes applications built with Domino Designer ............................................... 18 3.2 Menus for main window plug-ins ..................................................................................... 18

3.2.1 File menu ........................................................................................................... 19 3.2.2 Edit menu ........................................................................................................... 21 3.2.3 View menu.......................................................................................................... 21 3.2.4 Create menu........................................................................................................ 21 3.2.5 Actions menu....................................................................................................... 21 3.2.6 Tools menu ......................................................................................................... 21 3.2.7 Window menu ...................................................................................................... 22 3.2.8 Help menu .......................................................................................................... 22 3.2.9 Icons in the menus................................................................................................. 22 3.2.10 Part-associated action set menu contributions ............................................................ 22

3.3 Menus for sidebar or Sametime plug-ins............................................................................ 22 3.4 Menus for composite applications ................................................................................... 24

4 Context menus ...............................................................................................................25 4.1 Context menu details for Lotus Notes 8 ............................................................................ 25

5 Open button and tab labels................................................................................................25 5.1 Open button (launcher) ................................................................................................ 25 5.2 Tabs and tab labeling in the various window management models ............................................ 25

6 Toolbar ........................................................................................................................26 6.1 Toolbar for Lotus Notes applications ................................................................................ 26 6.2 Toolbar for main window plug-ins and composite applications................................................. 27 6.3 Toolbar for sidebar or Sametime plug-ins .......................................................................... 28

7 Action bar .....................................................................................................................28 7.1 Action bar as part of a Lotus Notes application ................................................................... 28 7.2 Action bar in a component in a composite application........................................................... 29

8 Views and folders............................................................................................................29 8.1 Views and folders for Lotus Notes applications.................................................................... 29 8.2 Views and folders for main window plug-ins and composite applications .................................... 30

9 The sidebar ...................................................................................................................30 9.1 Guidelines for each panel ............................................................................................. 30 9.2 Offline experience for the sidebar .................................................................................. 31

10 Chat window extensions.................................................................................................31 10.1 Extension tabs ........................................................................................................ 31 10.2 Pop-up extensions.................................................................................................... 31 10.3 Contact list icons..................................................................................................... 32

11 Preferences ................................................................................................................32 11.1 Preferences for Lotus Notes applications ........................................................................ 32

2

11.2 Preferences for plug-ins ............................................................................................ 32 12 Dialog boxes................................................................................................................33

12.1 Dialog boxes built with Domino Designer ........................................................................ 34 12.2 Dialog boxes in plug-ins ............................................................................................. 35

13 Properties ..................................................................................................................37 14 Status bar...................................................................................................................38 15 Messages – Info, Warning, Error........................................................................................38

15.1 General guidelines for error messages ........................................................................... 38 15.2 Specific message types .............................................................................................. 39 15.3 Confirmation of deletions .......................................................................................... 40

16 Capitalization and punctuation ........................................................................................40 16.1 Headline-style capitalization ...................................................................................... 40 16.2 Sentence-style capitalization ...................................................................................... 41 16.3 Punctuation ........................................................................................................... 41 16.4 Tooltips ................................................................................................................ 41 16.5 Ellipses ................................................................................................................. 41

17 Offline experience........................................................................................................41 18 Search .......................................................................................................................42

18.1 Search in plug-ins with Lotus Expeditor and Lotus Sametime ................................................ 42 18.2 Search in composite applications.................................................................................. 42

19 Log-in window .............................................................................................................43 20 Conclusion..................................................................................................................43 21 Resources...................................................................................................................44 22 About the author..........................................................................................................44 23 Acknowledgements .......................................................................................................44

3

1 Introduction This document provides user-interface design and interaction guidelines for designers and developers who are building any of the following types of applications using the following tools:

• Lotus Notes applications (formerly called databases) • Lotus Sametime version 7.5 or later plug-ins • Lotus Symphony • Lotus Expeditor plug-ins (Lotus Expeditor a rich client based on Eclipse) • Composite applications (assembling any mixture of plug-ins, Lotus Notes applications, and components

built with Lotus Component designer) This guide is intended to help ensure consistency but is not intended to be a lesson in user-interface theory or design best practices. Following the recommendations in this guide will ensure that designs are implemented in a consistent manner with an existing Lotus Notes, Sametime Connect, Lotus Symphony, or Lotus Expeditor interface, as well as plug-ins built by other developers following these guidelines. Lotus Expeditor is based on Eclipse, which has interface guidelines of its own, to which this guide occasionally refers. The guidelines for clients built with Lotus Expeditor are specific for business applications for end-user clients (as opposed to Integrated Development Environments, or IDEs). If you cannot find a guideline in this document, refer to the Eclipse guidelines. Whenever possible, we strived to make these guidelines all agree; any deviations are due to the nature of the client (that is, rich or Web) or the end user (developer, administrator, or end user). You can find the topic Developing applications with Lotus Expeditor 6.1.1 in the IBM Lotus Expeditor 6.1.1 information center.

1.1. Elements of the Lotus Notes 8 Client The Notes 8 client is a rich client with all the elements you’d expect of a rich client, such as a menu bar and status bar (see figure 1).

4

Figure 1. Elements of the Notes 8 Client

1.2. Elements of the Sametime 7.5.x client The default size, shape, and location of the Sametime shell indicate that it is intended to be in the user’s peripheral vision and not the center of attention. By creating plug-ins (called “features” in Eclipse), developers can extend the Sametime Connect client to provide additional applications, features, and actions, as shown in figures 2, 3, and 4. These additional capabilities can appear in the following places in the Sametime user interface:

• as Panels in the Contact List window • menus or menu items in the menu bar • additional icon columns in the Contact List • name/group context menu • system tray icon menu • chat window • chat transcript extensions • branding areas

5

Figure 2. Contact List window

Key: 1. Extensible menu bar 2. Contact names and status icons 3. Plug-in application panels (“mini-apps”) 4. Branding area 5. Action bar 6. Telephony controls 7. Video controls 8. Context menu 9. Status bar

6

Figure 3. Chat window

Key: 1. Extensible menu bar 2. Telephony control 3. Video control 4. Action bar 5. Branding area 6. Message toolbar (an action bar) 7. Status bar

7

Figure 4. Extensible areas of the Chat window

Key: 1. Application panel 2. Extension tab 3. Popupextension

1.3. Elements of Lotus Symphony Lotus Symphony is a large plug-in to Lotus Expeditor, just as Lotus Notes and Sametime Connect are. It includes a title bar; a menu bar with tabs for Document, Spreadsheet, and Presentation; a main data area, and properties sidebar (see figure 5).

8

Figure 5. Lotus Symphony layout

1.4. Elements of the Lotus Expeditor client Lotus Expeditor is intended to be an all-purpose shell. The default size and shape assume that Lotus Expeditor will take up most of the screen and be the center of the user’s attention when open. It includes a title bar, menu bar, main data area and sidebar.

9

Figure 6. Expeditor Client layout

1.5. Planning your application Choose the technology you’ll use based on the needs of the users and on your skill set. Table 1 is a brief comparison of the various tools and technologies you can use to build rich client applications. Table 1. Comparison of rich client tools Technology Build using Server Comments Lotus Notes applications (databases)

• IBM Lotus Domino® Designer

• Lotus Domino Create database applications that can be served to the Web or to the Notes client

Expeditor plug-ins Sametime plug-ins Notes plug-ins Symphony plug-ins

• Eclipse IDE • Rational® Application

Developer (RAD) • Expeditor toolkit

• Lotus Domino • Lotus Sametime • WebSphere®

Application Server • WebSphere Portal

Building plug-ins for any of these is technologically similar because Expeditor provides the framework for Sametime, Notes, and Symphony

Composite applications • Composite Application Editor (to assemble components you’ve already created from a variety of sources)

• Lotus Domino • WebSphere

Application Server • WebSphere Portal

Assemble composite applications from: • Notes databases • Expeditor-based plug-

ins

10

• Portal components • Eclipse components

When planning your composite application, ensure that all components provide value at the default size in the composite application. Also make sure the visible data is clear and of value, without resizing. When building a composite application, you might consider using one of these interaction styles: • A “Web-like” (also called “one tab”) interaction model whereby only one tab is ever opened, and the contents of

the tab always “overwrites" what was in the tab (see figure 7). This model does not have much of a rich client feel, so use it only if you feel strongly that the nature of the application requires it or that you need to have interaction similarity between the same application on the Web and in a rich client.

• A “separate tab” approach in which each document gets its own tab. • A “hybrid” in which some composite application pages open in a new tab or window, in addition to documents

(see figure 8). There is no one layout style that is better than another; it all depends on the components you are putting into your composite application and on the other applications that people are using. If it makes sense, use a consistent layout style for all your composite applications. Also, do not confuse these interaction styles with the different window management styles for which users can set a preference (see section 5.2 for more information on the different window management styles).

Figure 7. Composite application interaction style – one tab

11

Figure 8. Composite application interaction style – hybrid

1.6. Visual style The visual style is a combination of the visual system (which is mainly defined in .css files) and the icon style. 1.6.1. The visual system The visual system for Lotus Expeditor is provided through a .css file. For example, the color of the tabs and the color of the tabs on hover is set in the .css file. The application you build may or may not simply pick up the visual attributes from the .css file, depending on the technology you use to build them. The visual style for Lotus Notes 8 is defined in several different .css files (one of which is packaged in a .jar file). The two most important are Global.css and Notes.css. There is also an Activites.css for the Activities sidebar plug-in. Global.css defines the following, as illustrated in figure 9:

• the Open button -- shape, gradient, icon, label, hover state • the Open “menu” (also called the Open list) -- rounded edges, background, gradient or not. (You can only

do top-to-bottom gradients in this release.) • tab row – color and shape of tab, the “Close” icon, hover, background • interior tabs of a composite application and the title bar of components • toolbar – the grabber, background, hover background, but not the disabled state (the icons provided by

Expeditor are customizable) • Status bar (some elements use the toolbar style)

12

Figure 9. Elements of the client affected by Global.CSS

Notes.css defines the look of views written in Java™, specifically:

• Left-hand navigator (background color, selection color, and secondary selection color) • Action bar and its hover (technically, the Java view action bar is the same type of control as the toolbar) • Selection in the list view, column headers, separators between the elements (or whether you have vertical

separators) • Text style, color, size • Padding, margin • Background image

Nothing in the Notes forms are defined by the .css files, and none of the Notes icons in the views is defined by the .css files. 1.6.2. Making your Lotus Notes application conform to the Notes 8 visual style You can give existing (or new) Lotus Notes applications (databases) a Notes 8 look by customizing the action bar, Outline view, and column headers, as shown in figures 10 through 13. Figure 10. Ideal action bar visual style

13

If you are using Domino Designer to create your action bar, you won’t be able to make it look exactly like figure 10. Instead, conform to the action bar style for the Mail forms; specifically, set these properties (see figure 11):

• Bar height: 10.4 Exs • Color: 239,239,239 • Border style: solid color 177, 177, 210 • Border effects: drop shadow, width 2, thickness 1 • Button size: default • Display border on mouseover

Figure 11. Action bar properties to set in Domino Designer

Figure 11. Outline view visual style

14

Figure 12. Column header visual style

1.6.3. Icon style If you are creating new icons for the toolbar, action bar, stationery, letterhead, or any other part of the client, you must adhere to the following Icon style guidelines (see figure 14): NOTE: These are general guidelines for a 16 x16 pixel icon; larger icons may require larger shadows, inner glow, and edge. Lighting: • Light Source: 120 degrees • Shadow: 120 degrees -- Black 20% black opacity, 0% size, 0 pixel spread • Inner Glow: 1 pixel • Edge: Gradient from top left to bottom right Size requirements: • Toolbar: 16x16 png • Action bar: 18x18 gif • Tabs: 16x16 png • View Type: 12x10 gif • Status Bar: 12x10 gif • Letterhead: 65x65 gif States: • Hover: The hover effect is done programmatically on the background. • Disabled: You must provide a disabled effect. If you have Adobe Photoshop, then you can run an action. To do

this, put the “create disabled.png_18x18.atn” file (see “Downloads”) in your Adobe/Photoshop/Presets/Photoshop Actions folder and select this action when you run a batch on the files that you want to make disabled. It will overwrite the file, so ensure that you save the icons in a separate disabled folder before running the batch.

15

Figure 13. Summary of Icon style

1.6.4. Visual style considerations for composite applications For composite applications in the Notes client, new component panels should mimic the Lotus Notes look and feel. When panels are created from pre-existing applications, this may be more difficult to achieve. Where possible, modify the application colors to coordinate with the Notes palette. Interaction patterns should follow the Notes style as closely as possible. Also, ensure that the component panels have sashes between them to allow users to resize the component panels.

2 Title bars This guideline applies only if you are building a main window application (that is, not just a Lotus Notes database application). The title bar differs slightly depending on the nature of the rich client being built. In general, order the information in the title bar from most specific to least specific, ending with the name of the product. For most applications, add additional information in the title bar according to the following guidelines:

[application icon] <name of the active view or document. - <name of application/database> - <product name> Examples:

• UI Specs – Design and User Experience – IBM Lotus Notes • The user Daryn Inbox – Mail – IBM Lotus Notes • Betty Zechman One Week – Calendar – IBM Lotus Notes • New Calendar Entry for Betty Zechman - Calendar – IBM Lotus Notes • New Message – Mail – IBM Lotus Notes • Sales Plan.ods – Spreadsheet – IBM Lotus Symphony • SalesTraining.ods – Spreadsheet – IBM Lotus Symphony

NOTE: Instant Messaging windows do not have to comply to these rules because they are smaller and are used differently.

16

2.1 Title bars of dialog boxes In general, the title bar of a dialog box should contain the name of the menu item or command button that launches it.

2.2 Composite application component title bars Components in a composite application should adhere to the following guidelines:

• Title bar panels (no tabs). Should be used when labeling the panel; helps users to understand its purpose within the composite application.

• No title bar panel. Should be used when it is more important to emphasize that contiguous panels are

related (part of the "same application") than it is to directly state the individual panel's function in a title bar.

• Maximize and Minimize. Include this functionality for your panel when the user is likely to benefit from having the option of using a panel at full-screen size but whose default size is less than full screen within the composite application.

This is particularly useful when you are reusing an application that was originally designed for full-screen use as one of many smaller panels (or functional component tabs) within a composite application. Providing a Maximize/Minimize option allows you to assign less screen real estate to the component in the default view but maintains the option for the user to work at full screen if desired.

o In Lotus Notes 8.0, you cannot use a title bar panel while also displaying Minimize and Maximize buttons. (Though it is planned that, in Lotus Expeditor 6.1.2 and Lotus Notes 8.0.1, you’ll no longer have this limitation.)

o Since the Maximize/Minimize functions are accessed via the title bar / tabs area, you cannot use Maximize and Minimize buttons with "No title bar" panels.

• Hide Panel option. It is generally not advisable to allow users to hide panels within a composite

application because it makes the application structure more difficult to support and is a potential source of user error/confusion. It is particularly important not to allow users to hide panels that are critical to the function of the application. For example, avoid allowing users to hide navigation panels. However, if an application would benefit from giving users the ability to select the visible panels (or functional components shown in a tabbed panel), it can be a useful design option. This option should be used with caution because when panels are reopened, they will not always appear in the same position they occupied when closed (this is most problematic when users can both move and hide panels, so it is not advisable to allow both). It is most appropriate for advanced user audiences.

o In Notes 8.0, the Hide Panel option can be used only for functional components in tabbed panels (that is, for tabs).

o It is planned that, in Notes 8.0.1, the Hide Panel option can be used for title bar panels and tabbed panels.

Hiding panels:

When a tab can be hidden, an "X” appears on that tab, which the user can click to hide the tab. When a title bar panel can be hidden, an "X" appears, which the user can click to hide the tab.

Reopening hidden panels:

In Notes 8.0, if the Hide Panel option is enabled, the application should include a panel providing the option to reopen the panel.

17

It is planned that, in Notes 8.0.1, Notes will provide commands under the "View" menu on the Notes toolbar to reopen (and hide) composite application panels.

Reopening hidden panels dialog:

This dialog explains how to reopen a panel when the user takes an action to hide a panel. It is strongly recommended to keep this dialog, unless you have created an alternative method of reopening hidden panels as part of a panel in your application.

Move Panel option. IBM does not recommend allowing users to move panels because it makes the

application structure more difficult to support, relationships between panels may become unclear, and it is a potential source of user confusion. Allowing users to move panels might be useful in some applications where user control of application layout is very important item and relationships between panels are not important, however it should be used with caution.

o In Notes 8.0, the Move Panel option can be used only for functional components in tabbed panels

(that is, for tabs). o It is planned that, in Notes 8.0.1, the Move Panel option can be used for title bar panels and tabbed

panels.

3 Menu bar and menus The guidelines for menus differ depending on whether you are building the following:

• Lotus Notes applications (databases) built with Domino Designer • Main window plug-ins (called “features” in Eclipse) • Sidebar or Sametime plug-ins

3.1 Menus for Lotus Notes applications built with Domino Designer Domino Designer lets developers add menu items to the Create and Actions menus. Here are some guidelines to follow:

• Any item (command) in the action bar should also be in the Actions menu, preferably in the same order. The Actions menu can be a superset of the items on the action bar (that is, the Actions menu can contain more commands, particularly if those commands are not used very often).

• Provide mnemonics (underlined letters on the menu items) for each menu item. This is required so as to

comply with keyboard-accessibility legislation in various countries.

• Provide help for your application by using the following Profile documents: o About this Application o Using this Application

3.2 Menus for main window plug-ins Lotus Notes and all three Lotus Symphony editors are examples of main window plug-ins. A main window plug-in is a full-featured application, as opposed to less fully featured plug-ins that might appear in the sidebar, or added functionality that might be plugged into one of the main window applications. All features of a rich client application must be available from the menu items on the menu bar so that users can find them and so that they are accessible (per various disability legislations). They can be available in other places as well, such as toolbar buttons or context menus. Making a feature “available from the menu items” includes when a menu item launches a dialog box in which that feature has properties or preferences. If you are creating a main window plug-in or a composite application, you should contribute menu items to the menu bar.

18

Make the features available by using both Global Menu contributions and Local Menu contributions (part-associated action sets), per the following grid: Global Menu contributions (specific to each personality)

Global menu contributions are persisted across every view of a specific personality in the Expeditor-based client. These menus should be thought of as "context free"; that is, they can be used from any context. Also, they are “retargetable” so that your product (for example, calendar) retargets menu items such as Cut, Copy, and Paste for product-specific purposes. (Retargetable means that a programmer should use the menu ID’s listed in table 2.)

Part-associated action set Add your specific menus by specifying a path and global menu IDs. Most menus will be part-associated action sets, meaning that if the view associated with those menus is not in a page, those menu items should not be displayed. This means that the Mail page can have discrete menu items compared with the Documents page.

Any menu bar should contain the following standard menus (use the Eclipse menu ID for them): File Edit View <other menus> Actions Tools <other menus> Window Help In some cases, the application might not require these menus, but if you do have them, put them in the order shown in table 2 with the associated mnemonic. Table 2. Details of menu bar items

Menu item Mnemonic Details Eclipse menu ID Retargetable File F file (Eclipse) yes Edit E Hidden in XPD edit (Eclipse) yes View v com.ibm.rcp.ui.viewmenu yes

group marker create_additions Actions A Hidden in base XPD com.ibm.rcp.ui.actionsmenu yes Tools o Hidden in base XPD com.ibm.rcp.ui.toolsmenu tools_additions: group

marker (This is where applications can add other menus; the term "tools_additions" does not show to any user)

IWorkbenchActionConstants.MB_ADDITIONS

Window W Hidden in base XPD window (Eclipse) yes Help H help (Eclipse) yes 3.2.1 File menu

The File menu has a mnemonic of “F”. If your application uses any of the menu items listed in table 3, use the appropriate menu ID specified; for example, do not use a menu item called “Create” if “New” will suffice. Also, note that you can add completely new menu items to an appropriate place in the File menu.

19

Table 3. File menu items Menu item Pull-right Mnem

onic Shortcut (if any)

Details Menu ID Retargetable

New > N Hidden in base Expeditor This is a pull-right

new (Eclipse)

Open O This can be a pull-right

com.ibm.rcp.ui.openmenu

yes

Application > t This is a pull-right applications Reset R Hidden in Lotus Notes 8,

unless it's an upgrade from Expeditor

ResetPerspective

group marker

"Group marker" means additional menu items go here

applicationEnd

-------------------

separator

group marker

additions

Install I Hidden in Lotus Notes 8, unless turned on specifically

install

Application Management

A Hidden in Lotus Notes 8, unless turned on specifically

management

Close C close (Eclipse) Save S CTRL + S Hidden in Expeditor save (Eclipse) yes Save As... A Hidden in Expeditor saveAs (Eclipse) yes add other menu items after

Close You can add separators

------------- Hidden in Expeditor Separator

Print… Ctrl+P

P Ctrl+P Hidden in Expeditor print (Eclipse) yes

Properties e Hidden in Expeditor properties (Eclipse)

yes

Group marker: prefStart Preferences….

f preferences (Eclipse)

Group marker: prefEnd Close All C

This should be provided by Expeditor as part of the platform menus.

closealltabs yes

Shut Down System

u Visible in Restricted mode only, Not visible in Expeditor, Sametime or Lotus Notes 8

Log Off f Visible in Restricted mode only, Not visible in Expeditor, Sametime or Lotus Notes 8

Exit x not visible in "restricted/lock down" mode of Expeditor

quit (Eclipse)

20

3.2.2 Edit menu The Edit menu has a mnemonic of “E”. If your application uses any of the menu items listed in table 4, use the appropriate menu ID specified. You can add completely new menu items to an appropriate place in the Edit menu. Lotus Expeditor does not display the Edit menu. Table 4. Edit menu item details

Menu item mnemonic Shortcut (if any)

Details Eclipse menu ID Retargetable

Cut t CTRL+X cut (Eclipse) yes Copy C CTRL+C copy (Eclipse) yes Paste p CTRL+V paste (Eclipse) yes Select All L (the first l in All) CTRL+A selectall (Eclipse) yes Delete D Del key delete (Eclipse) yes

3.2.3 View menu

The View menu has a mnemonic of “V”. If your application uses any of the menu items listed in table 5, use the menu ID specified. You can add completely new menu items to an appropriate place in the View menu. IBM recommends that you add them at the top, so that the menu items listed in table 5 are always at the bottom of the menu. Table 5. View menu item details Menu item submenu mnem

onic Shortcut (if any)

Details Eclipse menu ID

Toolbar > This can be a pull-right. Even if the pull-right has several items, keep it singular.

com.ibm.rcp.ui.toolbarsmenu

Show > w Pull-right. Mnemonics might be different from Expeditor, Notes, and Sametime.

com.ibm.rcp.ui.showmenu

Sidebar -> a Open O These are “radio button

choices” (not in Sametime)

Thin T Closed C Sidebar Panels->

Panel1 P In Sametime, these are called com.ibm.rcp.ui.sidebarmenu

“Application Panels”

Panel 2, etc.

3.2.4 Create menu

If you want your plug-in to contribute a Create menu item, put it in this location. Lotus Expeditor does not display this menu. 3.2.5 Actions menu

If you want your plug-in to contribute an Actions menu item, put it in this location. Lotus Expeditor does not display this menu. 3.2.6 Tools menu

The Tools menu must have a mnemonic of “o”.

21

3.2.7 Window menu If your application uses the window menu, it must have a mnemonic of W and it must list all open windows (tabs; see table 6). The menu can also contain other menu items. Lotus Expeditor does not display this menu. Table 6. Window menu items

Menu item mnemonic Shortcut Details Menu ID Show Thumbnails b CTRL +

SHIFT + T Not in Sametime com.ibm.rcp.ui.history

<list of open windows>

3.2.8 Help menu

Provide Help for your application or plug-in. The Help menu must have a mnemonic of H. If your application uses any of the menu items in table 7, use the menu ID specified. Table 7. Menu items and their IDs Menu item Mnemonic Shortcut Details Menu ID Dynamic Help C F1 Eclipse menu ID

---------------- separator About <product name>... A about IBM Support Assistant I com.ibm.esupport.cli

ent.Browser 3.2.9 Icons in the menus

Some menu items have corresponding toolbar buttons. If there is a corresponding toolbar button with an icon, display the icon to the left of the menu item in the menu. If there is no corresponding toolbar button, leave the area to the left of the menu item blank. 3.2.10 Part-associated action set menu contributions

In addition to having the global menus, Lotus Notes and Lotus Sametime contribute their own menu items on the existing File, Edit, View, Actions, Tools, Window, and Help menus and can also contribute entire menus to the menu system. A plug-in that you write can do the same. As an integration platform, the Actions menu and the Tools menu should change based on what “application” (usually a tab) has focus. Make entire menus show or hide based on the Eclipse View/application. For example, the Format menu appears only when one of the Lotus Symphony editors, such as Spreadsheet, has focus and is in edit mode. If an application/plug-in is not installed (or disabled by the administrator), then all the menu items associated with that feature must be hidden. For example, if the Composite Application Editor is not installed, then none of its associated menu items should appear. The administrator can enable or disable groups of features by using Desktop Policies. For example, the administrator can disable the ability to use macros in Lotus Symphony. In that case, all menu items relating to the use of macros must be hidden. If you write an application or plug-in that lets the administrator to disable part of it, ensure that the corresponding user interface elements (menu items, icons, preferences) are hidden.

3.3 Menus for sidebar or Sametime plug-ins The nature of the plug-in determines whether you provide menus or menu items. In most situations, add menu items to the Panel menu, which is found on the title bar (see figure 15).

22

Figure 14. Activate the Panel menu by clicking the left-hand icon

The Panel Menu contains generic menu contributions provided by the Expeditor platform. Add menu items to the top of the Panel menu, as shown in figure 16.

Figure 15. Add menu items to the top of the Panel menu

In other cases when the plug-in has a great deal of functionality (especially when users are accustomed to using it in another context with menus), contribute menu items to the appropriate menu in the main menu bar, and put the menu items in a pull-right with the name of the plug-in. For example, the Sametime plug-in contributes some menu items to the View menu and to the Edit menu. The Sametime pull-right in the View menu is shown in figure 17.

23

Figure 16. The Sametime plug-in contributes a pull-right to the View menu

To achieve keyboard accessibility, retarget the File – Open – Selected Item menu item so that, when an item (or items) in your sidebar panel is selected and a user chooses this menu item, the items selected in the sidebar panel open. For example, if the user selects a meeting in the sidebar calendar and then chooses File – Open – Selected Item, the selected calendar entry is opened, as shown in figure 17.

Figure 17. Retarget the File – Open – Selected Item menu item

3.4 Menus for composite applications Composite applications are made up of various component panels on a page. One component panel could be a Notes application while another could be an Eclipse plug-in. Ideally, the component panel that has focus should contribute menu items to the appropriate menus. If your composite application has one or more Notes applications, then contribute actions to the Actions menu when you create your Notes application. The Composite Application Editor does not yet allow you to contribute menu items to the menu bar. If you provide a title bar for the component panel, contribute menu items to the panel menu, similar to the way you add menu items to a sidebar panel (recall Figure 15). If you do not use a title bar on the component panel, then provide an action bar to access any needed panel actions. Users can access system actions by using ALT + -.

24

(System actions include maximize, minimize, restore, and close, depending on what has been enabled for the component).

4 Context menus Provide context menus on objects. IBM also recommends that any context menu item also be a menu item on one of the menus in the menu bar as well.

4.1 Context menu details for Lotus Notes 8 Lotus Notes core provides a standard set of context menu items for different interface objects (for example, a view or a document). IBM recommends that you add application-specific context menu items to the standard set. The standard set might not always be appropriate for a context menu. In Domino Designer 8.0, developers can remove the standard context menu items for documents in a view. If you do that, you can then put your application-specific menu items at the top of the context menu, and then add back any of the standard menu items that are appropriate for that view. IBM recommends that you include any application-specific context menu items either in the Create or Actions menu as well, because it is generally not acceptable user experience to provide a menu item only in a context menu. For more information on how to customize the context menus, refer to the Domino Designer 8.0 online documentation topic Creating a form, subform, page, or view action. Use the following guidelines to help you determine whether you should put a command on the action bar or in a context menu (in addition to having it in the Create or Actions menu, of course).

• Put a menu item in the context menu when the actions change based on the object that is selected. For example, the context menu for an embedded picture might be entirely different than the context menu for a selected word.

• Put a button in the action bar when the actions will be appropriate most of the time in the view or document. In general, the actions should depend on what is selected.

5 Open button and tab labels The Expeditor client provides an Open button (launcher) to launch various applications. Lotus Notes 8 and Lotus Symphony use this Open button, but Lotus Sametime does not, given the nature of that application. Instead, Lotus Sametime uses a different “personality” that does not have an Open button.

5.1 Open button (launcher) Users click the Open button to see a list of applications, and they can add applications to the list as a bookmark. Each application in the Open list should have:

• A 16x16 icon (preferably in .png format). For more information on designing icons that conform to the Expeditor, Notes, and Sametime styles, refer to Section 1.6.3.

• A label. Use “title capitalization”, that is, capitalize the first letter of each word except for prepositions fewer than 5 letters. (It is understood that other items on the Open list might not follow this convention because they could be document or view names.)

5.2 Tabs and tab labeling in the various window management models Lotus Expeditor and Lotus Notes provide three different window management models. Users can set a preference for which window management model they want to us by choosing Preferences – Windows and Themes. Administrators can also use a Desktop Policy to set the window management model for users.

25

The three different window management models are:

• Open each document in its own window • Open each document in its own tab • Group documents from each application on a tab

All three models have tabs. By default the tab label is the name of the Eclipse perspective, but you can override the default perspective. As an application designer or builder, you shouldn’t need to worry about the window management models. However, you do need to worry about the labeling of the tab (or the title bar, depending on the window management model used.) Label the tabs (title bars in individual mode, tab menu items in grouped mode) as follows:

• If the tab represents a list, make the tab name the same as the List name, for example, o Inbox o Calendar o Favorite Document Links

• If the tab is a new document that has not been saved, then make the label “New<insert descriptor>,” for example:

o New Message, o New Meeting, o New Spreadsheet. o If the tab is a document that has been saved (or received if it’s mail), then make the label the

subject or name of the document. Lotus Expeditor will truncate it if necessary. • A saved document should have the name of the document. • There can be exceptions to this rule; for example, the tab label for a canceled meeting is

“Canceled:<subject line>”. The following are handled by the Expeditor theme:

• Tab width (the maximum tab width is approximately 35 characters and the minimum is 3). An overflow control appears automatically if necessary.

• Hover behavior (hover should show the full name of the item that the tab represents) • Returning focus to the last tab (in that Eclipse perspective) when users close a tab.

6 Toolbar The guidelines for toolbars differ depending on whether you are building the following:

• Lotus Notes application (database), • Main window plug-ins and composite applications (Eclipse features), or • Sidebar or Sametime plug-ins

6.1 Toolbar for Lotus Notes applications Developers have little control over the toolbars in Lotus Notes. In Lotus Notes 8, the toolbars that are on by default have been changed so that none of the static toolbars are on; only the context-sensitive toolbars are on. The context-sensitive toolbars for the client (not including Domino Designer or the Administration client) are:

26

• View • Document in read mode • Document in edit mode • Workspace • Replication

Several buttons have been added to the context-sensitive toolbars; specifically, Cut, Copy, and Paste have been added to the context-sensitive document-editing toolbar. Most business end-users should not need to turn on the static toolbars. If you deployed any custom toolbars, those toolbars are retained. Note that Lotus Notes applications generally make use of action bars rather than the toolbar.

6.2 Toolbar for main window plug-ins and composite applications Main window plug-ins (including Components and composite applications) can (but do not necessarily need to) contribute to the toolbar. Any item on the toolbar must be a repeat of a menu item, and toolbar items must be frequently used actions. Do not overuse toolbar buttons. The Toolbar contribution model for Lotus Expeditor is similar to the Menu contribution model. Global toolbar items are provided by the platform. If you want to use a specific toolbar button (such as Cut or Copy), your application may have to retarget them. Each application should hide each global toolbar item as necessary. In addition, each application can add more toolbar buttons, or even an entire row of toolbar buttons. There are two extension points available to add a toolbar. IBM recommends that you use the second one, the Expeditor controlSet:

• Eclipse actionSet o Developers can add simple toolbar buttons, such as press, check/toggle, radio, and drop-down buttons. o It does not add the label for the toolbar to the toolbar context menu o Developers can show/hide a toolbar for all the windows, not per window.

• Expeditor controlSet

o Developers can add arbitrary SWT controls, for example, font drop-downs, the search toolbar, and so on.

o It adds the label for the toolbar to the Toolbar context menu, as shown in figure 18. o Developers can set or unset the label for the toolbar (in the context menu) per window at runtime. o Developers can show or hide a toolbar per window at runtime.

27

Figure 18. Use the Expeditor controlSet to automatically list your toolbar in Toolbar context menu

In composite applications, the toolbar contributions should be context-sensitive and thus ideally should be enabled or disabled per page (not just per component). In the case of composite applications, consider using a "component action bar" rather than adding to the toolbar. (The component action bar is within the component rather than up at the main toolbar). Section 7.2 below provides further information on component action bars.

6.3 Toolbar for sidebar or Sametime plug-ins The nature of the sidebar panel or Sametime plug-in should determine whether you provide a toolbar. Use toolbars sparingly because they take up valuable screen real estate. The items on a toolbar in a sidebar panel or in a Sametime plug-in should be repeats of items in the panel menu. For more about the panel menu, refer back to Section 3.3. (IBM is aware that some of the Notes sidebar panels do not adhere to this guideline.)

7 Action bar The purpose of the action bar is to provide quick access to commonly used actions/commands. Commands on the action bar must be repeats of items on the Menu bar (or something in a dialog box that you get to from a menu item). Use an action bar rather than a toolbar in the following circumstances:

• When a plug-in is a component in a composite application • When building a Lotus Notes application (mainly because the Domino designer technology does not yet

allow you to easily contribute to the toolbar)

7.1 Action bar as part of a Lotus Notes application Views and documents (forms) can have an action bar if the designer thinks it is appropriate. Commands on the action bar must be repeats of items on the menu bar (or something in a dialog box that you get to from a menu item). The general order of items on the action bar could be as follows, from left to right (see figure 19):

28

• New/Create • <other actions> • A “More” button (if it is necessary to add miscellaneous items that do not all fit separately. IBM

recommends that you put these miscellaneous items on the Actions menu in a consistent way so that users start to look there more often.)

• Lotus Sametime integration Right-justify the following item on the action bar, if present:

• Show <buttons toggling the view> Ideally, all action bar items should fit on the visible area of the action bar.

Figure 19. Recommended order of the action bar

7.2 Action bar in a component in a composite application A composite application is made of several components. Each component can have a component action bar, or only certain components might have an action bar. Use the component action bar if the button clearly applies only to that component. For example, text-editing toolbar buttons are best located at the top rather than repeating them in every component that might use rich text editing.

8 Views and folders The guidelines for views and folders differ depending on whether you are building

• a Lotus Notes application (database) or • main window plug-ins and composite applications (Eclipse features).

8.1 Views and folders for Lotus Notes applications IBM recommends that you use an outline for navigating between views and folders, conforming to the following rules:

• The name of the application is at the top, left-justified (in left-to-right languages), and 4 points larger than the text and bold.

• The server replica is next (also left-justified). • The application icon is optional, but if you include it, left-justify the icon next to the application name and put

the replica name under the title, as shown in figure 20. • The most important or most frequently used view or folder is at the top.

29

Figure 20. Navigator title and replica (icon is optional)

Put actions in the Actions menu and action bar. Do not put actions in the outline unless the action is directly related to one of the views or folders (see figure 21).

Figure 21. Actions in an outline should relate directly to a view or folder

8.2 Views and folders for main window plug-ins and composite applications

Refer to the Java documentation in the Expeditor toolkit for more information. The APIs for the Navigator and the preview pane are not yet available. For composite applications, items in the navigator can, but do not have to be, preceded by an icon. If you use an icon, it should be 16x16 pixels. Table 8 provides suggestions for how to best design for navigation between pages and views. Table 8. Design suggestions for navigating between pages and views To allow users to navigate Do this between pages In Mail, Calendar, and Contacts, use tabs at the top

between views Use a “navigator”; in Domino Designer, use an outline. This means that you might end up with two navigators next to each other (the view and the page)

between different pages Put buttons across the top (you must create your own Eclipse component to do this).

9 The sidebar The sidebar is divided into separate panels. Lotus Expeditor provides the look and feel of the sidebar, in general, and of the title bar (without the title) of each panel. Each application owns the look and feel and content of the rest of the panel.

9.1 Guidelines for each panel Each panel should follow a few simple guidelines:

30

• Have a consistent "inner" margin on all four sides • The panel can have a toolbar if it makes sense to take up screen real-estate with it. • The nature of the interaction within each panel depends on the kind of data; that is,

o RSS feeds and the like should look and act like the Web (with underlined links for which single clicking accomplishes an action.)

o Other data might have a more traditional GUI interaction/feel. o Some data might just be textual information. o Some data might be in a table or grid layout.

For details on contributing to the “panel menu” in the title bar of a sidebar panel, refer to Section 3.3.

9.2 Offline experience for the sidebar If users choose to work offline, some of the data in some of the panels might not be available. Each contribution needs to take care of what happens inside the panel when they are working offline. If the data is not available offline, the title bar and all data and controls inside it must be disabled.

10 Chat window extensions Plug-ins may add application panels to the left side of the chat window. The participant list of a multi-party chat is an example of how these panels appear. Plug-ins creating new application panels on the left side of the chat window should do so when the intention is to have a persistent component that must be present for the duration of the chat. The plug-in should define a panel name and a 16x16 icon, if it contributes to this space. Components that are intended to display temporarily should not use this mechanism; instead, they should be created as Extension tabs or Pop-up extensions.

10.1 Extension tabs Plug-ins may add additional tabs appearing on the top-right portion of the chat window, above the user information of the chat transcript area (recall Figure 3. Chat window item 2). When a plug-in adds to this area, the chat transcript/compose area appears in one of these tabs, and the new plug-in appears as another. For example, if a larger application area is desired, in which the user can alternate between the application and the chat, then a plug-in could write a new tab component, and the chat transcript would appear in an adjacent tab. Plug-ins creating new tabs on the top right of the chat window should do so when the intention is to have a persistent component that needs to be present for the duration of the chat. The plug-in should define a tab name (no icon) if it contributes to this space.

10.2 Pop-up extensions Plug-ins may contribute to the space below the message compose area in the chat window, as shown in Figure 3. Chat window . The file transfer interface is an example of this. A plug-in may contribute to this space as well. If two or more components are active in this space at a time, they appear in tabs, ordered left to right by the first one to open in that space. If two tabs are present in the space, and one tab is closed via an action within the tab component, or by the component automatically ending, then the remaining component switches to display without a tab. Plug-ins contributing below the text input area of the chat window should do so when the intention is to have a temporary component that needs to be present for a limited time to perform a specific action or event. For example, file transfer uses this space. The plug-in should also define a tab name (no icon) if it contributes to this space, in the event that two components operate in this space at the same time.

31

Components that are intended to display for the duration of the collaboration should not use this mechanism, and should be created in left side application panels, or chat window persistent tabs instead.

10.3 Contact list icons You can add columns to the Contact List window to display additional information (in text or icons) provided by your plug-in. For example, your plug-in may be able to detect whether a user has telephony capabilities, and you may wish to show icons to indicate various states for a user’s telephony status (such as “available to call” or “on the phone”.) These icons should have ALT (hover) text and be no larger than 16x16 pixels.

11 Preferences The guidelines for menus differ depending on whether you are building the following:

• Lotus Notes application (database) • Main window plug-ins (Eclipse features) • Sidebar or Sametime plug-ins

11.1 Preferences for Lotus Notes applications In Lotus Notes 8, the preferences for individual templates cannot yet be contributed to the consolidated preferences tree. If you provide preferences, put a Preferences… menu item in the Actions menu. If you feel that it is necessary, put a Preferences… action bar button in the action bar as well.

11.2 Preferences for plug-ins Users must be able to access the preferences using the Preferences… menu item on the File menu. You can also allow users to access the Preferences menu from a context menu item, link, or button in given situations. Ensure that your preferences pages do the following:

Use the preferences UI to expose any plug-in-specific preferences. Add to the one Preferences tree. If your plug-in contributes multiple pages of preferences, group those pages under one heading in the tree

control on the left-hand side (so that they are not interspersed with preferences from other plug-ins). For example, when Sametime is its own client, the preferences are listed separately, but when Sametime is in Lotus Notes, all the Sametime preferences are grouped under Sametime, as shown in figure 22.

The top of each preferences page has a banner. Make the label on the banner a repeat of the words that are selected in the left-hand tree.

Use group boxes to separate areas, if you feel that grouping is necessary. Group box headings should be initial capital letter only, meaning the only the first letter of the first word is capitalized, except for proper nouns.

Begin each preferences page with a sentence describing an overview of what the user can do. Put a colon after field labels and follow capitalization and punctuation guidelines. Always provide the "Restore Defaults" and "Apply" buttons in the lower right portion. (These buttons are

provided by the Eclipse Preferences framework, so you get them automatically.) You can add other command buttons as necessary.

32

Figure 22. Multiple preference pages from the same plug-in grouped as in Lotus Sametime

12 Dialog boxes There are currently many different styles of dialog boxes throughout Lotus Expeditor, Lotus Notes, and Lotus Sametime due to the many different technologies used to build them. It is not expected that you re-design existing dialog boxes; however, for any new dialog boxes that you do create, please follow the guidelines in this section. For left-to-right languages, design your dialogs so that they flow from top to bottom, left to right. Do not rely only on the “X” in the title bar for users to close or cancel a dialog—always provide a Cancel button as well. Place command buttons at the bottom right or the top right, as shown in figures 23 and 24.

33

Figure 23. Command buttons in the lower right

Figure 24. Command buttons can also be placed in the upper right

Ensure that users can get to every control in the dialog box without using the mouse (to ensure keyboard accessibility and to conform to accessibility legislation):

• Check that users can use the Tab key to move throughout the dialog • Provide mnemonics for all labels (except OK and Cancel; OK should map to the Enter key, and Cancel

should map to the Escape key.)

12.1 Dialog boxes built with Domino Designer Domino Designer does not support the creation of Group boxes, so try to use space to delineate groups. If you feel that a Group box would help users with your dialog box, place the Group box labels above the Group box as shown in figure 25.

34

Figure 25. Labels placed above the Group box in Domino Designer

12.2 Dialog boxes in plug-ins Some of the guidelines are specific to the technology used to build them. Use Group boxes sparingly, and when you do, provide a label for the group in blue text, not bold (see figure 26). Also, try to use blank space / white space to delimit groups, if you can, since Group boxes can add visual clutter (see figure 27).

35

Figure 26. Avoid unnecessary use of Group boxes

36

Figure 27. Proper use of Group boxes

13 Properties If your plug-in has properties, allow users to access those properties from a Properties menu item on the File menu. The Properties menu item can be available on a context menu as well. For plug-ins, use the Properties dialog provided by Lotus Expeditor (it is a Modal dialog).

37

14 Status bar The status bar for the Lotus Expeditor, Sametime, and Symphony products should be ON by default. Applications can contribute messages to the message area of the status bar. Be sure not abuse the status bar; it is for status only. Ensure that important actions are available from the menu bar. Put a message in the status bar when the message is informational only, for example, a confirmation that a person has been added to your Contacts list. Pop up a dialog box when the message informs users of lost data or potential lost data, or some other failed operation, such as a mail compaction failure.

15 Messages – Info, Warning, Error When it is feasible, use the “standard message dialogs” from MessageDialog, org.eclipse.jface.dialogs. Be prepared, however, to create custom message dialogs if the situation calls for more or different command actions.

15.1 General guidelines for error messages Use the guidelines below when creating error messages.

• The title on all message boxes should be the name of the application or plug-in, unless the error comes from Lotus Expeditor, in which case the title bar should state something about the component that threw the error, for example, “Synchronization”. An example of an application title bar would be:

o IBM Lotus Sametime o IBM Symphony Document o IBM Lotus Notes

• The first line or sentence must state what went wrong. Use full sentences and sentence punctuation. o For example, “The message is not addressed to anyone.”

• The second line or sentence must tell the user what to do about it, using a full sentence and sentence punctuation.

o For example, “Type the names of one or more recipients for this message.” • Each error message must make a sound when it is displayed (for accessibility reasons). Use a default

system beep. • Error messages can be modeless or modal. • If your organization insists that an error message must have a number on it, put the number under the

message (see figure 28). Starting an error message with a number is not helpful to end users. • A modeless error message lets the user continue to interact with the application, for example, open other

documents. • A modal error message requires the user to respond to the error dialog before continuing to use the

application.

Figure 28. Sample error message with error message number

38

15.2 Specific message types Table 9 outlines the various message types and when to use them. Table 9. Details of message types Condition Sample Information To provide information about the results of a command. Users can only acknowledge the message. Title = name of the application. Note that in the future this might change to the name of the plug-in (from the user’s point of view, for example, Mail, Calendar, Instant Messaging) Information messages are often modeless; however, use your judgment as to whether the user must respond to the error before being allowed to interact with the rest of the application.

Filename: Infomessageweb.gif

MessageDialog.openInformation(parent.getShell(), "Info TitleApplicationName", "Info Message");

Warning Alerts the user to a condition that requires a decision before proceeding. In many cases you need to add buttons here to support the Yes, No, and Yes, No, Cancel conditions. Warning messages are usually modal; that is, the user must respond before continuing to interact with the application.

Filename:Warningmessageweb.gif

MessageDialog.openWarning(parent.getShell(), "Warning Title", "Warning Message");

Critical Informs the user of a serious problem that prevents them from continuing their work. Critical error messages are always modal.

Filename:errormessageweb.gif

MessageDialog.openError(parent.getShell(), "Error Title", "Error Message");

39

Question DO NOT USE Reason: We want to keep a clear three-level message model. That is,

Info Warning Error

A question is just an attribute of the Warning type.

MessageDialog.openQuestion(parent.getShell(), "Question Title", "Question Message");

Confirm DO NOT USE Reason: Same reason as that for Question.

MessageDialog.openConfirm(parent.getShell(), "Confrim Title", "Confirm Message");

15.3 Confirmation of deletions When you confirm the deletion of anything, use the following wording, ensuring that you provide specific Yes and No options (rather than OK and Cancel), and making “No” the default:

Do you want to permanently delete <thing> [ Yes ] [ No ]

16 Capitalization and punctuation Both headline-style capitalization and sentence-style are used, depending on the item. For the most part, these guidelines also agree with the IBM Web Interface Style Guidelines, so that if you are designing for both the Web and rich client, consider using the same properties file.

16.1 Headline-style capitalization Use headline-style capitalization for the following:

• Menus and menu items • Tooltips • Command buttons (push buttons) • Titles, including:

o Title bars, window titles o Dialog title bars o Tabs

Headline-style capitalization means capitalize the first letter of each word, except for:

• Articles such as “a”, “an”, and “the” • Short prepositions (five or fewer letters) such as “for”, “in”, “of”, “on”, “to”, when these prepositions are

between two words. (For example, in the case of Save As… and Save as Draft…. “as” is capitalized in the first instance because it is the last word.)

• Do not include ending punctuation.

40

16.2 Sentence-style capitalization Use sentence-style capitalization for all labels in a window or dialog, including labels for the following:

• Check boxes • Radio buttons • Group box (or group bar) titles • Simple text fields

Sentence-style capitalization means capitalize the first letter of the first word and any proper nouns such as “Lotus”. Refer back to Figure 27. Proper use of Group boxes for good examples of sentence-style capitalization in field labels.

16.3 Punctuation Put a colon at the end of labels for controls in a form or dialog, as shown in figure 28. Terminate full sentences (such as those in error messages) with the appropriate punctuation, such as a period, exclamation point, or question mark, except for full sentences used in check boxes and radio buttons.

Figure 28. Use colons after labels

16.4 Tooltips You must provide tooltips for visual elements that have no text labels. You do not need to create tooltips for visual elements with text labels. Do not use terminating punctuation for tooltips.

16.5 Ellipses For menu and action bar items, use ellipses (three periods at the end of the text) when the item launches a dialog that requires user input (just clicking an OK button does not count). Do not use ellipses when the item brings up a new Tab.

17 Offline experience If you build a Notes application, then Lotus Notes takes care of any user interface and offline experience, including the ability to make a local replica. However, if you are building a feature, plug-in, or composite application, you should provide a user interface for taking it offline (if it can be taken offline.). Specifically, provide the menu item “Make Available Offline…” from the File – Applications menu (refer to the Menu section for more information.) You can also provide other buttons or means to let users take the application offline. You must also have your feature or plug-in listen for whether the platform is online or offline. Refer to the Expeditor information center for more details.

41

18 Search Provide a mechanism to search the data in your application, if you can.

18.1 Search in plug-ins with Lotus Expeditor and Lotus Sametime Lotus Expeditor does not turn on a search control by default, but there is an extensible search control (called the search center) that you can put in the toolbar, on the far right-hand side (Lotus Notes uses it). The search center can automatically change the scope of a search based on the application that currently has focus. You can also add new search scopes or choices (such as Yahoo or Google Web Search) to the drop-down control, as shown in figure 29.

Figure 29. Extensible search choices in the Search drop-down

18.2 Search in composite applications Users should be able to search composite applications. Since neither the Expeditor platform nor Sametime provides a truly federated search, use the "search center" in the toolbar to default to the current component that has focus, to the "All things" view if it exists. In addition, provide an option for the view that currently has focus (if it is indeed a view) and also list each of the components explicitly in the search drop-down because it is not obvious to users of a composite application that they need to put focus on a component to then search it. For example, suppose that you have a sales leads application in which there are three components, called Accounts, Leads, and History. When the user has focus on Accounts, then Accounts will be the default search, but the others should be listed as search choices as well (see figure 30).

42

Figure 30. Composite applications should list each of the components available to search

19 Log-in window If your plug-in requires authentication, make the log-in dialog box a maximum image width of 393 pixels, with a maximum area height of 42 pixels. Note that this area may become wider on different operating systems, so code the layout for this case, and follow the basic layout illustrated in figure 31 (note the labeling and punctuation).

Figure 31. Put the user name first, followed by the password

20 Conclusion The key principles covered in this white paper are you can provide a better user experience by creating the following:

• Action bars that follow the recommended visual style and order of actions • Outline views that have application titles • Outline views that follow the recommended visual guidelines • Dialog boxes and message boxes that conform to the suggested style

Note that Appendix A provides a convenient checklist to ensure your plug-ins are consistent.

43

21 Resources • Eclipse user Experience 3.0 best practices:

http://wiki.eclipse.org/index.php/UI_Best_Practices_v3.x • Lotus Expeditor information center:

http://publib.boulder.ibm.com/infocenter/ledoc/v6r11/index.jsp

• Lotus Notes and Domino 8 technical content: http://www-128.ibm.com/developerworks/lotus/notes/?S_TACT=105AGX13&S_CMP=LPLOTUS

• developerWorks product page for Lotus Notes and Domino: http://www.ibm.com/developerworks/lotus/products/notesdomino/?S_TACT=105AGX13&S_CMP=LP

• developerWorks product page for Lotus Expeditor: http://www.ibm.com/developerworks/lotus/products/expeditor/?S_TACT=105AGX13&S_CMP=LP

• developerWorks product page for Lotus Sametime: http://www.ibm.com/developerworks/lotus/products/instantmessaging/?S_TACT=105AGX13&S_CMP=LP

• "Designing the User Experience for Lotus Notes and Sametime" blog: http://www-128.ibm.com/developerworks/blogs/page/marybeth

22 About the author Mary Beth Raven is passionate about involving users in the design of collaboration tools. She has worked on Lotus Notes for more than two years, before which she designed five versions of Lotus Sametime. She works with the Lotus Notes Design team in Westford, MA, and loves to travel, especially to visit customers. She holds a Ph.D. in Rhetoric from Rensselaer Polytechnic Institute in Troy, NY.

23 Acknowledgements The author wishes to thank the Development team for their contributions, especially Maureen Leland, Bob Balaban, and Kathy Howard.

44

Appendix A: User experience checklist for plug-ins Use the following checklist to ensure that your plug-in is consistent with the rest of the interface and any other plug-ins built by developers following this guide.

□ Toolbar buttons have corresponding menu items

□ Action bar buttons have a corresponding menu item on the Actions menu

□ Interface text adheres to capitalization guidelines

□ Interface text adheres to punctuation guidelines

□ Mnemonics exist for all menu additions

□ Mnemonics exist for all input field labels, tabs, and buttons in dialog windows

□ Menu and button actions have ellipses (…) at the end of the text string if the action opens a dialog box for further user input before completing the task

□ Separator bars are used in menus and action bars to separate groups of similar actions

□ Interface icons have ALT (hover) text describing the action or intended indication

□ Contact List and chat window application panels have titles and a 12 x 12 pixel icon

□ Panels for the sidebar, Contact List, and chat window application have an inner margin of 4 pixels

□ Actions in menus appear disabled if not available

□ Plug-ins adding components that may appear as tabs in the chat window interface provide a tab title

□ Actions that refer to a preference open the Preferences window to the appropriate preference page

□ Error dialog boxes appear in one of the following three forms: Error, Warning, or Critical

□ General consistency in terminology is achieved (same words are used to refer to the same action appearing in different places, for example)

45

Trademarks Domino, Expediter, IBM, Lotus, Notes, Quickr, Rational, Sametime, Symphony, and WebSphere are trademarks or registered trademarks of IBM Corporation in the United States, other countries, or both.

Java and all Java-based trademarks and logos are trademarks or registered trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.

Windows is a registered trademark of Microsoft Corporation in the United States, other countries, or both.

Linux is a trademark of Linus Torvalds in the United States, other countries, or both. Other company, product, and service names may be trademarks or service marks of others.

This information is provided “as is” without warranty of any kind, express or implied, and is based on IBM’s current product plans and strategy, which are subject to change by IBM without notice. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this document. Nothing contained in this document is intended to, nor shall have the effect of, creating any warranties or representations from IBM (or its suppliers or licensors), or altering the terms and conditions of the applicable license agreement governing the use of IBM software.

46