Design Like a Pro: Building Better HMI Navigation Schemes
Download as PPTX, PDF5 likes1,310 views
The document outlines a presentation agenda focused on information architecture for HMI navigation schemes, featuring key insights on user needs and interface design. It emphasizes the importance of organizing content intuitively, creating user personas, and best practices for navigation to enhance usability. The session is led by experts from Inductive Automation, highlighting the company's HMI, SCADA, and IIoT software used globally.
Design Like a Pro: Building Better HMI Navigation Schemes
- 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.
- 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.
- 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