Shrink To Fit: Designing Scalable User Interfaces

A USER EXPERIENCE IS NOT CONFINED TO A SINGLE DEVICE ANYMORE. It can flow from one device to another or be shaped by multiple devices simultaneously. Brands and manufacturers have to consider the growing number of devices and variations as potential touch points that users may have with any given product, media experience or service.

Designers and developers have to create interface solutions that feel native across platforms and device types. The number of interfaces possible explodes when you factor in Android, iOS and Windows on phones, tablets and desktops and all the variations of screen sizes and resolutions. There is no design-once, deploy-everywhere magic button that turns an iOS design into an Android-appropriate UI, nor is it as simple as taking a phone version of a UI and stretching it up one-to-one to fit on a tablet. Careful considerations for each device are necessary. We’ll walk through a few high-level scaling concepts and then get to some useful methods (and math) you can put into practice.

So there is no magic button but there is hope. There are many ways to improve the quality of your work when tasked with designing once and deploying everywhere. We have gathered the insights that have helped us create scalable solutions that actually go to market.

 

Frame The Contexts.

Extending experiences across platforms and devices requires a holistic approach that considers the unique contexts, not only of the device specs but also of the user’s location and intent. This all has to be framed by the big picture: what is this particular device’s role in a multi-touchpoint, multi-device service offering? This type of thinking is why we partner with companies to define user interface frameworks that define the right adoptions at each touchpoint.

The considerations for creating a new instance of an existing UI on another platform or resolution is never just a matter of asking how the graphics scale. Scaling a design from one platform to another requires understanding differences in interaction paradigms, graphics handling, animation capabilities, file formats, and beyond. Start by designing a valuable experience and then carefully consider the additional value that each device can bring to that product or service.

Recognizing the need at both the strategic service level and at the individual device level Punchcut has devised a method we call Device Personas.™ Device Personas ensure we integrate the strengths of each device individually. We consider the unique inputs, sensors, and contexts of use for each device and the role they play in the larger ecosystem that become a service, product or media experience.

 

Translate Principles Not Pixels.

Translate principles, not pixels. Your core brand and experience philosophies should stay true regardless of device or touch point, even though the specifics of the screen design may change radically. Additionally, hire smart people to realize your vision. You may be reading this looking for Cliff Notes answers to these tough questions. In a space that’s evolving this rapidly, the questions are changing as often as the answers.

 

Your core experience philosophies should stay true regardless of device or touchpoint.

 

Don’t Try To Boil The Ocean

Between iOS, Android, Windows Phone, and other platforms and devices there are over 200 unique screen sizes and resolutions (see our article Pixel Proliferation: A Toolset For Managing Screen Resolutions). While you ought to keep the big picture in mind, don’t attempt to solve at the detail level for too many unique screen types at once. Understand the audience of your product and choose a widely adopted resolution and platform as your primary target that will give you the largest reach to your primary audience. Careful considerations of scale and positioning of design elements can be made along the way with a good awareness of secondary target screens and resolutions.

 

One Size Does Not Fit All

Understanding the difference between scaling to a larger (or smaller) resolution and changing the proportions of a display size is very important. Even in a situation where the resolution is simply double the number of pixels, simply doubling each individual assets’ resolution might not get you the result that you are looking for. If your pixel density changes based on the size of the physical screen you will need to carefully evaluate the new touch areas of actionable items, sizes of graphical styles applied to components, and legibility of text sizes.

Changes in screen proportion when scaling to a new device don’t always go hand in hand with resolution changes and require repositioning of design elements rather than scaling. Because of this difference, not every resolution change always has to require an entirely new library of assets. Sometimes support for a new resolution and device screen proportion could be as simple as a few assets that are designed to scale accompanied with guidelines on how to reposition certain elements on the screen.

Here is an example of a situation that has a small change in resolution and also a change in screen proportions. Scaling a handset design from a 480 x 800 resolution to a 540 x 960 resolution is only a difference of 12% size increase in width and a 20% increase in height. A small percentage increase like this doesn’t always justify a complete redesign or a completely new library of assets. Scaleable UI problems like this can sometimes be solved by following a few guidelines.

 

1. Early consideration of the additional resolution
2. Identifying scalable assets where the design needs to be flexible
3. Considering flexible padding and margins (padding and margins are non-destructive)

 

Your Monitor ≠ Your Target Device

Nothing substitutes for seeing a design on the target device. This is especially the case in multi-device design engagements. With tools like LiveView (for iOS) and cloud file systems like Dropbox (for iOS and Android) or SkyDrive (for Windows), viewing designs at their real size is simple enough not to be a barrier to design. A realistic view of your design lets you make informed design decisions and evaluate in real time. Things like legibility, tappable button sizes, color matching, contrast, and spacing become instantly clear. If your target device is handheld, you can immediately evaluate things like button placement based on how you actually hold the device. For extra credit, execute motion transitions and build an interactive prototype. You will notice the difference when you reveal your design to a client or colleague by handing them a device with the design loaded on it. There really is nothing like the real thing when designing a device experience.

 

Reduce, Reuse, Recycle

The Flexible layout approach to design and implementation of the user interface is a method that alleviates some of the challenges of supporting multiple devices and resolutions. Whether it’s responsive web design with HTML (repeat-x, repeat-y), or native apps like Android (9-patch), and iOS (stretchable pixel dimensions) each platform has its own way of reducing the footprint of assets. This reduction of asset size has a number of purposes, one of which is to create assets in a format that allows them to be programmatically scaled up without compromising the visual fidelity. Creating assets in scalable formats also increase performance, reduces download time, and for developers, reduces the headache of keeping track of large asset libraries. Also, clear documentation of what assets can be drawn programmatically, what assets can scale and what assets cannot, will drastically reduce the number of assets you actually have to produce and maintain. A detailed understanding of these different scalable formats can help you implement a design without compromising its visual integrity.

 

Do The Math

Supporting multiple devices can mean maintaining multiple asset libraries at different resolutions. Because of their complexity, we’ll use icons to illustrate. focus on icons don’t lend themselves to 9-patching or stretching, they are often a class of assets that have to be custom tailored to each target device. The following math shows how to find the lowest common multiple, which is the size you should use to originate your design. This cannot guarantee perfect results, since organic shapes rarely scale perfectly, but this will give you the cleanest and best shot at avoiding costly redrawing.For example, let’s say there are three sizes for a set of icons:

16 x 16
48 x 48
72 x 72

 

1. Find the prime factors corresponding to each target icon size

16 = 2^4
48 = 2^4 x 3
72 = 2^3 x 3^2

 

2. Multiply each of the unique factors with the largest exponent

2^4 x 3^2 = 16 x 9 = 144

 

So it follows that if you design your icons at 144 x 144 they will scale down nicely to all of your target sizes because each of your target sizes is a factor of 144. If this was all way too mathy for you, try it this way:

 

1. List out the multiples (n x 1, n x 2, n x 3…) for each target size (where n is the target icon size)

So in our example, these are the multiples for each size:

16, 32, 48, 64, 80, 96, 112, 128, 144, 160…
48, 96, 144, 192, 240, 288, 336, 384, 432, 480…
72, 144, 216, 288, 360, 432, 504, 576, 648, 720…

 

2. Now just find the lowest number they all have in common

16, 32, 48, 64, 80, 96, 112, 128, 144, 160…
48, 96, 144, 192, 240, 288, 336, 384, 432, 480…
72, 144, 216, 288, 360, 432, 504, 576, 648, 720…
Still too mathy? This is the nature of it. Just keep the main principle in mind: you’re not just designing for the largest size needed (in this example that’s 72), you’re designing at the size that enables you to scale down with the best chance of staying ‘on pixel’, which is so crucial in UI design. (In this example that size is 144).

 

A Word For Design Teams:

Know Your Pixels
Visual designers need to understand the basics of resolution, screen density (pixel density) and the way proportional changes affect a design system or framework. Look at your solutions in the context of your end target, and make real-time, informed decisions throughout your design process. Lastly, a detailed understanding of different scalable formats and how they are used will help your design teams integrate with development teams and realize your design without compromising quality.

UI experiences are just as important to users as they should be to brands that want consistent expressions from product to product and from device to device. While there is no magic button there are best practices and insights that can be leveraged to create quality designs that scale gracefully. Understanding your users, their devices and how they use them should be every designer’s first step.

 

A Word For Product Teams:

Scaling Vs. Tailoring
Getting scaling right is critical, but it’s only a tactic in the bigger picture. The strategy has to incorporate the big picture, which should start with a user experience framework that is flexible to the ways services will be delivered, or content consumed, at every device touch point.

We’ve addressed some of the aspects of deploying consistent interfaces and we are not overstating the importance of getting this right – thereby avoiding sloppy mistakes at worst and costly rework at best. Yet, the macro strategy that defines how a company or brand will address the exploding landscape of devices is crucial. We partner with companies to give them a fuller understanding of the facets involved. We create the user experience frameworks, the device personas and the design guideline documents for our clients to ensure their strategy leads to the most appropriate and successful connected experiences.

—-

Punchcut is a human interface design company specializing in mobile, connected products and services. Punchcut works with the world’s top companies to envision, design and realize next generation connected experiences across devices and platforms that engage customers and transform businesses in a connected world.

A Punchcut Perspective | Contributors: Andy Gilliland, Nate Cox
© Punchcut LLC, All rights reserved.