SAMM UI|UX Design Manual version 2.0
SAMMUI|UX Design Manualv e r s i o n 1 . 0
SAMM UI|UX Design Manual version 1.0
2
SAMM UI|UX Design Manual version 1.0
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 Panels / Accordions ...........................13 Tabs .......................................................14 Buttons And Icons ..............................15 Drop down ..........................................19 Trees ............................... .....................20 Puller Bar ..............................................21 Tooltips ................................................22
5. Layout
Spacing .............................................23 Dimensions ......................................24 Positioning ........................................25
Table of Contents
SAMM UI|UX Design Manual version 1.0
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.
SAMM UI|UX Design Manual version 1.0
5
Color Palette
Inactive Module Tabs (Gradient)
Hex #006db1
Hex #0064a2
Main Tab Bar
Hex #006db1
Hex #0064a2
Active Module Tabs (Gradient)
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
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
SAMM UI|UX Design Manual version 1.0
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 (#000000): 11px. Regular, Sentence Case
4. Section Headers (#0070a8): 11px. Bold, Title Case
5. Section Sub-Heads (#414445): 11px. Bold, Title Case
6. Window Headers (#ffffff): 11px. Bold, Title Case
7. Stand Alone Field Titles (#414445): 10px. Bold, Title Case
8. Grouped Field Titles (#414445): 10px. Regular, Title Case
9. Panel Headers (#ffffff): 11px. Bold, Title Case
10. Panel Tabs (#414445): 10px. Bold, Title Case
11. Arrow Tabs (Special Tabs) (#ffffff): active: 10px. Bold, Title Case inactive: 10px. Regular, Title Case
12. Header Details (#808080): 10px. Regular, Title Case
13. Field Data (#000000): 10px. Regular, Title Case
14. Button Text (#414445): 10px. Regular, Title Case
SAMM UI|UX Design Manual version 1.0
7
1
3
2
5
5
13
6
8
9
10
10
11
12
14
4
7
SAMM UI|UX Design Manual version 1.0
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
SAMM UI|UX Design Manual version 1.0
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 timeline at the top of the window to better illustrate the chronology of a the selected history events.
detail screens
SAMM UI|UX Design Manual version 1.0
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
SAMM UI|UX Design Manual version 1.0
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
SAMM UI|UX Design Manual version 1.0
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.
25px Grid row.
Scrollbar is browser dependent.
SAMM UI|UX Design Manual version 1.0
13
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.
SAMM UI|UX Design Manual version 1.0
14
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.
The second set of tabs is used within
tabs
System 1
System 2
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.
Spacing for these tabs should always be 5 px.
The spacing for these tabs will be dependent on the size of the panel header, but should not be any less than 5 px. They should also always be centered in the header.
5 px 5 px5 px
SAMM UI|UX Design Manual version 1.0
15
Buttons and icons in the SAMM application are styled to match the clean minimalistic aesthetic of the user interface. Both buttons and icons appear in nearly every element of the UI and represent a large amount of what the user
will actually be interacting with. Therefore their message must be clean and concise to make navigation as intuitive as possible.
Icons, in SAMM, are a graphical
buttons and icons
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.
Button Out15 px X 16 pxGradient Overlay: Start: # 424546 End: # 4a4d4f Angel: 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 Angel: 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 Angel: 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 Angel: 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 Angel: 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 Angel: 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 Angel: 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.
Panel Title Bar Buttons
This button stack includes an unpressed state a hover state and a pressed state.
Toolbar Buttons
This button stack includes an unpressed state, a hover state and a pressed state.
SAMM UI|UX Design Manual version 1.0
16
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 Angel: 90°
Pin Filter12 px X 20 pxGradient Overlay (Pinned): Start: # 4a4d4f End: # 414445 Angel: 180°
Gradient Overlay (Unpinned): Start: # 808080 End: # d0d0d0 Angel: 180°
Toggle Trend Filter12 px X 20 pxGradient Overlay: Start: # 808080 End: # d0d0d0 Angel: 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 Angel: 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.
SAMM UI|UX Design Manual version 1.0
17
Detail Screens Icons
These icons are present in the top left-hand corner of the Machinery History detail screens.
Timeline Event Icons:
These icons are used to indicate events on the timelines used in the Machinery History detail screens.
Window Buttons
SAMM windows and forms use the following EXT standard components.
Static Icons16 px X 16 pxThese icons share a common Gradient Overlay: Start: # 464646 End: # 636363 Angel: 90°
Static Icons18 px X 18 pxThese icons share a common Gradient Overlay: Start: # 464646 End: # 636363 Angel: 90°
Standard Buttons22 px X (Dynamic)The size of these elements can change horizontally to accommodate longer action names.
SAMM UI|UX Design Manual version 1.0
18
Radio Buttons And Check Boxes
The standard EXT radio buttons and check boxes were changed in order to better match the SAMM UI.
SAMM UI|UX Design Manual version 1.0
19
A drop-down menu is a user interface control element which allows the user to choose one value from a list of preexisting values. There are several different types of drop-down menu in the SAMM interface and some of them have vastly
different functionality than others.
Most drop-down menus will open a list of simple values, however, some will open calendar selection widgets, and others may open completely separate
drop-down menus
dialog boxes. The type of window one of these menus opens up is most typically indicated by the icon present on the drop-down button.
Standard Drop-Down Menu
This is the drop down menu used most commonly in the SAMM interface.
Out OutOut
Over OverOver
Down DownDown
Menu Menu
Ellipsis Menu
These drop-downs actually open a new dialog window in order for the user to make their selection.
Calendar Selector
This drop-down menu is used specifically to select dates in a predetermined format.
SAMM UI|UX Design Manual version 1.0
20
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
in 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.
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.
SAMM UI|UX Design Manual version 1.0
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.
puller bar
SAMM UI|UX Design Manual version 1.0
22
The standard EXT tooltips have been replaced in the SAMM interface to better match the design aesthetics of the application.
tooltips
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 pad-ding around text.Color Overlay: Hex: # f5f5f5
Stroke: Size: 2 px Position: Outside Blend Mode: Normal Opacity: 100% Hex: # ffffff
Loading...(Variable Width) x 30px
Rendering...(Variable Width) x 30px
SAMM UI|UX Design Manual version 1.0
23
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.
spacing
25px
10px10px
10px20px
10px
5px
30px
25px
20px
20px
20px 20px
SAMM UI|UX Design Manual version 1.0
24
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 120px
Pop-Up Dialog Boxes
Maximum Size: 980px x 640px Minimum Size: 300px x 120px
SAMM UI|UX Design Manual version 1.0
25
The following business rules governing alignment apply to all numerical input vaules, 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
SAMM UI|UX Design Manual version 1.0
26
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.
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.