Tools for animating the user experience

11 Mar 2009 - 10:03am
5 years ago
14 replies
1203 reads
David Birnbaum
2009

At work this week my boss mentioned that he thinks my designs would be
better communicated if I created short animations, rather than
exclusively draw storyboards as I do now. I need a tool that allows
me to take an idea and present it in a slideshow within a matter of
minutes or hours. I'm very comfortable with Illustrator, so
preferably the animation tool would have a similar interface and
allow wacom input.

Does anyone have a preferred tool for this kind of thing? Flash?
Silverlight? Something else?

David Birnbaum | User Interface Scientist
www.immersion.com

Comments

12 Mar 2009 - 3:20am
Anonymous

Hello.

Long time ago I used to do presentations with Macromedia Director
animating the pointer to show how the actions on a movie. Sometimes,
when talking about ATM with touch screens, we even changed the
pointer with a chrome-keyed hand. Later we did similar things with
Flash and recently we've tried to wireframe with Axure and RoboDemo
(now Adobe Captative).

Results were great and customers were very happy with the show, but
was not something to replace final wireframes because it was only a
visual show, not a strong conceptual document.

Bests,

Ferran Alvarez
http://www.zumaques.com

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=39886

12 Mar 2009 - 3:11am
guang Yang
2009

if you have illustrator experience, i think flash is the best chooce
for you, besides the similar interface and control, it is also the
most common tool for animation. if you wanna another option for
working on 3d-animation, then, it would be a software called cinema
4d,would be a good option!
Anyway, i bet u could definitily find bunch of chooces, good luck!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=39886

12 Mar 2009 - 3:41am
maastrix
2009

If you put your design in AxurePro or at least make it clickable, you
can just use a screen recorder.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=39886

12 Mar 2009 - 5:22am
Jarod Tang
2007

it's cool if the price is more acceptable and with mac version.

On Thu, Mar 12, 2009 at 9:41 AM, maastrix <armandmaas at gmail.com> wrote:

> If you put your design in AxurePro or at least make it clickable, you
> can just use a screen recorder.
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://www.ixda.org/discuss?post=39886
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

--
http://designforuse.blogspot.com/

12 Mar 2009 - 8:52am
Jen Randolph
2008

maastrix
"If you put your design in AxurePro or at least make it clickable,
you can just use a screen recorder."

Jarod Tang
"it's cool if the price is more acceptable and with mac version."

David, if you have a Mac and you want to go the screenshot route,
then I believe you can do screencapping with Snapz Pro:
http://www.ambrosiasw.com/utilities/snapzprox/

--
Jen Randolph, Interaction Designer
http://www.jenrandolph.com

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=39886

12 Mar 2009 - 9:51am
David Birnbaum
2009

Thanks to all of you for your insightful suggestions.

The screen capture idea is interesting for some situations, but my
designs often require much more than the GUI in order to be
communicated---people walking & carrying devices, different
environments/surroundings, gestures, etc.

I was leaning toward Flash, but I wanted to make sure there wasn't a
newer killer tool for animation.

Thanks again!

David Birnbaum
User Interface Scientist | Immersion Corporation
http://www.immersion.com

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=39886

17 Mar 2009 - 11:06am
Tom Coombs
2009

David,

If your prototype needs animation on the page (e.g. an animated
collapsible module), then you'll need a tool like flash, but if not,
you have much easier options.

Creating something genuinely navigable is easy enough (dreamweaver,
axure or even powerpoint), but even easier is creating something that
merely gives the impression of being navigated such as a series of
images that when you click on them they jump to the next one (you
could click anywhere, but you pretend of course to click the button,
link or whatever).

If the case of flash, you can either screen record, or build your
demo elements (voiceover, mouse etc) into the file.

In the case of the other options, screen record is needed. Snapzpro
will do it. Jing is another option worth looking at.

Finally, there's an option to integrate more than just the GUI,
which is somethign like Camtasia Recorder. This will do the screen
record, and include microphone track, and do picture in picture from
a webcam. It's intended for usability testing pointing the webcam
at the test participant, but you could point it at anything, so it
might help in your case.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=39886

17 Mar 2009 - 7:01pm
Dave Cortright
2005

Powerpoint is the easiest tool for showing simple transitional animations,
IMHO. Just import images of the components from your wireframes and use the
Custom Animation toolbar to show them on the appropriate click.

·Dave

17 Mar 2009 - 8:05pm
Jeffrey D. Gimzek
2007

Use something simple:

Keynote.

Make all the screens with your states - your "Storyboards", save them
out as images, drag them into Keynote and use the click feature to
trigger animations - simple cross-fades between images can give you
the click result.

You can even do simple 2D animation - say moving the cursor across
screen, (real) click, triggers the crossfade to the click result.

I have done similar walk throughs with flash before...

See:
<http://www.jdgimzek.com/skin_3/blvd.html> - First Thumbnail

for an example... it is made for an experienced presenter to walk
through... you have to know where to click, so read the directions on
the page first.

Anyway, that was done in flash, but with Keynote or even Powerpoint
(dread!) you can get your clicks and screens.

I am sure there are other super simple animation programs or
storyboarding programs to use - Flash is a big learning curve if you
are not used to it.

jd

On Mar 17, 2009, at 9:06 AM, Tom Coombs wrote:

> David,
>
> If your prototype needs animation on the page (e.g. an animated
> collapsible module), then you'll need a tool like flash, but if not,
> you have much easier options.
>
> Creating something genuinely navigable is easy enough (dreamweaver,
> axure or even powerpoint), but even easier is creating something that
> merely gives the impression of being navigated such as a series of
> images that when you click on them they jump to the next one (you
> could click anywhere, but you pretend of course to click the button,
> link or whatever).
>
> If the case of flash, you can either screen record, or build your
> demo elements (voiceover, mouse etc) into the file.
>
> In the case of the other options, screen record is needed. Snapzpro
> will do it. Jing is another option worth looking at.
>
> Finally, there's an option to integrate more than just the GUI,
> which is somethign like Camtasia Recorder. This will do the screen
> record, and include microphone track, and do picture in picture from
> a webcam. It's intended for usability testing pointing the webcam
> at the test participant, but you could point it at anything, so it
> might help in your case.
>

--

Jeff Gimzek | Senior User Experience Designer

jeff at springstudio.com | www.springstudio.com

17 Mar 2009 - 11:45pm
nuball
2009

If you are illustrator user Flash is the better for your york:)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=39886

19 Mar 2009 - 4:51am
Auke van Scheltinga
2009

I've always been kind of a workflow optimisation junkie. As for the usage of tools when producing a good design I came to the following personal requirements:

- I want my prototypes to be portable (small filesize, cross platform, cross device)
- I want to be able to make changes to my prototype while stakeholders / clients are watching and preview the result instantly. (the authoring environment needs to make visual sense, not just the actual compiled prototype)
- I want to use symbols that are instantiated all over my application and can all be changed by editing only one symbol and i want to be able to nest/group/structure them. (to manage my visual framework)
- be able to add annotations to certain parts of the interface
- I want the app to be my planning and management tool as well (set milestones / assign tasks etc..)
- Let the user see and use alternatives to certain parts of the interface at runtime
- I want creative freedom if i think a new widget comes to mind
- I want cretive freedom as it comes to using animation as a way of clearyfing interface behaviour
- I want to be able to use a simple database to preview certain application behaviour
- I want to be able to track usage statistics / voice recorded data / video from within my prototype and send that to a central server
- I want to have it all in one easy to manage file
- I want to be able to go from interaction design to visual design with ease while staying in the same file
- be able to use the adobe creative suite to creat the visual design.
- I want it to be version controlled

Call me spoiled but well, like i said i'm kind of junkie when it comes to workflow...

The tools that can't do this:
Powerpoint ( very portable)
visio
Axure (to focussed on conventional websites. No options for animating funky fresh ajax enabled websites. and PC only, sucks running in parallels)
Can iRise to this? Never had a chance to use this rather pricy applications for enterprise level businesses

the apps that come pretty close:
- Flash catalyst (beeing developed as we speak, but seems to "simple" for some of the more advanced requirements i stated earlier, love the creative suite integration though...)
- Visual studio 2008
- okay, Axure came close as well... i really like the fact that it let's you annotate and plan your project inside the application and that it exports specifications as word files based on templates.

Already i think you already guessed, I agree with nuball: the big winner here is FLASH CS4! :)

Just one thing that is bothering me is the fact that it's so damn slow on my brand new macbook pro for some reason. Maybe i'll downgrade back to CS3 to see if that's any better.

17 Mar 2009 - 11:41pm
nuball
2009

Flash is the best:)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=39886

19 Mar 2009 - 5:28pm
Auke van Scheltinga
2009

Ah my extra 2 gigs memory module was broken. It's working like a
charm now! :) Experimenting with the architecture of my flash file
right now. Thinking of using the main timeline as a place for
application entry points (like, new user, already registred user,
stranger, coming from iphone etc..). And then create movieclips based
on the user tasks you're designing for. Place every step needed to
accomplish a task on the timeline inside one container movie for that
specific task. This way i'll have a constant reminder with everybody
looking over my shoulder what we're builiding again. I can even
place little persona badges in my workspace! :) Just thinking out
loud...

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=39886

21 Mar 2009 - 5:28am
Peter Van Dijck
2008

I'm doing screencasts of wireframes these days.
http://poorbuthappy.com/ease/archives/2009/03/21/4499/screencasts-of-clickable-wireframes

I'll post an example soon.

Peter

On Thu, Mar 19, 2009 at 4:28 PM, Auke van Scheltinga <aukevs at gmail.com>wrote:

> Ah my extra 2 gigs memory module was broken. It's working like a
> charm now! :) Experimenting with the architecture of my flash file
> right now. Thinking of using the main timeline as a place for
> application entry points (like, new user, already registred user,
> stranger, coming from iphone etc..). And then create movieclips based
> on the user tasks you're designing for. Place every step needed to
> accomplish a task on the timeline inside one container movie for that
> specific task. This way i'll have a constant reminder with everybody
> looking over my shoulder what we're builiding again. I can even
> place little persona badges in my workspace! :) Just thinking out
> loud...
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://www.ixda.org/discuss?post=39886
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

--
me: http://petervandijck.com
blog: http://poorbuthappy.com/ease/
global UX consulting: http://290s.com
free travel guides: http://poorbuthappy.com
Belgium: (+32) 03/325 88 70
Skype id: peterkevandijck

Syndicate content Get the feed