SAMMUI|UX - Emprise Corporationwiki.emprisecorporation.com/images/2/2f/SAMM_1_UIUX... ·...

SAMM UI|UX Design Manual version 2.0

SAMMUI|UX Design Manualv e r s i o n 1 . 0


2


3

1. Concept Overview .............................. 4

2. Color Palette ....................................... 5

3. Typography .......................................... 6

4. Component Inventory

Macro:

Modules ............................................. 8 Detail Screens .................................. 9 Dialog windows ............................... 10 Dashboards ....................................... 11

Micro:

Grid ..................................................... 12 Main Navigation .............................. 13 Panels / Accordions ....................... 14 Tabs .................................................... 15 Buttons And Icons ........................... 16 Inputs ............................................... 21 Trees ............................... ................... 22 Puller Bar ........................................... 23 Tooltips .............................................. 24 Notifications Interface ................... 25 Progress Bars ................................... 26 Dropdown Menus .......................... 27

5. Layout

Spacing .......................................... 29

Dimensions .................................... 30 Text Alignment .............................. 31 Positioning ........................................ 32

Table of Contents


4

Concept Overview

From a design standpoint, the goal is to create a user interface and experience that can communicate information clearly and effectively. The suggested aesthetic is one of clear edges, few colors, and consistent icon and button systems that

purposely eliminate distractions so that the user’s attention is devoted to the main information being viewed.

Every component design, color scheme, layout, image, button, gradient, and/

or element of graphical nature has been created in-house by the Emprise Corporation Visual Communication Services Department and are subject to change at the discretion of the Product Owner.


5

Color Palette

Inactive Module Tabs (Gradient)

Hex #006db1

Hex #0064a2

Main Tab Bar

Hex #006db1

Hex #0064a2

Active Module Tabs

Hex #005b91

Toolbar (Gradient)

Hex #f4f5f5

Hex #e5e6e7

Toolbar Pressed (Gradient)

Hex #c1c4c6

Hex #e0e2e2

Accented Elements

Hex #0070a8

Panel Headers

Hex #808080

Inactive Sub-Module Tabs

Hex #525354

Active Sub-Module Tabs

Hex #434446

Hover/Focus Sub-Module Tabs

Hex #666768

Application Copy

Hex #414445

Grid Row Hover/Focus States

Hex #eeeeee

Panel Strokes

Hex #bfbfbf

Grid Rows/Panel Backgrounds

Hex #f5f5f5

Selected Elements

Hex #d9eaf5

the color palette used in the application is the following:

The color scheme in SAMM is designed to place emphasis on the information being viewed without being distracting to the user. The aesthetic of the application is intended to be modern and functional.

The colors and gradients described below are present in the most commonly viewed interfaces and components. Gray, blue, black, and white are the base colors from which the graphical treatments in the application are derived. Deviations in color are subject to review by the Visual

Communication Services department at Emprise Corporation.

Puller Bar

Hex #70bde9 Hex #46a0d0 Hex #147cb2


6

Typography

In keeping with the graphical treatment of the SAMM interface, the Verdana font family was chosen for all readable text. This font is simple and clean with clear and defined edges.

It also was chosen because it is present in most modern computers font libraries allowing us to keep the SAMM interface looking consistent on nearly all machines and within all browsers.

Verdana

Aa Bb Cc Dd Eesizes, colors, and instances

1. Main Tabs (#ffffff): 10px. Bold, All Caps, Text Shadow: 0 1 0 #000

2. Sub-Module Tabs (active: #ffffff inactive: #ababab): 11px. Regular, Title Case

3. Grid/ Body Copy (#414445): 10px. Regular, Sentence Case

4. Grid Column Headers (#414445): 10px. Bold, Sentence Case

5. Section Headers (#0070a8): 11px. Bold, Title Case

6. Section Sub-Heads (#414445): 11px. Bold, Title Case

7. Window Headers (#ffffff): 11px. Bold, Title Case

8. Field Titles (#414445): 10px. Bold, Title Case

9. Filter Field Titles (#414445): 10px. Regular, Title Case

10. Panel Headers (#ffffff): 11px. Bold, Title Case

11. Panel Tabs (#414445): 10px. Bold, Title Case

12. Inactive Panel Tabs (#808080): 10px. Bold, Title Case

13. Arrow Tabs (Special Tabs) (#ffffff): active: 10px. Bold, Title Case inactive: 10px. Regular, Title Case

14. Header Details (#808080): 10px. Regular, Title Case

15. Field Data (#000000): 10px. Regular, Title Case

16. Button Text (#414445): 10px. Regular, Title Case

17. Body Copy (#414445): 10px. Regular, Sentence Case Line Height: 14px. The space between paragraphs in a block of copy should be 20px.


7

1

3

4

2

6

15

7

9

10

11 12

13

14

16

5

8

7

17


8

The SAMM user interface is made up of several large components. These components function as containers for other macro elements, as well as a large list of micro elements.

Component Inventory // Macro

The modules in the SAMM interface represent a conglomerate of user interface and user experience elements, defined by the product owner, that adhere to the overriding theme of the application. These modules are designed

such that they are able to stand both alone, as separate applications, and together with the other modules to make up the entirety of the SAMM application. Each module is broken down, for organizational purposes,

into sub-modules in which most of the user interaction is performed.

modules


9

Detail screens will be accessible from all modules and provide more specific information concerning maintenance events within the SAMM interface. Detail screens are accessible by double clicking on grid rows.

These screens are topped with a title bar that displays information about the selected grid row. Below the title bar is a toolbar used to make frequent actions easily accessible. They also contain the same collapsible left hand navigation

system that the main modules do, as well as, the same screen layout. With the addition of a time line at the top of the window to better illustrate the chronology of a the selected history events.

detail screens


10

Dialog windows pop up over the main interface and typically deactivate other elements of the UI. This allows the user to modify very specific aspects of the information being viewed without being able to accidentally modify other data.

These windows usually feature a way of exiting the window without actually making any changes to the application. This is usually an “X” button in the upper right hand corner of the dialog. Other dialogs may require the user to enter

some kind of information in order for them to be closed. The maximum size for a dialog window is 980px X 640px. All dialog windows must be topped with the standard SAMM title bar. (Examples and specs. to be found on page 23.)

dialog windows


11

Dashboards are designed as quick and simple ways to view user specific information. Each dashboard is made up of several widgets. Each containing a graphical representation of relevant data. The layout and number of widgets in the

dashboard are based on a square grid, and can easily be modified to suit the users viewing preferences. The SAMM interface also provides several standard layouts for dashboard grids. Widgets are designed to be as minimalistic as possible

to allow the technical information being presented to be the focal point rather than flashy UI elements.

dashboards


12

The “Macro” elements of the SAMM user interface discussed earlier are made up of the following list of “Micro” elements. The user interface elements included in this list are the intended designs for the SAMM application, and therefore adhere to the stylistic guidelines set herein. All

future designs for UI elements should also adhere to the standards discussed in this document.

Component Inventory // Micro

The Grid is the core element of each module. It contains the vast majority of the information displayed by each module in a clear and concise fashion. The main grid is located in the central viewing area of each module.

The standard grid element is encapsulated within a two dimensional panel used to create visual hierarchy and separation of elements. (Examples and specs. for panels can be found on page 13.)

grid

This toolbar has to be dynamically re-sizable to account for multi-line titles. Minmum height is 25px.

25px tall not including the bottom stroke.

Scrollbar is browser dependent.


13

The navigation in SAMM is an essential aspect of the user interface and functions as the core interaction for every module and sub-module. The top blue bar allows the user to navigate between main modules while the bottom gray bar

allows the user to navigate through the sub-modules of each main module. The “More...” button is actually a menu with any overflow modules.

The minimum widths for both module

main navigation

and sub-module buttons should be 75px not including the left and right dividers. When content dictates the module button be larger the padding should be 10px and 20px for the sub-module buttons.

Module Buttons

Sub-Module Button Selected State

Module Button Hover/Focus State

Module Button Selected State

Overflow Menu Selected State (Uses Grid Row Selected State)

Overflow Menu Hover/Focus State (Uses Grid Row Hover/Focus State)

Sub-Module Button Hover/Focus State

Sub-Module Buttons

30 px Including Top & Bottom Dark Gray Strokes

23 px


14

Panels are two dimensional organizational elements that create hierarchy and act to separate large chunks of information. An accordion in SAMM is simply a collapsible panel.

Care is taken in the creation of the panel elements to make sure the information contained within is the focal point, therefore panels are very simple.

Typically a panel is made up of a light

panels / accordions

gray title bar with bold white text describing its purpose, and a 1px gray stroke that encloses all information being viewed within the panel. However they may often contain the SAMM special tab system. (Described on page 14.)

25 px Title Bar Hex #808080

1 px Stroke (End below title bar) Hex #d0d0d0

Selected Row Hex #d9eaf5

Accordion Style Panel

Interior color always matches the background that the panel is on.


15

The SAMM application contains two sets of tab systems that are used to separate clusters of information. The first is a standard EXT component with modifications to the gradient of the active tab to make it fit into the panel. It is most typically used at the top of elements,

and functions to separate larger groups of information. These tabs use gradients and styling to create dimension. They have a minimum width of 60px and when the content within the tabs forces them to be larger the padding on the right and left sides of the tab should be 10px.

tabs

The second set of tabs is used within panels and can be located both, at the top and bottom of these panels. These are very simple two dimensional tabs that are used to separate smaller, related groups of information while remaining subtle and inconspicuous.

Tab Focus State

Spacing for these tabs should always be 5 px. 10 px10 px

Background Gradient: ( 90deg, rgb(245,245,245) 11%, rgb(239,238,238) 100%)


5px Radius 5px Radius1px Solid #b5b5b51px Solid #ffffff 1px Solid #ffffff

Selected Disabled (50% Opacity)



Verdana Bold 10px #525354

Non-Selected Hover

system 1:

system 2:

5px Radius 5px Radius1px Solid #b5b5b5 1px Solid #b5b5b5

1px Solid #b5b5b5

1px Solid #ffffff 1px Solid #ffffff


16

Buttons and icons in the SAMM application are styled to match the clean minimalistic aesthetic of the user interface. Their message must be clean and concise to make navigation as intuitive as possible.

Icons, in SAMM, are a graphical representation of an action to be performed. They can stand alone or become part of a button, which is essentially a shell for the icon that helps to better emphasize that an action is required.

buttons and icons

Business Rule: The ellipsis should be used on any clickable button that will open a window that is not part of the SAMM application. This most typically will mean an operating system default modal window.

Button Out15 px X 16 pxGradient Overlay: Start: # 424546 End: # 4a4d4f Angle: 90°

Stroke: Size: 1 px Position: Outside Blend Mode: Normal Opacity: 100% Hex: # 454546

Inner Glow: Blend Mode: Normal Opacity: 20% Hex: # ffffff Size: 1 px

Button Down15 px X 16 pxGradient Overlay: Start: # 3b3d3e End: # 3e4042 Angle: 90°

Stroke: Size: 1 px Position: Outside Opacity: 100% Hex: # 2a2b2c

Inner Shadow: Blend Mode: Multiply Opacity: 40% Angle: 90° Hex: # 000000 Distance: 2 px Size: 3 px

IconColor: # d4d4d4Drop Shadow: Blend Mode: Multiply Opacity: 20% Angle: 120° Distance: 1 px Spread: 0 px Size: 1 px

Button Out15 px X 16 pxGradient Overlay: Start: # 6c6c6c End: # 808080 Angle: 90°

Stroke: Size: 1 px Position: Outside Blend Mode: Normal Opacity: 100% Hex: # 454546

Inner Glow: Blend Mode: Normal Opacity: 40% Hex: # ffffff Size: 1 px

Button Down15 px X 16 pxGradient Overlay: Start: # 666766 End: # 767677 Angle: 90°

Stroke: Size: 1 px Position: Outside Opacity: 100% Hex: # 454546

Inner Shadow: Blend Mode: Multiply Opacity: 32% Angle: 90° Hex: # 000000 Distance: 2 px Size: 3 px

IconColor: # d4d4d4Drop Shadow: Blend Mode: Multiply Opacity: 20% Angle: 120° Distance: 1 px Spread: 0 px Size: 1 px

Button Out23 px X 23 pxGradient Overlay: Start: # eaebec End: # f4f4f5 Angle: 90°

Stroke: Size: 1 px Position: Inside Blend Mode: Normal Opacity: 100% Hex: # ffffff

Button Over23 px X 23 pxGradient Overlay: Start: # f7f7f7 End: # fbfbfb Angle: 90°

Stroke: Size: 1 px Position: Inside Blend Mode: Normal Opacity: 100% Hex: # ffffff

Button Down23 px X 23 pxGradient Overlay: Start: # e8e8e8 End: # e9eaeb Angle: 90°

Inner Glow: Blend Mode: Normal Opacity: 75% Hex: # d3d3d3 Size: 2 px

IconThese icons do not have any special layer styles. They were designed as a set to match a monochromatic scheme. They do not change based on the state of the button.

Dialog Title Bar Buttons

This button stack includes an unpressed state and a pressed state. These buttons should have a minimum width of 15px and when the text within the buttons forces them to be wider the padding between the edges of the buttons and the text should be 10px.

Panel Title Bar Buttons

This button stack includes an unpressed state a hover state and a pressed state. These buttons should have a minimum width of 15px and when the text within the buttons forces them to be wider the padding between the edges of the buttons and the text should be 10px.

Toolbar Buttons

This button stack includes an unpressed state, a hover state and a pressed state. These buttons should have a minimum width of 25px and when the content within the buttons forces them to be wider the padding between the edges of the buttons and the content should be 10px.


17

Button FocusCSS: border: 1px dotted #bfbfbf; margin: -1px;

Button FocusCSS: border: 1px dotted #bfbfbf; margin: -1px;

Button FocusCSS: border: 1px dotted #0070a8; margin: -1px; border-radius: 4px;

Dialog Title Bar Button Focus State

The focus states for these buttons will need to be added using CSS for practical reasons.

Panel Title Bar Button Focus State


Toolbar Button Focus State



18

Filter Panel Buttons

These buttons appear on the left-hand filter navigation panel. They are visible at all times.

Dashboard Buttons And Icons

These buttons and icons allow the user to manipulate the SAMM home screen to match their preferences.

Sub-Menu Buttons

These buttons are used to modify the SAMM wrapper rather than the information that it is portraying.

Toggle Filter15 px X 46 pxGradient Overlay: Start: # 3292c4 End: # 026fa7 Angle: 90°

Pin Filter12 px X 20 pxGradient Overlay (Pinned): Start: # 4a4d4f End: # 414445 Angle: 180°

Gradient Overlay (Unpinned): Start: # 808080 End: # d0d0d0 Angle: 180°

Toggle Trend Filter12 px X 20 pxGradient Overlay: Start: # 808080 End: # d0d0d0 Angle: 180°

Edit Dashboard16 px X 16 pxThe Out state on this icon is a 60% opacity screen of the Over state.

Delete Item16 px X 16 pxThe Out state on this icon is a 60% opacity screen of the Over state.Note: This icon is used throughout the application to delete or remove items.

Add New Dashboard22 px X 22 pxGradient Overlay: Start: # e8e8e8 End: # f5f5f5 Angle: 90°

Stroke: Thickness: 1 px Color: # ababab

Inner Glow: Size: 1px Color: # ffffff Offset: 0px

Create Report20 px X 20 pxThese are just icons and have no special treatments.

Additional Details20 px X 20 pxThese are just icons and have no special treatments.


19

Detail Screens Icons

These icons are present in the top left-hand corner of the Machinery History detail screens.

Time line Event Icons:

These icons are used to indicate events on the time lines used in the Machinery History detail screens.

Window Buttons

SAMM windows and forms use the following EXT standard components. These buttons should have a minimum width of 80px and when the text within the buttons forces them to be wider the padding between the edges of the buttons and the text should be 10px.

Static Icons16 px X 16 pxThese icons share a common Gradient Overlay: Start: # 464646 End: # 636363 Angle: 90°

Static Icons18 px X 18 pxThese icons share a common Gradient Overlay: Start: # 464646 End: # 636363 Angle: 90°

Standard Buttons22 px X 80px (Dynamic)The size of these elements can change horizontally to accommodate longer action names.

Button FocusCSS: border: 1px dotted #0070a8; margin: -1px; border-radius: 4px;


20

Radio Buttons And Check Boxes

The standard EXT radio buttons and check boxes were changed in order to better match the SAMM UI.


21

Inputs in SAMM 2.0 are some of the core user interface elements and serve the purpose of providing the user with an element that they can input data into or choose existing data from. As this is the core functionality of SAMM it is extremely important for these elements to clean, simple and recognizable. For this reason we have used the standard EXT JS input design.

When an input is disabled the field and its input values will appear at 60% of their base opacity. The field label, however, will remain at 100% opacity. In the case of a combo box, the field button should also appear at 60% opacity and in-field icons should not be displayed at all. The cursor when hovering over a disabled input should display an arrow rather than the text bracket or pointer.

inputs

The minimum width for an input field in SAMM 1.0 should be 80px. Padding left and right for input fields should always be 5px. All text should truncate this distance from the right edge of the field when the field value is longer than the field length. Combo boxes should also have a minimum width of 80px including the button.

Inputs That Accept Multiple Selections

When an Input is capable of accepting multiple input values it should follow the rules set in the table below as to what needs to be displayed in the field.

Bucket Selection Input Field Domain Data After Selection

All Vessels Selected All Vessels Selected

Multiple (But Not All) Vessels Selected Multiple Vessels Selected

One Vessel Selected Vessel Name

All Items Selected All Items Selected

Multiple (But Not All) Items Selected Mutliple Items Selected

One Item Selected Item Name


22

Trees in SAMM are organizational tools that allow the hierarchical viewing of static data. Items in trees are organized in parent and child relationships. Where a single parent item may contain many child items, which in turn, may contain

more child items of their own, making them parents to those items.

The SAMM interface has three basic types of trees. All three types are used to organize large groups of information

trees

that might otherwise be visually overwhelming to a user.

All trees use their node hover state as their focused state.

Graphical User Interface Tree

This tree form is used in large user interface elements to illustrate a sense of hierarchy in a visually pleasing way.

Navigation Tree

This tree form is used as a way for the user to navigate more fluently through large amounts of information presented by a given module.

Grid Tree

This tree form is used for the purpose of navigating specifically through large amounts of related grid entries. This tree most commonly appears as a static column in a grid.


23

The puller bar is an element in the SAMM interface that divides both the main screen and the details screens into a grid section and an additional details section. It also functions to universally modify the sizes of other elements in the interface,

such as panels and grids. The button to the far left of the puller bar will collapse and expand the grid depending on the user’s need.

puller bar


24

The standard EXT tooltips have been replaced in the SAMM interface to better match the design aesthetics of the application.

Business Rule: Any ambiguous user interaction that it is not immediately apparent what the user should do should have a tooltip. This mean things like buttons with icons only, no text. For example, the minimize and

tooltips

maximize buttons in the panel headers or the “suggestions” button in the main navigation bar. Also all truncated textual content should have a tooltip.

Resip Analysis2012-05-09 01:04 Loading . . .

Rendering . . .

Tooltip

Standard tooltip that appears on hover of UI elements.

Loader

Tooltip that appears when it is required that the user knows that information is still loading.

BackgroundSize determined by text. 10 px padding around text.Background Color: Hex: # f5f5f5

Stroke: Size: 2 px Position: Outside Blend Mode: Normal Opacity: 100% Hex: # ffffff

Drop Shadow: Blend Mode: Multiply Opacity: 60% Angle: 90° Distance: 0px Spread: 0% Size: 3px

Loading...(Variable Width) x 30px

Rendering...(Variable Width) x 30px


25

The Notifications Interface is available to the user in every module of the SAMM application. It is designed as a tool for the user to easily track the progress of actions they have initiated in the background, as well as, provide a location

for general notifications generated by the application to be stored for universal access.

Note: When a row, in the notifications dropdown, representing an action

notifications interface

completes its action the magnifying glass icon will take the place of the loading spinner. This indicates to the user that may now view the result.

Max Width 300px Max Width 300px

background-color: #e83524 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4)

box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4)

box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25)

20px 20px

20px

20px

19px

19px

20px

16px2

Dropdown Inner Stroke: 1px solid #e5e6e7

Panel Stroke: 1px solid #bfbfbf

10px, Underlined, #414445

10px, Underlined, #0070a8

<< 10px, Regular, #808080<< 11px, Bold, #414445

<< 12px, Bold, #414445

<< 10px, Regular, #808080Row Hover Color: #f9f9f9

background-color: #f5f5f5

10px

30px

20px

20px

20px

20px

20px


26

Progress bars give users a quick sense of how much longer an operation will take.

A progress bar should always fill from 0% to 100% and never move backwards to a lower value. If multiple operations

are happening in sequence, use the progress bar to represent the delay as a whole, so that when the bar reaches 100%, it doesn’t return back to 0%. The exception to this is when you have a second progress bar being used to show

progress bars

an overall progress, but also need one to show the progress of an individual action.

20px

13px

3px Radius2px Radius

3px padding between blue bar and grey. bar.

background-color: #dadada box-shadow: 0 1px 0 #fff, inset 0 1px 0 rgba(0,0,0,.3)

background-color: # 0070a8box-shadow: 0 1px 0 #083145, inset 0 1px 0 #3ca5da


27

Dropdown menus use the default EXT style settings and adhere to the following exceptions.

Whenever possible, the dropdown menu should display 20 rows. If the menu is forced to show less than it will scroll vertically to be able to display the rest of its content.

The menu’s width should be equal to that of the combobox it is coming from, including the button to a minimum of 160px. When the content of the menu

forces it to be bigger there should be 30px between the end of the text that forced the menu to be bigger and the right hand edge of the menu. This space is so large to take into consideration the size of the Windows scroll bars plus some extra padding to improve readability.

Dropdown menus in SAMM are permitted to extend outside of the elements that contain them. Such as, modal windows or panels.

The menu should open below the

dropdown/context menus

combobox that it is coming from whenever possible. If the menu is obstructed from opening below than it may open above the combobox it is coming from. If it is obstructed from opening both above and below the combobox it will cover the combobox and extend a tall as it possibly can with 10px padding between it and any objects that are obstructing it.

The menu should auto open to the current selection in the combobox and close when clicked out of.


28

Dropdown Menu States

This is a continuation of the dropdown menus section on the previous page.

Row Selected State

Row Hover/Focus State


29

Popovers are a UI element used in a similar fashion to tooltips but with the ability to further interact with them.

Popovers appear upon hover of a parent element and contain information and interactions specific to the parent element. The user should be able to move the cursor from the hovered parent element into the popover interface without the popover disappearing.

Popovers should have a min-height of 80px. not including the positioning arrow

at the top of the interface. The Popover should dynamically resize with its content to a max-height of 360px. If the content would forces the Popover to larger than 360px. the overflow content will scroll within the interface. (See imagery below for details)

Popovers should have a width of 300px. Any content that would extend outside of that width will truncate with an ellipse icon. When the user hovers over truncated content a tooltip will pop up containing the full content.

popovers


30

20px

30px

20px

20px Panel Tabs Text Hyperlink Text

20px

44px Invisible Header

30px Invisible Footer

box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);


31

The Timelines in the History Details screens show a visual representation of historical milestones pertaining to a particular vessel. The Timeline also breaks down vessel operational statuses over the same period of time as the individual maintenance events, represented by the grey boxes in the background of the Timeline. Events are represented by an iconographic set. The color values associated to certain operational statuses and the icons associated to a particular event are detailed in the following pages.

When the user hovers the mouse cursor over the icon for a maintenance event a Popover containing information and hyperlinks pertinent to that event will be displayed. For event markers that contain more than one even a folder icon is used. When the user hovers over this folder icon the Popover that is displayed will contain a full list of events associated with that point in time. Each event in this list will be a hyperlink that links to the relevant detail screen in SAMM.

For further details pertaining to the

history details timelines

Timeline interface and its behaviors please contact the Emprise Corporation Visual Communication Department.

Example Timeline:


32

Timeline Key:

1. ■ #2598E6 | At Sea

2. ■ #A30736 | In Port

3. ■ rgba(204,204,204,1.0) | FOS

4. ■ rgba(204,204,204,0.9) | ROS 30

5. ■ rgba(204,204,204,0.8) | ROS 60

6. ■ rgba(204,204,204,0.7) | ROS 90

7. ■ rgba(204,204,204,0.6) | ROS 180

8. ■ rgba(204,204,204,0.5) | ROS 360

9. ■ rgba(204,204,204,0.9) | ROS 5

10. ■ rgba(204,204,204,0.3) | ROS FSS

11. ■ rgba(204,204,204,0.9) | ROS30VA310

12. ■ rgba(204,204,204,0.2) | ROS-AVA

13. ■ rgba(204,204,204,0.9) | ROS 10-310

14. □ No Color Currently Assigned | ROS 4

15. □ No Color Currently Assigned | ROS 10

16. □ No Color Currently Assigned | PREPO

Iconographic Key:

Multiple Events

Maintenance Incomplete

Maintenance Deferral

Maintenance Completion

Equipment Change

Equipment Rebuild

Oil Change

Repair History

Maintenance History

Other History

Water Chemistry Test

Special Test

Lube Oil Test

Vibration Test

Related Items Grid Line Screen Launched on Double-Click Notes

Maintenance View PM Details

Repair View Repair Details

Lube Oil CMS Details Screen

Fuel Oil CMS Details Screen

Special Test CMS Details Screen

Vibration CMS Details Screen

Recip Analysis CMS Details Screen

Water Chemistry CMS Details Screen

Work Item PENG Work Item Every WI that has equipment.

TransAlt TransAlt Ship Details Screen This will be a duplicate of the Work Item Entry.


33

The layout of the SAMM application is an important aspect of defining the standards for the user interface. Layout is based on spacing, sizes, and user interface element positioning. All of these aspects follow a standard that adheres to both common web application

industry standards and a set of standards agreed upon by Emprise Corporation and the product owner. It is, however, important to remember not all standards have been set forth and that in the case that a question about layout or design arises the Emprise Corporation’s Visual

Communication Services department should be consulted.

Contact: Sergio Barrera Art Director

Layout

All of the spacing in the SAMM application is based on a 5px standard unit of measurement. This is especially important when dealing with spacing between and around elements of the user interface.

Where ever possible, there should be 20px of padding as margins around elements of the SAMM UI, such as pop-up windows or navigation panels. Also the visual pacing of the application is based on increments of 5.

When determining spacing for text elements the baseline of the text should be used to measure spacing below text and the font ascenders should be used to determine spacing above the text.

spacing

25px

10px10px

10px20px

10px

5px

30px

25px20px

20px 20px

Text Baseline

Text Ascenders

20px


34

Along with spacing, dimensions are important to take into account in the SAMM interface. It is important to remember that the minimum window size for the SAMM user interface is 1024px x 768px. This means that all designs must

work within this fixed window size.

dimensions

Pop-Up Dialog Boxes

Maximum Size: 980px x 640px Minimum Size: 300px x 128px


35

The following business rules governing alignment apply to all numerical input values, in regards to the user interface.

1. All numbers, currencies, and times should be right-aligned.

2. All text IDs (even if numerical) and dates should be left-aligned.

3. There will be no dollar signs ($) used in domain data. Dollar signs will only be used in the static grid row containing

totals, as seen in the “Availabilities” grid. Totals will be displayed using the Accounting standard.

text alignment


36

When it comes to positioning, the SAMM user interface follows a somewhat standard format for web applications and adheres to many of the Microsoft Windows design standards. This is due to the fact that the majority of the users

of the SAMM application are using the Windows platform on their machines.

Following that general mentality when positioning buttons, especially in modal windows, the button with the negative

connotation should be positioned in the terminal position for the element. In the case of modal windows it would be the lower right hand corner.

positioning

In the case of a dialog window, the buttons that will eventually close out the window should be arranged in this order. And in this position.

Buttons will also appear in this position that can be used to perform essential actions.

SAMMUI|UX - Emprise Corporationwiki.emprisecorporation.com/images/2/2f/SAMM_1_UIUX... ·...

Documents

Transcript of SAMMUI|UX - Emprise Corporationwiki.emprisecorporation.com/images/2/2f/SAMM_1_UIUX... ·...