During our last Stammtisch I came up with an example of a transition I sketched for one of the projects I’m involved in right now (it’s a web application). The transition consists of a list of items that folds up slowly when a certain link on the page is clicked. You can see a demo of this effect on the Scriptaculous Wiki.
I had two questions regarding that transition. First I wanted to know if it was wise to use a transition at all (there are other ways to solve my problem). I don’t want to go further into this right here because I got the response that yes, the transition would serve a good purpose in my design.
But instead I want to continue to discuss my second question: What is the best way to demo these kinds of animations (or: all kinds of animations). I came up with several possible techniques, but none of them is without flaws …
Here’s my list:
- HTML & JavaScript – goodness by Scriptaculous: Frameworks like Scriptaculous make it possible to demo transitions very quickly, even for me … But of course there’s (HTML & CSS & JavaScript-) code involved, and therefore the danger of getting lost in code (meaning: tweaking around until everything is perfect). This is of course something we do not want ….
- Keynote: Tom Haberfellner came up with some wonderful animations done in Apple’s Keynote. I tried it for myself afterwards, and it’s a really great tool to create animations easily.
- Then of course there’s Adobe Flash, Adobe Director and all kinds of other mighty tools. Didn’t want to look into these because there’s quite some learning involved and I want to keep it as quick and dirty as possible.
I want to add one further aspect that got lost during our discussion. The reason for me to use HTML & JavaScript is that this is the technique the project is going to be built with. Maybe you should know about the scenario I was presenting my transition sketch in: One project manager, several people with limited or no HTML experience, and the one guy that is going to write the code.
My point: If I use Keynote (or Powerpoint, doesn’t make any difference), then that developer would come up with something like “oh, but that’s Powerpoint, one can’t do these fancy animations on a webpage”. The other people wouldn’t be able to verify this and my animation would be dead.
If, on the other hand, I use HTML & JavaScript, he can’t make that point because my demo’s already running inside a browser… And if the user experience guy can do these “magical” animations, then it can’t be such a big problem for the real coders, can it?
What do you think?
ok, i got the thing with the different techniques to demonstrate that animation. but what is the acutal question you wanna discuss about? if the customer says that powerpoint/keynote animations are “too fancy” to do it on a website and html, javascript demo is right. then… do it in html, javascript… or is the fact the time which get lost doing it.
you can give them a demo on a website with javacript… like “it is possible and NOT difficult to program it” … and give them your quick n’ dirty suggestion with keynote/ppt. show them the techniques are used in web but give them an easy demo of the “content” – it’s all about the content at the end.
If your coder isn’t able to program such simple effects (whatever it’s on paper, power point or HTML) then maybe he is the wrong guy for HTML programming 😉 (In that case do it yourself with HTML.)
Honestly, I would prefer a tool where I can create a lot of different animations very fast, and try to get feedback as soon as possible. Then I would present the best one (with the tool you prefer) and ask the developer and the team about their opinion.
My 2 cents
Sonja, yes, it’s about the time I loose when I do it in HTML/JavaScript. Tom’s suggestion was to “do it in Keynote, don’t mess around with code…” (correct me if I’m wrong).
But I think there might certain advantages when doing it HTML. I don’t have to go into the discussion “is it possible or not”. On the other hand, JavaScript and HTML also slows me down and limits me. If I do it in Keynote, I’m quicker and have more possibilities. So another question might also be like “is it good to know the technical constraints?”. I think YES, you should know at least a little bit about the constraints.
Erhard: He’s not exactly a frontend developer…. I can’t do it and I don’t see it as my task to implement anything (they wouldn’t let me anyway).
But it’s an interesting topic, as right now I’m alos reading the chapter on animation in Bill Buxton’s Sketching User Experiences book.
There’s also an interesting vid I found last week: Interactve Prototyping with DHTML (http://videos.visitmix.com/MIX09/C14F). It’s really good, but it’s more on the technical side (css frameworks and so on), and I don’t know if it would make sense to me to do it like this …