2. 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
3. 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
4. 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
5. 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
6. 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
7. 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
8. 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
9. 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
10. 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 • IBM Lotus Domino® • Lotus Domino Create database
(databases) Designer applications that can be
served to the Web or to
the Notes client
Expeditor plug-ins • Eclipse IDE • Lotus Domino Building plug-ins for any
Sametime plug-ins • Rational® Application • Lotus Sametime of these is
Notes plug-ins Developer (RAD) • WebSphere® technologically similar
Symphony plug-ins • Expeditor toolkit Application Server because Expeditor
• WebSphere Portal provides the framework
for Sametime, Notes,
and Symphony
Composite applications • Composite Application • Lotus Domino Assemble composite
Editor (to assemble • WebSphere applications from:
components you’ve Application Server • Notes databases
already created from a • WebSphere Portal • Expeditor-based plug-
variety of sources) ins
10
11. • 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
12. 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
13. 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
14. 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
15. 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
16. 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
17. 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
18. 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
19. 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 Global menu contributions are persisted across every view of a
(specific to each specific personality in the Expeditor-based client. These menus
personality) 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 IWorkbenchActionConstants.
marker (This is where MB_ADDITIONS
applications can add
other menus; the term
"tools_additions" does
not show to any user)
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
20. Table 3. File menu items
Menu item Pull-right Mnem Shortcut Details Menu ID Retarget
onic (if any) able
New > N Hidden in base Expeditor new (Eclipse)
This is a pull-right
Open O yes
This can be a pull-right com.ibm.rcp.ui.op
enmenu
Application > t This is a pull-right applications
Reset R Hidden in Lotus Notes 8, ResetPerspective
unless it's an upgrade from
Expeditor
group "Group marker" means applicationEnd
marker additional menu items go
here
----------------- separator
--
group additions
marker
Install I Hidden in Lotus Notes 8, install
unless turned on specifically
Application A Hidden in Lotus Notes 8, management
Management unless turned on specifically
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… P Ctrl+P Hidden in Expeditor print (Eclipse) yes
Ctrl+P
Properties e Hidden in Expeditor properties yes
(Eclipse)
Group marker: prefStart
Preferences… f preferences
. (Eclipse)
Group marker: prefEnd
Close All C This should be provided by closealltabs yes
Expeditor as part of the
platform menus.
Shut Down u Visible in Restricted mode
System 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 quit (Eclipse)
down" mode of Expeditor
20
21. 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 Details Eclipse menu ID Retargeta
(if any) ble
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 Shortcut Details Eclipse menu ID
onic (if any)
Toolbar > This can be a pull-right. Even com.ibm.rcp.ui.toolbars
if the pull-right has several menu
items, keep it singular.
Show > w Pull-right. com.ibm.rcp.ui.showme
Mnemonics might be nu
different from Expeditor,
Notes, and Sametime.
Sidebar -> a
Open O These are “radio button
choices” (not in Sametime)
Thin T
Closed C
Sidebar Panel1 P In Sametime, these are called
Panels-> “Application Panels” com.ibm.rcp.ui.sidebar
menu
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
22. 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 + Not in Sametime com.ibm.rcp.ui.history
SHIFT + T
<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
23. 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
24. 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
25. (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
26. 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
27. • 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
28. 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
29. • 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
30. 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
Use a “navigator”; in Domino Designer, use an outline.
between views This means that you might end up with two navigators
next to each other (the view and the page)
Put buttons across the top (you must create your own
between different pages
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
31. • 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
32. 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
33. 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
34. 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
35. 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
37. 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
38. 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
39. 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 Filename: Infomessageweb.gif
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)
MessageDialog.openInformation(parent.getShell(), "Info
Information messages are often TitleApplicationName", "Info Message");
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.
Warning
Alerts the user to a condition that Filename:Warningmessageweb.gif
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 MessageDialog.openWarning(parent.getShell(), "Warning Title",
interact with the application. "Warning Message");
Critical Filename:errormessageweb.gif
Informs the user of a serious
problem that prevents them from
continuing their work.
Critical error messages are always
modal.
MessageDialog.openError(parent.getShell(), "Error Title", "Error
Message");
39
40. Question MessageDialog.openQuestion(parent.getShell(), "Question Title",
DO NOT USE "Question Message");
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.
Confirm MessageDialog.openConfirm(parent.getShell(), "Confrim Title",
DO NOT USE "Confirm Message");
Reason: Same reason as that for
Question.
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
41. 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
42. 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
43. 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
44. 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
45. 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
46. 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
