© 2019 AVEVA Group plc and its subsidiaries. All rights ... AWC NA... · The Atomic Design System...

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

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

• 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

• 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

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

© 2019 AVEVA Group plc and its subsidiaries. All rights ... AWC NA... · The Atomic Design System...

Documents

AOL Material AWC

AWC Footwear

Timber Awc

AWC love jones

Awc Catalog

AWC 2010 Catalog

AWC May Newsletter

Formalized Haar Measure

awc - aerztekanzlei.at · awc - aerztekanzlei.at ... awc

Innovative work behaviour in a formalized organizationessay.utwente.nl/71808/1/__ad.utwente.nl_home_SeineM_Documents_Master... · behaviour in a formalized organization. A formalized

February 2012 Awc

Awc Contractions Wordsort

Xenakis Formalized Music

AWC NextGEN CONTROL SYSTEM WORKBOOK - AWC … Literature/1-Automation/AWC... · © 2015 AWC, INC NextGEN Control System Workbook AWC NextGEN CONTROL SYSTEM WORKBOOK ... Set up supply

semantically formalized logs

Parallels Desktop - Eugene School District · 2011. 3. 28. · Parallels, Coherence, Parallels Transporter, Parallels Compressor, Parallels Desktop, and Parallels Explorer ... Windows

AWC Presentation (1)

Wood Connections - AWC

Hi awc 2013

Formalized HRM Structures