The document provides an agenda for a presentation on information architecture for HMI navigation schemes. It introduces Inductive Automation and discusses common challenges with HMI navigation. It defines information architecture and discusses meaningful content organization and intuitive layout organization. It covers defining users, card sorting exercises, content hierarchies, layout best practices, navigation patterns, and more resources. The presentation aims to help optimize HMI interfaces through information architecture principles.

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

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

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

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

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

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

8. Inductive Brewing Co.
Our Practice Project

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

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

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

13. An Everyday Example

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

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

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

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

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

20. User Personas – All

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

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

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

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

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

26. Don’t take things too far

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

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

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

31. User Expectations

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

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

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

35. Ignition 7.9 Gateway – Clearly Defined Areas

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

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

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

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

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

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

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

43. Combining Navigation Patterns
1 2
3 4

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

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

46. Old Search vs. New Search

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

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

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

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

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

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

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

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

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