Design Like a Pro: Building Better HMI Navigation Schemes

Moderator

Travis CoxCo-Director of Sales EngineeringInductive Automation

Today’s Agenda

1. Introduction to Ignition2. Introduction to the Presenters3. Common Challenges with HMI Navigation Schemes4. Intro to Information Architecture5. Meaningful Content Organization6. Intuitive Layout Organization7. Q&A

About Inductive Automation

• Founded in 2003• HMI, SCADA & IIoT software used in 100+ countries• Supported by 1,400+ integrators• Used in virtually every industry

Learn more at: inductiveautomation.com/about

Web-Based

Deployment

Unlimited

Licensing

Security&

Stability

Real-Time Control& Monitoring

Rapid Development& Deployment

EasyExpandabili

ty

6 Reasons Why Ignition is Unique

Steven FongCo-Director of Marketing, Inductive Automation

Presenters

Ray SensenbachUI/UX Designer, Inductive Automation

Information Architecture

Today we’ll discuss:

1. What Information Architecture (IA)

is

2. Meaningful content organization

3. Intuitive layout organization

4. Resources and references

Inductive Brewing Co.

Our Practice Project

Our HMI Has Some Problems

What screen am I on?What other screens are there?Where should I go from here?What is a button?How do I get back?

Definition

The structural design of shared information environments; the art and science of

organizing and labelling websites, intranets, online communities and software to support

usability and findability.

A Better Definition

Connecting people to the content they're

looking for.

An Everyday Example

Information Architecture is Everywhere

• Roadway signage• Websites • Prescription bottles• Exhibits at museums• Ballots and voter guides• Books

Information Architecture is Wayfinding

• Where we are• What we’ve found• What’s around us• What to expect• Where to go

Define Your Users

We want to mold our project to our users, not the other way around.

• Who is this for?• Are there multiple audiences?• What are their needs?

User Personas

User personas define your audiences and their goals

1. Role

2. Environment

3. Goals/Needs

User Persona – Zack

ZackFermentation Operator

Role• Brewery’s fermentation operator

Environment• Brewhouse floor• HMIs on machinery• Can be noisy• Can be messyGoals/Needs• Checking fermentation tank temperatures• Be alerted to any problems & know how to

respond• See tank levels and other details• Ability to stop and start fermentation runs

User Personas – All

Writing User Stories

Outline what content is needed to accomplish each user goal

Write user stories:

As a ____ I want ____ so that ____

As a (user) I want (content) so that (goal)

Card SortingUsed to help define your project’s hierarchyStaying analog increases flexibility

Gather content • User stories

Prepare cards• Use short, clear labels

Sort Cards!• Try out many hierarchies and

structures

Content Hierarchies

Narrow and DeepFewer links, more clicks

Broad and ShallowMore links, fewer clicks

Narrow and Deep

Fewer Links

• Good for directing user down a particular path

More Clicks

• Clicking can become too much• User may get lost

Broad and Shallow

More Links

• More difficult to scan options• Difficult to tell what’s relevant

Fewer Clicks

• Quicker access to content

Don’t take things too far

Practice: Card Sorting

Broad and shallow• Many categories, not very deep

structurally

Three levels of navigation• Categories > Sub Categories >

details

Intuitive Layout Organization

Layout• User expectations• Best practices of layout

Navigation• Getting around• Orientation

User Expectations

When you’re lost in a new city, you know where to look for directions:• Street signs• Building address numbers

Imagine how frustrating it is when these conventions are broken.Similarly, your average user has clear expectations about where elements will be located on the screen.

Remember: Best practices are your friend.

Layout

User ExpectationsLayout

Layout Best Practices

• Create clear visual hierarchy

• Break up screens into clearly

defined areas

• Make it obvious what’s clickable

• Reduce clutter

Layout

Clear Visual Hierarchy

Use the appearance of content to reflect its

importance

Appearance should reinforce relationships

The more important something is, the more

prominent it is

Layout

Clearly Defined Areas

Place related content in a group

Be consistent across your project

Use nesting to show relationships

visually

Layout

Ignition 7.9 Gateway – Clearly Defined AreasLayout

Affordance

Affordance means making sure the actions on your screens are obvious and discoverable.

• Links should LOOK like links

• Links should be consistent

• Positive actions should be clearly differentiated from destructive actions

Layout

Reduce Clutter

Prioritize content to reduce “busy-ness”

Screens should have few purposes

Layout

Navigation Best Practices

Navigation serves two primary purposes:

1. Help your user get to where they need to

be

2. Provide orientation for where they are now

Navigation

Categories vs. Utilities

Categories

• The links to the main sections of your

application

Utilities• Links to important elements of the app that

aren’t really part of the content hierarchy• Things that help me use the app (help, site map,

log in, etc.)

These links are mixed here and should be

separated!

Navigation

3 Navigation Patterns

1/3 Top – Header• Primary navigation• Conforms to user expectations

Navigation

3 Navigation Patterns

2/3 Top – Subnav• Primary navigation, when needed• Conforms to user expectations

Navigation

3 Navigation Patterns

3/3 Side – Sidenav• Vertical structure allows for more links• Best for complex or dashboard-style

projects

Navigation

Combining Navigation Patterns

1 2

3 4

Navigation

Tabs

Tabs are intuitive

Screens represented by tabs should be of equal importance

Recommended for frequent switching between contexts

Vertical tabs work well for lengthy lists

Navigation

Dropdown Menus

Used frequently where space is limited

Not recommended due to usability problems

• User must seek them out

• They’re hard to scan

• Long lists are difficult to decipher

However, they can be effective for alphabetized lists where the user doesn’t need to think.

Navigation

Old Search vs. New SearchNavigation

File Trees

Work for large, desktop applications

Not recommended for mobile

Ideal for actual file paths, like tags

Some usability concerns, similar to dropdown

menus

Navigation

Page Names

Every screen needs a name

It should:

• Be in the right place

• Be prominent

• Match user expectations

Navigation

Breadcrumbs

Highlight current location

Useful tool, but only complementary to

others

Placement: small, close to the top of

screens

• Aligns to user expectations

Navigation

Back Button

Expected by users

Brings the user up one level

Especially useful in narrow and deep hierarchies where you may need to move down/up frequently.

Navigation

Practice: Layout & Navigation

What we changed to optimize our interface:

1

2

3

4

5

Information Architecture will vastly improve your project’s usability.

More Resources

Videos

• “DLAP: Graphic Design Tips for HMIs”

• “UX Design Tips for Industrial

Applications”

Books

• Don’t Make Me Think

• Information Architecture

• The Design of Everyday Things

Join Our User Feedback Program

http://bit.ly/ignition-feedback

Jim Meisler x227Vannessa Garcia x231

Vivian Mudge x253

Account Executives

Ramin Rofagha x251

Shane Miller x218

Myron Hoertling x224

Maria Chinappi x264Dan Domerofski x273Lester Ares x214

Melanie HottmanDirector of Sales, Inductive Automation1.800.266.7798 x247

Questions & Comments

Panelists:sfong@inductiveautomation.comRSensenbach@inductiveautomation.com