UI Design Specification
UI Design Specification
UI Design Specification
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
User experience guidelines for IBM® Lotus® rich<br />
client applications and plug-ins<br />
(for IBM Lotus Notes®, IBM Lotus Sametime®, IBM Lotus Symphony, IBM<br />
Lotus Expeditor, and composite applications)<br />
Mary Beth Raven<br />
Lead User Experience <strong>Design</strong>er for IBM Lotus Notes 8 and IBM Lotus Expeditor<br />
Westford, Massachusetts<br />
January, 2008<br />
© Copyright International Business Machines Corporation 2008. All rights reserved.<br />
This white paper describes user-interface design and interaction guidelines for designers and developers who are<br />
building IBM® Lotus® Notes® applications (formerly called databases), Lotus Sametime® version 7.5 or later plugins,<br />
Lotus Symphony, Lotus Expeditor plug-ins (Lotus Expeditor is a rich client based on Eclipse), or Composite<br />
applications (assembling any mixture of plug-ins, Lotus Notes applications, and components built with Lotus<br />
Component designer).<br />
To get the most out of this article, you should be familiar with Lotus Notes 8 and Lotus Sametime 8. It also helps to<br />
have familiarity with either IBM Lotus Domino® <strong>Design</strong>er or the Eclipse integrated development environment.<br />
1
Table of Contents<br />
1 Introduction ...................................................................................................................... 4<br />
1.1. Elements of the Lotus Notes 8 Client ................................................................................ 4<br />
1.2. Elements of the Sametime 7.5.x client .............................................................................. 5<br />
1.3. Elements of Lotus Symphony........................................................................................... 8<br />
1.4. Elements of the Lotus Expeditor client .............................................................................. 9<br />
1.5. Planning your application ............................................................................................. 10<br />
1.6. Visual style............................................................................................................... 12<br />
1.6.1. The visual system.................................................................................................. 12<br />
1.6.2. Making your Lotus Notes application conform to the Notes 8 visual style................................ 13<br />
1.6.3. Icon style............................................................................................................ 15<br />
1.6.4. Visual style considerations for composite applications...................................................... 16<br />
2 Title bars .........................................................................................................................16<br />
2.1 Title bars of dialog boxes ............................................................................................. 17<br />
2.2 Composite application component title bars....................................................................... 17<br />
3 Menu bar and menus........................................................................................................18<br />
3.1 Menus for Lotus Notes applications built with Domino <strong>Design</strong>er ............................................... 18<br />
3.2 Menus for main window plug-ins ..................................................................................... 18<br />
3.2.1 File menu ........................................................................................................... 19<br />
3.2.2 Edit menu ........................................................................................................... 21<br />
3.2.3 View menu .......................................................................................................... 21<br />
3.2.4 Create menu........................................................................................................ 21<br />
3.2.5 Actions menu ....................................................................................................... 21<br />
3.2.6 Tools menu ......................................................................................................... 21<br />
3.2.7 Window menu ...................................................................................................... 22<br />
3.2.8 Help menu .......................................................................................................... 22<br />
3.2.9 Icons in the menus................................................................................................. 22<br />
3.2.10 Part-associated action set menu contributions ............................................................ 22<br />
3.3 Menus for sidebar or Sametime plug-ins............................................................................ 22<br />
3.4 Menus for composite applications ................................................................................... 24<br />
4 Context menus ...............................................................................................................25<br />
4.1 Context menu details for Lotus Notes 8 ............................................................................ 25<br />
5 Open button and tab labels................................................................................................25<br />
5.1 Open button (launcher)................................................................................................ 25<br />
5.2 Tabs and tab labeling in the various window management models ............................................ 25<br />
6 Toolbar ........................................................................................................................26<br />
6.1 Toolbar for Lotus Notes applications................................................................................ 26<br />
6.2 Toolbar for main window plug-ins and composite applications................................................. 27<br />
6.3 Toolbar for sidebar or Sametime plug-ins .......................................................................... 28<br />
7 Action bar .....................................................................................................................28<br />
7.1 Action bar as part of a Lotus Notes application ................................................................... 28<br />
7.2 Action bar in a component in a composite application........................................................... 29<br />
8 Views and folders............................................................................................................29<br />
8.1 Views and folders for Lotus Notes applications.................................................................... 29<br />
8.2 Views and folders for main window plug-ins and composite applications .................................... 30<br />
9 The sidebar ...................................................................................................................30<br />
9.1 Guidelines for each panel ............................................................................................. 30<br />
9.2 Offline experience for the sidebar .................................................................................. 31<br />
10 Chat window extensions.................................................................................................31<br />
10.1 Extension tabs ........................................................................................................ 31<br />
10.2 Pop-up extensions.................................................................................................... 31<br />
10.3 Contact list icons..................................................................................................... 32<br />
11 Preferences ................................................................................................................32<br />
11.1 Preferences for Lotus Notes applications ........................................................................ 32<br />
2
11.2 Preferences for plug-ins ............................................................................................ 32<br />
12 Dialog boxes................................................................................................................33<br />
12.1 Dialog boxes built with Domino <strong>Design</strong>er ........................................................................ 34<br />
12.2 Dialog boxes in plug-ins ............................................................................................. 35<br />
13 Properties ..................................................................................................................37<br />
14 Status bar...................................................................................................................38<br />
15 Messages – Info, Warning, Error........................................................................................38<br />
15.1 General guidelines for error messages ........................................................................... 38<br />
15.2 Specific message types .............................................................................................. 39<br />
15.3 Confirmation of deletions .......................................................................................... 40<br />
16 Capitalization and punctuation ........................................................................................40<br />
16.1 Headline-style capitalization ...................................................................................... 40<br />
16.2 Sentence-style capitalization ...................................................................................... 41<br />
16.3 Punctuation ........................................................................................................... 41<br />
16.4 Tooltips ................................................................................................................ 41<br />
16.5 Ellipses................................................................................................................. 41<br />
17 Offline experience........................................................................................................41<br />
18 Search .......................................................................................................................42<br />
18.1 Search in plug-ins with Lotus Expeditor and Lotus Sametime ................................................ 42<br />
18.2 Search in composite applications.................................................................................. 42<br />
19 Log-in window .............................................................................................................43<br />
20 Conclusion..................................................................................................................43<br />
21 Resources...................................................................................................................44<br />
22 About the author..........................................................................................................44<br />
23 Acknowledgements .......................................................................................................44<br />
3
1 Introduction<br />
This document provides user-interface design and interaction guidelines for designers and developers who are<br />
building any of the following types of applications using the following tools:<br />
• Lotus Notes applications (formerly called databases)<br />
• Lotus Sametime version 7.5 or later plug-ins<br />
• Lotus Symphony<br />
• Lotus Expeditor plug-ins (Lotus Expeditor a rich client based on Eclipse)<br />
• Composite applications (assembling any mixture of plug-ins, Lotus Notes applications, and components<br />
built with Lotus Component designer)<br />
This guide is intended to help ensure consistency but is not intended to be a lesson in user-interface theory or<br />
design best practices. Following the recommendations in this guide will ensure that designs are implemented in a<br />
consistent manner with an existing Lotus Notes, Sametime Connect, Lotus Symphony, or Lotus Expeditor interface,<br />
as well as plug-ins built by other developers following these guidelines.<br />
Lotus Expeditor is based on Eclipse, which has interface guidelines of its own, to which this guide occasionally<br />
refers. The guidelines for clients built with Lotus Expeditor are specific for business applications for end-user clients<br />
(as opposed to Integrated Development Environments, or IDEs). If you cannot find a guideline in this document,<br />
refer to the Eclipse guidelines. Whenever possible, we strived to make these guidelines all agree; any deviations<br />
are due to the nature of the client (that is, rich or Web) or the end user (developer, administrator, or end user).<br />
You can find the topic Developing applications with Lotus Expeditor 6.1.1 in the IBM Lotus Expeditor 6.1.1<br />
information center.<br />
1.1. Elements of the Lotus Notes 8 Client<br />
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<br />
bar (see figure 1).<br />
4
Figure 1. Elements of the Notes 8 Client<br />
1.2. Elements of the Sametime 7.5.x client<br />
The default size, shape, and location of the Sametime shell indicate that it is intended to be in the user’s peripheral<br />
vision and not the center of attention.<br />
By creating plug-ins (called “features” in Eclipse), developers can extend the Sametime Connect client to provide<br />
additional applications, features, and actions, as shown in figures 2, 3, and 4.<br />
These additional capabilities can appear in the following places in the Sametime user interface:<br />
• as Panels in the Contact List window<br />
• menus or menu items in the menu bar<br />
• additional icon columns in the Contact List<br />
• name/group context menu<br />
• system tray icon menu<br />
• chat window<br />
• chat transcript extensions<br />
• branding areas<br />
5
Figure 2. Contact List window<br />
Key:<br />
1. Extensible menu bar<br />
2. Contact names and status icons<br />
3. Plug-in application panels (“mini-apps”)<br />
4. Branding area<br />
5. Action bar<br />
6. Telephony controls<br />
7. Video controls<br />
8. Context menu<br />
9. Status bar<br />
6
Figure 3. Chat window<br />
Key:<br />
1. Extensible menu bar<br />
2. Telephony control<br />
3. Video control<br />
4. Action bar<br />
5. Branding area<br />
6. Message toolbar (an action bar)<br />
7. Status bar<br />
7
Figure 4. Extensible areas of the Chat window<br />
Key:<br />
1. Application panel<br />
2. Extension tab<br />
3. Popupextension<br />
1.3. Elements of Lotus Symphony<br />
Lotus Symphony is a large plug-in to Lotus Expeditor, just as Lotus Notes and Sametime Connect are. It includes a<br />
title bar; a menu bar with tabs for Document, Spreadsheet, and Presentation; a main data area, and properties<br />
sidebar (see figure 5).<br />
8
Figure 5. Lotus Symphony layout<br />
1.4. Elements of the Lotus Expeditor client<br />
Lotus Expeditor is intended to be an all-purpose shell. The default size and shape assume that Lotus Expeditor will<br />
take up most of the screen and be the center of the user’s attention when open. It includes a title bar, menu bar,<br />
main data area and sidebar.<br />
9
Figure 6. Expeditor Client layout<br />
1.5. Planning your application<br />
Choose the technology you’ll use based on the needs of the users and on your skill set. Table 1 is a brief<br />
comparison of the various tools and technologies you can use to build rich client applications.<br />
Table 1. Comparison of rich client tools<br />
Technology Build using Server Comments<br />
Lotus Notes applications • IBM Lotus Domino® • Lotus Domino Create database<br />
(databases)<br />
<strong>Design</strong>er<br />
applications that can be<br />
served to the Web or to<br />
the Notes client<br />
Expeditor plug-ins<br />
• Eclipse IDE<br />
• Lotus Domino<br />
Building plug-ins for any<br />
Sametime plug-ins<br />
• Rational® Application • Lotus Sametime of these is<br />
Notes plug-ins<br />
Symphony plug-ins<br />
Developer (RAD)<br />
• Expeditor toolkit<br />
• WebSphere®<br />
Application Server<br />
• WebSphere Portal<br />
technologically similar<br />
because Expeditor<br />
provides the framework<br />
for Sametime, Notes,<br />
and Symphony<br />
Composite applications • Composite Application • Lotus Domino<br />
Assemble composite<br />
Editor (to assemble • WebSphere<br />
applications from:<br />
components you’ve Application Server • Notes databases<br />
already created from a • WebSphere Portal • Expeditor-based plug-<br />
variety of sources)<br />
ins<br />
10
• Portal components<br />
• Eclipse components<br />
When planning your composite application, ensure that all components provide value at the default size in the<br />
composite application. Also make sure the visible data is clear and of value, without resizing.<br />
When building a composite application, you might consider using one of these interaction styles:<br />
• A “Web-like” (also called “one tab”) interaction model whereby only one tab is ever opened, and the contents of<br />
the tab always “overwrites" what was in the tab (see figure 7). This model does not have much of a rich client<br />
feel, so use it only if you feel strongly that the nature of the application requires it or that you need to have<br />
interaction similarity between the same application on the Web and in a rich client.<br />
• A “separate tab” approach in which each document gets its own tab.<br />
• A “hybrid” in which some composite application pages open in a new tab or window, in addition to documents<br />
(see figure 8).<br />
There is no one layout style that is better than another; it all depends on the components you are putting into your<br />
composite application and on the other applications that people are using. If it makes sense, use a consistent<br />
layout style for all your composite applications. Also, do not confuse these interaction styles with the different<br />
window management styles for which users can set a preference (see section 5.2 for more information on the<br />
different window management styles).<br />
Figure 7. Composite application interaction style – one tab<br />
11
Figure 8. Composite application interaction style – hybrid<br />
1.6. Visual style<br />
The visual style is a combination of the visual system (which is mainly defined in .css files) and the icon style.<br />
1.6.1. The visual system<br />
The visual system for Lotus Expeditor is provided through a .css file. For example, the color of the tabs and the<br />
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<br />
attributes from the .css file, depending on the technology you use to build them.<br />
The visual style for Lotus Notes 8 is defined in several different .css files (one of which is packaged in a .jar file).<br />
The two most important are Global.css and Notes.css. There is also an Activites.css for the Activities sidebar plugin.<br />
Global.css defines the following, as illustrated in figure 9:<br />
• the Open button -- shape, gradient, icon, label, hover state<br />
• the Open “menu” (also called the Open list) -- rounded edges, background, gradient or not. (You can only<br />
do top-to-bottom gradients in this release.)<br />
• tab row – color and shape of tab, the “Close” icon, hover, background<br />
• interior tabs of a composite application and the title bar of components<br />
• toolbar – the grabber, background, hover background, but not the disabled state (the icons provided by<br />
Expeditor are customizable)<br />
• Status bar (some elements use the toolbar style)<br />
12
Figure 9. Elements of the client affected by Global.CSS<br />
Notes.css defines the look of views written in Java, specifically:<br />
• Left-hand navigator (background color, selection color, and secondary selection color)<br />
• Action bar and its hover (technically, the Java view action bar is the same type of control as the toolbar)<br />
• Selection in the list view, column headers, separators between the elements (or whether you have vertical<br />
separators)<br />
• Text style, color, size<br />
• Padding, margin<br />
• Background image<br />
Nothing in the Notes forms are defined by the .css files, and none of the Notes icons in the views is defined by the<br />
.css files.<br />
1.6.2. Making your Lotus Notes application conform to the Notes 8 visual style<br />
You can give existing (or new) Lotus Notes applications (databases) a Notes 8 look by customizing the action bar,<br />
Outline view, and column headers, as shown in figures 10 through 13.<br />
Figure 10. Ideal action bar visual style<br />
13
If you are using Domino <strong>Design</strong>er to create your action bar, you won’t be able to make it look exactly like figure 10.<br />
Instead, conform to the action bar style for the Mail forms; specifically, set these properties (see figure 11):<br />
• Bar height: 10.4 Exs<br />
• Color: 239,239,239<br />
• Border style: solid color 177, 177, 210<br />
• Border effects: drop shadow, width 2, thickness 1<br />
• Button size: default<br />
• Display border on mouseover<br />
Figure 11. Action bar properties to set in Domino <strong>Design</strong>er<br />
Figure 11. Outline view visual style<br />
14
Figure 12. Column header visual style<br />
1.6.3. Icon style<br />
If you are creating new icons for the toolbar, action bar, stationery, letterhead, or any other part of the client, you<br />
must adhere to the following Icon style guidelines (see figure 14):<br />
NOTE: These are general guidelines for a 16 x16 pixel icon; larger icons may require larger shadows, inner glow,<br />
and edge.<br />
Lighting:<br />
• Light Source: 120 degrees<br />
• Shadow: 120 degrees -- Black 20% black opacity, 0% size, 0 pixel spread<br />
• Inner Glow: 1 pixel<br />
• Edge: Gradient from top left to bottom right<br />
Size requirements:<br />
• Toolbar: 16x16 png<br />
• Action bar: 18x18 gif<br />
• Tabs: 16x16 png<br />
• View Type: 12x10 gif<br />
• Status Bar: 12x10 gif<br />
• Letterhead: 65x65 gif<br />
States:<br />
• Hover: The hover effect is done programmatically on the background.<br />
• Disabled: You must provide a disabled effect. If you have Adobe Photoshop, then you can run an action. To do<br />
this, put the “create disabled.png_18x18.atn” file (see “Downloads”) in your<br />
Adobe/Photoshop/Presets/Photoshop Actions folder and select this action when you run a batch on the files<br />
that you want to make disabled. It will overwrite the file, so ensure that you save the icons in a separate<br />
disabled folder before running the batch.<br />
15
Figure 13. Summary of Icon style<br />
1.6.4. Visual style considerations for composite applications<br />
For composite applications in the Notes client, new component panels should mimic the Lotus Notes look and feel.<br />
When panels are created from pre-existing applications, this may be more difficult to achieve. Where possible,<br />
modify the application colors to coordinate with the Notes palette. Interaction patterns should follow the Notes style<br />
as closely as possible. Also, ensure that the component panels have sashes between them to allow users to resize<br />
the component panels.<br />
2 Title bars<br />
This guideline applies only if you are building a main window application (that is, not just a Lotus Notes database<br />
application). The title bar differs slightly depending on the nature of the rich client being built. In general, order the<br />
information in the title bar from most specific to least specific, ending with the name of the product.<br />
For most applications, add additional information in the title bar according to the following guidelines:<br />
[application icon]
2.1 Title bars of dialog boxes<br />
In general, the title bar of a dialog box should contain the name of the menu item or command button that launches<br />
it.<br />
2.2 Composite application component title bars<br />
Components in a composite application should adhere to the following guidelines:<br />
• Title bar panels (no tabs). Should be used when labeling the panel; helps users to understand its purpose<br />
within the composite application.<br />
• No title bar panel. Should be used when it is more important to emphasize that contiguous panels are<br />
related (part of the "same application") than it is to directly state the individual panel's function in a title bar.<br />
• Maximize and Minimize. Include this functionality for your panel when the user is likely to benefit from<br />
having the option of using a panel at full-screen size but whose default size is less than full screen within<br />
the composite application.<br />
This is particularly useful when you are reusing an application that was originally designed for full-screen<br />
use as one of many smaller panels (or functional component tabs) within a composite application.<br />
Providing a Maximize/Minimize option allows you to assign less screen real estate to the component in the<br />
default view but maintains the option for the user to work at full screen if desired.<br />
o In Lotus Notes 8.0, you cannot use a title bar panel while also displaying Minimize and Maximize<br />
buttons. (Though it is planned that, in Lotus Expeditor 6.1.2 and Lotus Notes 8.0.1, you’ll no longer<br />
have this limitation.)<br />
o Since the Maximize/Minimize functions are accessed via the title bar / tabs area, you cannot use<br />
Maximize and Minimize buttons with "No title bar" panels.<br />
• Hide Panel option. It is generally not advisable to allow users to hide panels within a composite<br />
application because it makes the application structure more difficult to support and is a potential source of<br />
user error/confusion. It is particularly important not to allow users to hide panels that are critical to the<br />
function of the application.<br />
For example, avoid allowing users to hide navigation panels. However, if an application would benefit from<br />
giving users the ability to select the visible panels (or functional components shown in a tabbed panel), it<br />
can be a useful design option. This option should be used with caution because when panels are<br />
reopened, they will not always appear in the same position they occupied when closed (this is most<br />
problematic when users can both move and hide panels, so it is not advisable to allow both). It is most<br />
appropriate for advanced user audiences.<br />
o In Notes 8.0, the Hide Panel option can be used only for functional components in tabbed panels<br />
(that is, for tabs).<br />
o It is planned that, in Notes 8.0.1, the Hide Panel option can be used for title bar panels and tabbed<br />
panels.<br />
Hiding panels:<br />
When a tab can be hidden, an "X” appears on that tab, which the user can click to hide the tab.<br />
When a title bar panel can be hidden, an "X" appears, which the user can click to hide the tab.<br />
Reopening hidden panels:<br />
In Notes 8.0, if the Hide Panel option is enabled, the application should include a panel<br />
providing the option to reopen the panel.<br />
17
It is planned that, in Notes 8.0.1, Notes will provide commands under the "View" menu on the<br />
Notes toolbar to reopen (and hide) composite application panels.<br />
Reopening hidden panels dialog:<br />
This dialog explains how to reopen a panel when the user takes an action to hide a panel. It is<br />
strongly recommended to keep this dialog, unless you have created an alternative method of<br />
reopening hidden panels as part of a panel in your application.<br />
Move Panel option. IBM does not recommend allowing users to move panels because it makes the<br />
application structure more difficult to support, relationships between panels may become unclear, and it is<br />
a potential source of user confusion. Allowing users to move panels might be useful in some applications<br />
where user control of application layout is very important item and relationships between panels are not<br />
important, however it should be used with caution.<br />
o In Notes 8.0, the Move Panel option can be used only for functional components in tabbed panels<br />
(that is, for tabs).<br />
o It is planned that, in Notes 8.0.1, the Move Panel option can be used for title bar panels and tabbed<br />
panels.<br />
3 Menu bar and menus<br />
The guidelines for menus differ depending on whether you are building the following:<br />
• Lotus Notes applications (databases) built with Domino <strong>Design</strong>er<br />
• Main window plug-ins (called “features” in Eclipse)<br />
• Sidebar or Sametime plug-ins<br />
3.1 Menus for Lotus Notes applications built with Domino <strong>Design</strong>er<br />
Domino <strong>Design</strong>er lets developers add menu items to the Create and Actions menus. Here are some guidelines to<br />
follow:<br />
• Any item (command) in the action bar should also be in the Actions menu, preferably in the same order.<br />
The Actions menu can be a superset of the items on the action bar (that is, the Actions menu can contain<br />
more commands, particularly if those commands are not used very often).<br />
• Provide mnemonics (underlined letters on the menu items) for each menu item. This is required so as to<br />
comply with keyboard-accessibility legislation in various countries.<br />
• Provide help for your application by using the following Profile documents:<br />
o About this Application<br />
o Using this Application<br />
3.2 Menus for main window plug-ins<br />
Lotus Notes and all three Lotus Symphony editors are examples of main window plug-ins. A main window plug-in is<br />
a full-featured application, as opposed to less fully featured plug-ins that might appear in the sidebar, or added<br />
functionality that might be plugged into one of the main window applications.<br />
All features of a rich client application must be available from the menu items on the menu bar so that users can<br />
find them and so that they are accessible (per various disability legislations). They can be available in other places<br />
as well, such as toolbar buttons or context menus. Making a feature “available from the menu items” includes when<br />
a menu item launches a dialog box in which that feature has properties or preferences.<br />
If you are creating a main window plug-in or a composite application, you should contribute menu items to the<br />
menu bar.<br />
18
Make the features available by using both Global Menu contributions and Local Menu contributions (partassociated<br />
action sets), per the following grid:<br />
Global Menu contributions<br />
(specific to each<br />
personality)<br />
Global menu contributions are persisted across every view of a<br />
specific personality in the Expeditor-based client. These menus<br />
should be thought of as "context free"; that is, they can be used from<br />
any context.<br />
Also, they are “retargetable” so that your product (for example,<br />
calendar) retargets menu items such as Cut, Copy, and Paste for<br />
product-specific purposes. (Retargetable means that a programmer<br />
should use the menu ID’s listed in table 2.)<br />
Part-associated action set Add your specific menus by specifying a path and global menu IDs.<br />
Most menus will be part-associated action sets, meaning that if the<br />
view associated with those menus is not in a page, those menu<br />
items should not be displayed. This means that the Mail page can<br />
have discrete menu items compared with the Documents page.<br />
Any menu bar should contain the following standard menus (use the Eclipse menu ID for them):<br />
File Edit View Actions Tools Window Help<br />
In some cases, the application might not require these menus, but if you do have them, put them in the order<br />
shown in table 2 with the associated mnemonic.<br />
Table 2. Details of menu bar items<br />
Menu item Mnemonic Details Eclipse menu ID Retargetable<br />
File F file (Eclipse) yes<br />
Edit E Hidden in XPD edit (Eclipse) yes<br />
View v com.ibm.rcp.ui.viewmenu yes<br />
group marker create_additions<br />
Actions A Hidden in base XPD com.ibm.rcp.ui.actionsmenu yes<br />
Tools o Hidden in base XPD com.ibm.rcp.ui.toolsmenu<br />
tools_additions: group<br />
marker (This is where<br />
applications can add<br />
other menus; the term<br />
"tools_additions" does<br />
not show to any user)<br />
IWorkbenchActionConstants.<br />
MB_ADDITIONS<br />
Window W Hidden in base XPD window (Eclipse) yes<br />
Help H help (Eclipse) yes<br />
3.2.1 File menu<br />
The File menu has a mnemonic of “F”. If your application uses any of the menu items listed in table 3, use the<br />
appropriate menu ID specified; for example, do not use a menu item called “Create” if “New” will suffice. Also, note<br />
that you can add completely new menu items to an appropriate place in the File menu.<br />
19
Table 3. File menu items<br />
Menu item Pull-right Mnem Shortcut Details Menu ID Retarget<br />
onic (if any)<br />
able<br />
New > N Hidden in base Expeditor<br />
This is a pull-right<br />
new (Eclipse)<br />
Open O<br />
yes<br />
This can be a pull-right com.ibm.rcp.ui.op<br />
enmenu<br />
Application > t This is a pull-right applications<br />
Reset R Hidden in Lotus Notes 8,<br />
unless it's an upgrade from<br />
Expeditor<br />
ResetPerspective<br />
group<br />
"Group marker" means applicationEnd<br />
marker<br />
additional menu items go<br />
here<br />
-----------------<br />
--<br />
separator<br />
group<br />
marker<br />
additions<br />
Install I Hidden in Lotus Notes 8,<br />
unless turned on specifically<br />
install<br />
Application A Hidden in Lotus Notes 8, management<br />
Management<br />
unless turned on specifically<br />
Close C close (Eclipse)<br />
Save S CTRL + S Hidden in Expeditor save (Eclipse) yes<br />
Save As... A Hidden in Expeditor<br />
add other menu items after<br />
Close<br />
You can add separators<br />
saveAs (Eclipse) yes<br />
------------- Hidden in Expeditor<br />
Separator<br />
Print…<br />
Ctrl+P<br />
P Ctrl+P Hidden in Expeditor print (Eclipse) yes<br />
Properties e Hidden in Expeditor<br />
Group marker: prefStart<br />
properties<br />
(Eclipse)<br />
yes<br />
Preferences…<br />
f preferences<br />
.<br />
Group marker: prefEnd<br />
(Eclipse)<br />
Close All C<br />
This should be provided by<br />
Expeditor as part of the<br />
platform menus.<br />
closealltabs yes<br />
Shut Down<br />
u Visible in Restricted mode<br />
System<br />
only, Not visible in Expeditor,<br />
Sametime or Lotus Notes 8<br />
Log Off f Visible in Restricted mode<br />
only, Not visible in Expeditor,<br />
Sametime or Lotus Notes 8<br />
Exit x not visible in "restricted/lock<br />
down" mode of Expeditor<br />
quit (Eclipse)<br />
20
3.2.2 Edit menu<br />
The Edit menu has a mnemonic of “E”. If your application uses any of the menu items listed in table 4, use the<br />
appropriate menu ID specified. You can add completely new menu items to an appropriate place in the Edit menu.<br />
Lotus Expeditor does not display the Edit menu.<br />
Table 4. Edit menu item details<br />
Menu item mnemonic Shortcut<br />
(if any)<br />
Details Eclipse menu ID Retargeta<br />
ble<br />
Cut t CTRL+X cut (Eclipse) yes<br />
Copy C CTRL+C copy (Eclipse) yes<br />
Paste p CTRL+V paste (Eclipse) yes<br />
Select All L (the first l in All) CTRL+A selectall (Eclipse) yes<br />
Delete D Del key delete (Eclipse) yes<br />
3.2.3 View menu<br />
The View menu has a mnemonic of “V”. If your application uses any of the menu items listed in table 5, use the<br />
menu ID specified. You can add completely new menu items to an appropriate place in the View menu. IBM<br />
recommends that you add them at the top, so that the menu items listed in table 5 are always at the bottom of the<br />
menu.<br />
Table 5. View menu item details<br />
Menu item submenu mnem Shortcut Details Eclipse menu ID<br />
onic (if any)<br />
Toolbar > This can be a pull-right. Even com.ibm.rcp.ui.toolbars<br />
if the pull-right has several<br />
items, keep it singular.<br />
menu<br />
Show > w Pull-right.<br />
com.ibm.rcp.ui.showme<br />
Mnemonics might be<br />
different from Expeditor,<br />
Notes, and Sametime.<br />
nu<br />
Sidebar -> a<br />
Open O These are “radio button<br />
choices” (not in Sametime)<br />
Thin T<br />
Closed C<br />
Sidebar Panel1 P In Sametime, these are called<br />
Panels-><br />
“Application Panels” com.ibm.rcp.ui.sidebar<br />
menu<br />
Panel 2, etc.<br />
3.2.4 Create menu<br />
If you want your plug-in to contribute a Create menu item, put it in this location. Lotus Expeditor does not display<br />
this menu.<br />
3.2.5 Actions menu<br />
If you want your plug-in to contribute an Actions menu item, put it in this location. Lotus Expeditor does not display<br />
this menu.<br />
3.2.6 Tools menu<br />
The Tools menu must have a mnemonic of “o”.<br />
21
3.2.7 Window menu<br />
If your application uses the window menu, it must have a mnemonic of W and it must list all open windows (tabs;<br />
see table 6). The menu can also contain other menu items. Lotus Expeditor does not display this menu.<br />
Table 6. Window menu items<br />
Menu item mnemonic Shortcut Details Menu ID<br />
Show Thumbnails<br />
<br />
b CTRL +<br />
SHIFT + T<br />
Not in Sametime com.ibm.rcp.ui.history<br />
3.2.8 Help menu<br />
Provide Help for your application or plug-in. The Help menu must have a mnemonic of H. If your application uses<br />
any of the menu items in table 7, use the menu ID specified.<br />
Table 7. Menu items and their IDs<br />
Menu item Mnemonic Shortcut Details Menu ID<br />
Dynamic Help C F1 Eclipse menu ID<br />
---------------- separator<br />
About ... A about<br />
IBM Support Assistant I com.ibm.esupport.cli<br />
ent.Browser<br />
3.2.9 Icons in the menus<br />
Some menu items have corresponding toolbar buttons. If there is a corresponding toolbar button with an icon,<br />
display the icon to the left of the menu item in the menu. If there is no corresponding toolbar button, leave the area<br />
to the left of the menu item blank.<br />
3.2.10 Part-associated action set menu contributions<br />
In addition to having the global menus, Lotus Notes and Lotus Sametime contribute their own menu items on the<br />
existing File, Edit, View, Actions, Tools, Window, and Help menus and can also contribute entire menus to the<br />
menu system. A plug-in that you write can do the same.<br />
As an integration platform, the Actions menu and the Tools menu should change based on what “application”<br />
(usually a tab) has focus.<br />
Make entire menus show or hide based on the Eclipse View/application. For example, the Format menu appears<br />
only when one of the Lotus Symphony editors, such as Spreadsheet, has focus and is in edit mode.<br />
If an application/plug-in is not installed (or disabled by the administrator), then all the menu items associated with<br />
that feature must be hidden. For example, if the Composite Application Editor is not installed, then none of its<br />
associated menu items should appear.<br />
The administrator can enable or disable groups of features by using Desktop Policies. For example, the<br />
administrator can disable the ability to use macros in Lotus Symphony. In that case, all menu items relating to the<br />
use of macros must be hidden. If you write an application or plug-in that lets the administrator to disable part of it,<br />
ensure that the corresponding user interface elements (menu items, icons, preferences) are hidden.<br />
3.3 Menus for sidebar or Sametime plug-ins<br />
The nature of the plug-in determines whether you provide menus or menu items. In most situations, add menu<br />
items to the Panel menu, which is found on the title bar (see figure 15).<br />
22
Figure 14. Activate the Panel menu by clicking the left-hand icon<br />
The Panel Menu contains generic menu contributions provided by the Expeditor platform. Add menu items to the<br />
top of the Panel menu, as shown in figure 16.<br />
Figure 15. Add menu items to the top of the Panel menu<br />
In other cases when the plug-in has a great deal of functionality (especially when users are accustomed to using it<br />
in another context with menus), contribute menu items to the appropriate menu in the main menu bar, and put the<br />
menu items in a pull-right with the name of the plug-in. For example, the Sametime plug-in contributes some menu<br />
items to the View menu and to the Edit menu. The Sametime pull-right in the View menu is shown in figure 17.<br />
23
Figure 16. The Sametime plug-in contributes a pull-right to the View menu<br />
To achieve keyboard accessibility, retarget the File – Open – Selected Item menu item so that, when an item (or<br />
items) in your sidebar panel is selected and a user chooses this menu item, the items selected in the sidebar panel<br />
open. For example, if the user selects a meeting in the sidebar calendar and then chooses File – Open – Selected<br />
Item, the selected calendar entry is opened, as shown in figure 17.<br />
Figure 17. Retarget the File – Open – Selected Item menu item<br />
3.4 Menus for composite applications<br />
Composite applications are made up of various component panels on a page. One component panel could be a<br />
Notes application while another could be an Eclipse plug-in. Ideally, the component panel that has focus should<br />
contribute menu items to the appropriate menus. If your composite application has one or more Notes applications,<br />
then contribute actions to the Actions menu when you create your Notes application. The Composite Application<br />
Editor does not yet allow you to contribute menu items to the menu bar.<br />
If you provide a title bar for the component panel, contribute menu items to the panel menu, similar to the way you<br />
add menu items to a sidebar panel (recall Figure 15). If you do not use a title bar on the component panel, then<br />
provide an action bar to access any needed panel actions. Users can access system actions by using ALT + -.<br />
24
(System actions include maximize, minimize, restore, and close, depending on what has been enabled for the<br />
component).<br />
4 Context menus<br />
Provide context menus on objects. IBM also recommends that any context menu item also be a menu item on one<br />
of the menus in the menu bar as well.<br />
4.1 Context menu details for Lotus Notes 8<br />
Lotus Notes core provides a standard set of context menu items for different interface objects (for example, a view<br />
or a document). IBM recommends that you add application-specific context menu items to the standard set.<br />
The standard set might not always be appropriate for a context menu. In Domino <strong>Design</strong>er 8.0, developers can<br />
remove the standard context menu items for documents in a view. If you do that, you can then put your applicationspecific<br />
menu items at the top of the context menu, and then add back any of the standard menu items that are<br />
appropriate for that view.<br />
IBM recommends that you include any application-specific context menu items either in the Create or Actions menu<br />
as well, because it is generally not acceptable user experience to provide a menu item only in a context menu.<br />
For more information on how to customize the context menus, refer to the Domino <strong>Design</strong>er 8.0 online<br />
documentation topic Creating a form, subform, page, or view action.<br />
Use the following guidelines to help you determine whether you should put a command on the action bar or in a<br />
context menu (in addition to having it in the Create or Actions menu, of course).<br />
• Put a menu item in the context menu when the actions change based on the object that is selected. For<br />
example, the context menu for an embedded picture might be entirely different than the context menu for a<br />
selected word.<br />
• Put a button in the action bar when the actions will be appropriate most of the time in the view or document.<br />
In general, the actions should depend on what is selected.<br />
5 Open button and tab labels<br />
The Expeditor client provides an Open button (launcher) to launch various applications. Lotus Notes 8 and Lotus<br />
Symphony use this Open button, but Lotus Sametime does not, given the nature of that application. Instead, Lotus<br />
Sametime uses a different “personality” that does not have an Open button.<br />
5.1 Open button (launcher)<br />
Users click the Open button to see a list of applications, and they can add applications to the list as a bookmark.<br />
Each application in the Open list should have:<br />
• A 16x16 icon (preferably in .png format). For more information on designing icons that conform to the<br />
Expeditor, Notes, and Sametime styles, refer to Section 1.6.3.<br />
• A label. Use “title capitalization”, that is, capitalize the first letter of each word except for prepositions fewer<br />
than 5 letters. (It is understood that other items on the Open list might not follow this convention because<br />
they could be document or view names.)<br />
5.2 Tabs and tab labeling in the various window management models<br />
Lotus Expeditor and Lotus Notes provide three different window management models. Users can set a preference<br />
for which window management model they want to us by choosing Preferences – Windows and Themes.<br />
Administrators can also use a Desktop Policy to set the window management model for users.<br />
25
The three different window management models are:<br />
• Open each document in its own window<br />
• Open each document in its own tab<br />
• Group documents from each application on a tab<br />
All three models have tabs. By default the tab label is the name of the Eclipse perspective, but you can override the<br />
default perspective.<br />
As an application designer or builder, you shouldn’t need to worry about the window management models.<br />
However, you do need to worry about the labeling of the tab (or the title bar, depending on the window<br />
management model used.)<br />
Label the tabs (title bars in individual mode, tab menu items in grouped mode) as follows:<br />
• If the tab represents a list, make the tab name the same as the List name, for example,<br />
o Inbox<br />
o Calendar<br />
o Favorite Document Links<br />
• If the tab is a new document that has not been saved, then make the label “New,” for<br />
example:<br />
o New Message,<br />
o New Meeting,<br />
o New Spreadsheet.<br />
o If the tab is a document that has been saved (or received if it’s mail), then make the label the<br />
subject or name of the document. Lotus Expeditor will truncate it if necessary.<br />
• A saved document should have the name of the document.<br />
• There can be exceptions to this rule; for example, the tab label for a canceled meeting is<br />
“Canceled:”.<br />
The following are handled by the Expeditor theme:<br />
• Tab width (the maximum tab width is approximately 35 characters and the minimum is 3). An overflow<br />
control appears automatically if necessary.<br />
• Hover behavior (hover should show the full name of the item that the tab represents)<br />
• Returning focus to the last tab (in that Eclipse perspective) when users close a tab.<br />
6 Toolbar<br />
The guidelines for toolbars differ depending on whether you are building the following:<br />
• Lotus Notes application (database),<br />
• Main window plug-ins and composite applications (Eclipse features), or<br />
• Sidebar or Sametime plug-ins<br />
6.1 Toolbar for Lotus Notes applications<br />
Developers have little control over the toolbars in Lotus Notes. In Lotus Notes 8, the toolbars that are on by default<br />
have been changed so that none of the static toolbars are on; only the context-sensitive toolbars are on. The<br />
context-sensitive toolbars for the client (not including Domino <strong>Design</strong>er or the Administration client) are:<br />
26
• View<br />
• Document in read mode<br />
• Document in edit mode<br />
• Workspace<br />
• Replication<br />
Several buttons have been added to the context-sensitive toolbars; specifically, Cut, Copy, and Paste have been<br />
added to the context-sensitive document-editing toolbar. Most business end-users should not need to turn on the<br />
static toolbars. If you deployed any custom toolbars, those toolbars are retained.<br />
Note that Lotus Notes applications generally make use of action bars rather than the toolbar.<br />
6.2 Toolbar for main window plug-ins and composite applications<br />
Main window plug-ins (including Components and composite applications) can (but do not necessarily need to)<br />
contribute to the toolbar. Any item on the toolbar must be a repeat of a menu item, and toolbar items must be<br />
frequently used actions. Do not overuse toolbar buttons.<br />
The Toolbar contribution model for Lotus Expeditor is similar to the Menu contribution model. Global toolbar items<br />
are provided by the platform. If you want to use a specific toolbar button (such as Cut or Copy), your application<br />
may have to retarget them. Each application should hide each global toolbar item as necessary. In addition, each<br />
application can add more toolbar buttons, or even an entire row of toolbar buttons.<br />
There are two extension points available to add a toolbar. IBM recommends that you use the second one, the<br />
Expeditor controlSet:<br />
• Eclipse actionSet<br />
o Developers can add simple toolbar buttons, such as press, check/toggle, radio, and drop-down buttons.<br />
o It does not add the label for the toolbar to the toolbar context menu<br />
o Developers can show/hide a toolbar for all the windows, not per window.<br />
• Expeditor controlSet<br />
o Developers can add arbitrary SWT controls, for example, font drop-downs, the search toolbar, and so<br />
on.<br />
o It adds the label for the toolbar to the Toolbar context menu, as shown in figure 18.<br />
o Developers can set or unset the label for the toolbar (in the context menu) per window at runtime.<br />
o Developers can show or hide a toolbar per window at runtime.<br />
27
Figure 18. Use the Expeditor controlSet to automatically list your toolbar in Toolbar context menu<br />
In composite applications, the toolbar contributions should be context-sensitive and thus ideally should be enabled<br />
or disabled per page (not just per component).<br />
In the case of composite applications, consider using a "component action bar" rather than adding to the toolbar.<br />
(The component action bar is within the component rather than up at the main toolbar). Section 7.2 below provides<br />
further information on component action bars.<br />
6.3 Toolbar for sidebar or Sametime plug-ins<br />
The nature of the sidebar panel or Sametime plug-in should determine whether you provide a toolbar. Use toolbars<br />
sparingly because they take up valuable screen real estate.<br />
The items on a toolbar in a sidebar panel or in a Sametime plug-in should be repeats of items in the panel menu.<br />
For more about the panel menu, refer back to Section 3.3. (IBM is aware that some of the Notes sidebar panels do<br />
not adhere to this guideline.)<br />
7 Action bar<br />
The purpose of the action bar is to provide quick access to commonly used actions/commands. Commands on the<br />
action bar must be repeats of items on the Menu bar (or something in a dialog box that you get to from a menu<br />
item).<br />
Use an action bar rather than a toolbar in the following circumstances:<br />
• When a plug-in is a component in a composite application<br />
• When building a Lotus Notes application (mainly because the Domino designer technology does not yet<br />
allow you to easily contribute to the toolbar)<br />
7.1 Action bar as part of a Lotus Notes application<br />
Views and documents (forms) can have an action bar if the designer thinks it is appropriate. Commands on the<br />
action bar must be repeats of items on the menu bar (or something in a dialog box that you get to from a menu<br />
item).<br />
The general order of items on the action bar could be as follows, from left to right (see figure 19):<br />
28
• New/Create<br />
• <br />
• A “More” button (if it is necessary to add miscellaneous items that do not all fit separately. IBM<br />
recommends that you put these miscellaneous items on the Actions menu in a consistent way so that users<br />
start to look there more often.)<br />
• Lotus Sametime integration<br />
Right-justify the following item on the action bar, if present:<br />
• Show <br />
Ideally, all action bar items should fit on the visible area of the action bar.<br />
Figure 19. Recommended order of the action bar<br />
7.2 Action bar in a component in a composite application<br />
A composite application is made of several components. Each component can have a component action bar, or<br />
only certain components might have an action bar. Use the component action bar if the button clearly applies only<br />
to that component. For example, text-editing toolbar buttons are best located at the top rather than repeating them<br />
in every component that might use rich text editing.<br />
8 Views and folders<br />
The guidelines for views and folders differ depending on whether you are building<br />
• a Lotus Notes application (database) or<br />
• main window plug-ins and composite applications (Eclipse features).<br />
8.1 Views and folders for Lotus Notes applications<br />
IBM recommends that you use an outline for navigating between views and folders, conforming to the following<br />
rules:<br />
• The name of the application is at the top, left-justified (in left-to-right languages), and 4 points larger than<br />
the text and bold.<br />
• The server replica is next (also left-justified).<br />
• The application icon is optional, but if you include it, left-justify the icon next to the application name and put<br />
the replica name under the title, as shown in figure 20.<br />
• The most important or most frequently used view or folder is at the top.<br />
29
Figure 20. Navigator title and replica (icon is optional)<br />
Put actions in the Actions menu and action bar. Do not put actions in the outline unless the action is directly related<br />
to one of the views or folders (see figure 21).<br />
Figure 21. Actions in an outline should relate directly to a view or folder<br />
8.2 Views and folders for main window plug-ins and composite<br />
applications<br />
Refer to the Java documentation in the Expeditor toolkit for more information.<br />
The APIs for the Navigator and the preview pane are not yet available.<br />
For composite applications, items in the navigator can, but do not have to be, preceded by an icon. If you use an<br />
icon, it should be 16x16 pixels. Table 8 provides suggestions for how to best design for navigation between pages<br />
and views.<br />
Table 8. <strong>Design</strong> suggestions for navigating between pages and views<br />
To allow users to navigate Do this<br />
between pages<br />
In Mail, Calendar, and Contacts, use tabs at the top<br />
between views<br />
between different pages<br />
Use a “navigator”; in Domino <strong>Design</strong>er, use an outline.<br />
This means that you might end up with two navigators<br />
next to each other (the view and the page)<br />
Put buttons across the top (you must create your own<br />
Eclipse component to do this).<br />
9 The sidebar<br />
The sidebar is divided into separate panels. Lotus Expeditor provides the look and feel of the sidebar, in general,<br />
and of the title bar (without the title) of each panel. Each application owns the look and feel and content of the rest<br />
of the panel.<br />
9.1 Guidelines for each panel<br />
Each panel should follow a few simple guidelines:<br />
30
• Have a consistent "inner" margin on all four sides<br />
• The panel can have a toolbar if it makes sense to take up screen real-estate with it.<br />
• The nature of the interaction within each panel depends on the kind of data; that is,<br />
o RSS feeds and the like should look and act like the Web (with underlined links for which single<br />
clicking accomplishes an action.)<br />
o Other data might have a more traditional G<strong>UI</strong> interaction/feel.<br />
o Some data might just be textual information.<br />
o Some data might be in a table or grid layout.<br />
For details on contributing to the “panel menu” in the title bar of a sidebar panel, refer to Section 3.3.<br />
9.2 Offline experience for the sidebar<br />
If users choose to work offline, some of the data in some of the panels might not be available. Each contribution<br />
needs to take care of what happens inside the panel when they are working offline.<br />
If the data is not available offline, the title bar and all data and controls inside it must be disabled.<br />
10 Chat window extensions<br />
Plug-ins may add application panels to the left side of the chat window. The participant list of a multi-party chat is<br />
an example of how these panels appear.<br />
Plug-ins creating new application panels on the left side of the chat window should do so when the intention is to<br />
have a persistent component that must be present for the duration of the chat. The plug-in should define a panel<br />
name and a 16x16 icon, if it contributes to this space. Components that are intended to display temporarily should<br />
not use this mechanism; instead, they should be created as Extension tabs or Pop-up extensions.<br />
10.1 Extension tabs<br />
Plug-ins may add additional tabs appearing on the top-right portion of the chat window, above the user information<br />
of the chat transcript area (recall Figure 3. Chat window item 2). When a plug-in adds to this area, the chat<br />
transcript/compose area appears in one of these tabs, and the new plug-in appears as another. For example, if a<br />
larger application area is desired, in which the user can alternate between the application and the chat, then a plugin<br />
could write a new tab component, and the chat transcript would appear in an adjacent tab.<br />
Plug-ins creating new tabs on the top right of the chat window should do so when the intention is to have a<br />
persistent component that needs to be present for the duration of the chat. The plug-in should define a tab name<br />
(no icon) if it contributes to this space.<br />
10.2 Pop-up extensions<br />
Plug-ins may contribute to the space below the message compose area in the chat window, as shown in Figure 3.<br />
Chat window . The file transfer interface is an example of this. A plug-in may contribute to this space as well. If two<br />
or more components are active in this space at a time, they appear in tabs, ordered left to right by the first one to<br />
open in that space. If two tabs are present in the space, and one tab is closed via an action within the tab<br />
component, or by the component automatically ending, then the remaining component switches to display without a<br />
tab.<br />
Plug-ins contributing below the text input area of the chat window should do so when the intention is to have a<br />
temporary component that needs to be present for a limited time to perform a specific action or event. For example,<br />
file transfer uses this space. The plug-in should also define a tab name (no icon) if it contributes to this space, in the<br />
event that two components operate in this space at the same time.<br />
31
Components that are intended to display for the duration of the collaboration should not use this mechanism, and<br />
should be created in left side application panels, or chat window persistent tabs instead.<br />
10.3 Contact list icons<br />
You can add columns to the Contact List window to display additional information (in text or icons) provided by your<br />
plug-in. For example, your plug-in may be able to detect whether a user has telephony capabilities, and you may<br />
wish to show icons to indicate various states for a user’s telephony status (such as “available to call” or “on the<br />
phone”.) These icons should have ALT (hover) text and be no larger than 16x16 pixels.<br />
11 Preferences<br />
The guidelines for menus differ depending on whether you are building the following:<br />
• Lotus Notes application (database)<br />
• Main window plug-ins (Eclipse features)<br />
• Sidebar or Sametime plug-ins<br />
11.1 Preferences for Lotus Notes applications<br />
In Lotus Notes 8, the preferences for individual templates cannot yet be contributed to the consolidated preferences<br />
tree. If you provide preferences, put a Preferences… menu item in the Actions menu. If you feel that it is necessary,<br />
put a Preferences… action bar button in the action bar as well.<br />
11.2 Preferences for plug-ins<br />
Users must be able to access the preferences using the Preferences… menu item on the File menu. You can also<br />
allow users to access the Preferences menu from a context menu item, link, or button in given situations.<br />
Ensure that your preferences pages do the following:<br />
Use the preferences <strong>UI</strong> to expose any plug-in-specific preferences.<br />
Add to the one Preferences tree.<br />
If your plug-in contributes multiple pages of preferences, group those pages under one heading in the tree<br />
control on the left-hand side (so that they are not interspersed with preferences from other plug-ins). For<br />
example, when Sametime is its own client, the preferences are listed separately, but when Sametime is in<br />
Lotus Notes, all the Sametime preferences are grouped under Sametime, as shown in figure 22.<br />
The top of each preferences page has a banner. Make the label on the banner a repeat of the words that<br />
are selected in the left-hand tree.<br />
Use group boxes to separate areas, if you feel that grouping is necessary. Group box headings should be<br />
initial capital letter only, meaning the only the first letter of the first word is capitalized, except for proper<br />
nouns.<br />
Begin each preferences page with a sentence describing an overview of what the user can do.<br />
Put a colon after field labels and follow capitalization and punctuation guidelines.<br />
Always provide the "Restore Defaults" and "Apply" buttons in the lower right portion. (These buttons are<br />
provided by the Eclipse Preferences framework, so you get them automatically.) You can add other<br />
command buttons as necessary.<br />
32
Figure 22. Multiple preference pages from the same plug-in grouped as in Lotus Sametime<br />
12 Dialog boxes<br />
There are currently many different styles of dialog boxes throughout Lotus Expeditor, Lotus Notes, and Lotus<br />
Sametime due to the many different technologies used to build them. It is not expected that you re-design existing<br />
dialog boxes; however, for any new dialog boxes that you do create, please follow the guidelines in this section.<br />
For left-to-right languages, design your dialogs so that they flow from top to bottom, left to right. Do not rely only on<br />
the “X” in the title bar for users to close or cancel a dialog—always provide a Cancel button as well.<br />
Place command buttons at the bottom right or the top right, as shown in figures 23 and 24.<br />
33
Figure 23. Command buttons in the lower right<br />
Figure 24. Command buttons can also be placed in the upper right<br />
Ensure that users can get to every control in the dialog box without using the mouse (to ensure keyboard<br />
accessibility and to conform to accessibility legislation):<br />
• Check that users can use the Tab key to move throughout the dialog<br />
• Provide mnemonics for all labels (except OK and Cancel; OK should map to the Enter key, and Cancel<br />
should map to the Escape key.)<br />
12.1 Dialog boxes built with Domino <strong>Design</strong>er<br />
Domino <strong>Design</strong>er does not support the creation of Group boxes, so try to use space to delineate groups. If you feel<br />
that a Group box would help users with your dialog box, place the Group box labels above the Group box as shown<br />
in figure 25.<br />
34
Figure 25. Labels placed above the Group box in Domino <strong>Design</strong>er<br />
12.2 Dialog boxes in plug-ins<br />
Some of the guidelines are specific to the technology used to build them. Use Group boxes sparingly, and when<br />
you do, provide a label for the group in blue text, not bold (see figure 26). Also, try to use blank space / white space<br />
to delimit groups, if you can, since Group boxes can add visual clutter (see figure 27).<br />
35
Figure 26. Avoid unnecessary use of Group boxes<br />
36
Figure 27. Proper use of Group boxes<br />
13 Properties<br />
If your plug-in has properties, allow users to access those properties from a Properties menu item on the File menu.<br />
The Properties menu item can be available on a context menu as well.<br />
For plug-ins, use the Properties dialog provided by Lotus Expeditor (it is a Modal dialog).<br />
37
14 Status bar<br />
The status bar for the Lotus Expeditor, Sametime, and Symphony products should be ON by default. Applications<br />
can contribute messages to the message area of the status bar. Be sure not abuse the status bar; it is for status<br />
only. Ensure that important actions are available from the menu bar.<br />
Put a message in the status bar when the message is informational only, for example, a confirmation that a person<br />
has been added to your Contacts list.<br />
Pop up a dialog box when the message informs users of lost data or potential lost data, or some other failed<br />
operation, such as a mail compaction failure.<br />
15 Messages – Info, Warning, Error<br />
When it is feasible, use the “standard message dialogs” from MessageDialog, org.eclipse.jface.dialogs. Be<br />
prepared, however, to create custom message dialogs if the situation calls for more or different command actions.<br />
15.1 General guidelines for error messages<br />
Use the guidelines below when creating error messages.<br />
• The title on all message boxes should be the name of the application or plug-in, unless the error comes<br />
from Lotus Expeditor, in which case the title bar should state something about the component that threw<br />
the error, for example, “Synchronization”. An example of an application title bar would be:<br />
o IBM Lotus Sametime<br />
o IBM Symphony Document<br />
o IBM Lotus Notes<br />
• The first line or sentence must state what went wrong. Use full sentences and sentence punctuation.<br />
o For example, “The message is not addressed to anyone.”<br />
• The second line or sentence must tell the user what to do about it, using a full sentence and sentence<br />
punctuation.<br />
o For example, “Type the names of one or more recipients for this message.”<br />
• Each error message must make a sound when it is displayed (for accessibility reasons). Use a default<br />
system beep.<br />
• Error messages can be modeless or modal.<br />
• If your organization insists that an error message must have a number on it, put the number under the<br />
message (see figure 28). Starting an error message with a number is not helpful to end users.<br />
• A modeless error message lets the user continue to interact with the application, for example, open other<br />
documents.<br />
• A modal error message requires the user to respond to the error dialog before continuing to use the<br />
application.<br />
Figure 28. Sample error message with error message number<br />
38
15.2 Specific message types<br />
Table 9 outlines the various message types and when to use them.<br />
Table 9. Details of message types<br />
Condition Sample<br />
Information<br />
Filename: Infomessageweb.gif<br />
To provide information about the<br />
results of a command. Users can<br />
only acknowledge the message.<br />
Title = name of the application.<br />
Note that in the future this might<br />
change to the name of the plug-in<br />
(from the user’s point of view, for<br />
example, Mail, Calendar, Instant<br />
Messaging)<br />
Information messages are often<br />
modeless; however, use your<br />
judgment as to whether the user<br />
must respond to the error before<br />
being allowed to interact with the<br />
rest of the application.<br />
Warning<br />
Alerts the user to a condition that<br />
requires a decision before<br />
proceeding.<br />
In many cases you need to add<br />
buttons here to support the Yes,<br />
No, and Yes, No, Cancel<br />
conditions.<br />
Warning messages are usually<br />
modal; that is, the user must<br />
respond before continuing to<br />
interact with the application.<br />
Critical<br />
Informs the user of a serious<br />
problem that prevents them from<br />
continuing their work.<br />
Critical error messages are always<br />
modal.<br />
MessageDialog.openInformation(parent.getShell(), "Info<br />
TitleApplicationName", "Info Message");<br />
Filename:Warningmessageweb.gif<br />
MessageDialog.openWarning(parent.getShell(), "Warning Title",<br />
"Warning Message");<br />
Filename:errormessageweb.gif<br />
MessageDialog.openError(parent.getShell(), "Error Title", "Error<br />
Message");<br />
39
Question<br />
DO NOT USE<br />
Reason: We want to keep a clear<br />
three-level message model. That is,<br />
Info<br />
Warning<br />
Error<br />
A question is just an attribute of the<br />
Warning type.<br />
Confirm<br />
DO NOT USE<br />
Reason: Same reason as that for<br />
Question.<br />
15.3 Confirmation of deletions<br />
MessageDialog.openQuestion(parent.getShell(), "Question Title",<br />
"Question Message");<br />
MessageDialog.openConfirm(parent.getShell(), "Confrim Title",<br />
"Confirm Message");<br />
When you confirm the deletion of anything, use the following wording, ensuring that you provide specific Yes and<br />
No options (rather than OK and Cancel), and making “No” the default:<br />
Do you want to permanently delete <br />
[ Yes ] [ No ]<br />
16 Capitalization and punctuation<br />
Both headline-style capitalization and sentence-style are used, depending on the item. For the most part, these<br />
guidelines also agree with the IBM Web Interface Style Guidelines, so that if you are designing for both the Web<br />
and rich client, consider using the same properties file.<br />
16.1 Headline-style capitalization<br />
Use headline-style capitalization for the following:<br />
• Menus and menu items<br />
• Tooltips<br />
• Command buttons (push buttons)<br />
• Titles, including:<br />
o Title bars, window titles<br />
o Dialog title bars<br />
o Tabs<br />
Headline-style capitalization means capitalize the first letter of each word, except for:<br />
• Articles such as “a”, “an”, and “the”<br />
• Short prepositions (five or fewer letters) such as “for”, “in”, “of”, “on”, “to”, when these prepositions are<br />
between two words. (For example, in the case of Save As… and Save as Draft…. “as” is capitalized in the<br />
first instance because it is the last word.)<br />
• Do not include ending punctuation.<br />
40
16.2 Sentence-style capitalization<br />
Use sentence-style capitalization for all labels in a window or dialog, including labels for the following:<br />
• Check boxes<br />
• Radio buttons<br />
• Group box (or group bar) titles<br />
• Simple text fields<br />
Sentence-style capitalization means capitalize the first letter of the first word and any proper nouns such as “Lotus”.<br />
Refer back to Figure 27. Proper use of Group boxes for good examples of sentence-style capitalization in field<br />
labels.<br />
16.3 Punctuation<br />
Put a colon at the end of labels for controls in a form or dialog, as shown in figure 28. Terminate full sentences<br />
(such as those in error messages) with the appropriate punctuation, such as a period, exclamation point, or<br />
question mark, except for full sentences used in check boxes and radio buttons.<br />
Figure 28. Use colons after labels<br />
16.4 Tooltips<br />
You must provide tooltips for visual elements that have no text labels. You do not need to create tooltips for visual<br />
elements with text labels. Do not use terminating punctuation for tooltips.<br />
16.5 Ellipses<br />
For menu and action bar items, use ellipses (three periods at the end of the text) when the item launches a dialog<br />
that requires user input (just clicking an OK button does not count). Do not use ellipses when the item brings up a<br />
new Tab.<br />
17 Offline experience<br />
If you build a Notes application, then Lotus Notes takes care of any user interface and offline experience, including<br />
the ability to make a local replica.<br />
However, if you are building a feature, plug-in, or composite application, you should provide a user interface for<br />
taking it offline (if it can be taken offline.). Specifically, provide the menu item “Make Available Offline…” from the<br />
File – Applications menu (refer to the Menu section for more information.)<br />
You can also provide other buttons or means to let users take the application offline.<br />
You must also have your feature or plug-in listen for whether the platform is online or offline. Refer to the Expeditor<br />
information center for more details.<br />
41
18 Search<br />
Provide a mechanism to search the data in your application, if you can.<br />
18.1 Search in plug-ins with Lotus Expeditor and Lotus Sametime<br />
Lotus Expeditor does not turn on a search control by default, but there is an extensible search control (called the<br />
search center) that you can put in the toolbar, on the far right-hand side (Lotus Notes uses it). The search center<br />
can automatically change the scope of a search based on the application that currently has focus.<br />
You can also add new search scopes or choices (such as Yahoo or Google Web Search) to the drop-down control,<br />
as shown in figure 29.<br />
Figure 29. Extensible search choices in the Search drop-down<br />
18.2 Search in composite applications<br />
Users should be able to search composite applications. Since neither the Expeditor platform nor Sametime<br />
provides a truly federated search, use the "search center" in the toolbar to default to the current component that<br />
has focus, to the "All things" view if it exists.<br />
In addition, provide an option for the view that currently has focus (if it is indeed a view) and also list each of the<br />
components explicitly in the search drop-down because it is not obvious to users of a composite application that<br />
they need to put focus on a component to then search it.<br />
For example, suppose that you have a sales leads application in which there are three components, called<br />
Accounts, Leads, and History. When the user has focus on Accounts, then Accounts will be the default search, but<br />
the others should be listed as search choices as well (see figure 30).<br />
42
Figure 30. Composite applications should list each of the components available to search<br />
19 Log-in window<br />
If your plug-in requires authentication, make the log-in dialog box a maximum image width of 393 pixels, with a<br />
maximum area height of 42 pixels.<br />
Note that this area may become wider on different operating systems, so code the layout for this case, and follow<br />
the basic layout illustrated in figure 31 (note the labeling and punctuation).<br />
Figure 31. Put the user name first, followed by the password<br />
20 Conclusion<br />
The key principles covered in this white paper are you can provide a better user experience by creating the<br />
following:<br />
• Action bars that follow the recommended visual style and order of actions<br />
• Outline views that have application titles<br />
• Outline views that follow the recommended visual guidelines<br />
• Dialog boxes and message boxes that conform to the suggested style<br />
Note that Appendix A provides a convenient checklist to ensure your plug-ins are consistent.<br />
43
21 Resources<br />
• Eclipse user Experience 3.0 best practices:<br />
http://wiki.eclipse.org/index.php/<strong>UI</strong>_Best_Practices_v3.x<br />
• Lotus Expeditor information center:<br />
http://publib.boulder.ibm.com/infocenter/ledoc/v6r11/index.jsp<br />
• Lotus Notes and Domino 8 technical content:<br />
http://www-128.ibm.com/developerworks/lotus/notes/?S_TACT=105AGX13&S_CMP=LPLOTUS<br />
• developerWorks product page for Lotus Notes and Domino:<br />
http://www.ibm.com/developerworks/lotus/products/notesdomino/?S_TACT=105AGX13&S_CMP=LP<br />
• developerWorks product page for Lotus Expeditor:<br />
http://www.ibm.com/developerworks/lotus/products/expeditor/?S_TACT=105AGX13&S_CMP=LP<br />
• developerWorks product page for Lotus Sametime:<br />
http://www.ibm.com/developerworks/lotus/products/instantmessaging/?S_TACT=105AGX13&S_CMP=LP<br />
• "<strong>Design</strong>ing the User Experience for Lotus Notes and Sametime" blog:<br />
http://www-128.ibm.com/developerworks/blogs/page/marybeth<br />
22 About the author<br />
Mary Beth Raven is passionate about involving users in the design of collaboration tools. She has worked on Lotus<br />
Notes for more than two years, before which she designed five versions of Lotus Sametime. She works with the<br />
Lotus Notes <strong>Design</strong> team in Westford, MA, and loves to travel, especially to visit customers. She holds a Ph.D. in<br />
Rhetoric from Rensselaer Polytechnic Institute in Troy, NY.<br />
23 Acknowledgements<br />
The author wishes to thank the Development team for their contributions, especially Maureen Leland, Bob Balaban,<br />
and Kathy Howard.<br />
44
Appendix A: User experience checklist for plug-ins<br />
Use the following checklist to ensure that your plug-in is consistent with the rest of the interface and any<br />
other plug-ins built by developers following this guide.<br />
□ Toolbar buttons have corresponding menu items<br />
□ Action bar buttons have a corresponding menu item on the Actions menu<br />
□ Interface text adheres to capitalization guidelines<br />
□ Interface text adheres to punctuation guidelines<br />
□ Mnemonics exist for all menu additions<br />
□ Mnemonics exist for all input field labels, tabs, and buttons in dialog windows<br />
□ Menu and button actions have ellipses (…) at the end of the text string if the action opens a dialog box for<br />
further user input before completing the task<br />
□ Separator bars are used in menus and action bars to separate groups of similar actions<br />
□ Interface icons have ALT (hover) text describing the action or intended indication<br />
□ Contact List and chat window application panels have titles and a 12 x 12 pixel icon<br />
□ Panels for the sidebar, Contact List, and chat window application have an inner margin of 4 pixels<br />
□ Actions in menus appear disabled if not available<br />
□ Plug-ins adding components that may appear as tabs in the chat window interface provide a tab title<br />
□ Actions that refer to a preference open the Preferences window to the appropriate preference page<br />
□ Error dialog boxes appear in one of the following three forms: Error, Warning, or Critical<br />
□ General consistency in terminology is achieved (same words are used to refer to the same action<br />
appearing in different places, for example)<br />
45
Trademarks<br />
Domino, Expediter, IBM, Lotus, Notes, Quickr, Rational, Sametime, Symphony, and WebSphere are trademarks or<br />
registered trademarks of IBM Corporation in the United States, other countries, or both.<br />
Java and all Java-based trademarks and logos are trademarks or registered trademarks of Sun Microsystems, Inc.<br />
in the United States, other countries, or both.<br />
Windows is a registered trademark of Microsoft Corporation in the United States, other countries, or both.<br />
Linux is a trademark of Linus Torvalds in the United States, other countries, or both.<br />
Other company, product, and service names may be trademarks or service marks of others.<br />
This information is provided “as is” without warranty of any kind, express or implied, and is based on IBM’s current<br />
product plans and strategy, which are subject to change by IBM without notice. IBM shall not be responsible for any<br />
damages arising out of the use of, or otherwise related to, this document. Nothing contained in this document is<br />
intended to, nor shall have the effect of, creating any warranties or representations from IBM (or its suppliers or<br />
licensors), or altering the terms and conditions of the applicable license agreement governing the use of IBM<br />
software.<br />
46