DIY: exploratorium AFTER DARK - heartworks

I've been hot on the trail of finding new communities and places to start getting my DIY chops back into my life for the past few months. I was looking at the talented Erik Johnson's (@LEDsuit and artfuture vid) list of places he had shown his amazing wearable interlinked LED technology and saw Exploratorium: After Dark.

Clicking through I was delighted to see that one of my favorite places year's ago - The Exploratorium has found the perfect connection with grown-ups via their themed After Dark series. The February theme was Heartworks and had as its mascots a little figure of a rat tied to a rubber duckie, balanced on a tinker toy extension - obviously a part of some mysterious machine. Nice!

Intrigued to be let loose in the Exploratorium at night and enjoy the exhibits, I didn't hit the Buy Tickets button until the moment I saw the Tinkering Studio and their project - to create a perpetual motion Love Machines Chain Reaction. You mean I get to BUILD something? I'm in.

It was great to get a chance to wander through some of my old favorites upstairs in the sound exhibits and movement exhibits downstairs before my friend arrived. 

Once Alexa arrived, we stocked up at the bar and cafe (nachos were awesome) and then had some fun in the color and light exhibits until we were to report for the 2nd building period at 7:30 pm. 

One of the most fun exhibits was the interactive video wall. Here's the video that Alexa shot of me moving in front of it. And you can see a more abstract video that I shot while I was moving in front of the wall.

TINKERING STUDIO
We later learned that it would have been a better idea to check in as soon as we got there if we were really intent on doing a lot of building. When we got there the only table left was the very last one - with a duck and a rat. I saw a really thick rope on the goodies table and Alexa found a boot, a ladel and some tall wood. Because we started so late, we ended up simply creating a pendulum that would swing to hit the final two pieces of wood.

I was really stressing out on the last issue of getting the duck to sit on the piece of wood, when Alexa recognized one of the Tinkering Studio volunteers - none other than our old friend Michael Brown (Blue Rain and Playaflies) came to the rescue. It was so much fun to get it working even though it ended up sticking when it's turn came. We did too good a job holding up the duck! Ah well, the magic finger helped it through and on we went to the finale.

Enjoy the video of the entire run of the love machine complements of The Tinkering Studio!

Love Machines at After Dark: Heartworks from The Tinkering Studio on Vimeo.

All in all - it was an amazing evening of play. Thanks Exploratorium: AFTER DARK crew. You did a wonderful job. I certainly will be grateful when it's easier to get over to you via public transit in 2013!

Touch UI: Gestural and mobile prototyping

Continuing on from interaction storyboards and animations, we now separate out a specialized form of protyping where we get the benefit of expressing our ideas for touch-based UI gestures that anyone can immediately grasp and engineer.

A lot of mobile development these days is about being able to iterate on your "here-and-now" product features but it's just as critical to be able to provide blue sky visioning of potential new directions for your product. I've been finding more and more reasons to activate my little tradition of doing animated gestural prototypes - particularly when we're going after money in some of the startups I've been involved in.

Where I might work over lowfi storyboards in some systems, mobile iOS projects in particular tend to move into high fidelity mockups quickly because of the amazing templates that people have provided to speed up our process (i.e. Photoshop, Illustrator, OmniGraffle). I rarely have to animate out ahead for iOS day-to-day feature sets as I've been lucky to work some amazing developers who could prototype directly. But for more risky development tasks such as highly customized components - working in animated form saves at least a few trips down blind alleys.

Below, I played with an alternate scenario for activating the undo action in a text field by drawing a "Z" gesture as a play on Command-Z - the undo command in a desktop environment. I did create a specialized undo gesture for an app that never went live that allowed the person to swipe their finger left for undo and right for redo. I think we should stay creative with non-iOS level system gestures while respecting user familiarity as new gestures catch on. NOTE: this was only created to show an example of this type of prototype with a fairly complex interaction rather than an actual suggestion that I hope will be implemented. After all - think of all those users who will have never related to a desktop computer in a few years :D.

Gestural Templates

I tend to customize and create my own visual language on the fly and thus use a wide variety of styles for these gestural prototypes. But there are some lovely people who provide pre-made templates and content that make the creation of this types of documentation a snap. All you have to do is lay them out so they relate correctly to your interface in your program of choice (i.e. Illustrator, OmniGraffle, Fireworks, Photoshop) and animate them (i.e. Flash, Keynote, Fireworks, After Effects) for a quick check-in on the exact gestures you want to adopt for your project.

Luke W's site: Touch Gesture Reference 
A comprehensive document that covers a wide variety of touch interface environments. The page has a few different document types as well so it's easy to incorporate into your own interaction storyboards and animations. 

Open Source Multitouch Gesture Library from gestureWorks
I've known this crew since back when they were based in San Francisco and working on exhibits with the Exploratorium. Now they're doing some spectacular work in their open source community driven efforts in the multitouch field.

After Effects Touch Gesture Templates - I haven't tried any of these but they looked kind of interesting. If any of you try them, tell me how they do.

And an oldie but a goodie - Kicker Studio's touchscreen stencils

ux toolbox: interaction animations

As I mentioned in my previous post, if you set up your interaction storyboards correctly, it's a very short road from your static version to an animated one.

Typically my static work goes into some sort of an interaction script format that provides annotation and detail to the stories I'm trying to tell with those graphics. Then it's pretty simple to figure out what I need to animate. If I'm scenario planning, I tend to winnow down to one or two options before I move from static to animated content - saves time and makes decisions simpler with far less changeback as you prevent decision overwhelm. Good way to stay out of that lizard brain while keeping interest high in your feature stories.

My current workflow is using Illustrator to set up my wireframes, mockups and static interaction storyboards and then transferring into Flash or Fireworks to add animation. I may give Keynote a try one of these days as I see a lot of folks finding that an easy transition for presenting and design research. You can see @lukew's interesting write up about how that is becoming his favorite workflow. Personally, I'd miss creating my own graphics on the fly at the same time I'm animating.

Regardless of method, there's nothing like getting objects moving and increasing complexity in your data to shake out interaction questions and details.

Early and often
In touch-based design, prototyping early and often is critical. When your team is deep in coding it's helpful for someone on your team to be able to do quick animated prototypes to speed decision making with stakeholders and check-ins with users.

Using animation it takes far fewer annotations and arrows to communicate most gestures and interactions - particularly if they have complex outcomes. And, in products where it takes a long time to code and physically prototype your interactions, it can save months of programming iteration by allowing early testing of the gestures and actions that are critical to your user experience.

In a few projects I've even done away with complex static documentation - instead storing these animations in a directory for engineering to reference as they build. We even deconstructed a few of them to see how we might improve them when we got to the code environment. That's the first time I've gotten to pore over my animations on a code level in a long time and we all found it to be powerful way to collaborate. Being able to work over your algorithms via animation prototyping - priceless.

I remember a complex mobile project in which I ended up having to add a series of very elaborate video and audio inputs to simulate the complex functionality of the app. The behaviors we were testing were very new to users so it was critical to get into some detail so that the engineers and users understood the problem we were trying to solve - attracting attention for the most critical next action when interrupted mid-flow. A couple of quick design tests later - and the winning solution was immediately evident. Usually, to find this kind of data, you have to wait until you're far enough along to have some fairly complex features up and working. This saved us several weeks of Agile feature iterations. Yea!

Moving from static to animated

Below you can see 3 scenarios from the Nokia mobile product. We began with the static versions to quickly check viability with engineers, asking, "Is that possible" in our scenario planning workshops. Then when we had good directions (met our business goals and were technically feasible) we animated them quickly and threw them on the phone to see how they performed. If they provided good user and stakeholder feedback - the feature was added into an Agile cycle.

Open menu

Navigation carousel (scenario 1)

Close menu

ux toolbox: interaction storyboards

This year I’ve started to show you some of the custom process that I’ve developed. So far we've talked about state of the product reviews, interaction outlines and flowframes (combined wireframes and interaction flows). I’m working on some other posts to fill in more detail on some of the interaction and communication strategies I use with stakeholders and developers but I couldn’t resist showing you some of the items that can be quickly generated throughout your interaction design workflow in design research, scenario planning, team buy in and even blue sky strategizing.

NON-LINEAR DESIGN THINKING
Before I drop you into interaction storyboarding, let’s take a little trip through some of the why and how I developed these offerings.

In the early 90’s I began teaching and working in multimedia. Teaching has always been the fastest and most efficient way to help me learn and organize information. It forces me to create focus, order and simplicity - to make up a structure - and then to find effective ways to communicate that to people that only “hear” information in certain ways. That in turn has been helpful for working in real world situations where a typical day has me collaborating with corporate stakeholders, engineering, user research and marketing - each with a need to quickly understand how the design works. And for me, the more ways I can look at, process and explore data the more nimble I become at coding in and designing for that system. 

One of my early issues in teaching Director and then Flash was how to shift learners from linear thinking to interactive thinking. When we teach static graphic design, we’re looking at layout, clumping, white space, color - all issues we need to retain for interaction design but not our sole focus. Even when we move into 4D environments (over time) such as learning video or audio editing, we’re thinking and teaching ourselves how to create linear streams. When moving into creating software UI and/or interactive systems of any type, we need to acquire the ability to understand what static elements we need (2D or visual design), what architecture we need to support data and content flow (3D or information architecture) and how to create the behaviors that will make sense to the user so they can accomplish a task (4D or interaction design).

For 2D we have things like wireframes, storyboards and mockups that communicate and allow us to iterate the visual design. In designing the architecture we have things such as site maps, database diagramming and even code frameworks. In 4D we have scripts, flowcharts, outlines, animations and prototypes.

As I taught designers to code and coders to design it became clear that there had be better ways to communicate across those traditional divides. So I tinkered with some of my traditional documentation and came up with a way to communicate coding, layout and interaction behaviors visually, in a single document that I call an interaction storyboard.

SYMBOL KEYS
Each interaction storyboard has a unique key that contains the symbolic language for the system that you’re working in. Early in my web career I began to use X as shorthand for behaviors that happened on click of a link and XX for double-click. It certainly sped up my teaching. Now they work just beautifully for tap and double-tap. As I moved through different systems the language can shift right along with the actions and behaviors that are unique to the system. 

The first example is from a sketchbook in my web/Flash days. Notice the specifics to those systems. The second is for a Nokia touch-based mobile product. It's most useful for showing touch gestures such as tapping, holding, scrolling and flicking the page.

 

TELLING INTERACTION STORIES
Next is an example of a type of interaction storyboard that I used for my Flash classes called a Go To Structure that allows you to create a simple, divided timeline that the user can press buttons to access. If you spend some time with the interaction storyboard (I used it as a teaching tool) you can see the timeline at the top with indications of labels and actions that create each “virtual” section on the timeline. Then down on the “stage” you can see 3 buttons with indications of what happens on rollover and on selection of each. In this case, when you select button one it tells the playback head to jump to a frame label called “anim1” and start playing. Up on the timeline you can see the label “anim1” and the action at the end of that section that tells the playback head to stop or loop that section.

Can you see it now? Cool, huh? You just read a full interaction ”story“ that explains how to create a non-linear experience on a linear timeline. This is a pretty powerful way to teach yourself to think, see and communicate ”interactions“ to others.

TOUCH-BASED INTERACTIONS
I've transitioned that original language over the years to the new areas I'm designing in. Currently I find it a powerful way to communicate in touch-based systems on mobile platforms such as iOS, Nokia, Android and Windows Mobile. I’ve dropped the coding details and focus on communicating the basic flow through individual actions or agile style feature stories broken down into their component parts.

Let's look at the tap and hold symbols we saw in the key above working in storyboards for a Nokia mobile product. I used these enhanced wireframes as a part of a scenario planning cycle with the product and engineering teams. We decided on feature sets, layouts and technical details, as this was the shift of the product from key interactions to touchscreen devices. It became great shorthand for communicating the new new interaction language for both stakeholders and engineers.

CLARITY IN COMPLEX FLOWS
In this final example we moved from high fidelity mockups in an interaction storyboard format directly into an iOS prototype. Normally, I wouldn’t need to go into this much detail in my mockups and interaction storyboards for iOS design but the team was working remotely and this cleared any confusion on what we wanted to achieve. Then the discussion could move immediately into the details and the best ways to code and create infrastructure to support the feature story.

 

In my next post I'll show you how easy it is to move immediately into the more powerful use of this type of symbolic language by animating and prototyping touch-based gestures and activities.