The Paper Prototype Rule

Celý článek

I’ve been lucky to have worked with some of the best designers in the industry, including Zhenya Rynzhuk, Louis Paquet, Maria de la Paz Vargas, and of course, dozens of the amazing designers at MediaMonks. Many of the projects we’ve worked on require custom animation and guidelines that enable developers to be fully creative and push the limits of what we think is possible with CSS and JavaScript.

Then there are other projects that lack resources. These are the ones that end up becoming an opportunity for us as developers to take the lead on how certain UI elements animate and whether the guidelines we create add up to a great user experience. Those are generally the projects in which a simple trick can help us determine if we’re on the right track.

I just so happen to have a simple trick that has helped me quickly test if my animations hit the mark. I’d like to share it with you now. I call it The Paper Prototype Rule.

The print mindset

Web design (perhaps unconsciously) inherits many things from print design. If you think about it, some of the most basic interactive web patterns, such as accordions or tabs, are just a digital representation of how we physically have stored information in the past.

Even though the industry has taken a more digital-first mindset and gone beyond the print paradigm in the past decade, we often struggle to get out of that print mentality. As developers, it can feel as though we’ve been wired to animate UI elements in a boring standard way that doesn’t go beyond the reference of moving pieces of paper.

The Paper Prototype Rule

I’ve picked up some tips and best practices in my years working with other folk and have developed them into some simple rules for working with animation. Although I consider the rules more as guidelines or a personal reference, I’ve recently unlocked more value by starting to pass them on to my team.

And it’s thanks to The Paper Prototype Rule which states:

If you can use a paper prototype to recreate the animation, then you probably need to spend more time on it.

The intent is not to overly complicate animations, but embrace the advantages of creating a digital experience that graduates from print concepts. And the principle is pretty simple. Can the animation be prototyped with paper? If yes, we can do better. If no, then we’re on to something.

The Paper Prototype Rule in practice

Don’t get me wrong, paper prototyping has proven to be a great tool for user testing. But we can use the simplicity of its nature to determine when our interactions are just too simple.

Let’s try an example.

Almost every standard website has some sort of navigation. So let’s assume we inherit a design  comp that provides direction for both active and inactive navigation states. Sure, we can do that. It’s not that hard.

Can we replicate this experience with print? Sure can. All it takes is stacking one piece of paper on top of the other. We can do better.

Assuming the comps we received lack any direction for the transition between those the open and closed menu states, we can make the animation a smidge better with the transform property. That alone improves the experience significantly:

Simply sliding the menu’s active state from left-to-right helps the user understand the transition and provides some context for where they are. There is no doubt that the menu is an overlay that covers the page content. That wasn’t apparent before we added the transform. We could say that, with a simple line of CSS, we’re now getting the job done.

So let’s ask ourselves the question: could this interaction be represented in a paper prototype? My immediate response is: yes. This means there’s plenty of room for improvement.

We can use our digital mindset to create something that doesn’t just get the job done, but enhances the experience. We can play around with techniques like fading, masking, parallax, staggering, or simply splitting the menu into different pieces that animate independently. This is the chance to get creative and use our front-end chops to create a uniquely digital experience.

In the spirit of keeping things simple, let’s see how it would look after applying some basic techniques:

There we go! Now we’re starting to veer away from the paper mentality. Can paper slide from left to right? Yes. But can it fade content in and out with an offset animation? Not that I’ve seen!

And, as I said before, there’s much more we can do here. But I think you get the point. You could spend more time playing with the animations to find the “perfect” interaction but that will largely depend on the project. The goal of this rule is to push ourselves away from the print design mindset and embrace the possibilities we have for creating uniquely digital experiences.

Once you start putting the The Paper Prototype Rule into practice as part of your development process, you’ll likely find yourself striving to find the tools to continue to improve your craft. I always recommend reading up on basic animation principles and always being on the look for fresh inspiration from other websites.

So, the next time you’re working on a carousel, modal, or any other interactive component, take a moment to check your animation approach. Does it pass The Paper Prototype Test? 

The post The Paper Prototype Rule appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.