and how they help define the Interface Personality of your product
Interactive design trends in 2015 will focus less on specific visual styles, and more on animations and transitions that bring the product to life. Flat design, giant images, and bold colors (to name a few) will continue to influence the visual language of our apps and websites. But the real evolution will be around the Interface Personality: the individual characteristics and behaviors that make that product — or experience — unique.
It’s about time, literally
This should come as no surprise. Dozens of sites and articles have popped up in celebration of this magical space between the static states of our GUIs and NUIs. Developers are eager to share their creativity and techniques. And motion designers are finding a new calling as they strut their skills on sites like Dribble, where they post cool, conceptual interface animations. Some are possible to execute. Some not.
However, with all the excitement and buzz, we need a better way to communicate the Interface Personality of our products to our client and team. Our clients want to talk about it, but they don’t have the words to properly describe it. I hear terms like “Wow factor,” “That extra 5%,” or, my favorite, the “Special Sauce.”
So to help create clarity for my clients, I talk about the Interface Personality of their product as a real thing, using that wording. By giving it this name, it creates a common vocabulary, so we can discuss, track and prioritize it. And with this language in place, we can then work together to design it.
Moodboards, Style Tiles, Element Collages and design spikes are a few useful tricks which help designers establish a visual language. But I found they were inadequate for communicating the animations and transitions of an experience. So, to fill this gap, I created Behavior Galleries: a lightweight way to communicate and define the Interface Personality of the product. Think of them as motion moodboards.
Behavior Galleries are generated through two a two step process.
Part 1: Define your guiding principles Start your Behavior Gallery by identifying your high level guiding principles for animation and motion. It’s important to establish what motion is on brand and what is not. In so doing, you are also prioritizing the direction of your team’s time and resources.
Need help getting started? There are several places you can look for inspiration. Material Design has a fantastic set of principles that are worth checking out (you knew we weren’t going to get through this article without a Material reference). The principles they mention are smart and clear. They also do a good job of not encouraging animation just for the sake of it. Motion has meaning, and you should deploy it with purpose.
The 12 principles of animation is another great resource. Created by Disney animators Ollie Johnston and Frank Thomas, it provides some great granular practices that can make any interface element feel more like a character. Mark Geyer, a Product Designer at Salesforce, beautifully visualized these principles.
And last, here are a few guidelines that I use to get me going:
- Content is alive. Data and information should not feel static.
- Avoid hard cuts between screens.
- Elements should assemble in rhythm rather than appear all at once.
- Look for opportunities to infuse the brand between the transitions between points a and b. (Think of the “pull to refresh” pattern. Google, iOS –even Yelp– all have used this transition to brand between the GUIs and NUIs.)
- Animations should be used to inform.
- Animations should be used to provide feedback.
- Animations and transitions should feel appropriate and natural. Don’t overdo it.
Part 2: Find your inspiration points Once you’ve defined your guiding principles, it’s time to collect your inspiration points. There are plenty of websites cataloguing various examples of these, and I’ve put together a page of resources here. You can also use your phone to capture examples. If you need a high level of polish and fidelity, you can always make your own using a tool like After Effects. However, if speed is the name of the game — and for me it often is — I would rather use pre-existing examples to start that dialogue with my client and team.
So where should you put all these fantastic samples? I love using a tool called Dropmark. It contains all the features I need to create quick, low fidelity Behavior Galleries. I use their browser extensions and bookmarklets to upload little videos I make from my phone, or drop in samples from around the web. Dropmark also allows me to have cards for text, so I can include my guiding principles as part of the gallery, too.
Should you not be interested in a tool like Dropmark, there are other ways to assemble a Behavior Gallery. One is to use a combination of Google Sheets and Dropbox. Google Sheets will allow you to organize all your inspiration points and guiding principles. If you created little movies for your presentation, just put them on Dropbox and link them in your file. I prefer the visual experience of a tool like Dropmark, but this alternate approach will work too.
A couple of tips to get you going
• Add details to your inspiration points. Don’t just put a inspiration point in your gallery without any explanation. Make sure you provide a little context on how it is relevant.
• Map inspiration points to your application map or sitemap. Ideally you are in the process of making, or already have made, an application map or site map. Make sure the map has a labeling system, not just names, to easily catalog the various screens and templates. For example, label your home screen 0.0 Home instead of just Home. An About page and About subpage might be 1.0 About and 1.1 The Team instead of just About and The Team.
• Write the details as user stories. If you use an agile methodology, then you are familiar with user stories. When you add any details to help contextualize the example, write it from the point of view of the user. It will then be easier to make tickets out of these inspiration points and place them directly into tools like Unfuddle, Jira or even in the developer notes in Invision.
• Make them your own. Just like moodboards, Behavior Galleries are a starting point.
• Add the finished examples to your pattern library. By this point you have spent a lot of time defining the personality of your interface. Create a section for animation and motion in the style guide or pattern library. The only way to codify them as part of your brand is to make sure people use them consistently. Don’t forget to include your guiding principles in your style guide.
• Make it a team sport. Designers, Developers, Product Owners — everyone on the team — should feel like they can contribute to the Behavior Gallery.
Behavior Galleries are an incredibly simple but powerful tool to help define the Interface Personality of your products. They help remove ambiguity when it comes to exploring animation and transitions, and provide a clear and simple way to talk about them with your client. I hope you find them as useful as I do.
For a growing list of resources and tools to get you started click here.