1. Interface Components Rules

1.1 Windows
1.2 Menus
1.3 Toolbars
1.4 Contextual Menus
1.5 Controls
1.6 Secondary Windows
1.7 Tree
1.8 Default Values and Customization
1.9 Manipulator Robot
1.10 Power Input

1.1 Windows

Windows provides the fundamental way in which a user views and interacts with data. Consistency in window design is particularly important because it enables users to easily transfer their learning skills and to focus on completing their tasks rather than learning new conventions.

1.1.1 Application Window

1.1.2 Document Windows

Example

Correct	Incorrect
-> Workbench transition OK The new document window (the tree and the workbench is different) is over the previous window.	-> Workbench transition KO The size of the original window was restored (not maximized). Two new windows were created at the same time. One of them was created minimized.

Example

Ex.1:Example of the title bar of a CATProcess Document.

Correct	Incorrect
The title of the document window identify describes its content. (Here the name Process1 is the default name of the new document. At the save, the proposed name will be Process1.CATProcess)	The title of the document window describes the nature of the window.

1.2 Menus

Menus display a list of commands available to the user. Because menus makes commands visible and discoverable, you can use them to leverage the greater capacity people have for recognizing commands.

1.2.1 Menu Bar

Remark

[1] Format is not compulsory. Notation in all rules: Parenthesis in a description is used for optional items.

See also

Mnemonics Presence

1.2.2 Start Menu

Example of a start menu (here witout any favorite workbenches defined)

Example

Part Design Workbench is in "Mechanical Design" the sub-menu.

1.2.3 File Menu

Remarks

[1] Respect the order of compulsory items.Other items can be inserted where (...) are displayed. They must be compatible with the description of the zone and the menu.

Zone 1: Commands of opening and closure

• This zone contains items New…, Open… and Close. Not modifiable

Zone 2: Commands of saving

• The two first articles are Save and Save as…
• Other items of save follows.

Zone 3: Commands of printing

• The first article (if exists) is Page setup...
• The two last items are Print preview... (if exists) et Print.
• Other item must be inserted between Page setup... et Print preview impression.

Zone 4: Other operations on the document

• The articles of this zone are various operations on the current document. Non modifiable zone.
• The submenu Send to… duplicates the document. The first zone of this submenu list receivers that use those documents as they are. The second zone groups receivers that transform the document when they import it.
• The item Properties (that is the only articles that does not respect the suspension point rule) gives access to the properties of the current document.
• the properties of the document does not impact the representation, the nature of objets included in the document. The properties concerns the document itself, his characteristics seen from the outside.

Zone 5: List of last used documents

• This zone contains the last 4 (configurable in Windows settings) documents red.
• Access keys are 1, 2, 3 et 4, etc…

Zone 6: Exit

• This zone contains only Exit.

Examples

Ex 1: Word file menu

Ex 2: Excel file menu

Ex 3: PowerPoint file menu

1.2.4 Edit Menu

Rule 1.2.4.2: The Edit menu contains 5 zones [2] Zone 1: Undo and Redo Zone 2: Cut and Paste Zone 3: Delete Zone 4: Search and Select Zone 5: Misc. These zone must contains [1]:

Remarks

[1] Except "Find+Replace+Atteindre" that can be replaced by equivalent commands.

[2] These zones contains:

Zone 1: Undo and Redo

• Contains only Undo+ <action name> et Redo <action name>.

Zone 2: Cut and Paste

• the first tree articles are Cut , Copy et Paste.
• Next commands concern special pastes.

Zone 3: Delete

• First item is Delete. It deletes the selected elements.
• Second item (if exists) is Suppress. It suppress the container of what is selected. This command has more impact that the previous one.
• After these two "general" case, the article "Select all" (if exist).
• Finally special case of delete or duplication generating a deletion.

Zone 4: Search and Select

• The typical items are Find… Replace… et Atteindre…
• Follows other article of search or replace them.

Zone 5: Misc.

• First item is Links… (if exists)
• Second item is Update… (if exists)
• Properties is just before Object
• The last item allows the edition of the object. Le label changes with the selection. When the object cannot be edited, the label is "Object" grayed.

Examples

Ex1: Word.Edit Menu

Ex2: Excel.Edit Menu

Ex3: PowerPoint.Edit Menu

1.2.5 View Menu

Remarks

[1] Respect the order of compulsory items.Other items can be inserted where the sign (...) is displayed and must be compatible with the description of the zone and the menu.

Zone 1: Choices of style of display of the active document

• This zone contains the different choice of representation of the whole document of the active window.

Zone 2: Displays of active document objects

• This zone controls the various types of display of the document, i.e. how objects are seen. This zone is optional. It depends on the possibility of the document to modify its own representations (ex: PowerPoint Display in black and white )
• This zone can include articles that create a new secondary window but this window must deal with display of the document (ex: PowerPoint: Display of the miniature slide).
• Items, if exist, can be ordered as follow:

  Choice of filters on document, Rendering Style, Perspective, Hide/Show

Zone 3: Toolbars and active window contents

All items display and hide tools around the active window or on the frame without modifying the objects of the document.

• First item is Toolbar.
• Other items activate of hide tools which make up the active window.( Arrange these items in a appearance order: left to right then up to down)

• Ex: Rule, Formula bar, Document explorer, Markers, Status bar.

• The last articles show and hide the tools presented as objects in the scene.
  • Ex: Tree, Compass.

Zone 4: Display of auxiliary data of the document

• Display first items about data linked to the document (usually they are included only once in the document (ex: Header & Footer)
• Then other items about data linked to objects (ex: Notes, Comments )

This zone drives the display of auxiliary data linked or imbedded in the document. Items can:

1. Make a modification of the configuration of the active window to display data that cannot be inserted in the document window.
2. Activate a move of the document toward the auxiliary data included in the document but out of the window.

Zone 5: Viewpoint

This zone contains at least Full Screen and Zoom item. Items follow this order:

• First items about defined views.
• Full screen display the active window in the whole screen. A non modal window appears at the lower left corner of the screen to Close the full screen.
• Zoom… changes to current zoom. (It can be a menu containing several zoom actions)
• Then the Viewpoint submenu definition actions (except zoom actions)
• The Navigation mode submenu
• Other commands on viewpoint

Examples

Ex1: Word View Menu (Note the absence of the zone 2 )

Ex2: Excel View Menu (Note the absence of the zone 2 )

Ex3: PowerPoint View Menu

and

1.2.6 Insert Menu

Remarks:

[1]: These zones contains:

Zone 1: Insert of objects structuring the document

• This zone is optional. It exists if the document is structured in objets clearly identifiable. This zone gives access to their insert.

Zone 2: Insert of simple objects

• This zone contains most used articles.
• The order can be the decreasing importance of the insert effect or insert application field.
• If exist, last article is Comment

Zone 3: Insert of complex objects

• This zone is optional. It contains objects more complex or more voluminous objets than the previous zone.

Zone 4: Insert of other objects

Zone 5: Import of existing objects

• First, objets needing to define a zone to insert them
• Then import of objects used often.
• Finally 3 following articles: File…, Object (for import of all objects) et Hyperlink….

Examples:

Word Insert Menu (Zones 2, 3, and 5)

Excel Insert Menu (Zones 1, 2, and 5)

PowerPoint Insert Menu (Zones 1, 2, 3, and 5)

1.2.7 Tools Menu

Rule 1.2.7.2: The Tools menu contains 4 zones [1] Zone 1: Assistance Zone 2: Version et Protection Zone 3: Other tools Zone 4: Personal configuration (macros, options) These zones must contains:

Remarks

[1]: Zones content:

Zone 1: Assistance tools depending of the document type

• First, articles about data validation,
  1. Verification,
  2. Configuration of the reference environment
  3. Library access

• Then automatical tools

Zone 2: Versioning and Protection

• This zone is optional.
• First articles are about versioning and split (Sharing, Follow of modification, Fusion)
• Last articles are about protection.

Zone 3: Divers

• This zone contains the tools specific to the application.

Zone 4: Personal configuration (macros, options)

• The first article is Macro giving access to execution, creation and modification of macros.
• The second article is about complementary data for tools ("Macros complémentaires…" or "Modèles et compléments…"
• The third article is Customize…
• The last article is Options….

Examples:

Word Tool Menu:

Excel Tool Menu:

PowerPoint Tool Menu:

1.2.8 Menu Items

Remarks

[1] So, if the command is executed and ends immediately, there is no suspension points.

[2] If the window of the current command is modal, then it is impossible for the user to access to menus. In this case, the rule has no meaning.

See also

4.2 User Interface Text Terminology

1.3 Toolbars

Toolbars and status bars are special interface constructs, like menu bars, for managing a set of controls. They are designed to provide quick access to specific commands and options.

1.3.1 Toolbars Display

[1] Before any user customization.

Remark

[1] It is a list and not an array. All articles are one after the other. It is impossible to display one article on the top of another if the toolbar is horizontal. All elements are ordered towards one direction ... otherwise it is a dialog box.

Examples

Ex1: horizontal toolbar

Ex2: vertical toolbar

Note that the item zoom is not displayed. A textfield disappears or is replaced by an icon of a command that display a dialog box including the textfield.

Ex3: Most large Horizontal detached toolbar

Ex4: Most high vertical detached toolbar
Note that the width of the palette is given by the largest item (here the zoom textfield with pulldown list).

Example

Correct	Incorrect
Only one column on authorized sides.	Two column of toolbars on the right side.

1.3.2 Toolbar Controls

Corollary: A toolbar does not contains labels [Ex.1]

Remarks:

[1]: Icons in toolbars are used for command buttons, check boxes or radio button.

[2]: For editable textfield, the drop-down list is used to display the previous values input. This list is mandatory because of the important use of the field (otherwise this field will not be displayed in a toolbar by only in a dialog box).

Example:

Ex.1: Example of labels in toolbars

Not to do: A toolbar with labels

To do: No labels, information are in tooltips

Rule 1.3.2.2: There is a maximum of 5 icons by zone [1].

Remarks

[1] Definition: In a toolbar, a zone is the space delimited by separators and borders of the toolbar.

[2] In the example above, there is 19 icons for 6 zones (average of 19/6 = 3.16 icons by zone).

1.3.3 Status Bar

1.3.5 Tooltips

Examples

[Ex1]: Example of tooltip:

[Ex2]: Excepted when the textfield item has been selected (a) or during edition (b)

(a) (b)

Remark

[1]: The contains of a tool tip describes the nature of the mode but not the purpose , neither its use. For example, the tooltip of the button "Bold" is just called "Bold" but not "Creation a bold new text or modification of the bold of a text".

Example

Correct	Incorrect
Only The name of the object created.	The "New" word. The lower case "p" instead of a "P".

1.3.6 Standard Toolbars

Rule 1.3.6.1: The following standard commands must be accessible through the toolbars as an icon: New Open Save Bookmark Cut Copy Paste Refresh Properties Change Status Lock / Unlock Print Settings Help Close  Legend    command is specific to object selected   command applies to application

1.4 Contextual Menus

Contextual menus, also called shortcut menus, provide an efficient way for the user to access the specific operations of objects or its immediate context. Because contextual menus are displayed at the pointer's current location, they eliminate the need for the user to move the pointer to the menu bar or a toolbar

1.4.1 Contextual Menu Contents

Remark

Contextual menus does not contains commands that do not care about current selection.

1.4.2 Contextual Menu for Objects

Remark

[1] Instead of having an unique item "Properties", it is possible to split the properties access in several items. For example, the contextual menu of a text contains articles: Font, Paragraph, Bullets and Numbering.

Examples

Ex 1: Contextual menu of a cell of an Excel array. (zones 2, 3, 5, 6)

Ex 2: Contextual menu of a column (zones 2, 3, 6)

Ex 3: Contextual menu of a line

1.4.3 Contextual Menu for Error

Examples

Word without error	Word with error and solution	Word with error but without solution

1.4.4 Contextual Menu for Toolbars

Remarks:

[1] Although the menu bar calls the toolbar contextual menu, the list of items of contextual menu does not contains the item "Menus" because the menu bar cannot be hidden.

[2]: It is possible to allow to hide the status bar. In this case, the item is only in View menu.

1.4.6 Contextual Menu for Windows

[1]: If the window is maximized, this contextual menu is not accessible

1.5 Controls

Controls are graphic objects that represent the properties or operations of other objects. Some controls display and allow editing of particular values. Other controls start associated commands. Controls are displayed in menus, toolbars, contextual menus and secondary windows such as dialog boxes and message boxes.

1.5.1 Control Labels

See also

4.2 User Interface Text Terminology

1.5.2 Command Buttons

1.5.3 Check Boxes

1.5.4 Radio Buttons

Example:

Ex 1: 2 zones of radio buttons

Example:

Example :

1.5.5.0 Lists

Remark

[1] The list can be a pulldown list

Example

1.5.5.1 Single Selection Lists

Remark: There is always a line selected when the list appears

Example

Ex.1: Example of list zone with single selection (1 selection among n)

Ex.2: Example of list zone with single selection allowing 0 or 1 selection among n.

1.5.5.2 Extended Selection Lists

Example

Ex.1: Example of list zone with extended selection

1.5.5.3 Modifiable Lists

Remarks

Textfields can exist to ease the creation or the modification of elements in a mono-column list only. (In case of multi-column, one textfield is not sufficient). The textfield contains the selected element of the list.

The command buttons applies to the content of the textfield (so indirectly to the selected element of the list.)

The buttons are necessary to know that the list is modifiable.

Examples

Ex 1: Modifiable list without textfield

the buttons Add... and Modify... have suspension points because a dialog box appears to input both the Name and the Value fields.

Ex 2: Modifiable list with textfield

The button modify does not exist because the user can directly edit in the textfield.

1.5.5.4 Pull Down Lists

Examples

Ex.1: Example of pull-down list

Closed:

Opened:

1.5.5.5 Multiple Selection Lists

Example:

Ex.1: Example of list zone with multiple selection

1.5.6 Textfields

Examples

Over it:

On the left:

Example

Not to do	To do
A size of 999999999999 is improbable !!!

1.5.7 Counters

Rule 1.5.7.1: A counter is composed by a label, an editable numeric field and two arrows.

Example

Ex 1: Example of behavior of arrows.

1.5.8 Sliders

Examples

1.6 Secondary Windows

Most primary windows (such as document windows) require a set of secondary windows to support and supplement a user's activities in the primary windows. Secondary windows obtain or display supplemental information during commands dialog.

1.6.0 Characteristics of Secondary Windows

Example

Correct	Incorrect
Only one dialog box grouping all controls.	Two dialog boxes are defined simultaneously at the start of the command.

1.6.1 Dialog Boxes

1.6.1.1 Dialog Boxes Zones

[1] In other terms:

• Avoid omitting separator between two zones.
• Avoid displaying a double line between two zones (with two adjacent frames for example)
• Avoid texts like "--------" as separators !

Example

Ex 1: tab page of a dialog box where composed of 4 zones whose titles are names "Sous-thème X"

1.6.1.2 Dialog Boxes Layout

1.6.1.3 Command Buttons Zone

1.6.1.4 Dialog Box Default Button

Example

1.6.1.5 Contextual Help

Example

Ex1

Examples

Ex.1: The following example contains:

1. name of article ("Aperçu avant impression") + localization ("(menu Fichier)")
2. definition ("Affiche un aperçu...")

Ex.2: The following example contains:

1. name of article + localization
2. definition
3. methodology ("Si la sélection est déjà...")

Ex.3: The following example contains:

1. name of article
2. definition
3. methodology ("Pour obtenir...")

Ex.4: The following example contains:

1. name of article
2. definition
3. Application field (note the style is like an aside: "Les effets de remplissage...")

Ex.5: Examples on a Non accessible controls

1.6.1.6 Dialog box contents

1.6.2 Message Boxes

Examples

Ex 1: Example of Information message box

Ex 2: Example of Status message box

Ex 3: Example of Warning message box

Correct	Incorrect
"Yes" and "No" buttons to answer the question

Ex:4: Example of Critical message box (with possibility to continue)

Note that the message says in an implicit way that the cause of the problem may be the absence of a disk. ("Vérifiez..."). But the turn of phrase leave the possibility of another error. Messages like "A disk is missing". is prohibited.

Ex 5: Example of Critical message box (without possibility to continue)

Avoid to put message like "Your selection is wrong" (even if it is true in this case): the message mustn't criticize the user.

Avoid also to but the message because the problem can occurs because of another reason. The error can be elsewhere, for example, the user click the wrong command (as simple as that !)

1.6.3 Components

1.6.3.3 Component Buttons

1.7 Tree

The tree is a specific view of a document that represent a hierarchy of links between all objects included in the document.

1.7.1 Tree Presence

1.7.2 Tree Position

1.7.3 Tree Nodes

1.8 Default Values and Customization

The user is the center of the user interface design. By initializing appropriate default values, the software will better fit the context of the user task.

Because of their widely varying skills and preferences, user must be able to customize aspects of the interface.The software must provide user access to many of these aspects. Your software should refect user settings.

1.8.1 Options Definition

Remark

An option of Tools/Options is a parameter that should not be changed often by the user.

Example

The mode of maximization of the document windows are not displayed in Tools/Options but is directly on the window title bar. This parameter is consistent (kept through time).

1.8.2 Options Tab Pages

Remark

[1] Tab-pages with just a few controls are forbidden because it increase tremendously the number of tab-pages and decrease the probability to find the option. (Consider the frustration of user who tries to find an option.)

1.9 Manipulator Robot

1.9.1 Presence

1.9.2 Unicity

1.10 Power Input

1.10.1 Power Input and Dialog Boxes

[1] Only the user can hide or show dialog boxes with the following button:

[Top]

History

Copyright © 2000, Dassault Systèmes. All rights reserved.