Issue 27 \\ Read past issues

Issue 27 // Concepts and Code

As UX designers, developers, and researchers, our objective is to create experiences that are straightforward, positive, and satisfying—but this isn’t easy to accomplish! Creating a good user experience is the result of careful consideration, constant tweaking, and lots of feedback. A typical project involves our UX designers working through and prototyping an idea, followed by our UX developers stepping in to begin building it. But then we're faced with yet another challenge: the intense process of actually creating something that achieves the look and feel that we originally envisioned and intended.

This edition of the UX Newsletter describes two very different parts of that creative process: building and prototyping. In our first article, UX Developer Alvaro Sanchez explains how he animated SVGs to create Freddie’s congratulatory high five after a MailChimp campaign is sent. Then UX Designer Michaela Moore writes about her experience using InVision, a tool for prototyping interface designs, and explains how it simplifies the process of sharing and gathering feedback. And, as always, we conclude with some UX goodness from around the Web.
Tweet
Share
Forward to Friend
Editors: Laurissa Wolfram-HvassGregg BernsteinAarron Walter
Artwork: Caleb Andrews

On Twitter: @MailChimpUX

It's Not a GIF


by Alvaro Sanchez
We spend a lot of time watching people use MailChimp, not only to learn how we can improve, but also to get a sense for how people feel as they use the app. From watching, we know sending a campaign can be stressful—our users are often under deadline, and the fear of sending an email with errors is ever present. People twist their mouth, wring their hands, or even break out in a sweat when they’re about to send. We feel it ourselves every time we create this very newsletter—hitting the “send” button is a very scary proposition.

Knowing the emotional context of sending led us to address these fears with illustrations and copywriting. We simply want to convey to our customers that we know how they feel, and we want to acknowledge their moment with a congratulatory high five after they hit send. In a recent release, we experimented with SVG (Scalable Vector Graphics) animations to make this moment even more triumphant.

In our previous issue, UX Designer Caleb Andrews explains how we prepared our SVGs for animation. In this article, I’ll take it a step further and explain how we animated the SVGs. I provide short examples of some of the steps I took to create the final versions for Freddie’s high five animations. I simplified my descriptions here for explanatory purposes, but I link to the source code at the end of the article, if you want to see all the components for the final animations.
 

Getting started with SVG animation


When I took on the Freddie animation project, I was given a prototype of the animation, made in After Effects and then exported as a GIF. I started working with Caleb, who helped me re-create in Illustrator the shapes used in the prototype—hands, arms, fur, etc. After I labeled the layers and organized the assets, I exported them as SVGs. This left us with three SVG files—one for each image of Freddie’s arm in a different position. Next, I started to think about how to animate the shapes.

After doing some research on JavaScript libraries I decided to go with Snap.svg. Snap supports features like masking, clipping, patterns, full gradients, and groups. It also provides a simple and intuitive JavaScript API for animation.

The implementation for the animation functions (called “mina,” or “anim” backwards) uses request AnimationFrame, which makes the animations perform really well in the browser as Paul Irish explains in one of his blog posts.

Just as a side note, if you decide to use a library that doesn't support request AnimationFrame to animate elements, be mindful of layout thrashing. It occurs when JavaScript writes and then reads from the DOM over and over again. This creates document reflows, which affects browser performance.
 

Animating the Movement of Freddie’s High Five


Freddie’s high five animation appears on the screen immediately after someone sends a Campaign in MailChimp. Previously, we displayed a picture of Freddie’s hand, frozen in mid-air awaiting a high five, but we felt like we could do more to provide our users a sense of relief after the stress that comes from sending a Campaign.

I created the high five animation with three separate images of Freddie’s arm, each in a different position. For the final animation to look like a single arm in continuous motion, I needed to create a smooth transition between each image. To do this, I used a step animation technique and stitched the images together with transitions in between.

Why not just animate one image? Calculating all the points in Freddie’s hairy arm and morphing the arm curvature was just too complex for the scope of this project.

To load the three variations of Freddie’s arm I used the Snap.load function. On my first attempt, I used a separate Snap.load call for each arm. While the animation loaded just fine in Firefox, it broke in Google Chrome. Eventually I realized that Firefox was able to keep all the transitions and init values, regardless of how many Snap.load calls were made. Google Chrome, however, couldn't keep the transitions and init values because each Snap.load call creates a new SVG fragment with its own viewport and coordinate system. I solved this issue by keeping all the assets (all three variations of Freddie’s arm) in one SVG, so I only had to make one call instead of three.

The next step was ordering the stack elements in the final animation.
High Five's elements stack
To do that, I used Snap.svg's function to group elements. For example:

// Order of grouping is important!!!
// s = SVG canvas created by Snap
var group = s.group(
  circleBG,
  hand1,
  hand2,
  hand3
);

Grouping also defines the stack order of those elements—with circleBG on the bottom and hand3 at the top.

Then we defined and applied a mask to the group, which animates the elements within the mask's shape—in this case, a circle.

Here’s how I defined a mask in Snap.svg:

// Create a circle at x:200 and y:200 and 200px radius
circleMask = s.circle(
  200,
  200,
  200
);
// Fill with white
circleMask.attr({ fill: "#FFFFFF" });

To apply the mask to the elements in the group, I added the mask attribute to the group:

group.attr{mask: circleMask);
High Five masking

Once the mask was defined and applied, I initialized the position and visibility of all the elements. In our high five animation, I loaded three elements that I animated, one after the next, at different intervals.

To initialize the position of the arms, I used a transformation string notation:

// Initialize position.
arm1.transform(
  "s0.6r-30t-100, 280"
);

Each letter is a command: 's' is for scale, 'r' is for rotate, and 't' is for translate.

With this notation I made arm1 40% smaller, rotated it -30 degrees, and placed it away from the mask so it is no longer visible.

I applied similar initializations to arm2 and arm3, but I hid them by setting the opacity attribute to 0:

// Set opacity to 0
arm2.attr{opacity0);


Connecting and animating elements

This is where things start to get interesting. Once I had all my assets in place and initialized, it was time to start animating and chaining transitions.

Snap.svg has a function called animate. This function receives the following attributes:

Element.animateattrs, duration, [easing], [callback);

Here is an example of the first animation triggered for the high five:

arm1.animate(
  {transform:'t-50,60'},
  400,
  mina.backout,
  function() {
    // callback code here
  }
);


By passing the transform attribute and new values as the first parameter for the function, I told Snap.svg to move arm1 from -100px to -50px in the X-axis and from 280px to 60px in the Y-axis.

The second attribute (400), is the total duration of the animation, in milliseconds.

The third attribute (mina.backout) is a timing function—just like mina.linear, mina.easein, mina.easeout, etc. The mina.backout timing function creates a “whip” effect makes the arm’s movement appear more natural.

The fourth attribute is the callback function that executes as soon as the animation is complete. This is very important because with callback you can chain animations together and maintain control of when you’re able to create concurrent new animations.

For example, in the transition between arm1 and arm2, I fade arm1 using the callback from the initial transformation. Once the fadeout is finished, arm1 is hidden (display:none) and the reveal animation for arm2 begins.

This all happens very quickly—the fadeout happens in 30 milliseconds, and the fadein in 10 milliseconds.

Here is the snippet of nested callbacks for what I just described:

 arm1.animate({
 transform:'t-50,60'},
  400,
  mina.backout,
  function(){
   //400ms
   arm1.animate(
    {opacity0},
    30,
    mina.linear,
    function(){
     // hide arm1
     arm1.attr(
      {display'none'
     );
     // Chain/Start
     //animation for arm2

     _highFiveanimate02);
     //fadein 10ms
   });
}100);

For a more detailed view of the code behind the High Five animation, you can check out the source code.

Source Code & Demo

Adding interactive behavior


In our next newsletter, we'll talk about the interactions built into our animations, including how we made Freddie’s arm sweat right before you press the send button for a campaign and how Freddie's hand reacts to high fives from our users. Until next time!

Prototyping Concepts with InVision


by Michaela Moore
For the past year, I’ve used InVision to streamline the early parts of a design project, and I brought it along with me in my designer’s toolkit when I joined the MailChimp UX team in April. InVision is a web app that allows designers to quickly turn design mockups into working prototypes, share them with others, and request feedback—without having to deal with any confusing back-and-forth conversations over email. With this tool, I can easily add clickable hot spots over buttons to link pages together and insert page transitions to create realistic, interactive prototypes.

In this article, I’d like to share some of InVision’s features that help me quickly pull together ideas, collect feedback about my work early in the creation process, and keep my projects moving forward.
 

InVision Sync


With InVision Sync, I can save flat images (.jpg, .gif, .png) and source files (.psd, .ai) to a local file on my desktop or to an integrated Dropbox folder, and automatically sync them with InVision’s web app. Syncing files between my desktop and the web app helps me consolidate everything to one location and saves the hassle of managing and uploading a file every time I make a change.

Once InVision syncs all of my assets to the web app, I build my prototype. If I need to tweak a design, I open the source file from the synced folder on my desktop in Photoshop or Illustrator, make the needed update, and save. The edited file is synced to the web app and any design changes are automatically updated within the prototype.

Even though InVision updates the prototype’s design files, any button or transition hot spot that I previously added remains intact. If I make a drastic change to a design that, for example, removes a button or moves it to another position on the page, I can easily delete, resize, or move the hot spot in InVision’s editor.

InVision Sync saves me from manually updating both my files and the prototype and lets me focus my attention on gathering feedback and improving my layouts.
InVision Sync eliminates the hassle of managing files between my desktop and the InVision web app.
 

Version Control


Version Control is a relatively new feature to InVision that maintains design iterations. Whenever I make an update to a design file in the synced folder, InVision copies the file being replaced and stores it in the app’s file history. I can scroll through all of my past iterations to review my progress and compare designs against each other. If I realize that one of my past designs is actually better than my more recent ones, I’m able to revert to that specific iteration, and download its source file.

Version Control removes two potential problems for me:
  1. It eliminates the need for me to save each version of a design on my computer.
  2. It prevents me from having to recreate an older iteration of a design if I didn’t save each past version.
This leaves me with more time to experiment and test out multiple solutions—without worrying about file management.
With Version Control, I can easily review all the iterations of my designs and revert back to an earlier version, if necessary. 
 

Mobile interactions: Gestures & Transitions


Current design software, such as Photoshop and Sketch, lack the ability to add movement and interactivity to design mockups. As a designer, understanding the relationship between interactions and design elements is an important part of building successful products. InVision’s mobile features allow me to make mobile designs interactive by injecting gestural actions—like tap, double tap, and swipe—along with page transitions. I can easily give people a general idea of how a finished product will function, from page to page. It beats having to demonstrate the same thing to a developer through an interesting display of hand gestures and verbal sound effects!
I can easily give people a general idea of how a finished product will function.
While InVisions’s gestures and transitions can demonstrate how a product might flow from page to page, it can't animate specific objects within a single layout. For example, with InVision I’m not able to show the subtle bounce of an icon as it’s being opened, or how illustrations scale as you scroll through a page. That level of detail calls for a prototyping tool like Webflow InteractionsFramer.js, or Pixate.
 

Team Collaboration & Commenting


Maintaining a prototype and its progression across teams can be difficult. Quality feedback can get buried in my inbox or lost in the history of an instant messenger thread. InVision’s collaboration and comment tools simplify this process. I can add people to a particular project, which lets them follow the lifecycle of the prototype and leave comments on specific areas. This makes following a prototype’s progress simple for me and my team.
Team members can easily leave comments on my designs, which eliminates the back and forth exchange over email. 
InVision also gives teams access to all the past versions of a prototype and its assets. If someone needs a specific file, they can download the most recent version or a previous version within the assets tab of the app. No more guessing which file is the correct version!
 

Sharing Prototypes for Testing


There are several ways to share prototypes with folks who aren’t subscribed to InVision. I can copy and paste a link to the prototype, send out an email invitation, or send a link via SMS. When I share a link to the prototype with someone who doesn’t have an InVision account, they’re still able to use the comment feature if they’re viewing the prototype in a desktop web browser. I can also download a .pdf of the project, which includes all of the prototype’s images and any corresponding comments—but that’s only offered with a paid account.

My favorite sharing method is actually SMS, which is particularly handy when I’m working on a mobile app prototype. When I’m ready to share, I can send out a link via text message, which opens the prototype directly on the phone. This lets me and my team test out mobile designs in their native environment (and it gives us a chance to use those cool mobile interactions I was talking about earlier). Unfortunately, InVision doesn’t let you add comments when you’re viewing a prototype on a mobile device.
I can share an InVision project several different ways—by copying and pasting a link, sending an invite via email, sending a link through SMS, or downloading the files as a PDF. 
 
The features I’ve listed here are just a few that I’ve found particularly useful. If you’re designing an app or website and need a simple prototyping application with built-in collaboration features, I think it’s worth your time to try out InVision. Like MailChimp, they have a free account!

Have a tool that you rely on while you’re working on a new project? We want to hear about it! Just hit reply. We love learning about what other folks do to simplify their process and keep projects moving.
 

UX Around The Web

Ask Us Anything

We want this newsletter to be a dialogue. If you have questions for the MailChimp UX team about our favorite brunch spots in Atlanta, what books we're currently reading, or what movies we're pumped about seeing this summer (Guardians of the Galaxy, y'all), send them in! Seriously: hit reply and ask us anything. We'll try to answer every email and maybe even share our conversation in future newsletters.
 


© 2001-2014 All Rights Reserved.
MailChimp® is a registered trademark of The Rocket Science Group


view in browser   unsubscribe   update subscription preferences   

Email Marketing Powered by Mailchimp