• design

From the moment Paper hit the App Store, zoom has been one of the top features requested by creators. While we wanted to implement the feature sooner, many of the off-the-shelf solutions didn’t feel right for Paper. We’d like to shed some light on why we chose to invest the time in developing a new type of zoom, and what was involved from both the technical and design end.

Zoom is a peek into the philosophical approach underpinning how FiftyThree intends to evolve Paper as a creativity tool. We try to make tools that help you capture those fragile bursts of new ideas without a lot of the clutter found in productivity tools. We wanted to make a zoom control that gives creators the ability to dive deep into their creations, without taking them out of the moment or losing sight of the larger picture.

MAKING ZOOM BETTER

Zoom is one of those UI controls, like the color picker, that has grown so familiar as to become almost invisible. Designers drag and drop it out of a mental library of stock functionality, and the most pressing consideration is whether to use a magnifying glass or a +/- button for the icon.

“Pinch to zoom” reinvented zoom for touch devices, and Apple made the gesture ubiquitous by including it in iOS. “Pinch to zoom” is now probably the single most broadly understood multitouch gesture; it feels like something we’ve been doing all our lives, even though it entered the popular lexicon barely six years ago.

Rethinking tools for mobile creation is at the core of what we do at FiftyThree, and while pinch to zoom is an improvement over button-based UI controls for browsing, we wanted to make a zoom that was right for the creation process.

One of our primary considerations was that you never lose context when magnifying the canvas. When you zoom an entire canvas, you instantly lose the big picture. In exploring this point, the accessibility controls in iOS allowed us to easily prototype what a full-screen zoom experience would be like.

The time spent in zoom while drawing is typically pretty short. You go in and add the eyelashes or write something funny on your character’s t-shirt, and you’re out.

Our team spent many hours with the accessibility zoom, and looked at the best implementations of zoom across a range of apps. One thing that became clear in our testing and observation was that the time spent in zoom while drawing is typically pretty short. You go in and add the eyelashes or write something funny on your character’s t-shirt, and you’re out. In the vast majority of cases, zoom is task specific and tasks are region specific. This discovery supported our idea that zoom is a tool that’s activated on a particular region instead of globally on the canvas.

Another challenge we saw was this – While “pinch to zoom” is a simple gesture for entering a zoomed state, it is much more difficult to get out of that state. It typically involves carefully pinching back to 100% or learning a new gesture like double tap. Anything you have to fuss with while creating is going to take you out of the flow, so we avoided anything tricky or that required too much concentration.

In a broader sense, we wanted to create a tool that works the way people do when they draw. One of our creators recently illustrated this process of evolution nicely.

People typically don’t begin drawing a face with the eyelashes. You rough out the major lines, then add form, and eventually work towards levels of increasing detail. When the eyelashes eventually need to be added, you focus on the places where you need to add detail, targeting them one by one. Global zoom didn’t feel like something you’d pull in as needed to make targeted detail additions. We thought there was a better way to have the tool flow with the creative process.

THE SOLUTION

In Paper, zoom is not a state but a loupe tool you call up by pinching. It magnifies up to 3x depending on how far you spread your pinch. You can drag it around by grabbing any edge, and doing anything outside the loupe will close it. It’s fast to get in and out of zoom, and it usually makes people smile the first time they see it.

The final part of our solution to zoom is that it maps to the gesture people are already familiar with. It doesn’t add new gestural language to Paper, and it doesn’t add any UI to the default state of the app. Things won’t always work out perfectly, but, in general, our intention is to keep the base experience of using Paper a simple one. New tools and capabilities can be layered on top, but they’ll build upon the bedrock of a clean, simple experience.

THE ROAD TO RELEASE

The world of touch and gesture is much more vague than that of point and click. If you didn’t already know, Apple does a lot behind the scenes to make it easy to click tiny links on your iPhone. Input signals from touch, and especially multitouch, are messy and require sophisticated processing to correctly infer a user’s intent. In our case, we already had a fairly complicated gesture to recognize in the rewind control. Knowing when the user wants to rewind vs. open the loupe was a non-trivial problem. There were gesture recognition libraries out there, but in the end, we ended up needing to write our own. We will explore those challenges in detail in an upcoming post from the engineering team.

The final stage before releasing any feature is getting the details of how it feels dialed in, so that it won’t react in an unexpected way if you do something slightly odd, like grab it outside the bezel, or put another finger down while pinching out. At this phase, our approach of heavily parameterizing the app pays large dividends. The design team is able to control aspects like how far outside the zoom ring fingers can go before they close it, how much magnification can be achieved at maximum width, and the minimum width before zoom snaps closed.

THE DEVIL IS IN THE DETAIL

For some features, we kick around a wide variety of ideas before finding the best solution. We’re also fortunate to have an awesome community of creators who frequently send us inspiring takes on the features they want to see in the app (sometimes with detailed wireframes). In this case, however, it was one of those ideas that our co-founder Andrew Allen had stored in the back of his mind, and we knew it was right the first time we looked at it in design. And yet, the road to release is long, and paved with a thousand thorny details. Your attention to those details is what sculpts the experience of the product, and we pride ourselves on being careful sculptors.

In the end, nothing in a properly honed feature calls attention to itself.

The scores of small details that go into features have a strange way of disappearing as you nail them down. In the end, nothing in a properly honed feature calls attention to itself. To quote the late Steve Jobs, it “just works.” Getting to that state means cutting through a lot of underbrush and eliminating pains that users will never even know about.

We’re already hard at work reimagining the next set of features for Paper. We’ll probably do them the hard way, but they’ll be done right. In the meantime, we can’t wait to see what you create with zoom.

Makers

Thanks