© 2019 AVEVA Group plc and its subsidiaries. All rights ... AWC NA... · The Atomic Design System was formalized by Brad Frost. In many ways parallels the OMI structure of Industrial

© 2019 AVEVA Group plc and its subsidiaries. All rights reserved.

Presented by:

Session ID: MC-05

OMI Best Practices


Bob Hunter, Principal GCS Technical Account Manager

Walter Boncal, Manager, GCS TAM Support NA

11/13/2019, Version 1.0

Agenda


What is InTouch OMI?

Modern Design Patterns

Designing for InTouch OMI

Building Blocks

Questions Welcome

For Internal and Partner Use Only




• 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


Operations Management Interface

System Platform 2017

Supervisory

Historical Storage

OMI

OI Server

InTouch for System Platform

Focus of this

session



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”


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






• 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


Overview


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


http://atomicdesign.bradfrost.com/






• 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



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?


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


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


Setup Navigational Structures• Create a Strategy

• Create a Hierarchy

• Group items that are logically connected on screen

• Isolate general functions


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


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


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








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


Don’t design without a grid Align elements








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>


margin

padding









Iterate

• Don’t be afraid to make mistakes

• Work with relevant stakeholders

• Do more than chat

• Identify pain points

• Share design sketches early


Building Blocks


Building Blocks

• Screen Profiles, Layouts, Panes

• ArchestrA Graphics & Content Types

• Touch, Pan, Zoom, Clutter and Declutter

• Context & Navigation

• Namespaces

• Apps

• Security


Building Blocks

Screen Profiles

Building Blocks

Layouts & Panes

Building Blocks





• Namespaces

• Apps

• Security


ArchestrA Graphic


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





• Namespaces

• Apps

• Security


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


Building Blocks





• Namespaces

• Apps

• Security





Building Blocks





• Namespaces

• Apps

• Security


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


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


Using OMI Apps

App

ArchestrA graphics

ViewApp Namespace

script

Building Blocks





• Namespaces

• Apps

• Security


Apps• AlarmApp

• ContentPresenterApp

• HamburgerApp

• HistoricalTrendApp

• InSightApp

• MapApp

• NavigationApp

• TitleBarApp

• WWWebAppControls

• SDK


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!


AVEVA software | Any software, service, device

InTouch OMISingle, unified user experienceContextually driven content

Building Blocks





• Namespaces

• Apps

• Security


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


In implementation

AVEVA SDLCS policy and

process

Solution design and

configuration

That’s it for now…


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


Documents

© 2019 AVEVA Group plc and its subsidiaries. All rights ... AWC NA... · The Atomic Design System was formalized by Brad Frost. In many ways parallels the OMI structure of Industrial