Design Like a Pro: Building Better HMI Navigation Schemes
-
Upload
inductive-automation -
Category
Technology
-
view
246 -
download
2
Transcript of Design Like a Pro: Building Better HMI Navigation Schemes
![Page 1: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/1.jpg)
![Page 2: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/2.jpg)
Moderator
Travis CoxCo-Director of Sales EngineeringInductive Automation
![Page 3: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/3.jpg)
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
![Page 4: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/4.jpg)
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
![Page 5: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/5.jpg)
Web-Based
Deployment
Unlimited
Licensing
Security&
Stability
Real-Time Control& Monitoring
Rapid Development& Deployment
EasyExpandabili
ty
6 Reasons Why Ignition is Unique
![Page 6: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/6.jpg)
Steven FongCo-Director of Marketing, Inductive Automation
Presenters
Ray SensenbachUI/UX Designer, Inductive Automation
![Page 7: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/7.jpg)
Information Architecture
Today we’ll discuss:
1. What Information Architecture (IA)
is
2. Meaningful content organization
3. Intuitive layout organization
4. Resources and references
![Page 8: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/8.jpg)
Inductive Brewing Co.
Our Practice Project
![Page 9: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/9.jpg)
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?
![Page 10: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/10.jpg)
![Page 11: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/11.jpg)
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.
![Page 12: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/12.jpg)
A Better Definition
Connecting people to the content they're
looking for.
![Page 13: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/13.jpg)
An Everyday Example
![Page 14: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/14.jpg)
Information Architecture is Everywhere
• Roadway signage• Websites • Prescription bottles• Exhibits at museums• Ballots and voter guides• Books
![Page 15: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/15.jpg)
Information Architecture is Wayfinding
• Where we are• What we’ve found• What’s around us• What to expect• Where to go
![Page 16: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/16.jpg)
![Page 17: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/17.jpg)
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?
![Page 18: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/18.jpg)
User Personas
User personas define your audiences and their goals
1. Role
2. Environment
3. Goals/Needs
![Page 19: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/19.jpg)
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
![Page 20: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/20.jpg)
User Personas – All
![Page 21: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/21.jpg)
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)
![Page 22: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/22.jpg)
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
![Page 23: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/23.jpg)
Content Hierarchies
Narrow and DeepFewer links, more clicks
Broad and ShallowMore links, fewer clicks
![Page 24: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/24.jpg)
Narrow and Deep
Fewer Links
• Good for directing user down a particular path
More Clicks
• Clicking can become too much• User may get lost
![Page 25: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/25.jpg)
Broad and Shallow
More Links
• More difficult to scan options• Difficult to tell what’s relevant
Fewer Clicks
• Quicker access to content
![Page 26: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/26.jpg)
Don’t take things too far
![Page 27: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/27.jpg)
Practice: Card Sorting
Broad and shallow• Many categories, not very deep
structurally
Three levels of navigation• Categories > Sub Categories >
details
![Page 28: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/28.jpg)
![Page 29: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/29.jpg)
Intuitive Layout Organization
Layout• User expectations• Best practices of layout
Navigation• Getting around• Orientation
![Page 30: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/30.jpg)
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
![Page 31: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/31.jpg)
User ExpectationsLayout
![Page 32: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/32.jpg)
Layout Best Practices
• Create clear visual hierarchy
• Break up screens into clearly
defined areas
• Make it obvious what’s clickable
• Reduce clutter
Layout
![Page 33: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/33.jpg)
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
![Page 34: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/34.jpg)
Clearly Defined Areas
Place related content in a group
Be consistent across your project
Use nesting to show relationships
visually
Layout
![Page 35: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/35.jpg)
Ignition 7.9 Gateway – Clearly Defined AreasLayout
![Page 36: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/36.jpg)
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
![Page 37: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/37.jpg)
Reduce Clutter
Prioritize content to reduce “busy-ness”
Screens should have few purposes
Layout
![Page 38: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/38.jpg)
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
![Page 39: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/39.jpg)
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
![Page 40: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/40.jpg)
3 Navigation Patterns
1/3 Top – Header• Primary navigation• Conforms to user expectations
Navigation
![Page 41: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/41.jpg)
3 Navigation Patterns
2/3 Top – Subnav• Primary navigation, when needed• Conforms to user expectations
Navigation
![Page 42: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/42.jpg)
3 Navigation Patterns
3/3 Side – Sidenav• Vertical structure allows for more links• Best for complex or dashboard-style
projects
Navigation
![Page 43: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/43.jpg)
Combining Navigation Patterns
1 2
3 4
Navigation
![Page 44: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/44.jpg)
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
![Page 45: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/45.jpg)
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
![Page 46: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/46.jpg)
Old Search vs. New SearchNavigation
![Page 47: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/47.jpg)
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 48: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/48.jpg)
Page Names
Every screen needs a name
It should:
• Be in the right place
• Be prominent
• Match user expectations
Navigation
![Page 49: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/49.jpg)
Breadcrumbs
Highlight current location
Useful tool, but only complementary to
others
Placement: small, close to the top of
screens
• Aligns to user expectations
Navigation
![Page 50: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/50.jpg)
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
![Page 51: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/51.jpg)
Practice: Layout & Navigation
What we changed to optimize our interface:
1
2
3
4
5
![Page 52: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/52.jpg)
Information Architecture will vastly improve your project’s usability.
![Page 53: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/53.jpg)
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
![Page 54: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/54.jpg)
Join Our User Feedback Program
http://bit.ly/ignition-feedback
![Page 55: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/55.jpg)
![Page 56: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/56.jpg)
![Page 57: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/57.jpg)
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
![Page 58: Design Like a Pro: Building Better HMI Navigation Schemes](https://reader031.fdocuments.us/reader031/viewer/2022030313/58ed3c761a28ab292d8b45b1/html5/thumbnails/58.jpg)