A Designer’s Wishlist, Part I
We need better tools to give life to our mockups
Christmas is approaching, and it’s time for me to make my wishlist, and dream a little bit about what could be our job as interaction designers if we had better tools to make great products. It’s time for me to ask, and maybe even beg for different design softwares. Because even though we can be greateful for what we have, there are still some needs that are completely left behind while being no less important. And I’m talking about animation and interaction.
One of the trends of design showcasing that you have probably noticed on Dribbble these times, is the growth of animated content.
These cool gifs not only feature crazy animated illustrations or 3D stuff, but also interface in motion. If you didn’t see hundreds of them the last few years, your internet connection might have encountered some critical issues. Dribbble even dedicated a section for “Animated GIFs”, and added a GIF badge for every animated shot. In an analogue move, the App Store has recently allowed video presentations into their app detail views. For eight years, it has been a reign of screenshots only. About time! But it has to mean something. That a new era has arrived, in which handheld device content is not a still image anymore, but a dynamic entity. While new screen sizes and resolutions appear, and iOS has radically drifted away from realism and old metaphors, it is clear that the illustrative side of apps is now fading out in favor of a more dynamic and interactive design.
A new era has arrived, in which handheld device content is not a still image anymore, but a dynamic entity
Why is that? Why is animation so important to our eyes? Why do we cherish it so much? Ever heard of the expression “An image is worth a thousand words”? Well, I’d say that an animation is worth a thousand images. Not that it is actually composed of images, but motion is the medium to tell the story of our designs. Developers, fellow designers, clients, and users will understand a concept better when in motion, and even better if they can interact with it.
And yet, here we are, creating still images as mockups for interactive devices. Our designs seem to hide awful truths while they are stuck in the limbos of time. They may be sleek and sexy, but sometimes they can’t prove themselves to work fine when they haven’t passed the “in-motion crash test”.
Jacque Fresco is a futurist, social engineer, architect, inventor, writer and simply put, one of the guys I admire the most. In the documentary Future By Design, he explains how people tend to see things, and especially society, as something frozen in time:
We talk about civilization as though it’s a static state. There are no civilized people yet, it’s a process that’s constantly going on.
Erase that weird look on your face, I know that this is a whole different matter. But the example was too good. People tend to see things as frozen in time, as static. They often won’t see their environment as an evolving thing. How often have you forgotten the hover state in a web page, or the pressed state to give some feedback to the user on a mobile app? Well, I did that too much. How often have you said to yourself that showing these hidden-by-default states in mockups would be the right thing? Perhaps too many times.
If you place the elements on the screen and call it ergonomics, you only did one half of the job
You might be perfectly aware of this, but think about when that “in-motion crash test” is actually happening, i.e. when you see the whole thing into action. It’s taking place at the worst moment, when you pass it on to your developer, trying to explain how you expect the content to behave with fragile words while an animation would’ve solved it all. Developers generally master motion design’s often complex concepts and vocabulary just fine. Because they had to do this part of the job for so long. Good for them to acquire these skills, because a developer that is interested in design is only a better developer. But this phase should be part of the design process. If you place the elements on the screen and call it ergonomics, you only did one half of the job, and you damn well know it.
So, why don’t you do the whole job? Because your softwares aren’t adapted for it, so you have no time to go through the “finest details”. Except animation isn’t close to a detail. It’s core! An app can be radically different if it behaves just right or if it has no visual feedback at all. Neglecting animations and in-motion behaviors will deteriorate the user experience, just like it does when you animate everything for no reason. It can also influence your layout that you thought would be the ergonomics all by itself. Hence the importance of thinking about transitions that justify context at the right moments, or subtle movements to call the user for action, right in the early stages of design. ’Cause guess what? Our world is in motion! And so are our screens.
Enough lesson giving. I have to admit, I’d be the first one not to care enough about animation and behavior. ’Cause guess what? My workspace is frozen in time! I have no tools that allow me to make an interactive design that provides a good user experience. And yet I call myself a UI/UX designer. I already hear you yelling at your screen: “man, ever heard of After Effects, or what?”. Actually, I have. And it seems like it’s the only way to animate something, along with Apple’s Keynote app, which, while being quite powerful, is not a pro software and simply is not made for that purpose.
When I worked at MadSquare, we created a little game called ColorNot, a simple game based on the stroop effect. My friend Gweno designed it. When you look at the App Store screenshots, it looks like a very simple app, and it’s clear that it wouldn’t take too long to design. But when you come to interact with it, you can notice that there’s a lot more than meets the eye. It’s gorgeously coming to life beneath your fingers, as you play. And screenshots don’t tell you that. It is no accident that iOS 8’s App Store is now allowing videos along with screenshots, so you can actually see what you’re going to be downloading/purchasing. Android people have got to laugh about this. Eight years after… what were they waiting for?
Back to ColorNot. Gweno designed the first shapes into Photoshop. But rather quickly, he fired up After Effects, and the most important part of the design process was made for the animations, the behavior of the game. You can take my word for it, the app was almost entirely designed in After Effects. And the UX of that game was very appreciated by players. It was just enough to provide a fluid gaming and not to be overwhelming. Good design. And I salute the idea of making this game through animation.
The ability to assign an animated behavior to any element of interface should be a standard in UI design software
But have you ever tried After Effects for UI animation? It lacks so much of precision. About alignment, positioning, pixel perfection, sizing. It is not a UI tool. If you try to create an app into After Effects, you will encounter these problems. If you do it in Photoshop, and then try to animate it into After Effects, get ready for a layer nightmare, even if you are an organization freak like me (psycho is the word, really). After Effects is great for movies, it is just not made for interface design. Being an Adobe software, you can still say that it integrates well with Photoshop. But to some extent, even though you can customize Photoshop the way you want to be an excellent tool for UI design, let’s not forget that it was made for photographers in the first place.
Recently, new apps have emerged like Sketch and Affinity Designer, born from this need to start focusing on what UI designers do the most: interaction. Using Sketch, you can start to speak the same weird language your developer uses! Just looking at it, the interface is much closer to Xcode than Photoshop is. You can export assets with ease, without fooling around. So, props for that to Bohemian Coding! They’ve redesigned the way we design, and we couldn’t be happier. Thank you, guys!
But what about animation? Wouldn’t it be great to have the possibility of giving life and motion to our designs, right into our main software? Or is it too much to ask? I think that the ability to assign an animated behavior to any element of interface should be a standard in UI design software. Imagine the time you would save thinking about it right in the place where the interface is born, rather than to wait for the developer to display it himself on a remote device or simulator. And no need to be fancy. In fact, in After Effects, each element can be animated with incredibly complex effects if you add them manually, but comes with five simplest default animation properties. And when it comes to UI, the simplest animations are actually more than enough. They are anchor point, position, scale, rotation, and opacity. Five properties, endless possibilities. All we need with these animation types is a way to edit the velocity of these motions, which stands for the graph editor in After Effects. Honestly, I’ll be thrilled if the best UI softwares could consider bringing animations in UI to the next level.
You need developers for the app to work, you need designers for the user to feel it
Nowadays, there is not even an output format that fits these simple needs. You can export a video, you can export a gif. Yes, but it’s time-related, and there is no interaction. Ok then, you can export an interactive pdf. There was a time when I made one into InDesign for each project, importing screens from Photoshop’s layer comps and adding a layer of invisible interaction areas that linked to the matching pages. It was cool! You could click the app, and it felt like it was a little more live. But it’s awfully long to craft, and there is no motion, no transitions. Why can’t there be a format that would allow us to export pre-animated designs, ready for the tester to interact with? Just like an app, but made by a designer in the early stages of the creation process, accessible on every device. A kind of designer’s proof of concept. You need developers for the app to work, you need designers for the user to feel it.
We need this feature so bad, and we need it integrated into our main design software, where things are created. It would allow a whole generation of designers to rethink their works for a better and more accurate interaction and feedback, it would save a lot of time in terms of internal communication between designers and developers, it would free the latter from this crucial task, and it would prevent the designer to work twice on the same thing at different moments. When we have this into our workflow, I think no one could imagine a world without it. Yet, it’s the world I’m writing from, and I don’t understand why it’s been so long without a radical change on this matter.
Design is in motion, let’s never forget it.
Originally published at jeremypaul.me.
