Zooming in on Zoom!
How our team approached the design and development of Play’s zoom mode.
Our users asked and we delivered. We’re excited to announce that Play’s zoom mode is finally here! With our latest release, version 0.9.14, you can view your designs zoomed out down to 40% or zoomed in up to 200%. Play’s zoom mode allows you to better see and edit both the bigger picture of a page’s structure and the tiny details within a page. It’s our most recent step towards our goal of making Play as powerful and user friendly as possible.
Zoom wasn’t always a part of our plan. The idea was tossed around early on while building Play, but there wasn’t much momentum.
“Originally, we weren’t sure we needed the ability to zoom in. We have preview mode which lets you see your designs at 100%, which is the most zoomed in an actual user would be viewing your designs at. But the ability to zoom out to see the full page structure was always on our mind, and eventually zooming in started to make more sense as well,” said Kyle, Senior Designer at Play.
Between user feedback and usability testing, a few use cases for zoom became clear — if you have really tiny strokes, drop shadows, or icons, zoom helps you check details like color, width, or spacing. There was a real need and now we had to think critically about the best way to design and execute this feature.
Designing Zoom
How large is the zoom size range? How does a user enter or exit zoom mode? What is visible while in zoom mode? These were some of the questions we needed to address when thinking about the zoom feature.
Together, Kyle and Eric Eng, one of Play’s Founders and the engineer who built Play’s zoom feature, took these questions and through some initial gesture testing and design exploration, came up with three goals for zoom:
- Let users zoom and pan
- Let users view content beyond the clipped bounds for a better design experience
- Keep performance smooth
After doing some initial testing & design exploration, we realized building zoom would require changing the entire structure of Play’s canvas.
Building Zoom Functionality
Eng’s first challenge was to refactor the way the canvas interacted with the Editor Panel. Originally, when a user dragged the Editor Panel vertically, the canvas scaled up or down based on the visible height of the Editor. That interaction conflicted with our goal for users to fully control the scale and position of their design with the zoom feature.
Eng needed to build an additional view that broke the connection between the Editor Panel and the size of the canvas.
This new view would function like a “state” if Edit Mode was the “component.” This structure allowed Eng to give users different functionalities when they entered zoom mode.
To do this, Eng recreated the canvas controller, which handles the rendering of a page and its main components. He chose to use native UIScrollView because it matches Play’s iOS feel and it has built in zoom and pan capabilities.
With UIScrollView, when you pinch with two fingers on your screen, your page will scale responsively based on your fingers’ proximity to each other. Additionally, when you are zoomed in, you can use a single finger to drag into view whatever section of your design you want to see. This specific type of native pan interaction — drag — is unique because the object tracks where your fingers are on your screen, not just the total distance the object has to travel.
Zooming Out
The next challenge was to allow users to view the canvas’ and objects’ overflow — or the content outside of the bounds of the canvas — while zoomed out. This functionality would allow you to not only see the full structure of your design but also the navigation structure of each page.
This lets you answer questions like, where is the side menu coming in from? If there’s a drawer or panel, where is it in relation to the scroll? Knowing the answers to these questions is essential to creating a good user experience in your product so we knew we needed Play’s zoom mode to show all of this while you’re designing.
Before starting, Eng thought of a few approaches. His first idea was to create a large, phone-shaped mask around the whole page with 50% opacity. When you would enter zoom mode, the bounds would unclip, and you would see the overflow.
However, after initial development and testing we realized there was more that could be done. Since many designers use containers with overflow elements inside, our original approach was too general to show different views of elements’ overflow in addition to the whole canvas’ overflow.
Instead, we decided to try creating masks for each level, starting with the selectable elements, all the way through the containers, and down to the canvas. This way, when a user selects an object in zoom mode, Play unclips and shows that specific object’s overflow, which is how our team had originally envisioned it.
Debugging
After all this work, Eng had a functioning version of zoom built in Play, but there was another problem — performance issues on the iPhone Pro.
Play works responsively on any iPhone X and above, including Minis, SEs, Pros and Pro Maxes. Since these versions have a range of screen sizes, there is enough real estate for Play’s features, and in this case, overflow page elements, depending on the iPhone version.
On the iPhone Pro, however, there was a signficant drop in frames and the user experience lost its signature smooth feel.
At first, Eng and our QA team thought this was due to the pixel density on the iPhone Pro, which can be up to 2–3x the density on a non-Pro iPhone.
To get to the root of the problem, we started debugging zoom, piece by piece. First, Eng turned off the masking and clipping features since they take up a significant amount of CPU usage for a device, but zoom was still dropping frames and felt chuggy. Next, he investigated UIScrollView itself as the dropped frames weren’t happening with the old canvas controller, but that didn’t fix the issue either.
The obvious suspects weren’t to blame, so we started to examine other changes that were made while creating the feature. Eventually we turned our focus to the drop shadows on the icons in the left and right tool bars. We had added these drop shadows to increase their visibility, but after removing them, zoom mode became more performant and just as smooth as the rest of Play.
Designing and implementing the zoom feature in Play was a fun challenge and we hope you have fun creating with Play…now with zoom mode!
You can install Play from the App Store.
Learn more about Play on our website, check out our YouTube channel and Support Site, and follow us on Twitter and Instagram.
