Design Like a Pro: Basics of Building Mobile-Responsive HMIs

Mobile Design Principles for Industrial Applications

56 min video  /  6 minute read View slides


Don Pearson

Chief Strategy Officer

Inductive Automation

Perry Arellano-Jones

Senior Software Engineer

Inductive Automation

Ray Sensenbach

UI/UX Designer

Inductive Automation

About this Webinar

In today’s always-connected world, the demand for mobile-responsive human-machine interfaces (HMIs) is increasing among industrial organizations. From a development standpoint, this creates opportunities as well as challenges. Even if you have experience designing traditional HMIs, you should gain a firm grasp of mobile HMI design principles before undertaking a mobile project because there are significant differences between the two layout strategies.

Watch the latest Design Like a Pro webinar, where software engineering and design experts from Inductive Automation share the fundamental concepts you’ll need to design HMIs that function well on any screen size.

Learn more about:

  • What responsive design is and what problems it solves
  • Designing for touch-driven input
  • Presenting content most effectively
  • Removing clutter from your UI
  • And more!

Webinar Transcript

(The moderator, Don Pearson, briefly introduces Inductive Automation and Ignition software, and then introduces the presenters, Perry Arellano-Jones and Ray Sensenbach.)

Perry: All right, let's get rolling. So, today, we're here to talk about mobile-responsive design. Our goal is really to leave you with some inspiration and a little bit of knowledge that you can use in your next Ignition application.

Perry: We're going to start by taking a look at how responsive design came to be and basically define what responsive design and kind of what it means to us. And then we're going to learn some new design principles to consider when we're designing for both mobile space but using responsive design. And then we're going to go over a few of the common and useful layout strategies and responsive designs, layout being how you organize your components on your different applications. And then finally, we're going to talk about how to kind of think about and approach design that comes along with these new ideas.

Perry: So just a quick disclaimer here. Each one of these subjects is pretty big. It could easily fill an entire webinar, each one of them on their own, we're only going to scratch the surface today. But we're all really excited about this. And so if you have questions or we haven't addressed something that you're curious about, please reach out, let us know. This is going to be the first of two webinars specifically on this subject. This first one is going to be more focused on theory and just terms and ideas of design in general. The next one will be a little bit more hands-on, looking more specifically at how we apply those in Perspective.

Responsive 101
Perry: So, to really understand why we want to use a responsive UI and why screen development with responsive UIs are both important, it helps to frame some of the problems that responsive design solves. Hopefully, by the end of this, you're going to believe that responsive design is worth considering when you're putting together new projects. Or maybe just adding features to old ones.

Perry: So let's start by taking a look, really, at where this all originated and we'll take a look at a typical webpage from before mobile devices came on the scene. So, here we're looking at an example of a popular website in the mid-2000s. It's not flashy, it might look a little bit dated by today's standards. But fundamentally, there are good things happening on the page. The space is filled nicely, it's not cluttered, it's usable without having to think too much about it. It just works on desktop.

Perry: Just two years though after this site was popularized or used very popularly, the iPhone came on the scene, made a pretty big splash. So let’s look at what this might look like on an iPhone back then and right away, you can tell that it doesn't fit. And this was the experience that a lot of early touchscreen phone users experienced. Screens that were built and intended for desktop-sized monitors, they just really fall apart on these small devices.

Perry: All of that navigability and easy readability that we had are completely gone and we can't even see most of the content. If we want to read the text, we have to scroll around and alternatively, if we want to see the full page, the text is so small we can't read it. So developers faced with this issue really wanted to find a way to make something that was more functional. Some of you might remember what this looked like back in the early days of mobile devices. And that is the mobile-specific page.

Perry: Here is our zoomed-out version. So again, can't really read what's going on there. So here is kind of what a lot of these early mobile pages looked like. They got very simplified, it's much less noisy, does use a little bit more empty space and larger fonts so you can read it and the content's arranged in a way that you can easily scroll up and down and kind of navigate. But of course, comparing those two, there’s some pretty significant trade-offs.

Perry: So, developers kind of approached a couple of different ideas on how to handle this. And the first one was, like we just saw, really these mobile specific sites. And they came with some pros and cons. Upfront, you got much improved usability and readability but you really lost a whole lot of the functionality of the page. The focus on mobile users was great because the pages were smaller which meant it would load faster. But again, you're only getting a portion of the functionality.

Perry: There’s also some significant downsides to having this kind of an approach where you've got one made for desktop, one made for mobile and that's that basically, you're adding a whole new product that you have to support. You've got additional short-term costs in creating this new mobile site but there is also a lot of long-term costs in maintenance. If you want to add a new feature to the desktop site that's useful on mobile as well, now you’ve got to add it in two different places.

8:16/> Perry: And beyond that, if you think about the data that's driving these two different applications, it's probably not going to be the same. So now you're talking about not just different buttons or different text but you're actually talking about creating whole new data models to drive these two things. It's a lot of additional complexity and it really increases maintenance cost.

Perry: So that's just kind of a real problem that a lot of developers back then were trying to solve. And it was in 2010 when this article actually came around. After a lot of different trial and error, one particular developer named Ethan Marcotte decided he had enough of the hacks and these different multiple versions that he was trying to maintain and he just happened to be kind of an architectural buff and he was inspired by some of the trends in architectural design at the time where multi-used spaces were becoming kind of a hot new thing.


Posted on April 10, 2019