UI/UX Design Strategies

The SAMM 1.0 framework is an evolution of the original application and therefore builds on its design strategies and business rules, while focussing on, and elevating data displayed in grids and forms, in a manner congruent with product owner’s requirements. 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 Department and are subject to change at the discretion of the Product Owner.

General Rules for UI elements

Disclaimer

We can not mention UI Rules or guidelines without prefacing the discussion with an important note. SAMM is a web application that draws very heavily on User Experience patterns typically used in desktop and client-side applications. Therefore, it is difficult to define concrete rules based on either platform. Keeping this important fact in mind, most of the user experience and user interface guidelines established in this documentation will be heavily influenced by the rules and guidelines set forth in the Microsoft Windows Human Interface guidelines. Which can be found here.

It is the intention of the Emprise Corporation Visual Communication Department that the Windows guidelines be used solely as reference material when designing and developing SAMM. The following documentation is a living document, and as such, should be the groundwork for discussion on design and user interaction. If a question about design arises, Emprise Corporation’s design team should be consulted:

Sergio Barrera - Art Director
Liz Roy - Senior Designer
Jo Ray Tanchiatco - Senior Designer
Alan Nadaskay - Visual Designer
Kellie Semmelrock - Visual Designer

The CSS used in this document should not be considered production ready code. It is being used merely as a way to get the general idea of the styles across and as such should be used only as a reference for development purposes.

Please contact Troy Hawley or Mike Botsko for any questions regarding the usage of CSS from this document in the application.


Layout

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 its product owners.

Spacing - All of the spacing in the SAMM application is based on an even 2px 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 more macro elements of the SAMM UI, such as modal windows or navigation panels. Also the visual pacing of the application is based on increments of 2px. It should be noted that, as with any rule, there is no way that it can cover every possible scenario. The design, in every way possible will adhere to this rule, but there will be times that the rule will need to be broken in order to facilitate good design. These scenarios will need to be discussed with Product Owners and the Visual Communication Department before being implemented.

Positioning - 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 as well.

Button Positioning - 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 or forms it would be the lower right hand corner in a footer. The button that contains the action considered most important for the particular window should use theAccented Button styles and should be positioned immediately adjacent to the terminal position, unless otherwise specified.



The Cursor

The cursor, in SAMM, will use the rules set forth in the Microsoft Window Human Interface Guidelines as a base and add to the rules where it is needed. Those rules can be found here.The vast majority of interface elements will display the "Normal Selector" (arrow). However, there will be a select few locations where the "Link Selector" (finger) will need to be used. An example of one of these locations is the "View all..." link in the footer of the main module grid. If other cursor types are be needed, they will be defined in the guidelines for the indiviual UI element.

Layout

SAMM 1.0 | Approved | Last Updated: XXXX-XX-XX

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.

Spacing

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 popup 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.

Specifications

Dimensions

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.


Pop-Up Dialog Boxes

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


Expanded Dialog Windows

Expanded dialog windows are generated when a user clicks the maximize button to the left of the close button on the dialog headers.

Due to the amount of content that varies between dialogs, some circumstances may require the dialog window to exceed the maximum and minimum sizes, expanding to fit the active web browser’s size dimensions with 5px of padding between the dialog and the edge of the web browser window.

For any questions regarding the layout, resizing and repositioning of an expanded dialog, contact the Emprise Corporation Visual Communication Department.

Specifications

 Maximize Button

Expands a dialog or panel when clicked to preset sized dimensions.


 Cascade Button

Reverts the dialog or panel when clicked back to its original sized dimensions.

Text Alignment

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

Business Rule: All numbers, currencies, and times should be right-aligned.

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

Business Rule: 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.

Examples

Positioning

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.

The Cursor

The cursor, in SAMM, will use the rules set forth in the Microsoft Window Human Interface Guidelines as a base and add to the rules where it is needed. Those rules can be found here. The vast majority of interface elements will display the "Normal Selector" (arrow). However, there will be a select few locations where the "Link Selector" (finger) will need to be used. An example of one of these locations is the "View all..." link in the footer of the main module grid. If other cursor types are be needed, they will be defined in the guidelines for the indiviual UI element.

Typography

SAMM 1.0 | Approved | Last Updated: 2014-07-14

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.

Sizes, Color, and Instances

Reference Component Font Font-Weight Font-Size Color Text-Transform
1 Main Tabs Verdana Bold 10px  #FFFFFF All Caps
2 Sub-Module Tabs Active Verdana Regular 11px  #FFFFFF Title Case
3 Sub-Module Tabs Inactive Verdana Regular 11px  #ABABAB Title Case
4 Grid / Body Copy Verdana Regular 11px  #414445 Sentence Case
5 Grid Column Headers Verdana Bold 10px  #414445 Sentence Case
6 Section Headers Verdana Bold 11px  #0070A8 Title Case
7 Section Sub-Heads Verdana Bold 11px  #414445 Title Case
8 Window Headers Verdana Bold 11px  #FFFFFF Title Case
9 Field Titles Verdana Bold 10px  #414445 Title Case
10 Filter Field Titles Verdana Regular 10px  #414445 Title Case
11 Panel Headers Verdana Bold 11px  #FFFFFF Title Case
12 Panel Tabs Verdana Bold 10px  #414445 Title Case
13 Inactive Panel Tabs Verdana Bold 10px  #808080 Title Case
14 Active Arrow Tabs (Special Tabs) Verdana Bold 10px  #FFFFFF Title Case
15 Inactive Arrow Tabs (Special Tabs) Verdana Regular 10px  #FFFFFF Title Case
16 Header Details Verdana Regular 10px  #808080 Title Case
17 Field Data Verdana Regular 10px  #363E47 Title Case
18 Button Text Verdana Regular 10px  #414445 Title Case
19 Body Copy Verdana Regular 10px  #414445 Sentence Case

Examples

Color Palette

SAMM 1.0 | Approved | Last Updated: 2014-05-09

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.

Color Swatches

  • Grey 01

    #414445

  • Grey 02

    #434446

  • Grey 03

    #525354

  • Grey 04

    #666768

  • Grey 05

    #808080

  • Grey 06

    #bfbfbf

  • Grey 07

    #c1c4c6

  • Grey 08

    #E0E2E2

  • Grey 09

    #E5E6E7

  • Grey 10

    #EEEEEE

  • Grey 11

    #F4F5F5

  • Grey 12

    #F5F5F5

  • Blue 01

    #005b91

  • Blue 02

    #0064a2

  • Blue 03

    #006db1

  • Blue 04 - Accent

    #0070A8

  • Blue 05

    #147CB2

  • Blue 06

    #2598E6

  • Blue 07

    #46A0D0

  • Blue 08

    #70BDE9

  • Blue 09

    #d9EAF5

  • blank

    blank

  • blank

    blank

  • blank

    blank

  • Red 01

    #A30736

  • Red 02

    #E83524

  • blank

    blank

  • blank

    blank

  • blank

    blank

  • blank

    blank

  • blank

    blank

  • blank

    blank

  • blank

    blank

  • blank

    blank

  • blank

    blank

  • blank

    blank

Gradient Color Swatches

Name Examples Color Values
Gradient Grey 01 #f4f5f5 - #e5e6e7
Gradient Grey 02 #c1c4c6 - #e0e2e2
Gradient Blue 01 #006db1 - #0064a2
Gradient Blue 02 #70bde9 - #46a0d0 - #147cb2

Buttons and Icons

SAMM 1.0 | Approved | Last Updated: XXXX-XX-XX

Buttons and icons in the SAMM application are styled to match the clean minimalistic aesthetic of the userinterface. 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.

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.

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.

Specifications

  Button Focus State

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

CSS Note: The focus state is setup with a border: 1px dotted #bfbfbf; margin: -1px;

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.

Specifications

 Button Focus

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

CSS Note: The focus state is setup with a border: 1px dotted #bfbfbf; margin: -1px;

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.

Specifications

 Button Focus

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

CSS Note: The focus state is setup with a border: 1px dotted #0070A8; margin: -1px; border-radius: 4px;

Filter Panel Buttons

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

Specifications

Dashboard Buttons And Icons

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

Specifications

Sub-Menu Buttons

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

Examples

Detail Screens Icons

These icons are present in the top lefthand corner of the Machinery History detail screens.

Examples

Time line Event Icons:

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

Examples

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.


Examples

Specifications

CSS Note: The Focus state for Standard Buttons should have a border: 1px dotted #0070a8; margin: -1px; border-radius: 4px; within them. This allows the focused state to be more noticable.

Radio Buttons And Check Boxes

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

Examples

Specifications

Checkboxes

Radio Buttons

Buckets

SAMM 1.0 | Approved | Last Updated: 2021-10-28

A Bucket, in SAMM, is a UI pattern that is being used to organize and select large amounts of data points in a limited amount of space. This interface may also be used when the user needs to select multiple data points at the same time, usually from a tree, unless specified otherwise. In SAMM a bucket will typically replace a standard dropdown list and input when there is not enough space to contain all of the options within the dropdown and can also be utilized as a dialog deApproved on the usage case and location of the bucket.

Specifications

Dialog Menus

Dialog Menus are strategically utilized in SAMM 1.0's dialog headers and adhere to the sizing specifications outlined in Dropdown Menus. Dialog Menus should display below the dialog headers icons/buttons whenever possible.

Example

Specifications

Grid

SAMM 1.0 | Approved | Last Updated: 2021-11-02

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. Upon selection of a grid row, a user can utilize the up or down keyboard arrow keys to navigate the grid vertically. If the Grid has multiple items enabled, then a user can select multiple rows on the Grid by holding down the Shift or CTLR keys while selecting the rows with their mouse.

Specifications

History Details Timelines

SAMM 1.0 | Approved | Last Updated: 2014-02-21

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 Timeline interface and its behaviors please contact the Emprise Corporation Visual Communication Department.

Example Timeline:

Timeline Key:

Color Status Notes
  #2598E6 At Sea -
  #A30736 In Port -
  rgba(204,204,204,1.0) FOS -
  rgba(204,204,204,0.9) ROS 30 -
  rgba(204,204,204,0.8) ROS 60 -
  rgba(204,204,204,0.7) ROS 90 -
  rgba(204,204,204,0.6) ROS 180 -
  rgba(204,204,204,0.5) ROS 360 -
  rgba(204,204,204,0.9) ROS 5 -
  rgba(204,204,204,0.3) ROS FSS -
  rgba(204,204,204,0.9) ROS30VA310 -
  rgba(204,204,204,0.2) ROS-AVA -
  rgba(204,204,204,0.9) ROS 10-310 -
N/A ROS 4 -
N/A ROS 10 -
N/A PREPO -

Iconographic Key:

Icon Definition
Multiple Events Multiple Events
Maintenance Incomplete Maintenance Incomplete
Maintenance Deferral Maintenance Deferral
Maintenance Completion Maintenance Completion
Equipment Change Equipment Change
Equipment Rebuild Equipment Rebuild
Oil Change Oil Change
Repair History Repair History
Maintenance History Maintenance History
Other History Other History
Water Chemistry Test Water Chemistry Test
Special Test Special Test
Lube Oil Test Lube Oil Test
Vibration 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.

Inputs

SAMM 1.0 | Approved | Last Updated: 2023-03-24

Inputs in SAMM 1.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.

Business Rule - Disabled Fields: 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.

Business Rule - Structure: 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.

Business Rule - Permissions / Required Fields: Many modal screens within the SAMM application contain required fields. Normally, data entry is necessary for a required field to pass validation and allow the modal screen to be saved/closed. In the case where a user does not have permission to enter data into a required field, the logic for the required field should be disabled, the styling for the disabled state should be applied to the input, and the required marker (*) should be removed/hidden. This will allow the user to continue to save and close the modal without interference.

Examples

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

Text Input

A Text Input serves a the primary method of entering data into SAMM.

Specifications

CSS Note: Text within Inputs should truncate with an ellipsis 5px away from the right-most edge of the Input.

Inputs with Buttons

Some inputs will have a button that is justified to the right-hand side of the input. These buttons allow additional functionality of the inputs. For example, drop-down context menus.

Inputs with Icon

Inputs will often contain icons to better represent to the user the action to be performed or the type of data to be entered. These buttons are justified to the right-hand side of the input.

Time Entry Input

The Time Entry Input in SAMM uses a similar paradigm to the native time input. It is made up of two inputs, one for hours and one for minutes separated by a static text colon. These two input are then followed by the icon-clock glyph to better illustrate to the user the input's purpose.

CSS Note: The Time Input will need to override the min-width defined for normal Inputs. The two inputs that make up this single input should each be 26px. wide.

Specifications

Email Input

Email Inputs can allow for singular or multiple email addresses.

The Singular Email Address Input can accept one validated email address and utilizes the typeahead functionality to assist users with searching for/entering the user's address.

Singlular Email Address Input Examples

The Multiple Email Address Input can accept multiple validated email address and utilizes the typeahead functionality to assist users with searching for/entering the user's address. Upon entering an email address, the address will be followed up with a semicolon to separate it from the next address.

Note: The input field can either scroll or expand depending on use case and the specific design.

Multiple Email Address Input Examples

Typeahead

SAMM 1.0 | Approved | Last Updated: 2023-02-06

The typeahead in SAMM 1.0 is a predictive text feature that provides suggestions of common words and phrases based on the letters being entered in the field. The Typeahead can be applied to different types of inputs such as dropdown menus, text inputs, and email inputs.

Business Rules:

  • Input styles shall follow the styles defined for the specific input type. See Inputs.
  • Input Clear Icon shall follow the styles defined for Inputs with Icons. See Inputs.
  • Dropdown Menu shall follow the styles defined for Dropdown Menus. See Dropdown Menus.

Notification Interface

SAMM 1.0 | Approved | Last Updated: XXXX-XX-XX

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 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.

Specifications

Panels and Accordions

SAMM 1.0 | Approved | Last Updated: 2016-12-16

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 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.

Specifications

Popovers

SAMM 1.0 | Approved | Last Updated: 2014-02-21

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.

Specifications

Progress Bars

SAMM 1.0 | Approved | Last Updated: XXXX-XX-XX

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 an overall progress, but also need one to show the progress of an individual action.

Specifications

Puller Bars

SAMM 1.0 | Approved | Last Updated: 2014-02-21

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.

Examples

Tabs

SAMM 1.0 | Approved | Last Updated: 2016-11-22

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.

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.

System 1

Specifications

System 2

Specifications

Tooltips

SAMM 1.0 | Approved | Last Updated: 2023-06-02

The SAMM 1.0 tooltips have been designed to match the aesthetics of the application. Any ambiguous interaction where it is not immediately apparent what the user should do should have a tooltip. For example, icons buttons, abreviated grid column headers, fields that enter a validation state, and all truncated textual content should have a tooltip.

Specifications


Tooltip Styles

Name Examples Fonts Notes
Standard Tooltip Body Copy

Standard tooltip that appears on hover of UI elements.
Field Required Tooltip Body Copy

This tooltip appears on hover of required data inputs when they are in a validation state.
Loader Tooltip  Body Copy

Tooltip that appears when it is required that the user knows that information is still loading. These tooltips commonly use Loading Spinners as a visual indicator.

CSS Note: The background size for standard and loader tooltips is detemined by the amount of text or icon size and has a variable width of x 30px. There is also 10px of padding around text/icons within a tooltip.padding: 10px;.

CSS Note: The standard and loader tooltips border is setup with border: 2px solid #ffffff; mix-blend-mode: normal; opacity: 1;, and the background is setup with background: #f5f5f5;

CSS Note: Box-Shadows for standard and loader tooltips use box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.6);

CSS Note: Field Required Tooltip should always have the alert icon to the left of the text. Padding to the left and right of the icon should be 5px. Text should not wrap.

Trees

SAMM 1.0 | Approved | Last Updated: 2014-02-21

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 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.

Examples

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.

Examples

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.

Examples

Dashboards

SAMM 1.0 | Approved | Last Updated: 2014-02-21

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.

Examples

Detail Screens

SAMM 1.0 | Approved | Last Updated: 2014-02-21

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.

Examples

Dialog Windows

SAMM 1.0 | Approved | Last Updated: 2014-02-21

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

Document Comparison

SAMM 1.0 | Approved | Last Updated: 2022-07-19

Comparing documents in the SAMM application is set up using the Aspose.Words API to compare text modifications that have occurred; by comparing an already established type document or a newly uploaded file against another copy or version within the application.

Depending on the specific use case, type document comparison results are outputted automatically to a Panel or an Accordion-Style Panel as HTML and displayed as formatted text to users. Additionally, a Grid can be used to display additional values and data related to the comparison results.

Document Comparison Result Examples

CSS Note: In the comparison results any text that remained unchanged or modified between versions will use the Field Data style as outlined in the Typography Section. Additionally, all type in the text area will use a line spacing of 16px.

CSS Note: In the comparison results the previous/older version of the compared text should be denoted using text-decoration: line-through;.


Supported Read and Write Formats

Below is a list of the formats that the Aspose.Words API supports.
File Formats Extensions
Microsoft Word
  • DOC
  • DOCX
  • RTF
  • DOT
  • DOTX
  • DOTM
  • FlatOPC
  • FlatOpcMacroEnabled
  • FlatOpcTemplate
  • FlatOpcTemplateMacroEnabled
Open Office
  • ODT
  • OTT
WordProcessingML
  • WordML
Web
  • HTML
  • MHTML
Fixed Layout
  • PDF
Text
  • TXT

Loading Systems

SAMM 1.0 | Approved | Last Updated: 2014-02-21

A loading system animation exists to provide the user with an indication that their data request is being processed. The SAMM 1.0 loading system GIF will appear in a panel or overlayed on a dialog screen while information is being populated and will disappear once the process is complete. This process will occur in all data-driven panels and dialogs within the application.

Loading Spinner

Specifications


Modules

SAMM 1.0 | Approved | Last Updated: 2014-02-21

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.

Examples