© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Presented by:
Session ID: MC-05
OMI Best Practices
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Bob Hunter, Principal GCS Technical Account Manager
Walter Boncal, Manager, GCS TAM Support NA
11/13/2019, Version 1.0
Agenda
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
What is InTouch OMI?
Modern Design Patterns
Designing for InTouch OMI
Building Blocks
Questions Welcome
For Internal and Partner Use Only
What is InTouch OMI?
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
What is InTouch OMI?
• Part of Application Server
• Modern user experiences optimized for target
device and input method
• Context-driven applications
• Navigation
• Operations management applications
• Supports increasing operator job scope
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Operations Management Interface
System Platform 2017
Supervisory
Historical Storage
OMI
OI Server
InTouch for System Platform
Focus of this
session
What is InTouch OMI?
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Q: How do I replicate my existing InTouch application with OMI?
A: You don’t.
1. InTouch, and InTouch for System Platform, remains great HMI clients with the 2017 versions and beyond
2. Rebuilding an existing application with OMI is not justified unless you aim for more or different
3. OMI is more than a technology upgrade
Architecture
• Definitions
• The art or practice of designing and constructing buildings
• The manner in which the components of a computer or
computer system are organized and integrated
• Many Design Considerations
• Users, Security
• Aesthetics, Usability
• Scalability, Constraints
• Cost, Schedule
Proverb - “Owning a hammer does not make one an architect”
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
New Proverb - “Having a $ViewApp template does not make best practices”
Galaxy Considerations
• Build plant model hierarchy
• Create representative templates
• Process equipment
• Attributes
• Graphics
• Scripting
• Create instances for each asset
• Implement a security strategy
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
For Internal and Partner Use Only
Modern Design Patterns
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Modern Design Patterns
• User Experience (UX) Design Patterns
• Addresses User Workflows
• Focuses on User type (Persona) and User Scenarios
• Utilizes both User Research and Human Nature
• User Interface (UI) Design Patterns
• Addresses the How the User Interacts with the system
or application
• Focuses on Look and Feel
• Can be subjective and influenced
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Overview
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
The Atomic Design System was formalized by Brad Frost.
In many ways parallels the OMI structure of Industrial
Graphics and Displays.
The concept is that by building from units of UI elements, it
is easier to create and modify the entire system.
Atomic design is not a linear process, but rather a mental
model to help us think of our user interfaces as both a
cohesive whole and a collection of parts at the same time. --
http://atomicdesign.bradfrost.com/
User Interface Design
Modern Design Patterns
For Internal and Partner Use Only
Designing for InTouch OMI
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Designing for InTouch OMI
• Understand the user and roles
• Identify tasks
• Organize and clarify content
• Build a device strategy
• Setup navigational structures
• Build in user interactions
• Don’t overwhelm the user interface
• Iterate through the process
Understand the User and Roles
• What user roles do you have
• Operator
• Supervisor
• Engineer
• Manager
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Identifying Tasks• Write it out
• Functional Categories
• Separate OMI applications based on Roles or User’s Lens
• Operator
• Supervisor
• Engineer
• Manager
• Do not separate applications for HMI, MES, WMS, etc.
• How many OMI applications are needed?
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Organize and Clarify Content
• As complex as needed
• Define types of content
• Identify proper Engineering Unit
• Understand relationship between data & representation
• Keep communications on level with the User
• Accompany visual icons with text
• Be consistent and positive
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Build a Device Strategy• What devices are going to be used
• Map out a UI grid for each of the devices screens
• Identify screen element to fit the grid
• Try to standardize Navigation and Interactions across
devices
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Setup Navigational Structures• Create a Strategy
• Create a Hierarchy
• Group items that are logically connected on screen
• Isolate general functions
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Build in User Interactions• Inform users with Visual cues
• Different types of notifications based on severity of the
message
• Ok or Close at the start of Interactions
• Provide confirmation after data entry
• Avoid flashing except for emergencies
• Be explicit where possible, use drop downs vs. text input
• Be consistent with placements and wording
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Don’t Overwhelm the User Interface• Situational Awareness Graphics
• Work in a fixed grid
• Maintain page consistency
• Make it readable
• Align and justify the field
• Use Icon for Standard functions
Situational Awareness Graphics
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
More relevant than ever with InTouch OMI
• User-centric design is fundamental to Situational
Awareness
• OMI delivers new functionalities in line with this
philosophy
• Adopt SA as a flavor of modern aesthetic design
• Does not mean you have to make it gray
• The Symbols are there, but it’s more than that
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Don’t Overwhelm the User Interface• Situational Awareness Graphics
• Work in a fixed grid
• Maintain page consistency
• Make it readable
• Align and justify the field
• Use Icon for Standard functions
Define a uniform grid
• Even the smallest misalignments add to a
negative impression
• The grid will help you reuse content for
different devices and form factors
• Standard blocks fit together like Lego
• Important to also use consistent
• Margins
• Padding
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Don’t design without a grid Align elements
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Don’t Overwhelm the User Interface• Situational Awareness Graphics
• Work in a fixed grid
• Maintain page consistency
• Make it readable
• Align and justify the field
• Use Icon for Standard functions
Margins, padding & spacing
• Spacing – the distance between elements
• Margin – external minimum spacing for a
specific object to its container or
neighbors
• Padding – internal minimum spacing of a
specific object to its content
• Expressed as quartet
• <left>, <top>, <right>, <bottom>
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
margin
padding
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Don’t Overwhelm the User Interface• Situational Awareness Graphics
• Work in a fixed grid
• Maintain page consistency
• Make it readable
• Align and justify the field
• Use Icon for Standard functions
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Iterate
• Don’t be afraid to make mistakes
• Work with relevant stakeholders
• Do more than chat
• Identify pain points
• Share design sketches early
For Internal and Partner Use Only
Building Blocks
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Building Blocks
• Screen Profiles, Layouts, Panes
• ArchestrA Graphics & Content Types
• Touch, Pan, Zoom, Clutter and Declutter
• Context & Navigation
• Namespaces
• Apps
• Security
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Building Blocks
Screen Profiles
Building Blocks
Layouts & Panes
Building Blocks
• Screen Profiles, Layouts, Panes
• ArchestrA Graphics & Content Types
• Touch, Pan, Zoom, Clutter and Declutter
• Context & Navigation
• Namespaces
• Apps
• Security
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
ArchestrA Graphic
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Another layout
Another symbol
Symbol- OMI auto-fill pulls or attracts content based on matching content types- OMI ShowContent script function pushes content into a specific pane
Building Blocks
• Screen Profiles, Layouts, Panes
• ArchestrA Graphics & Content Types
• Touch, Pan, Zoom, Clutter and Declutter
• Context & Navigation
• Namespaces
• Apps
• Security
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Are you targeting touch?
• Design deliberately for touch!
• Fingers are bigger than mouse cursors
• Is content readable on targeted devices?
• Keyboard and typing?
• MyViewApp.Settings.OptimizeForTouch
• Use it to augment content and controls
• Set to true in ViewApps that are touch-first
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Building Blocks
• Screen Profiles, Layouts, Panes
• ArchestrA Graphics & Content Types
• Touch, Pan, Zoom, Clutter and Declutter
• Context & Navigation
• Namespaces
• Apps
• Security
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Building Blocks
• Screen Profiles, Layouts, Panes
• ArchestrA Graphics & Content Types
• Touch, Pan, Zoom, Clutter and Declutter
• Context & Navigation
• Namespaces
• Apps
• Security
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Content interacts through properties
• ViewApp Namespaces are modular “tag
dictionaries” for InTouch OMI ViewApps
• Symbols in different panes and windows
exchange data via Namespace Attributes
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Symbols to symbols
Graphic symbol
ViewApp Namespace
Graphic symbol
Content interacts through properties
• Symbols and Apps exchange data via
Namespace Attributes
• Static value
• Simple scalar data types, including DateTime
• Well-known complex types such as Brush and Font
• Enumerations
• Reference binding (typically ViewApp
Namespace attribute)
• Only simple scalar data types, excluding DateTime
• Complex data can be passed as serialized string
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Using OMI Apps
App
ArchestrA graphics
ViewApp Namespace
script
Building Blocks
• Screen Profiles, Layouts, Panes
• ArchestrA Graphics & Content Types
• Touch, Pan, Zoom, Clutter and Declutter
• Context & Navigation
• Namespaces
• Apps
• Security
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Apps• AlarmApp
• ContentPresenterApp
• HamburgerApp
• HistoricalTrendApp
• InSightApp
• MapApp
• NavigationApp
• TitleBarApp
• WWWebAppControls
• SDK
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
AVEVA Digital Exchange
App SDK
• Game changer!
• Requires a specific skillset, can unleash
the potential of InTouch OMI
• Don’t like the alarms app? Build your own!
• No data grid? Build one!
• Are users juggling multiple applications?
Integrate them!
• Try the App SDK!
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
AVEVA software | Any software, service, device
InTouch OMISingle, unified user experienceContextually driven content
Building Blocks
• Screen Profiles, Layouts, Panes
• ArchestrA Graphics & Content Types
• Touch, Pan, Zoom, Clutter and Declutter
• Context & Navigation
• Namespaces
• Apps
• Security
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
Security practices
• Security is not a product or install-able
item; a holistic approach is required
• Unless cared for during configuration and
content creation, there are risks that
security featured and practices are
bypassed
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
In implementation
AVEVA SDLCS policy and
process
Solution design and
configuration
That’s it for now…
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.
linkedin.com/company/aveva
@avevagroup
ABOUT AVEVA
AVEVA is a global leader in engineering and industrial software driving digital transformation across the entire asset and operational l ife cycle of capital -intensive industries.
The company’s engineering, planning and operations, asset performance, and monitoring and control solutions deliver proven results to over 16,000 customers across the globe. Its customers are supported by the largest industrial software ecosystem, including 4,200 partners and 5,700 certified developers. AVEVA is headquartered in Cambridge, UK, with over 4,400 employees at 80 locations in over 40 countries.
aveva.com
© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.