Design Like a Pro: Basics of Building Mobile-Responsive HMIs
•Download as PPTX, PDF•
0 likes•879 views
This document discusses responsive design principles for mobile applications. It covers topics like mobile design patterns, touch optimization, levels of depth, mobile-first design, and content as UI. It also describes common responsive layout patterns like mostly fluid, column drop, layout shifter, tiny tweaks, and off canvas. The document emphasizes that responsive design results in less work, more usability, and enables a mobile-focused mindset when building applications in Ignition 8.
Report
Share
Design Like a Pro: Basics of Building Mobile-Responsive HMIs
- 2. Moderator Don Pearson Chief Strategy Officer, Inductive Automation
- 3. About Inductive Automation • Founded in 2003 • HMI, SCADA, MES & IIoT software • Over 1,900 integrators • Used by 48% of Fortune 100 companies • Just released Ignition 8, the new, upgraded version of our software platform Learn more at: inductiveautomation.com/about
- 4. Ignition: Industrial Application Platform One Universal Platform for HMI, SCADA, MES & IIoT: • Unlimited licensing model • Cross-platform compatibility • Based on IT-standard technologies • Scalable server-client architecture • Web-based & web-managed • Launch on desktop or mobile • Modular configurability • Rapid development & deployment
- 5. Presenters Perry Arellano-Jones Senior Software Engineer, Inductive Automation Ray Sensenbach UI/UX Designer, Inductive Automation
- 6. Today’s Webinar Outline ● Responsive 101 ● Mobile Design Principles ● A New Design Mindset ● Responsive Layout Patterns
- 7. Disclaimer Subjects in the mirror may be deeper than they appear! Please provide feedback What do you want to learn?
- 8. How did we get here? ● Proliferation of mobile devices ● Panning and scrolling ● Device detection and redirection ● Responsive introduced in 2010
- 9. A Common Desktop Site, circa 2005 ● Common pre-mobile design ● Fundamentally usable on desktop ● Breaks down on mobile
- 10. Zoom Zoom
- 12. Mobile-Specific Sites Pros ● Improved Usability on Mobile ● Interaction & Glanceability ● Improved Readability ● Focus on Mobile Users Cons ● New Product -> Additional Short and Long-Term Costs ● Additional Complexity ● Difficulty with Feature Parity
- 13. The Birth of Responsive Design
- 14. So, What is ‘Responsive’? Layouts and data adapt to their environment New layout strategies allow apps to work well across many screen sizes
- 15. Benefits of Responsive Design ● Lower development costs over lifetime of application ● Single data model to maintain ● Support any device size ● Consistency in look and functionality
- 16. Drawbacks of Responsive Design ● Not one-strategy-fits-all ● Learning curve
- 17. Mobile Design Principles 1. Touch & Ergonomics 2. Mobile Device Testing 3. Levels of Depth 4. Mobile-First Design 5. Content as UI 6. Declutter
- 18. Optimize for Touch Smaller touch targets are more difficult to use than larger ones The smaller the target, the more likely input errors become
- 19. Optimize for Touch Smaller touch targets are more difficult to use than larger ones The smaller the target, the more likely input errors become
- 20. Touch Element Sizing 25px = touchable 40px = optimal Test your touch inputs on real devices
- 21. Testing on Real Devices Build up a library of test devices for responsive designs Cover at least those devices you know your users will be on
- 22. Touch Ergonomics Consider the ‘thumb zone’ Content to the top Controls to the bottom Destructive actions in hard-to-reach areas
- 23. Touch Beyond Mobile Touch-Enabled Tablets Touch-Enabled Computers
- 24. Touch Beyond Mobile Factory floor ergonomics Consider: ● Operator safety ● Physical reach ● Lighting conditions
- 25. Adding Levels of Depth
- 26. Adding Levels of Depth
- 27. Mobile-First Design Approach Progressive enhancement Add features/content as the available space increases
- 28. Think Beyond the ‘Mobile Stack’ Popularized by frameworks like Bootstrap, Foundation Not a viable mobile strategy
- 29. Content as UI Users should interact directly with content Embrace intuitive actions
- 30. Content as UI Users should interact directly with content Embrace intuitive actions
- 31. Remove UI Clutter Space is limited, prioritize important information Minimize fixed docks for headers, footers and navs
- 32. A New Design Mindset 1. Design Systems 2. Address User Needs 3. Content is King 4. Fluid Layouts
- 33. Designing Systems Create design systems, not pages Consistency through conventions Reduce “design debt”
- 34. Designing Systems Create design systems, not pages Consistency through conventions Reduce “design debt”
- 35. What Should a Design System Include? It depends. Start small, build up
- 36. Addressing User Needs Users have “jobs to be done.” Your application should support those goals. Talk to your users, design applications that empower them.
- 37. Content is King Minimal navigation, maximum content Focus on what matters most Gradually reveal content and features “Just-in-time design”
- 38. Fluid Layouts Layouts are fluid in responsive apps All content on the web is a box Layout strategies should consider this
- 39. Responsive Layout Patterns 1. Mostly fluid 2. Column drop 3. Layout shifter 4. Tiny tweaks 5. Off canvas
- 40. Perspective Containers Containers indicate the layout strategy of a view’s child components. Current containers include: ● Breakpoint ● Column ● Coordinate ● Flex ● Tab
- 41. Multi-column layout that introduces larger margins on big screens A fluid grid reflows the main content and stacks columns vertically on mobile. Mostly Fluid
- 42. Works well for: ● Simple applications ● Reporting, documents May Utilize: ● Flex container ● Coordinate container Mostly Fluid
- 43. Similar to mostly fluid, without the fluid content Content size remains fixed, dropping to full-width for mobile Column Drop
- 44. Works well for: ● Simple applications ● Dashboards May Utilize: ● Flex container ● Column container Column Drop
- 45. A heavier, more custom solution Different layouts across breakpoints Swaps components, not just layout Layout Shifter
- 46. Works well for: ● Complex applications ● Complex dashboards May Utilize: ● Breakpoint container Layout Shifter
- 47. Content, not layout changes Style changes to support usability Tiny Tweaks
- 48. Works well for: ● Nested views ● Single-column layouts May Utilize: ● Named styles ● Element states Tiny Tweaks
- 49. Move content off-screen Content is one click away Off Canvas
- 50. Works well for: ● Complex applications ● Mobile applications May Utilize: ● Docked views Off Canvas
- 51. Bringing It All Together Understand mobile design patterns Utilize a strong responsive layout strategy Embrace the mobile-responsive mindset …Now you’re ready to design a mobile- responsive application in Ignition 8!
- 52. Final Thoughts 1. Mobile-responsive is a thought process 2. Responsive results in less work and more usability 3. Ignition Perspective enables responsive design paradigms
- 53. References 1. “Responsive Web Design,” Ethan Marcotte https://alistapart.com/article/responsive-web-design/ 1. “Views and Containers in Perspective,” Ignition Docs https://docs.inductiveautomation.com/display/DOC80/Views+and+Containers+in+Perspective 1. “A Complete Guide to Flexbox,” CSS Tricks https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 1. “Responsive Patterns,” Brad Frost https://bradfrost.github.io/this-is-responsive/patterns.html 1. “Multi-Device Web Design,” Luke Wroblewski https://static.lukew.com/onedesign_04092013.pdf 1. “Atomic Design,” Brad Frost http://atomicdesign.bradfrost.com/