How I Built Email Interaction Prototype with Google Form

download source file (work in progress, updated on 28/Dec/2014)
(currently only iPhone 5/5S compatible)


http://www.youtube.com/watch?v=NDWMU38TdUU

I have been using Form since Google acquired them. The video above is my 2nd prototype built with Form. And I’m writing my first Medium article to share the knowledge I learned while making it. But I’m just going to give a brief overview of how the patches consist of, in order to help you understand the source code. Even though my source code is still messy, I think you can get a sense of how powerful Form is. (It’s less complicated than it looks like. ☺)

Like my first prototype, I made this concept to improve emotional attachment to the product. I receive a number of emails everyday and compose at least one or two per day. But every time I write an email I feel like I’m talking to a machine rather than person. I felt there was something missing in the digital communication. When I write a letter, I carefully choose nicely designed letter paper and my expectation is at the highest peak when I put it in a postbox. But did I ever feel the same when sending emails? No. But should emails be always like that? I don’t think so. That's why I started to build this prototype.

At the same time, I was wondering if I could make something like material transition in Form. Masking patch or overflow-hidden effect is not supported at the moment (Christmas of 2014 ☹) but I believe that the team is working on it. So I came up with a makeshift solution that mimics masking effect.


I assume that you already know some basics of Form or patch-based prototyping tools. For introduction of Form, you can refer to @makeshowlearn’s article or learning centre. Otherwise, feel free to ask me.

I actually had an experience with Max/Msp which has similar approach to Form in terms of wiring patches but it emphasises the connection with physical sensors and audio visualisation. I made this prototype long ago with Max/Msp. Maybe I chose Form to be my first prototyping tool because I was already familiar with patch-based tool.

To be honest, I started with QC + Origami but there were too many patches to know for beginners. (But it might be better for experts.) So the next day I switched to Form which is more specialised in mobile interaction design. The thing I liked the most with Form was that the ability to directly interact on my phone. It feels totally different from testing on the screen with a mouse… It’s all about interaction.


Overview

Figure 1: Key Screens for Interaction

The Figure 1 shows the key screen shots. By making this, I can imagine how the final interaction would be. Since they are only static images I put some notes about interaction. (e.g. paper plane: rot(y) 180(ccw) -> x-)

Figure 2: Root View

This is the root view. Let’s quickly go through from 1 to 8 (layer numbers).

  1. Background: The colour view fills the whole screen with white. (Default background is black)
  2. Main Screen: It’s the main screen that will appear at the end of the interaction. (The interaction starts from reading an email.)
  3. Reply Button Transition: The reply button at the bottom right corner jumps up to the top when touched and magnified until it fills the upper screen. (so called material interaction)
  4. Send Button Transition: When send button is touched, it is magnified until it fills the whole screen. As clouds animation goes on, the center of the button moves (not visible to users) to the place where the cancel button will appear and then shrinks. At the same time, the little send icon is flipped into a paper plane and moves to the middle of the screen.
  5. Sending Animation (Clouds): Touch of the send button triggers off-screen clouds to come down.
  6. Cancel/New Button: When send button is touched, cancel button appears. At the end of the animation, it turns into a red button with nice rotation transition.
  7. Resetter: It rewinds all interactions so that you can start from the beginning.
  8. Status Bar: on/off, and changes of brightness

Reply Button Transition (Masking Effect)

Let’s first see how I tricked masking effect in Form. In a typical(?) material transition, small ellipse blows within a rectangle until it fills the whole box (video, source code). I needed two layers for that (except for the background layer). One for blowing effect (Layer 2) and one for covering (Layer 3).

Figure 3: Reply Button Transition
Figure 4: Masking Effect in Form

The button (Layer 2) jumps up to the top left upon touch. Then it triggers the cover (Layer 3) to be enabled. And at the same time, the button starts to blow. It looks like blowing only on the top area because the cover is already enabled. That’s it. If you have better ideas, please share!


Transition Effect

One of the most frequently used patches in this prototype was Spring Transition patch (It’s a group of patches I made). If you see figure 4, there are two groups. They are spring transition patches. Inside, it looks like below (Figure 5). I used this patch ‘a lot’. It gets on/off or index signal and outputs a range value with a nice spring physics effect. You can adjust strength and damping(friction) values in Spring patch, and minimum and maximum values in Transition patch. You can see the tutorial here.

Figure 5: Spring Transition Patch

Send Button Transition

Upon touch, the send button increases in size until it fills the whole screen. Then it moves to the bottom (not visible to users) and then shrink down to a button. (Figure 6) That’s bascally what Send Button Transition patch (Layer 4 in Figure 2) does.

Figure 6: Send Button Transition
Figure 7: Paper Plane Transition
Figure 8: Flip Action of Paper Plane

The send icon is flipped and turns into a paper plane (Figure 7). Then it’s going up while clouds start to pass by.


Resetter

As you know iteration is one of the most important aspects of design process. So rather than re-connecting the device to reset every time, I created a Resetter patch to quickly iterate. (Is there a better way?)

Figure 9: Resetter Patch

When sending animation is almost done, it pings to Resetter patch (Enable Toggle Patch in Figure 9). Resetter patch consists of a View patch with Touch Interaction that covers the entire screen so that you can touch anywhere at the end of animation to reset.

Figure 10: Rest Setup in Other Patches

To apply resetter in other patches, I added a Multiplexer patch (I think it’s one of the most important patches to know.). It receives true signal when the screen is touched (pressed) which means it goes to Source 1. And it switched back to Source 0 when released. Otherwise Source 0 is always passed onto other patches.


Small Thoughts

I think Form is a great tool to show your creativity to the world. Form will help you quickly explore and experiment your ideas. I haven’t used Framer or Pixate yet, but I think Form is a good starting point as a designer. No coding knowledge required while embracing the ease of “well, let’s try to wire this”.

I learned like that. There weren’t many tutorials so I had to explore each patch giving a try to connect here and there. I mean it’s that easy that you can try and make something without tutorial (of course better with tutorials though). If Form community grows larger, there will be many user-made patches available. It means you can just copy and paste others’ patches to your project which will give you the same result. Or you can make them better and then share again.

There’s still room for improvements. In this project, I couldn’t fully apply material design principles. It lacks some basic design effect like shadow or real-time value adjustment for filters. I also experienced some trivial issues that impair work flows.

But overall, I think it’s a good place to start for non-coders. It’s relatively easy, flexible, and fully interactive. Get one and join in FB community! (I also made Korean community ☺)

Thanks!

If you have something that you want me to explain more in detail or have some feedbacks, please!

Please get in touch with me on
Twitter
Dribbble
Portfolio
Facebook
Email