Neat Effects, No Code Required

Introducing Avocado: A new toolbox for interaction designers

May 27, 2014
Reading Time
4 minutes

Bounce, swivel, spin. Today’s interface design is all about making things move. But the tools we use to create those interactions haven’t kept pace with our smart, intuitive enough for a 3-year-old child devices.

As an interaction designer with a software engineering background, I usually bring ideas to life through coding.

For those who don’t code, there are tools that offer a less technical approach, such as Quartz Composer (a nearly decade old visual programming language) and Origami (a new tool built by Facebook that streamlines Quartz Composer).

The effort to make interaction design accessible to a broader set of people is a worthy cause, and crucial to the fast-paced live prototyping process at IDEO. That set me on a path to explore a new set of prototyping tools—ones that work for designers who don’t code.

Taken together, Quartz Composer and Origami offer a set of basic interface building blocks called patches. It’s an inspired start, and I saw ways to build upon those tools and conceal some of their complexity. Enter Avocado.

I started by creating a set of reusable patches that address common interaction patterns that are arduous to build from scratch.

Want to try it out?

i. Register as an Apple Developer
ii. Download and install Quartz Composer
iii. Download and install Avocado

The Avocado Patches

Once you’re up and running, you might start with building a Carousel.

Building a carousel that can handle a variable number of images can be a time suck. Using the Carousel patch, it’s only a matter of seconds before you can interact with a working prototype.

There are four basic animations included in Avocado 1.0 beta: Jump, Nod, Jiggle, and Pulsate.

Quartz Composer is really powerful for fine-tuning animations, but the effort required to recreate the ones you use every day—a jiggling app icon, say—is off-putting. Even making something spin requires a working knowledge of pre-calculus—remember sine and cosine? Avocado abstracts some of that mathematical complexity and presents a set of easy controls that speak a universal language.

The Keyboard

Though the keyboard is a staple of interaction design, I couldn’t find anyone who’d built an iOS replica. I now understand why.

Keyboard-Development_1Does your brain hurt looking at this? Mine did, too. Building the iOS Keyboard patch kept me up all night, requiring me to jump back and forth between Quartz Composer and Xcode.

Here we show an example of how the iOS Keyboard patch can be used.

The Nut of It: So, what’s with the name Avocado? Quartz Composer, which sits at the core of Avocado, is a nearly decade-old application that was originally intended to build screensavers, not user interfaces. Turns out, Quartz Composer is a tough nut to crack for non-coders. We added a rich, buttery layer of ready-to-use patches on top.

Reaping the Fruit

Yes, we’re excited to use Avocado on IDEO projects. Here’s why:

1. Post-its and sharpies will always be useful prototyping tools for us, but Avocado allows us to bring sketches to life, taking our ideas from paper to digital in record time so that we might experience and build upon interactions in real time.

2. Interaction designers have a common shorthand that makes it easy to collaborate and design quickly. But not everyone is fluent in that jargon. Avocado acts as a visual lingua franca for multi-disciplinary teams (like the ones here at IDEO), making it easy to share interaction design ideas, bringing tangibility to concepts that are notoriously difficult to translate.

3. Avocado makes it easy to iterate during the qualitative user-research phase. For example, if we’re in the middle of an interview, gathering thoughts and feedback from someone on a screen-based prototype, we can quickly respond to feedback and change variables in the moment. It’s an amazing tool for instant iteration, allowing us to host more dynamic conversations.

4. Best of all, Avocado arms interaction designers with no coding skills beyond a basic understanding of Quartz Composer with the tools they need to start building compelling user experiences.

In the words of the great IDEO designer Bill Moggridge: “The only way to experience an experience is to experience it.”

Avocado gets us one step closer.

As an interaction designer at IDEO, Marco Triverio stands at the intersection of design and technology to help teams uncover latent behaviors, needs, and emotions and build solutions that add value to people’s lives. Follow Marco at @marcotriverio. Follow Avocado by IDEO at @avocadobyideo.