1.
Moderator
Travis Cox
Co-Director of Sales Engineering
Inductive Automation

2.
Today’s Agenda
1. Introduction to Ignition
2. Introduction to the Presenters
3. Common Challenges with HMI Navigation Schemes
4. Intro to Information Architecture
5. Meaningful Content Organization
6. Intuitive Layout Organization
7. Q&A

3.
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

4.
Web-Based
Deployment
Unlimited
Licensing
Security
& Stability
Real-Time Control
& Monitoring
Rapid Development
& Deployment
Easy
Expandability
6 Reasons Why Ignition is Unique

5.
Steven Fong
Co-Director of
Marketing,
Inductive
Automation
Presenters
Ray
Sensenbach
UI/UX Designer,
Inductive
Automation

6.
Information Architecture
Today we’ll discuss:
1. What Information Architecture (IA) is
2. Meaningful content organization
3. Intuitive layout organization
4. Resources and references

7.
Inductive Brewing Co.
Our Practice Project

8.
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?

9.
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.

10.
A Better Definition
Connecting people to the
content they're looking for.

11.
An Everyday Example

12.
Information Architecture is Everywhere
• Roadway signage
• Websites
• Prescription bottles
• Exhibits at museums
• Ballots and voter guides
• Books

13.
Information Architecture is Wayfinding
• Where we are
• What we’ve found
• What’s around us
• What to expect
• Where to go

14.
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?

15.
User Personas
User personas define your audiences and their goals
1. Role
2. Environment
3. Goals/Needs

16.
User Persona – Zack
Zack
Fermentation
Operator
Role
• Brewery’s fermentation operator
Environment
• Brewhouse floor
• HMIs on machinery
• Can be noisy
• Can be messy
Goals/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

17.
User Personas – All

18.
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)

19.
Card Sorting
Used to help define your project’s hierarchy
Staying analog increases flexibility
Gather content
• User stories
Prepare cards
• Use short, clear labels
Sort Cards!
• Try out many hierarchies and structures

20.
Content Hierarchies
Narrow and Deep
Fewer links, more clicks
Broad and Shallow
More links, fewer clicks

21.
Narrow and Deep
Fewer Links
• Good for directing user down a particular path
More Clicks
• Clicking can become too much
• User may get lost

22.
Broad and Shallow
More Links
• More difficult to scan options
• Difficult to tell what’s relevant
Fewer Clicks
• Quicker access to content

23.
Don’t take things too far

24.
Practice: Card Sorting
Broad and shallow
• Many categories, not very deep structurally
Three levels of navigation
• Categories > Sub Categories > details

25.
Intuitive Layout Organization
Layout
• User expectations
• Best practices of layout
Navigation
• Getting around
• Orientation

26.
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.

27.
User Expectations

28.
Layout Best Practices
• Create clear visual hierarchy
• Break up screens into clearly defined
areas
• Make it obvious what’s clickable
• Reduce clutter

29.
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

30.
Clearly Defined Areas
Place related content in a group
Be consistent across your project
Use nesting to show relationships visually

31.
Ignition 7.9 Gateway – Clearly Defined Areas

32.
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

33.
Reduce Clutter
Prioritize content to reduce “busy-ness”
Screens should have few purposes

34.
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

35.
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!

36.
3 Navigation Patterns
1/3 Top – Header
• Primary navigation
• Conforms to user expectations

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

38.
3 Navigation Patterns
3/3 Side – Sidenav
• Vertical structure allows for more links
• Best for complex or dashboard-style projects

39.
Combining Navigation Patterns
1 2
3 4

40.
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

41.
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.

42.
Old Search vs. New Search

43.
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

44.
Page Names
Every screen needs a name
It should:
• Be in the right place
• Be prominent
• Match user expectations

45.
Breadcrumbs
Highlight current location
Useful tool, but only complementary to others
Placement: small, close to the top of screens
• Aligns to user expectations

46.
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.

47.
Practice: Layout & Navigation
What we changed to optimize our interface:
1
2
3
4
5

48.
Information Architecture will vastly improve your project’s usability.

49.
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

50.
Join Our User Feedback Program
http://bit.ly/ignition-feedback

51.
Jim Meisler x227
Vannessa Garcia x231
Vivian Mudge x253
Account Executives
Ramin Rofagha x251
Shane Miller x218
Myron Hoertling x224
Maria Chinappi x264
Dan Domerofski x273
Lester Ares x214
Melanie Hottman
Director of Sales, Inductive
Automation
1.800.266.7798 x247
Questions & Comments
Panelists:
sfong@inductiveautomation.com
RSensenbach@inductiveautomation.com