User Interface Guidelines
When designing user interfaces for EwE you should try to adhere the following implementation guidelines:
Overall Structure
- Triple-dots after a command (?) should only pull up a dialogues, i.e. New Scenario...
- Spelling: Ecopath, Multi-stanza??? QB etc
- Always use wait cursors and status bar messages for lengthy operations
- All texts should be specified in resources, NEVER in the code
Placement of commands
- Module commands, e.g. commands that apply to more than one form, are accessible from the menu.
- Commands that apply to ONE interface only shoud be placed on a toolbar above their form.
- Module commands may be repeated in the toolbar above a form if this aids functionality
- Every word should be capitalized, except for prepositions and conjunctions
- Every menu item should have a keyboard shortcut
- Module-wide command should be present in specific module menu structure i.e. edit group, edit fleet
- Forms should have toolbars for native commands, i.e. diet comp ? Sum to one.
- All configuration forms should be based on Ecospace parameters layout
- All configuration forms have scroll bars when too small to fit in docking area (see Ecospace parameters AutoScroll? setting)
- Every form should be resizable; every control should have its anchors properly set (see Ecospace parameters)
- All controls should be consistently aligned and spaced (see Ecospace parameters)
- All controls should be accessible via the [TAB] key in an intuitive order
- Use of form icons should be consistent with the menu item that invoked the form
- There may be no usage instructions on forms or form toolbars; all help text moves to the manual
- Grids should be accompanied by the quick-edit toolbar to export content to CSV for all grids, and read from CSV and set option to input grids only
- Maps should have the quick-edit toolbar to export content to CSV for all maps, and read from CSV for input maps only
- Graphs should have the floating toolbar to zoom in, zoom out and reset zoom, and export to CSV
- Try to refrain from using Group boxes unless strictly necessary. Controls should be grouped using the standard EwE headers when possible (see Ecopath parameters)
Dialogues
- Should be smaller than 600x400 800x600
- Every dialog must have default buttons assigned that consume
[ENTER] and [ESC] keystrokes (Accept_button = OK or similar, Cancel_button = Cancel)
JS: [ENTER] rule dropped because 1) Grid edit controls need [ENTER] to commit and 2) [ENTER] is too easily pressed. However, [CANCEL] should be quickly accessible
- All controls should be consistently aligned and spaced (see Options dialogue)
- All controls should be accessible via the [TAB] key in an intuitive order (see Options dialogue)
- All controls should have an intuitive and preferrably unique shortcut key (see Options dialogue). This excludes default buttons (see above), default buttons never have keyboard shortcuts other than [ENTER] and [ESC]
Only Ok/Cancel/Apply? buttons should have three dimensional borders
JS: rule dropped; following Windows guidelines
- Dialogs may not have a title bar icon
- Dialogs may be resizable
- There may be no usage instructions on forms or form toolbars; all help text moves to the manual
- Title bar should have the same text as invoking menu item
Grids
- Ability to select range ([SHIFT] click), row, column or all
- Read-only cells should not be modified on delete/backspace/paste
- If grid shows indexed items such as group/fleets it must display an index column.
Navigation
- Only navigation tree leafs should invoke pages
Only master nodes should be written in bold font
JS: rule dropped; following Windows guidelines
- Capitalize only on the first word of tree item texts
- Caps only on the first word
- Shortcut keys available
- Toolbars in EwE cannot be docked and undocked, and should not display a grip indicator
- Toolbars in EwE should not show repeated separators without controls in between
Values
- Whenever an indexed item is displayed by name, the item index must be displayed as well
- All number formatting should follow the number of decimal digits and thousands separator settings as configured by the user
- All values display should follow the colour coding settings as configured by the user
Reusing existing functionality
- Several styling issues mentioned above are already implemented and are yours to reuse from the ScientificInterfaceShared.Controls namespace. Please consider reusing controls in this namespace before building your own, or inherit from these controls when building your own.
- The ScientificInterfaceShared.My.Resources module provides reusable strings, icons and bitmaps that we urge you to reuse.
- If you build your own controls from scratch, considering to use ScientificInterfaceShared.Style.cStyleGuide for implementing formatting and colour feedback.