Perspective Design Tips
There are many things to consider when designing for mobile-responsive applications that can run in a web browser. Designs must work everywhere, on any device from a small smartphone to an oversized desktop, in an optimized format, using one design. Unfortunately, there is no one design strategy that fits all projects, but you can have a single design for a project that works well across many different screen sizes based on content and context.
With mobile devices ranging from smartphones to tablets, understanding how your website will display on the variety of formats is critical. This page provides some design principles to consider when designing in Perspective, but it only scratches the surface. You can augment these design principles with the design processes from your company.
Before designing your first project in Perspective, understanding terms like mobile optimized, responsive design, and user experience are sure to come up in conversation when defining the requirements for your project.
- Responsive Design - is a method of developing web pages that are completely flexible and renders on any device type. Responsive designed websites "respond" to the screen size of the device being used from smartphones to industrial monitors.
- Mobile Optimized - means the website will reformat itself for mobile devices such as smartphones and tablets.
- User Experience - can separate a good a successful app from an unsuccessful one. You want users to have a quality experience using your app such as fast loading time, easy to use, and navigation for starters.
Building a good mobile-responsive app starts with defining specific goals and objectives to clearly identify the problem you're trying to solve whether your starting a new project or redesigning an exising one. Equally important is understanding the needs of the users and integrators. Some things to ask your users about is, what types of devices they plan to use to access the project, what type of data they want to see, are they viewing data, entering data, or controlling equipment. What do they want the components on the screen to do. Do they need to work offline.
It's extremely important to capture and document all the user requirements. When doing requirements gathering, it's also important to audit the workflow process. This way you get to see firsthand what the users are doing so you can define requirements prior to entering the design phase. This doesn't mean that you can't refine requirements as you progress through the design process. You most certainly can!
Designing for Mobile-Responsive Applications​
You have choices when it comes to designing in Perspective. You can design for desktop or mobile devices, or both. Ignition Perspective allows you to design your apps to work well across many different screen sizes, whether a user is seated in the control room, grabbing a tablet to walk into the field, or receiving a notification to respond to a crisis after hours.
One of the first considerations when tackling a design project is to determine the types of devices your users are going to use to access the project. This often dictates whether you design for a desktop, mobile devices, or both. Something to keep in mind, is designing for multiple screen sizes at the start of your project will be far easier, less time consuming, and less costly than adding it on later. This way you have one design that adapts to many screen sizes.
Think of a responsive design as a layout strategy, allowing your apps to work well across many screen sizes. It's a single design that reorganizes and responds to the available browser space to display the same content in a more usable way whether your using a smartphone, table or desktop. You also get a consistent UI and functionality across various screens, and it works everywhere. If you open a responsive site on the desktop and then change the size of the browser window, the content will move dynamically and arrange itself optimally for the browser window. On mobile devices, this process is automatic; the site checks for the available space and the reformats itself in the size matching the device while optimizing the content for an ideal arrangement. This is responsive design!
Design Principles​
We all know what good design looks like in the desktop world. Now let's expand our knowledge to mobile devices using the following design principles.
Touch and Ergonomics​
Good design begins with touch and ergonomics. On mobile devices all input is touch driven and have smaller touch targets. The smaller the target, the harder they are to use, and the more chance for errors. For example, turning on/off an industrial motor or some other critical process can lead to serious repercussions in the event the wrong button is inadvertently pressed.
When designing for mobile devices like smartphones and tablets, it's important to make touch targets big enough so they are easy for users to tap. As a good rule of thumb for sizing touch targets; 25 pixels is considered touchable, 40 pixels is optimal, and at a minimum, 10 pixels between elements.
Next, let's talk about the ergonomics of mobile devices. Designing for mobile devices isn't only about making targets big enough, it's also about considering the way we hold our devices. There is a comfortable area for touch on a screen called the 'thumb zone'. A touch device like a smartphone, the bottom of the screen is the best area for your most important actions because it's easy and most comfortable to reach with your thumb. You might consider placing destructive actions in hard to reach areas such as the top of the screen if you don't want them pressed accidentally. Also, keep in mind that the bigger the display area is on a smartphone, more of the screen is less easily accessible.
Be sure to test your applications on different operating systems and devices, including all sizes of smartphones and tablets. Even better, is to have some of your users do some testing. Nothing works better than getting some real feedback from your users.
Mobile-First Design Approach​
The Mobile-First design approach prioritizes the app design on smaller devices instead of designing a desktop app and then forcing it to fit into a mobile box. A mobile-first approach is exactly as it sounds: designing for the smallest screen and working your way up. It is one of the best strategies to create either a responsive or adaptive design. This design strategy focuses on progressive enhancement of features and content as browser size and available space increases. Mobile-first design can lower development costs over the lifetime of your applications because single data model is maintained instead of maintaining several specific solutions for specific devices.
Fluid Content​
Fluid design offers users a consistent experience across multiple devices and screen sizes. In responsive design, you want to design your app with a fluid layout that works good on small and large screens. You don't want them to look too busy on small screens and too empty on big ones. Think of web content as a box. In a responsive app, these boxes are going to move and change depending on their container. Perspective containers provide a way of laying out and organizing components within a view. This is really important because containers and views are an integral part of the Perspective design experience and play a major role in creating fluid content. Not only does Perspective containers and views allow you to create fluid content, but they also provide reusability throughout your existing project and other projects.
Content as UI​
You can't talk about content without talking about design. Together, they both create a great user experience. By including design techniques in your discussions about content, you truly discover what is important and how to communicate to the user. We are all familiar with how various interface elements behave on a screen and how to directly interact with the content, but each design is different.
As a designer, the content UI focuses on what interface elements the user needs to understand to easily access content, so you want to be consistent and predictable. There are many different types of interface elements such as input controls, navigational and informational elements to name a few. It's important to know your users so you make the right choices so here are a few things to keep in mind:
- Keep the content UI simple.
- Be purposeful when designing your page layout.
- Create consistency and use common UI elements.
- Provide visual clues about behavior before actions are taken.
Declutter​
Good UI design is about delivering relevant information and avoiding irrelevant information. By cluttering your interface with elements and content, you overwhelm users with too much information. Every element you add makes the screen more complicated, and if looks complicated on a desktop, it's even worse on mobile devices where there's not a lot of real estate. It's imperative to remove anything in the UI that isn't absolutely necessary. Decluttering the screen will improve the user's comprehension. A good rule of thumb is "less is more."
With limited screen space, you have to create focused content. Here's a couple things to remember:
- Keep content to a minimum and present the user with only what they need to know.
- Keep interface elements to a minimum. A simple design will make your UI more intuitive and ultimately more productive.
Understanding Views and Containers​
We covered some of the basic design principles for designing mobile responsive apps, but we must also stress that views and containers are an integral part of the Perspective design experience because they work together to create your HMI screens, the windows into your application. The View is the primary unit of design and the Container provides a way of laying out and organizing child components within a View. Every view and container in Perspective has an associated layout, simply put, it is a way of defining and describing the way that elements inside the container interact.
A container is also a component that contains other components. They also indicate what layout strategy should be used to control the size and shape of any housed components. The layout strategy defines how the container displays each of its child components in the view. There are a variety of container types that support different layout strategies.
It's also important to understand how each of the container types behave when they are big and small. This dictates what container types you should use for your design. There is a bit of learning curve so you will need to experiment with each container type and physically test them out.
To learn more about each container type, refer to the section on Containers in Perspective.