User experience guidelines for IBM® Lotus® richclient applications and plug-ins(for IBM Lotus Notes®, IBM Lotus Sametime®,...
Table of Contents1 Introduction .............................................................................................
11.2      Preferences for plug-ins ..........................................................................................
1 IntroductionThis document provides user-interface design and interaction guidelines for designers and developers who are...
Figure 1. Elements of the Notes 8 Client1.2. Elements of the Sametime 7.5.x clientThe default size, shape, and location of...
Figure 2. Contact List windowKey:1. Extensible menu bar2. Contact names and status icons3. Plug-in application panels (“mi...
Figure 3. Chat windowKey:1. Extensible menu bar2. Telephony control3. Video control4. Action bar5. Branding area6. Message...
Figure 4. Extensible areas of the Chat windowKey:1. Application panel2. Extension tab3. Popupextension1.3.    Elements of ...
Figure 5. Lotus Symphony layout1.4. Elements of the Lotus Expeditor clientLotus Expeditor is intended to be an all-purpose...
Figure 6. Expeditor Client layout1.5. Planning your applicationChoose the technology you’ll use based on the needs of the ...
• Portal components                                                                                             • Eclipse ...
Figure 8. Composite application interaction style – hybrid1.6. Visual styleThe visual style is a combination of the visual...
Figure 9. Elements of the client affected by Global.CSSNotes.css defines the look of views written in Java™, specifically:...
If you are using Domino Designer to create your action bar, you won’t be able to make it look exactly like figure 10.Inste...
Figure 12. Column header visual style1.6.3. Icon styleIf you are creating new icons for the toolbar, action bar, stationer...
Figure 13. Summary of Icon style1.6.4. Visual style considerations for composite applicationsFor composite applications in...
2.1     Title bars of dialog boxesIn general, the title bar of a dialog box should contain the name of the menu item or co...
It is planned that, in Notes 8.0.1, Notes will provide commands under the "View" menu on the                    Notes tool...
Make the features available by using both Global Menu contributions and Local Menu contributions (part-associated action s...
Table 3. File menu itemsMenu item      Pull-right              Mnem   Shortcut      Details                         Menu I...
3.2.2 Edit menuThe Edit menu has a mnemonic of “E”. If your application uses any of the menu items listed in table 4, use ...
3.2.7 Window menuIf your application uses the window menu, it must have a mnemonic of W and it must list all open windows ...
Figure 14. Activate the Panel menu by clicking the left-hand iconThe Panel Menu contains generic menu contributions provid...
Figure 16. The Sametime plug-in contributes a pull-right to the View menuTo achieve keyboard accessibility, retarget the F...
(System actions include maximize, minimize, restore, and close, depending on what has been enabled for thecomponent).4    ...
The three different window management models are:    •   Open each document in its own window    •   Open each document in...
•   View    •   Document in read mode    •   Document in edit mode    •   Workspace    •   ReplicationSeveral buttons have...
Figure 18. Use the Expeditor controlSet to automatically list your toolbar in Toolbar context menuIn composite application...
•   New/Create    •   <other actions>    •   A “More” button (if it is necessary to add miscellaneous items that do not al...
Figure 20. Navigator title and replica (icon is optional)Put actions in the Actions menu and action bar. Do not put action...
•   Have a consistent "inner" margin on all four sides     •   The panel can have a toolbar if it makes sense to take up s...
Components that are intended to display for the duration of the collaboration should not use this mechanism, andshould be ...
Figure 22. Multiple preference pages from the same plug-in grouped as in Lotus Sametime12      Dialog boxesThere are curre...
Figure 23. Command buttons in the lower rightFigure 24. Command buttons can also be placed in the upper rightEnsure that u...
Figure 25. Labels placed above the Group box in Domino Designer12.2 Dialog boxes in plug-insSome of the guidelines are spe...
Figure 26. Avoid unnecessary use of Group boxes                                         36
Figure 27. Proper use of Group boxes13      PropertiesIf your plug-in has properties, allow users to access those properti...
14       Status barThe status bar for the Lotus Expeditor, Sametime, and Symphony products should be ON by default. Applic...
15.2 Specific message typesTable 9 outlines the various message types and when to use them.Table 9. Details of message typ...
Question                                   MessageDialog.openQuestion(parent.getShell(), "Question Title",DO NOT USE      ...
16.2 Sentence-style capitalizationUse sentence-style capitalization for all labels in a window or dialog, including labels...
18      SearchProvide a mechanism to search the data in your application, if you can.18.1 Search in plug-ins with Lotus Ex...
Figure 30. Composite applications should list each of the components available to search19       Log-in windowIf your plug...
21       Resources•    Eclipse user Experience 3.0 best practices:     http://wiki.eclipse.org/index.php/UI_Best_Practices...
Appendix A: User experience checklist for plug-insUse the following checklist to ensure that your plug-in is consistent wi...
TrademarksDomino, Expediter, IBM, Lotus, Notes, Quickr, Rational, Sametime, Symphony, and WebSphere are trademarks orregis...
Upcoming SlideShare
Loading in …5
×

Ueguidelines

395 views
350 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
395
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ueguidelines

  1. 1. User experience guidelines for IBM® Lotus® richclient applications and plug-ins(for IBM Lotus Notes®, IBM Lotus Sametime®, IBM Lotus Symphony™, IBMLotus Expeditor, and composite applications)Mary Beth RavenLead User Experience Designer for IBM Lotus Notes 8 and IBM Lotus ExpeditorWestford, MassachusettsJanuary, 2008© Copyright International Business Machines Corporation 2008. All rights reserved.This white paper describes user-interface design and interaction guidelines for designers and developers who arebuilding IBM® Lotus® Notes® applications (formerly called databases), Lotus Sametime® version 7.5 or later plug-ins, Lotus Symphony™, Lotus Expeditor plug-ins (Lotus Expeditor is a rich client based on Eclipse), or Compositeapplications (assembling any mixture of plug-ins, Lotus Notes applications, and components built with LotusComponent designer).To get the most out of this article, you should be familiar with Lotus Notes 8 and Lotus Sametime 8. It also helps tohave familiarity with either IBM Lotus Domino® Designer or the Eclipse integrated development environment. 1
  2. 2. Table of Contents1 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...................................................... 162 Title bars .........................................................................................................................16 2.1 Title bars of dialog boxes ............................................................................................. 17 2.2 Composite application component title bars....................................................................... 173 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 ................................................................................... 244 Context menus ...............................................................................................................25 4.1 Context menu details for Lotus Notes 8 ............................................................................ 255 Open button and tab labels................................................................................................25 5.1 Open button (launcher) ................................................................................................ 25 5.2 Tabs and tab labeling in the various window management models ............................................ 256 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 .......................................................................... 287 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........................................................... 298 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 .................................... 309 The sidebar ...................................................................................................................30 9.1 Guidelines for each panel ............................................................................................. 30 9.2 Offline experience for the sidebar .................................................................................. 3110 Chat window extensions.................................................................................................31 10.1 Extension tabs ........................................................................................................ 31 10.2 Pop-up extensions .................................................................................................... 31 10.3 Contact list icons..................................................................................................... 3211 Preferences ................................................................................................................32 11.1 Preferences for Lotus Notes applications ........................................................................ 32 2
  3. 3. 11.2 Preferences for plug-ins ............................................................................................ 3212 Dialog boxes................................................................................................................33 12.1 Dialog boxes built with Domino Designer ........................................................................ 34 12.2 Dialog boxes in plug-ins ............................................................................................. 3513 Properties ..................................................................................................................3714 Status bar...................................................................................................................3815 Messages – Info, Warning, Error........................................................................................38 15.1 General guidelines for error messages ........................................................................... 38 15.2 Specific message types .............................................................................................. 39 15.3 Confirmation of deletions .......................................................................................... 4016 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 ................................................................................................................. 4117 Offline experience........................................................................................................4118 Search .......................................................................................................................42 18.1 Search in plug-ins with Lotus Expeditor and Lotus Sametime ................................................ 42 18.2 Search in composite applications.................................................................................. 4219 Log-in window .............................................................................................................4320 Conclusion..................................................................................................................4321 Resources...................................................................................................................4422 About the author..........................................................................................................4423 Acknowledgements .......................................................................................................44 3
  4. 4. 1 IntroductionThis document provides user-interface design and interaction guidelines for designers and developers who arebuilding 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 ordesign best practices. Following the recommendations in this guide will ensure that designs are implemented in aconsistent 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 occasionallyrefers. 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 deviationsare 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.1information center.1.1. Elements of the Lotus Notes 8 ClientThe Notes 8 client is a rich client with all the elements you’d expect of a rich client, such as a menu bar and statusbar (see figure 1). 4
  5. 5. Figure 1. Elements of the Notes 8 Client1.2. Elements of the Sametime 7.5.x clientThe default size, shape, and location of the Sametime shell indicate that it is intended to be in the user’s peripheralvision and not the center of attention.By creating plug-ins (called “features” in Eclipse), developers can extend the Sametime Connect client to provideadditional 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. 6. Figure 2. Contact List windowKey:1. Extensible menu bar2. Contact names and status icons3. Plug-in application panels (“mini-apps”)4. Branding area5. Action bar6. Telephony controls7. Video controls8. Context menu9. Status bar 6
  7. 7. Figure 3. Chat windowKey:1. Extensible menu bar2. Telephony control3. Video control4. Action bar5. Branding area6. Message toolbar (an action bar)7. Status bar 7
  8. 8. Figure 4. Extensible areas of the Chat windowKey:1. Application panel2. Extension tab3. Popupextension1.3. Elements of Lotus SymphonyLotus Symphony is a large plug-in to Lotus Expeditor, just as Lotus Notes and Sametime Connect are. It includes atitle bar; a menu bar with tabs for Document, Spreadsheet, and Presentation; a main data area, and propertiessidebar (see figure 5). 8
  9. 9. Figure 5. Lotus Symphony layout1.4. Elements of the Lotus Expeditor clientLotus Expeditor is intended to be an all-purpose shell. The default size and shape assume that Lotus Expeditor willtake 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. 10. Figure 6. Expeditor Client layout1.5. Planning your applicationChoose the technology you’ll use based on the needs of the users and on your skill set. Table 1 is a briefcomparison of the various tools and technologies you can use to build rich client applications.Table 1. Comparison of rich client toolsTechnology Build using Server CommentsLotus Notes applications • IBM Lotus Domino® • Lotus Domino Create database(databases) Designer applications that can be served to the Web or to the Notes clientExpeditor plug-ins • Eclipse IDE • Lotus Domino Building plug-ins for anySametime plug-ins • Rational® Application • Lotus Sametime of these isNotes plug-ins Developer (RAD) • WebSphere® technologically similarSymphony plug-ins • Expeditor toolkit Application Server because Expeditor • WebSphere Portal provides the framework for Sametime, Notes, and SymphonyComposite 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. 11. • Portal components • Eclipse componentsWhen planning your composite application, ensure that all components provide value at the default size in thecomposite 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 yourcomposite application and on the other applications that people are using. If it makes sense, use a consistentlayout style for all your composite applications. Also, do not confuse these interaction styles with the differentwindow management styles for which users can set a preference (see section 5.2 for more information on thedifferent window management styles).Figure 7. Composite application interaction style – one tab 11
  12. 12. Figure 8. Composite application interaction style – hybrid1.6. Visual styleThe 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 systemThe visual system for Lotus Expeditor is provided through a .css file. For example, the color of the tabs and thecolor of the tabs on hover is set in the .css file. The application you build may or may not simply pick up the visualattributes 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. 13. Figure 9. Elements of the client affected by Global.CSSNotes.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 imageNothing 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 styleYou 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. 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 mouseoverFigure 11. Action bar properties to set in Domino DesignerFigure 11. Outline view visual style 14
  15. 15. Figure 12. Column header visual style1.6.3. Icon styleIf you are creating new icons for the toolbar, action bar, stationery, letterhead, or any other part of the client, youmust 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 rightSize requirements:• Toolbar: 16x16 png• Action bar: 18x18 gif• Tabs: 16x16 png• View Type: 12x10 gif• Status Bar: 12x10 gif• Letterhead: 65x65 gifStates:• 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. 16. Figure 13. Summary of Icon style1.6.4. Visual style considerations for composite applicationsFor 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 styleas closely as possible. Also, ensure that the component panels have sashes between them to allow users to resizethe component panels.2 Title barsThis guideline applies only if you are building a main window application (that is, not just a Lotus Notes databaseapplication). The title bar differs slightly depending on the nature of the rich client being built. In general, order theinformation 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 SymphonyNOTE: Instant Messaging windows do not have to comply to these rules because they are smaller and are useddifferently. 16
  17. 17. 2.1 Title bars of dialog boxesIn general, the title bar of a dialog box should contain the name of the menu item or command button that launchesit.2.2 Composite application component title barsComponents 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 panels 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. 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 menusThe 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-ins3.1 Menus for Lotus Notes applications built with Domino DesignerDomino Designer lets developers add menu items to the Create and Actions menus. Here are some guidelines tofollow: • 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 Application3.2 Menus for main window plug-insLotus Notes and all three Lotus Symphony editors are examples of main window plug-ins. A main window plug-in isa full-featured application, as opposed to less fully featured plug-ins that might appear in the sidebar, or addedfunctionality 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 canfind them and so that they are accessible (per various disability legislations). They can be available in other placesas well, such as toolbar buttons or context menus. Making a feature “available from the menu items” includes whena 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 themenu bar. 18
  19. 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 HelpIn some cases, the application might not require these menus, but if you do have them, put them in the ordershown in table 2 with the associated mnemonic. Table 2. Details of menu bar itemsMenu 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_additionsActions A Hidden in base XPD com.ibm.rcp.ui.actionsmenu yesTools 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 menuThe File menu has a mnemonic of “F”. If your application uses any of the menu items listed in table 3, use theappropriate menu ID specified; for example, do not use a menu item called “Create” if “New” will suffice. Also, notethat you can add completely new menu items to an appropriate place in the File menu. 19
  20. 20. Table 3. File menu itemsMenu item Pull-right Mnem Shortcut Details Menu ID Retarget onic (if any) ableNew > N Hidden in base Expeditor new (Eclipse) This is a pull-rightOpen O yes This can be a pull-right com.ibm.rcp.ui.op enmenuApplication > t This is a pull-right applications Reset R Hidden in Lotus Notes 8, ResetPerspective unless its 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) yesSave 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: prefEndClose All C This should be provided by closealltabs yes Expeditor as part of the platform menus.Shut Down u Visible in Restricted modeSystem only, Not visible in Expeditor, Sametime or Lotus Notes 8Log 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. 21. 3.2.2 Edit menuThe Edit menu has a mnemonic of “E”. If your application uses any of the menu items listed in table 4, use theappropriate 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 detailsMenu item mnemonic Shortcut Details Eclipse menu ID Retargeta (if any) bleCut t CTRL+X cut (Eclipse) yesCopy C CTRL+C copy (Eclipse) yesPaste p CTRL+V paste (Eclipse) yesSelect All L (the first l in All) CTRL+A selectall (Eclipse) yesDelete D Del key delete (Eclipse) yes 3.2.3 View menuThe View menu has a mnemonic of “V”. If your application uses any of the menu items listed in table 5, use themenu ID specified. You can add completely new menu items to an appropriate place in the View menu. IBMrecommends that you add them at the top, so that the menu items listed in table 5 are always at the bottom of themenu. 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 CSidebar Panel1 P In Sametime, these are calledPanels-> “Application Panels” com.ibm.rcp.ui.sidebar menu Panel 2, etc. 3.2.4 Create menuIf you want your plug-in to contribute a Create menu item, put it in this location. Lotus Expeditor does not displaythis menu. 3.2.5 Actions menuIf you want your plug-in to contribute an Actions menu item, put it in this location. Lotus Expeditor does not displaythis menu. 3.2.6 Tools menuThe Tools menu must have a mnemonic of “o”. 21
  22. 22. 3.2.7 Window menuIf 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 IDShow Thumbnails b CTRL + Not in Sametime com.ibm.rcp.ui.history SHIFT + T<list of openwindows> 3.2.8 Help menuProvide Help for your application or plug-in. The Help menu must have a mnemonic of H. If your application usesany 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---------------- separatorAbout <product name>... A about IBM Support Assistant I com.ibm.esupport.cli ent.Browser 3.2.9 Icons in the menusSome 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 areato the left of the menu item blank. 3.2.10 Part-associated action set menu contributionsIn addition to having the global menus, Lotus Notes and Lotus Sametime contribute their own menu items on theexisting File, Edit, View, Actions, Tools, Window, and Help menus and can also contribute entire menus to themenu 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 appearsonly 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 withthat feature must be hidden. For example, if the Composite Application Editor is not installed, then none of itsassociated menu items should appear.The administrator can enable or disable groups of features by using Desktop Policies. For example, theadministrator can disable the ability to use macros in Lotus Symphony. In that case, all menu items relating to theuse 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-insThe nature of the plug-in determines whether you provide menus or menu items. In most situations, add menuitems to the Panel menu, which is found on the title bar (see figure 15). 22
  23. 23. Figure 14. Activate the Panel menu by clicking the left-hand iconThe Panel Menu contains generic menu contributions provided by the Expeditor platform. Add menu items to thetop of the Panel menu, as shown in figure 16.Figure 15. Add menu items to the top of the Panel menuIn other cases when the plug-in has a great deal of functionality (especially when users are accustomed to using itin another context with menus), contribute menu items to the appropriate menu in the main menu bar, and put themenu items in a pull-right with the name of the plug-in. For example, the Sametime plug-in contributes some menuitems to the View menu and to the Edit menu. The Sametime pull-right in the View menu is shown in figure 17. 23
  24. 24. Figure 16. The Sametime plug-in contributes a pull-right to the View menuTo achieve keyboard accessibility, retarget the File – Open – Selected Item menu item so that, when an item (oritems) in your sidebar panel is selected and a user chooses this menu item, the items selected in the sidebar panelopen. For example, if the user selects a meeting in the sidebar calendar and then chooses File – Open – SelectedItem, the selected calendar entry is opened, as shown in figure 17.Figure 17. Retarget the File – Open – Selected Item menu item3.4 Menus for composite applicationsComposite applications are made up of various component panels on a page. One component panel could be aNotes application while another could be an Eclipse plug-in. Ideally, the component panel that has focus shouldcontribute 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 ApplicationEditor 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 youadd menu items to a sidebar panel (recall Figure 15). If you do not use a title bar on the component panel, thenprovide an action bar to access any needed panel actions. Users can access system actions by using ALT + -. 24
  25. 25. (System actions include maximize, minimize, restore, and close, depending on what has been enabled for thecomponent).4 Context menusProvide context menus on objects. IBM also recommends that any context menu item also be a menu item on oneof the menus in the menu bar as well.4.1 Context menu details for Lotus Notes 8Lotus Notes core provides a standard set of context menu items for different interface objects (for example, a viewor 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 canremove 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 areappropriate for that view.IBM recommends that you include any application-specific context menu items either in the Create or Actions menuas 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 onlinedocumentation 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 acontext 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 labelsThe Expeditor client provides an Open button (launcher) to launch various applications. Lotus Notes 8 and LotusSymphony use this Open button, but Lotus Sametime does not, given the nature of that application. Instead, LotusSametime 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 modelsLotus Expeditor and Lotus Notes provide three different window management models. Users can set a preferencefor 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. 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 tabAll three models have tabs. By default the tab label is the name of the Eclipse perspective, but you can override thedefault 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 windowmanagement 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 ToolbarThe 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-ins6.1 Toolbar for Lotus Notes applicationsDevelopers have little control over the toolbars in Lotus Notes. In Lotus Notes 8, the toolbars that are on by defaulthave been changed so that none of the static toolbars are on; only the context-sensitive toolbars are on. Thecontext-sensitive toolbars for the client (not including Domino Designer or the Administration client) are: 26
  27. 27. • View • Document in read mode • Document in edit mode • Workspace • ReplicationSeveral buttons have been added to the context-sensitive toolbars; specifically, Cut, Copy, and Paste have beenadded to the context-sensitive document-editing toolbar. Most business end-users should not need to turn on thestatic 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 applicationsMain 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 befrequently used actions. Do not overuse toolbar buttons.The Toolbar contribution model for Lotus Expeditor is similar to the Menu contribution model. Global toolbar itemsare provided by the platform. If you want to use a specific toolbar button (such as Cut or Copy), your applicationmay have to retarget them. Each application should hide each global toolbar item as necessary. In addition, eachapplication 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, theExpeditor 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. 28. Figure 18. Use the Expeditor controlSet to automatically list your toolbar in Toolbar context menuIn composite applications, the toolbar contributions should be context-sensitive and thus ideally should be enabledor 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 providesfurther information on component action bars.6.3 Toolbar for sidebar or Sametime plug-insThe nature of the sidebar panel or Sametime plug-in should determine whether you provide a toolbar. Use toolbarssparingly 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 donot adhere to this guideline.)7 Action barThe purpose of the action bar is to provide quick access to commonly used actions/commands. Commands on theaction bar must be repeats of items on the Menu bar (or something in a dialog box that you get to from a menuitem).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 applicationViews and documents (forms) can have an action bar if the designer thinks it is appropriate. Commands on theaction bar must be repeats of items on the menu bar (or something in a dialog box that you get to from a menuitem).The general order of items on the action bar could be as follows, from left to right (see figure 19): 28
  29. 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 integrationRight-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 bar7.2 Action bar in a component in a composite applicationA composite application is made of several components. Each component can have a component action bar, oronly certain components might have an action bar. Use the component action bar if the button clearly applies onlyto that component. For example, text-editing toolbar buttons are best located at the top rather than repeating themin every component that might use rich text editing.8 Views and foldersThe 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 applicationsIBM recommends that you use an outline for navigating between views and folders, conforming to the followingrules: • 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. 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 relatedto one of the views or folders (see figure 21).Figure 21. Actions in an outline should relate directly to a view or folder8.2 Views and folders for main window plug-ins and composite applicationsRefer 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 anicon, it should be 16x16 pixels. Table 8 provides suggestions for how to best design for navigation between pagesand views.Table 8. Design suggestions for navigating between pages and viewsTo allow users to navigate Do thisbetween 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 ownbetween different pages Eclipse component to do this).9 The sidebarThe 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 restof the panel.9.1 Guidelines for each panelEach panel should follow a few simple guidelines: 30
  31. 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 sidebarIf users choose to work offline, some of the data in some of the panels might not be available. Each contributionneeds 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 extensionsPlug-ins may add application panels to the left side of the chat window. The participant list of a multi-party chat isan 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 tohave a persistent component that must be present for the duration of the chat. The plug-in should define a panelname and a 16x16 icon, if it contributes to this space. Components that are intended to display temporarily shouldnot use this mechanism; instead, they should be created as Extension tabs or Pop-up extensions.10.1 Extension tabsPlug-ins may add additional tabs appearing on the top-right portion of the chat window, above the user informationof the chat transcript area (recall Figure 3. Chat window item 2). When a plug-in adds to this area, the chattranscript/compose area appears in one of these tabs, and the new plug-in appears as another. For example, if alarger 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 apersistent 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 extensionsPlug-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 twoor more components are active in this space at a time, they appear in tabs, ordered left to right by the first one toopen in that space. If two tabs are present in the space, and one tab is closed via an action within the tabcomponent, or by the component automatically ending, then the remaining component switches to display without atab.Plug-ins contributing below the text input area of the chat window should do so when the intention is to have atemporary 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 theevent that two components operate in this space at the same time. 31
  32. 32. Components that are intended to display for the duration of the collaboration should not use this mechanism, andshould be created in left side application panels, or chat window persistent tabs instead.10.3 Contact list iconsYou can add columns to the Contact List window to display additional information (in text or icons) provided by yourplug-in. For example, your plug-in may be able to detect whether a user has telephony capabilities, and you maywish to show icons to indicate various states for a user’s telephony status (such as “available to call” or “on thephone”.) These icons should have ALT (hover) text and be no larger than 16x16 pixels.11 PreferencesThe 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-ins11.1 Preferences for Lotus Notes applicationsIn Lotus Notes 8, the preferences for individual templates cannot yet be contributed to the consolidated preferencestree. 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-insUsers must be able to access the preferences using the Preferences… menu item on the File menu. You can alsoallow 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. 33. Figure 22. Multiple preference pages from the same plug-in grouped as in Lotus Sametime12 Dialog boxesThere are currently many different styles of dialog boxes throughout Lotus Expeditor, Lotus Notes, and LotusSametime due to the many different technologies used to build them. It is not expected that you re-design existingdialog 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 onthe “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. 34. Figure 23. Command buttons in the lower rightFigure 24. Command buttons can also be placed in the upper rightEnsure that users can get to every control in the dialog box without using the mouse (to ensure keyboardaccessibility 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 DesignerDomino Designer does not support the creation of Group boxes, so try to use space to delineate groups. If you feelthat a Group box would help users with your dialog box, place the Group box labels above the Group box as shownin figure 25. 34
  35. 35. Figure 25. Labels placed above the Group box in Domino Designer12.2 Dialog boxes in plug-insSome of the guidelines are specific to the technology used to build them. Use Group boxes sparingly, and whenyou do, provide a label for the group in blue text, not bold (see figure 26). Also, try to use blank space / white spaceto delimit groups, if you can, since Group boxes can add visual clutter (see figure 27). 35
  36. 36. Figure 26. Avoid unnecessary use of Group boxes 36
  37. 37. Figure 27. Proper use of Group boxes13 PropertiesIf 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. 38. 14 Status barThe status bar for the Lotus Expeditor, Sametime, and Symphony products should be ON by default. Applicationscan contribute messages to the message area of the status bar. Be sure not abuse the status bar; it is for statusonly. 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 personhas 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 failedoperation, such as a mail compaction failure.15 Messages – Info, Warning, ErrorWhen it is feasible, use the “standard message dialogs” from MessageDialog, org.eclipse.jface.dialogs. Beprepared, however, to create custom message dialogs if the situation calls for more or different command actions.15.1 General guidelines for error messagesUse 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. 39. 15.2 Specific message typesTable 9 outlines the various message types and when to use them.Table 9. Details of message typesCondition SampleInformation Filename: Infomessageweb.gifTo provide information about theresults of a command. Users canonly acknowledge the message.Title = name of the application.Note that in the future this mightchange to the name of the plug-in(from the user’s point of view, forexample, Mail, Calendar, InstantMessaging) MessageDialog.openInformation(parent.getShell(), "InfoInformation messages are often TitleApplicationName", "Info Message");modeless; however, use yourjudgment as to whether the usermust respond to the error beforebeing allowed to interact with therest of the application.WarningAlerts the user to a condition that Filename:Warningmessageweb.gifrequires a decision beforeproceeding.In many cases you need to addbuttons here to support the Yes,No, and Yes, No, Cancelconditions.Warning messages are usuallymodal; that is, the user mustrespond before continuing to MessageDialog.openWarning(parent.getShell(), "Warning Title",interact with the application. "Warning Message");Critical Filename:errormessageweb.gifInforms the user of a seriousproblem that prevents them fromcontinuing their work.Critical error messages are alwaysmodal. MessageDialog.openError(parent.getShell(), "Error Title", "Error Message"); 39
  40. 40. Question MessageDialog.openQuestion(parent.getShell(), "Question Title",DO NOT USE "Question Message");Reason: We want to keep a clearthree-level message model. That is, Info Warning ErrorA question is just an attribute of theWarning type.Confirm MessageDialog.openConfirm(parent.getShell(), "Confrim Title",DO NOT USE "Confirm Message");Reason: Same reason as that forQuestion.15.3 Confirmation of deletionsWhen you confirm the deletion of anything, use the following wording, ensuring that you provide specific Yes andNo options (rather than OK and Cancel), and making “No” the default: Do you want to permanently delete <thing> [ Yes ] [ No ]16 Capitalization and punctuationBoth headline-style capitalization and sentence-style are used, depending on the item. For the most part, theseguidelines also agree with the IBM Web Interface Style Guidelines, so that if you are designing for both the Weband rich client, consider using the same properties file.16.1 Headline-style capitalizationUse 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 TabsHeadline-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. 41. 16.2 Sentence-style capitalizationUse 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 fieldsSentence-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 fieldlabels.16.3 PunctuationPut 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, orquestion mark, except for full sentences used in check boxes and radio buttons.Figure 28. Use colons after labels16.4 TooltipsYou must provide tooltips for visual elements that have no text labels. You do not need to create tooltips for visualelements with text labels. Do not use terminating punctuation for tooltips.16.5 EllipsesFor menu and action bar items, use ellipses (three periods at the end of the text) when the item launches a dialogthat requires user input (just clicking an OK button does not count). Do not use ellipses when the item brings up anew Tab.17 Offline experienceIf you build a Notes application, then Lotus Notes takes care of any user interface and offline experience, includingthe ability to make a local replica.However, if you are building a feature, plug-in, or composite application, you should provide a user interface fortaking it offline (if it can be taken offline.). Specifically, provide the menu item “Make Available Offline…” from theFile – 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 Expeditorinformation center for more details. 41
  42. 42. 18 SearchProvide a mechanism to search the data in your application, if you can.18.1 Search in plug-ins with Lotus Expeditor and Lotus SametimeLotus Expeditor does not turn on a search control by default, but there is an extensible search control (called thesearch center) that you can put in the toolbar, on the far right-hand side (Lotus Notes uses it). The search centercan 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-down18.2 Search in composite applicationsUsers should be able to search composite applications. Since neither the Expeditor platform nor Sametimeprovides a truly federated search, use the "search center" in the toolbar to default to the current component thathas 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 thecomponents explicitly in the search drop-down because it is not obvious to users of a composite application thatthey 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, calledAccounts, Leads, and History. When the user has focus on Accounts, then Accounts will be the default search, butthe others should be listed as search choices as well (see figure 30). 42
  43. 43. Figure 30. Composite applications should list each of the components available to search19 Log-in windowIf your plug-in requires authentication, make the log-in dialog box a maximum image width of 393 pixels, with amaximum area height of 42 pixels.Note that this area may become wider on different operating systems, so code the layout for this case, and followthe basic layout illustrated in figure 31 (note the labeling and punctuation).Figure 31. Put the user name first, followed by the password20 ConclusionThe key principles covered in this white paper are you can provide a better user experience by creating thefollowing: • 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 styleNote that Appendix A provides a convenient checklist to ensure your plug-ins are consistent. 43
  44. 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/marybeth22 About the authorMary Beth Raven is passionate about involving users in the design of collaboration tools. She has worked on LotusNotes for more than two years, before which she designed five versions of Lotus Sametime. She works with theLotus Notes Design team in Westford, MA, and loves to travel, especially to visit customers. She holds a Ph.D. inRhetoric from Rensselaer Polytechnic Institute in Troy, NY.23 AcknowledgementsThe author wishes to thank the Development team for their contributions, especially Maureen Leland, Bob Balaban,and Kathy Howard. 44
  45. 45. Appendix A: User experience checklist for plug-insUse the following checklist to ensure that your plug-in is consistent with the rest of the interface and anyother 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. 46. TrademarksDomino, Expediter, IBM, Lotus, Notes, Quickr, Rational, Sametime, Symphony, and WebSphere are trademarks orregistered 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 currentproduct plans and strategy, which are subject to change by IBM without notice. IBM shall not be responsible for anydamages arising out of the use of, or otherwise related to, this document. Nothing contained in this document isintended to, nor shall have the effect of, creating any warranties or representations from IBM (or its suppliers orlicensors), or altering the terms and conditions of the applicable license agreement governing the use of IBMsoftware. 46

×