Design Principles for Creating Mobile-Responsive HMIs

2. Design Principles for Creating Mobile-Responsive HMIs

3. Perry Arellano-Jones Ray Sensenbach Senior Software Engineer, Inductive Automation UI/UX Designer, Inductive Automation

4. Session Outline • Responsive 101 • Mobile Design Principles • Real Applications (3) • Conclusion & References

5. Disclaimer Subjects in the mirror may be deeper than they appear! Please provide feedback • Post ICC Survey • Contact Inductive Automation What do you want to learn?

6. How did we get here? • Proliferation of mobile devices • Panning and scrolling • Device detection and redirection • Responsive introduced in 2010

7. A Common Desktop Site, circa 2005 • Common pre-mobile design • Fundamentally usable on desktop • Breaks down on mobile

8. Zoom Zoom

9. Early Mobile Solutions

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

11. The Birth of Responsive Design

12. So What is Responsive? Layouts and data adapt to their environment New layout strategies allow apps to work well across many screen sizes

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

14. Drawbacks of Responsive Design • No one-strategy-fits-all • Learning curve

15. New Design Principles

16. New Design Principles • Touch & Ergonomics • Mobile-First • Fluid Content • Content as UI • Declutter

17. Optimize for Touch Smaller touch targets are more difficult to use than larger ones The smaller the target, the more likely input errors become

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. Touch Element Sizing 25px = touchable 40px = optimal Test your touch inputs on real devices

20. Touch Ergonomics Consider the ‘thumb zone’ Content to the top Controls to the bottom Destructive actions in hard to reach areas

21. Touch Beyond Mobile

22. Mobile-First Design Approach Progressive enhancement Add features/content as the available space increases

23. Think Beyond the ‘Mobile Stack’ Popularized by frameworks like Bootstrap, Foundation Not a viable mobile strategy

24. Fluid Content All content is a box on the web Content is fluid in mobile-responsive apps Layout strategies should consider this

25. Content as UI Users should interact directly with content Embrace intuitive actions

26. Content as UI Users should interact directly with content Embrace intuitive actions

27. Remove UI Clutter Space is limited, prioritize important information Minimize fixed docks for headers, footers and navs

28. Project Redesigns Project 1 Tabular Data to Mobile

29. Project 1: Tabular Data to Mobile ?

30. Design Process Step 1: Understand the needs of the user

32. Design Process Step 1: Understand the needs of the user Step 2: Take an audit of the interface

34. Design Process Step 1: Understand the needs of the user Step 2: Take an audit of the interface Step 3: Design

42. Design Process Step 1: Understand the needs of the user Step 2: Take an audit of the interface Step 3: Design Build Process Step 4: Audit design for compositional elements Step 4: ?

43. Another Audit? Building up instead of tearing down!

44. Audit Design Structure

45. Layout Strategy

46. Layout Strategy Components Containers (define layout) Views

47. Container

48. Different Containers, Same Result

49. Different Device: Layout Strategies Matter

50. Design Process Step 1: Understand the needs of the user Step 2: Take an audit of the interface Step 3: Design Build Process Step 4: Audit design for common elements Step 5: Strategize, Implement, Refine