Developer Diary – Adapting SmartScales for the iPhone (Part III)

In the 3rd and last part of this series, we discuss the process of redesigning the exercise view for phone screens. This proved to be the biggest challenge because of the density of the controls, and the need to fit so many of them not just on the larger screens of the latest iPhones, but also the tiny screen of the iPhone 4s.

The initial approach was to do simply compress the UI from the iPad. We did several iterations in this manner, but even though the mockups looked okay blown up on Photoshop, the controls are way too small on actual devices. We very much wanted to keep the circular exercise name label as a central motif, but the subtitles became too small. It also made the top bar too busy.

SmartScales iPhone Exercise View in iPad Style
Direct translation of the exercise view from iPad to iPhone.

Eventually we just started from scratch and looked for a layout and controls that simply worked best for small screens and a longer aspect ratio. To declutter the interface, we identified options that are used to configure the exercise, and not frequently while playing the exercise. These are relegated to temporary popovers that automatically retract after the user stops interacting with their contents. The advantage of these over standard popover balloons is that the rest of the UI remains accessible.

SmartScales iPhone Exercise View
Final exercise UI on iPhones featuring popover panels.

The end result is a sleek and distinctive UI that we believe will provide the best experience on small screens. The iPhone version of SmartScales is nearing completion, do give it a whirl when it’s up, especially those of you who don’t own iPads!