Small Planet

Blog Post

Scalable UI for iOS

Designing a gender-neutral period tracker with Planned Parenthood

Stephanie Casper

Stephanie Casper

Art Director

When it comes to creating an iOS iPhone app, “one size fits all” definitely does not apply. A busy screen on a small phone can easily end up looking bare and empty on a larger screen.

Scaling interfaces is a tricky but absolutely essential step to creating a great looking app. We support iOS 9.0 and up on our apps, which is still compatible on the iPhone 4s, which has the same point dimensions as the original.

That means your design needs to work on a device as small as the iPhone 4s and as large as the iPhone 6 Plus, an area difference of over 50%!

This delicate balancing act between too much and not enough presented itself with Spot On, the period tracking app we created for Planned Parenthood. Our interface had to be quick and interesting enough to encourage users to come back to the app every day.

We needed multiple templates with A) bold headlines, B) text customized illustrations, and C) rotating content in short, insightful chunks to achieve the interaction we needed.

No scrolling! All important information and interactions had to stay above the fold.

Scaling and Non-Scaling

Using large full screen text and images which won’t scroll or cut off on a 4s, without any scaling, translates into a big empty space on a 6 Plus. Spot On’s design pairs scaling content with non-scaling content to create a dynamic interface. Elements like large, long text and full-width images are scaled, while short text and buttons remain at a consistent size. We used multipliers and maximum text line counts to determine how things would scale, and constants to define fixed dimensions for non-scaling elements.

The Display area provides individualized messages and prompts. It has a defined size, based on the screen width and height that is not occupied by the navigation bar, ribbon, and tab bar. So, we set Display height and width to 1.0 each. Multipliers allow us to assign a value to an object’s width, height, and/or position relative to another element. By assigning multiplier values, text and images scale based on a ratio of the Display.

You’ll Be Tested on this Material

Here’s a nitty-gritty example. One of the Display templates has 46pt, bold italic, and left aligned text. With up to 145 characters in our Insights for this template, the text needs to scale down to fit on a 4s. The maximum width of the text box is defined by using constants of 20pts to the left and right of the Display, and telling the text box to align to the those constants. Since constants are constant, they don’t change size, creating standard left and right margins across devices.

Scaling the text was another matter:

  • We assigned the text box a height with a multiplier value of 0.46, telling the interface that the height of the text box should always be 46% of the height of the Display.
  • Instead of text cutting off or truncating on a 4s with an Insight of 110 characters, the text scaled down to 21pt where it all fits.
  • On the 6 Plus the text only scaled down to 35pt.

We used the same strategy of assigning a multiplier to an image height to create a scaling image template. By placing a controlled amount of smaller text underneath the image without any multipliers or defined heights, we created a template with an image that scales to fill the display with consistent size text across devices. If you know your text will have room to flow, and don’t want it to scale or truncate at a certain point, you do not need to assign the text box a height.

Text scaling by maximum line count is also an option. This method generally works best with a more controlled amount of text that doesn’t vary in length too much over templates. Email me for details — I’ll send you an example.

Every Template, Every Size

Although iOS provides powerful ways of laying out and scaling text and images, they can only scale down so far before becoming incomprehensible or start overlapping with other view elements. Our Spot On templates required strict content guidelines, so we laid out every template in Adobe Illustrator, in every screen size.

That meant looking at 8 templates over 4 screen sizes, for a total of 32 mock ups for one portion of one view. This allowed us to see how much text would work within our designs on a 4s, if it needed to scale, and if so how far down if should scale. We created a maximum character count for each template, and came up with rules for how to scale images, by looking at a maximum image size on the 4s, and proportionally scaling it up.

Keep an Open Mind

Even with carefully created design specs, you can still lose some control over the final design. It is nearly impossible to get every rotating piece of content on every device to look pixel perfect every time. Text will break in different ways on different devices, creating different rags, and potentially widowed text. Carefully calculated character counts may need revising, since longer words will move onto a second line of text sooner than a shorter word will. It can also be difficult to guarantee that your scaling headline text is exactly 15pts above its body copy.

When it comes to creating a complex scaling interface, it is important to know what your design is going to look like at all times, and on all device sizes. Keep an open mind with your designs and employ an iterative and holistic process — it will help maintain sanity.