design like a pro: building better hmi navigation schemes
TRANSCRIPT
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:[email protected]@inductiveautomation.com