Interaction and Style Guide: Next Generation Systems Touch Screen HMI

Next Generation Systems Touch Screen HMI
INTERACTION AND STYLE

GUIDE
Nordson | Confidential | October 2018 Page 1 of 47

Contents
Revision History: ...............................................................................................................................................................................3
Interaction and Style Guide ..............................................................................................................................................................4
Color Pallet - UI .................................................................................................................................................................................5
Typography .......................................................................................................................................................................................7
Responsive vs. Adaptive Design .................................................................................................................................................... 14
Screen Types and Structure ........................................................................................................................................................... 20
Components .................................................................................................................................................................................. 28
Icon Design .................................................................................................................................................................................... 43
Sample Endeavor Menu Structure ................................................................................................................................................ 44
Terminology................................................................................................................................................................................... 47

REVISION HISTORY:
DATE / Rev. Edited by: Comment (detailed description of changes made):
6-Aug-2015 U.S. Software Initial Issue

Support team
10/30/2017 Definition Team
2/5/2018 Uma Color palette, Typography, Touch Gestures
3/13/2018 Uma System status colors
4/19/2018 Uma Updated with Blue Color palette
7/16/2018 Mitch Replaced “standby” with “setback. Updated Setback screen saver
10/24/1018 Uma Replaced wireframes with actual screens

INTERACTION AND STYLE GUIDE
This guide provides a high-level overview of the look and basic behaviors of components (controls and indicators) used in
adhesive application control systems.
• The arrangement of components on screens presented here is generally representative of how components
should be arranged. However, different size screens and different applications may require more flexible
component placement.
• The behaviors presented here (especially response-time related) are to be considered the minimum acceptable in
order to create the intended positive user experience.
• The components, look, and behavior presented here reflect the harmonized interaction design created to support
all future Adhesive products.
Benefits of a Common Look and Feel
The following are benefits from a common UI look and feel:
• Improved usability and ease of use of Nordson products across corporate product lines. This includes:
o Graphic familiarity
o Navigation familiarity
o Minimal training for end users and technicians
About Wizards
The concept is common among other operating systems. However, the term used depends on the operating system.
For example, MS Windows uses the word Wizard, while Macs use the term Assistant. Nevertheless, the term is
followed by a modifier, such as the Commissioning Wizard or the Commissioning Assistant.
• Users want to accomplish a goal that has many steps, or require steps to be performed in a specific sequence.
• Users lack the basic knowledge needed to accomplish the entire procedure.
• The first wizard screen should provide a brief explanation or purpose of the wizard. Navigation buttons (graphic
and/or graphic with text) should include Next and Cancel.
• The last wizard screen should display a summary of the user-defined settings. Navigation buttons (graphic and/or
graphic with text) should include Back and Done.
• The user must complete the wizard, or touch Exit to navigate to or access any other non-wizard screen.

COLOR PALLET - UI
Screen UI Primary Color pallet
Font Colors

Icon Colors
Status Colors- Including Zone Status

Keyboard Colors
TYPOGRAPHY
The goal is to design a consistently positive reading experience, regardless of the screen size.
Key Element.
• Serif / Sans Serif
• Font size
• Line height (also called leading)
• Font family
Serif / Sans Serif
“Serifs” are the small finishing strokes on the end of a character. “Sans serif” fonts do not have these small finishing strokes.
Examples of serif and sans serif letters

Preferred mobile typefaces
Letter forms that are too intricate and thin are not only hard to read, especially for those with dyslexia or visual disabilities but
also tend to break down at smaller sizes. This means that when fonts are scaled for mobile screens, readability challenges
arise, especially on devices without Retina screens.
To avoid this problem, opt to use sans-serif fonts for mobile websites and applications. The simple, straightforward
letterforms of sans-serifs tend to scale better and make for a more readable presentation across a wider range of screen sizes
and resolutions.
Size
Since different fonts render at different sizes, there is no default font size that must be used for mobile screens,
although anything smaller than 16 pixels becomes challenging to read for any screen.
On the flip side, text that is too large will create awkward breaks (same goes for hyphens which we designers rarely use.) For
mobile layouts, font sizes are typically set in Ems ( in CSS) rather than pixels so that the font size is relative, ready to respond
to different screen parameters.
• To allow users to resize the text (in the browser menu), use em instead of pixels.
• The em size unit is recommended by the W3C.
• 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
If font is too small :
• You have to concentrate to read the text
• You have to squint your eyes
• You have the urge to zoom in
If font is too large :
• You begin noticing letterforms instead of reading the content
• You can only read one to three words at a time
• You have the urge to zoom out

Line height (also called leading)
• “Single spaced” (line height of 100%, equal to the font size)
• 1.5 lines (line height of 150%, equal to 1.5 times the font size)
• “Double spaced” (line height of 200%, twice the font size)
To maximize readability, use a line height that is 130% to 150% larger than the font
If leading is too narrow :
• The text feels dense and overwhelming
• You read the wrong line of text accidentally
If leading is too large :
• You get distracted by the white space between rows of words
Primary Font Face
Verdana

Verdana
Regular - 14px #333030 - All the text with in the Blue box
Verdana
Bold - 24px #333030 - 832 / 50%/130
Verdana
Regular - 18px #333030 – gms /PSI
Verdana
Bold - 16px #333030 - 175
Verdana
Bold - 12px #333030 - °C
TOUCH GESTURES
These are some of the most common user gestures:
BASIC ACTIONS
User action Gesture Description

Change Mode Touch surface for extended period
Open Rapidly touch surface twice with fingertip
Select Briefly touch surface with fingertip
OBJECT – RELATED ACTIONS

Delete Drag (across item or off-screen)
Move fingertip over surface without losing

contact
Move Drag (and drop)
Move fingertip over surface without losing

contact
Quickly brush surface with fingertip
Scale down Touch surface with two fingers and bring

them closer together

Scale up Touch surface with two fingers and move
them apart

NAVIGATION ACTIONS

Adjust view spread (zoom in) Touch surface with two fingers and move
them apart
Rapidly touch surface twice with fingertip
Scroll Move fingertip over scrollbar without losing

contact
Touch scrollbar for extended period
Scroll (fast) Quickly brush surface with fingertip in the

direction you want to scroll

RESPONSIVE VS. ADAPTIVE DESIGN
Regardless of which design methods you are using, follow the following screen structure.
1 2
4
3
Item Description
1 Status – Do not move, or shift, this always resides on upper left corner of the screen
2 Top bar- all component status icons goes - “ do not place navigation Icon here ( hamburger icon)
3 Reserve for main navigation. – Do not use hamburger Icon for main navigation
4 Secondary content area – for widgets
5 Main Content area - Might contain any large data or Image

Adaptive Design
Generally we would design for six common screen widths:
1. 320
2. 480
3. 760
4. 960
5. 1200
6. 1600.
However, you can make a more informed decision by looking at your customer base for the most commonly used
devices and then designing for those viewports.

Responsive Design
Responsive designs respond to changes in browser width by adjusting the placement of design elements to fit in the
available space
Responsive design is straightforward. Because it is fluid, it means that users can access as much of it on their
handheld device as they would on a massive monitor.

Responsive Design, Screen Layout and Grid
Standard View break point and Grid
1 2
Item Description
1 Summary and detail view content in layouts
• Layouts under 600dp wide may fill the screen with a single level of content hierarchy (either summary or
detail content, but not both)
2 Max Screen Widths
Layouts over 1600dp wide may let the layout grow until it hits a max width. At this point, the grid may do one of
the following:
• Become center aligned with increased margins
• Remain left aligned while the right margin grows
• Continue to grow while revealing additional content

SYSTEM-STATUS COLORS
Background
System State Description
Color
Run Green All conditions satisfied for running production
Making product or ready to but

Alert Yellow - something is wrong
- defective product
No alert or fault condition, waiting for run

condition to be satisfied by all system settings
Idle Blue - heat up, ready delay, setback
- low line speed (for pattern)
- remotely disabled
Not able to make product - equipment

Fault Red
problem that requires system shutdown
Our machine initiatives the stop based on

defects detected in the product or equipment
Stop
problem that does not require system
shutdown.
Commissioning not completed (out of box)

Component or
Grey Back-up/restore in progress, Software
System is Off
upgrade. Control switched off.

Condition System Status Internal Zones External Zones
Run
Fault
Stop
Alert
Offline ( Icon Still Not clear Still Not clear

Missing)
Idle - Heating
( heat up)
Idle - Ready
Delay
or or
Idle - Set
Back
Smart Melt N/A

SCREEN TYPES AND STRUCTURE
Tablet HMI Home Screen
Item Description
1 Top Status bar or status at glance. (For status bar content refer component section)
2 Expandable Primary Navigation
3 Main Content area
4 Widgets or Cards – Stackable.
Typical Use
Home screen only, but customizable
Can include the following components
• Buttons
• Grid lists
• Icons
• Activity Progress
• Graphs

Mobile HMI Home Screen
1
1) Top Status bar or status at glance. (For status bar content refer
component section)
2) Primary Navigation. Customizable and expandable.

2
3) Main Content area
4) Widgets or Cards – aligned in a row, un-stackable, but

4 customizable and expandable.
5) Bottom Bar

Tablet/Mobile HMI Secondary Screen
Item Description
2 Stackable Cards for Navigation - This may contain Icon and Text
Typical Use
• Recipe Settings ( operational Settings)
• System Settings
• Tools
Can include the following component
Tile containing an icon and text

Tablet/Mobile HMI Task Screen
Item Description
Typical Use
Task screens
Can include the following components
• Buttons
• Controls – Enable /Disable
• Text fields
• Dropdown
• Grid lists
• Icons
• Progress Bar
• Data Tables
• Graphs

Tablet/Mobile HMI Wizard/Assistant Screens
1st Wizard Screen
1 2
Item Description
1 • Not available on the 1st screen, but on all subsequent screens thereafter.
• Go to previous screen without saving data.
2 Save changes on current screen and proceed to the next screen in sequence.
The Last Wizard Screen
1 2
Item Description
1 Go to previous screen without saving data.

2 Exit the Wizard. Typically this screen displays the overview or summary of what you have set up.

Screen Saver Screen
System Status Indicators (icon and color) Use: System status conditions
Elements: No child elements – single graphic and

supporting text convey message – continue
discussions about lock icon to wipe screen
Ready Ready / Low Level
Behavior: Large icons, text, and color blocks

appear in the middle portion of the system status
screen to provide system status. Larger display
appears when user-defined screen saver delay
time is reached. Touch event on the large screen
Ready / Service Req. Ready Delay navigates user back to last-viewed page.
4% of the population has some degree of color

blindness. Do not rely on color differentiation alone
to indicate a state or status.
Setback Heat Off – Fill Off

States and status should always be easily
observed from a far distance from the screen.
Note: Screen saver is not needed for Mobile

devices.
Heating – Fill Ready Heating – Fill Off
Heat Ready – Fill Off Heat Off – Fill Ready
System Alert System Fault

COMPONENTS
Top State/Status Bar
1 2
Item Description
1 Top Status bar or status at glance. (For status bar content refer component section).
Notes:
• Color and icon depends on state/status of the controller or one of its hardware components.
• No on-touch events
2 Component status icons
• No on-touch events
Bottom Navigation Bar
Item Description
Navigates back to previous page, without saving any changes made
Note: Not used on the Home page.
Save changes and navigates to screen where the secondary screen was initiated
Navigates to Home screen, without saving any changes made
? Displays context sensitive help (Optional)

Home Screen Widgets
Widgets display the user-selectable function-level data on the Home Screen
• Quick at-a-glance information, as well as navigate to more richer content within the application
• Link to a quick action or daily task
• Are user-selectable from a predefined set

Buttons
Dropdown buttons display multiple selections.
Flat Button – Text only button
Flat button – Icon with text
Toggle button – Enable or Disable an option.
Elevated Button – On or Off a feature or hardware

component.
Master Controls
On/Off and Enable/Disable Control Element Use: View/change the on/off or enable/disable
Examples
state of a control
States: Available and unavailable
Behaviors: Touch only: Toggle

List Controls
List Control Example
Check Box
Radio Buttons
Drop Down list
Navigation Elements (Cards)
Serves as an entry point to more detailed information.
Cards may contain a Graphic, Icon, text, and a link about a single subject and may display the value.
They can be stackable grid.
Item Description
1 Unselected card
2 Selected card – visual behavior to be identified (momentary outline – then navigates)

Data Table
Data tables display data in an organized structured manner.
• A data table contains typically has a header row at the top that lists column names, followed by rows for
data.
• And may have sortable option
• Option to export data
• Colors can be used

Pop-up Messages
General rules:
• Used for any top priority system-level or component level notifications (alerts, faults, confirmations,
information, etc.)
• Dialogs should never be obscured, either by other elements or the screen edge. Dialogs always retain focus
until dismissed or a required action has been taken (modality lingo?)
• Full-screen dialogs (Mobile only)
• Avoid scrolling content
Alert/Fault messages
2
3
4 4
Item Description Details
1 Title bar. Include the word Alert or Fault, along

with the appropriate color. Yellow for
Alert, Red for Fault.
2 Alert and Fault icon
Alert Icon
Fault Icon
3 Long description of specific alarm condition (with applicable guidance on how to correct when
applicable).
4 • Acknowledge and close message. This does not resolve the issue at hand.
• Event Log – provide the user the ability to view the Event Log for additional troubleshooting.

Information/Decision/Confirmation Messages
2
3
General rules:
• Information (Attention) messages used to:
o indicate an out-of-range user-entered value
o general information
• Decision messages used to:
o Allow a user to make a decision about how to proceed. Typically phrased in the form of a statement,
presenting 2 possible solutions which may navigate to another secondary page or wizard. For
example, Service Reminder – where the user can select OK (to acknowledge and close the
message) and Reset (to reset the service reminder and close the message)
• Confirmation messages used to:
o Allow a user to decide how to proceed. Typically phrased in the form of a Yes/No question.
However, the button can navigate to another
Item Description Details
1 Title bar. Include the word Inofrmation or

Confirmation. Color is always Black.
2 Information/Confirmation icon
3 Long description from the Messaging definition document.
4 • Information: Single acknowledge button and close message. Dialog can be self-closing if the
information does not require user input, such as “Upgrade Compete”
• Decision: 2 buttons, where one button will navigate to another secondary page. (not shown)
• Confirmation: 2 buttons, such as Yes | No (not shown)

Content Tiles
• Help organize page content and hierarchy into individual sections.
• May contain numerous types of components and controls

Expansion Control
• Allows expansion of section content – keeping primary information visible at all times (secondary content falls into
hidden area)
• Can also be combined with tiles and, when used with tiles it should always allow expand and collapse
• Avoid nesting Expansion control
• Refer to the section on behaviors
Increment and Decrement Controls
Allows user to increase or decrease values or settings.
Type Example
Circular
Triangle
PSI
Slider

Grid List
• A grid list consists of a repeated pattern in a vertical and horizontal layout.
• Grid lists are best used on similar data types. They help improve the visual comprehension of the content they
contain.
• Try to avoid overloading the home page with unnecessary text, graphic and progress/activity elements.

Progress and Activity
Types : (Currently we are using only Circular)
• Linear
• Circular
Note: Progress and activity indicators do not have any hand gestures associated with them.
Definite indicators display how long an operation will take.
Used to indicate a countdown, such as for ready delay. Display time in center of the circle. When less than one minite, display
seconds.
Indefinite indicators visualize an unspecified wait time (progress bar)
Used to show approximate status of task, such as upgrading and transfering relativiely large files to or from a USB or a
network/cloud drive.
Text Fields
Text fields allow users to input, edit, and select text.
Types
• Single-line, typically have a label to the right of it describing what it is.
• Text area
• Drop down (See List Control)

Bar
• Text areas are taller than text fields and wrap overflow text onto a new line
• They scroll vertically when the cursor reaches the bottom of the field

LED Indicators
These are view only. They indicate either On or Off.

Component State/Status Indicator Use:
• View component state and status
• Navigate to component screen
State: Available/Unavailable/Not detected

Note:
(installed)
• Example components:
Status: Ready/OK, fault, alert, Setback, ready
o External Zone (hose, applicator, air delay, waiting for ready
heater, etc.)
o Internal Zone (grid, manifold, hopper,

Color outline depends on the status of either the
reservoir, etc.)
component or the status of the controller.
o Pump
• For pump buttons, a third line of text should

be added to indicate operation mode (gear-
to-line, pressure control, flow control,
manual)
Ready Alert Fault Idle -Setback Idle-Ready Idle- Heating Disabled

Delay
Or

ICON DESIGN
Links to Icon libraries:
Icon Library here Icon Library:
Link to System Icon Definitions:
Can be found here
Link to System Glossary
Can be found here
Most of the melter and pattern control icons have been created with
regard to the ISO 7000 standard.
New icon design, modification, and publishing will be handled

through the U.S. engineering group. Additional long-term storage
(with search capabilities) and on-line access options are currently
being developed.
Animated graphics/icons should be used sparingly due to file size

considerations and should be displayed in a smooth manner –
should be completely avoided?

SAMPLE ENDEAVOR MENU STRUCTURE
• Tasks should be logically grouped.
• Once you have identified those features/options that will be frequently used, they should be placed in
the interface requiring none or minimal “touches” to accomplish the task at hand.
Frequently used functions should be placed on or near the home screen so they are more readily available.

SAMPLE SCREENS

TERMINOLOGY
Adhesives’ Terminology Glossary can be found here:
(Sharepoint: here) or (External: here)

Interaction and Style Guide: Next Generation Systems Touch Screen HMI

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Interaction and Style Guide: Next Generation Systems Touch Screen HMI

Uploaded by

Copyright:

Available Formats

Next Generation Systems Touch Screen HMI

INTERACTION AND STYLE

Nordson | Confidential | October 2018 Page 1 of 47

Interaction and Style Guide ..............................................................................................................................................................4

Color Pallet - UI .................................................................................................................................................................................5

Responsive vs. Adaptive Design .................................................................................................................................................... 14

Screen Types and Structure ........................................................................................................................................................... 20

Icon Design .................................................................................................................................................................................... 43

Sample Endeavor Menu Structure ................................................................................................................................................ 44

Nordson | Confidential | October 2018 Page 2 of 47

DATE / Rev. Edited by: Comment (detailed description of changes made):

6-Aug-2015 U.S. Software Initial Issue

10/30/2017 Definition Team

2/5/2018 Uma Color palette, Typography, Touch Gestures

3/13/2018 Uma System status colors

4/19/2018 Uma Updated with Blue Color palette

10/24/1018 Uma Replaced wireframes with actual screens

Nordson | Confidential | October 2018 Page 3 of 47

Benefits of a Common Look and Feel

The following are benefits from a common UI look and feel:

o Minimal training for end users and technicians

Nordson | Confidential | October 2018 Page 4 of 47

Screen UI Primary Color pallet

Nordson | Confidential | October 2018 Page 5 of 47

Status Colors- Including Zone Status

Nordson | Confidential | October 2018 Page 6 of 47

• Serif / Sans Serif

• Line height (also called leading)

Serif / Sans Serif

Examples of serif and sans serif letters

Nordson | Confidential | October 2018 Page 7 of 47

• The em size unit is recommended by the W3C.

If font is too small :

• You have to concentrate to read the text

• You have to squint your eyes

• You have the urge to zoom in

If font is too large :

• You begin noticing letterforms instead of reading the content

• You can only read one to three words at a time

• You have the urge to zoom out

Nordson | Confidential | October 2018 Page 8 of 47

• “Single spaced” (line height of 100%, equal to the font size)

• “Double spaced” (line height of 200%, twice the font size)

If leading is too narrow :

• The text feels dense and overwhelming

• You read the wrong line of text accidentally

If leading is too large :

• You get distracted by the white space between rows of words

Primary Font Face

Nordson | Confidential | October 2018 Page 9 of 47

These are some of the most common user gestures:

User action Gesture Description

Nordson | Confidential | October 2018 Page 10 of 47

Open Rapidly touch surface twice with fingertip

Select Briefly touch surface with fingertip

OBJECT – RELATED ACTIONS

User action Gesture Description

Move fingertip over surface without losing

Move Drag (and drop)

Move fingertip over surface without losing

Quickly brush surface with fingertip

Scale down Touch surface with two fingers and bring