SAMMUI|UXwiki.emprisecorporation.com/images/archive/2/2f... · SAMM UI|UX Design Manual version 1.0 6 Typography In keeping with the graphical treatment of the SAMM interface, the

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


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


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


7

1

3

2

5

5

13

6

8

9

10

10

11

12

14

4

7


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

25px Grid row.

Scrollbar is browser dependent.


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.


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


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.


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.


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.


18

Radio Buttons And Check Boxes

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


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.


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.


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


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


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


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


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


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.

Documents

SAMMUI|UXwiki.emprisecorporation.com/images/archive/2/2f... · SAMM UI|UX Design Manual version 1.0 6 Typography In keeping with the graphical treatment of the SAMM interface, the