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?
Love it. I’ll try yuur rule next time to nudge myself into adding some effects.
Interesting how the Paper Prototype rules is applied, and thanks for put it in practice, so we can understand more about it !
A nice article to start day with:)
It’s the job as Front End devs to be buddies with UX/VD folk and show them the funky stuff like pixi/gsap/threejs
It’s the job as UX/VD peeps to be cool with FE folk and surprise them a bit.
It’s the job of the PM to give then the room to focus and experiment so we build the things that are hard, take time, that matter and delight our users.
This is an interesting concept but I think I disagree. Accessibility comes to mind immediately; simple animations are often the best for ease of use.
Loved how friendly the reading felt for non-developer people like me (UI designer here).
The technique seems practical and hope it helps the devs improving more and more their animations skills, cause it’s a BIG and really important part of the job.
Well done, Ronald! honored for the mention btw :)
adding animations like these is opposite of good user experience
forcing user to wait for action that could be done immediately is always a mistake
Whilst I agree with you on this example – I prefer the second example over the last one that adheres to this “paper” rule by making it unnecessarily long – that statement is definitely not true, there are plenty of cases where adding a transition that slows an action can enhance the experience; such as mitigating “jarring/jolting” and adding positive reinforcement (e.g a small animation when clicking a “like” or “share” button).
I would say that the paper prototype rule should work the exact opposite way. If something can be prototyped with paper it’s probably a good, simple and intuitive animation. Just because you can add other bells and whistles, doesn’t mean you always should.
I find this as an awesome rule and advice to push your animations to be a bit more “out of the ordinary”.
I have personally been thinking this way since you first explained it to me, so thank you Ronald! It has been really helpful.
Awesome article by the way!