Comments on Quick and Easy Flash Prototypes

Eddie Ortega — Thu, 26 Jun 2008 04:38:03 GMT

Great job Alexa. I’m fairly new to ActionScripts but you made it very easy to follow. Thank you so much. I was wondering if you could explain how you did the other steps where you select friends, schools, etc. I really like the drop down functionality. Any chance you could point me in the right direction to learn more on how you did that?

Thanks again for the great tutorial. I do hope to hear back from you.

Cheers,

Eddie

Carlos Zenteno — Wed, 25 Jun 2008 18:53:49 GMT

Nice article! but I find huge the need to learn how to program with Flash to do prototyping,
on top of that there is the need to purchase the software and of course keep it updated.
There is a nice little app called Oversite, which does a great job for prototyping, it does not
look as nice as a Flash one, but all the real needs of wireframing, link connections, link testing,
flow testing, etc. are present… it is, I think, a real secret treasure…

Carlos Zenteno — Wed, 25 Jun 2008 18:52:59 GMT

Ant Tanant — Wed, 11 Jun 2008 19:34:44 GMT

Great article, Alexa. At my previous job I used this method for the same purpose as well. I went this route because I a) lacked the knowledge to get it to work with real code, b) we didn’t have a full type prototyper, and c) it was much faster and didn’t require dev resources—granted I knew the basics of Flash so the transition was easier. At my current job we have a full time prototyper, but I still find this method great for quick studies that require the demonstration of interactions.

Alexa Andrzejewski — Mon, 09 Jun 2008 08:30:27 GMT

Hi Isaac!

HTML prototyping can definitely make sense, especially if you’re good enough at XHTML and close enough to the engineers (and final product) to write code that would actually be useful to them. Julie Stanford wrote a great article about HTML prototyping for those who are interested:

http://www.boxesandarrows.com/view/html_wireframes_and_pr…

But a lot of the work we do as interaction designers is not quite at that point (and many of us aren’t good enough coders for coding to be time well spent)—we just need a way to communicate an idea quickly and efficiently. Hiring a prototyper is an option, of course—but that introduces other communication challenges and requires time and resources that aren’t always available.

If we’re already creating wireframes, being able to hook up these graphics and make them feel interactive can be a much better use of time than trying to do front-end coding, especially early in concepting. As some of you mentioned, there are some more targeted prototyping tools than Flash on the horizon or already out for doing this. I know some of these tools even promise to generate code as you visually prototype… but I’ll be curious to see how that sort of code-generation fits into designers’ and developers’ real workflows.

Thanks for all the comments so far everyone!

Alexa

Isaac Csandl — Sun, 08 Jun 2008 23:48:07 GMT

Oh, and if you’re writing standards-complaint (X)HTML from get-go, you’re going to save a good bit of time when it comes to browser testing and accessibility too.

Isaac Csandl — Sun, 08 Jun 2008 23:45:46 GMT

I don’t get why you’d go to all this trouble to prototype in anything other than HTML+CSS (with the help of a good JavaScript library like Dojo or Scriptaculous). I guess if you know Flash and NOT JavaScript it might make sense because it’s a tool you know better. But otherwise, why not prototype and get a good chunk of the actual work done at the same time? If you prototype in the medium that the app is ultimately going to use, then you just have to integrate the real backend with your prototypes and refine things some more in the process and presto, you’ve eliminated tons of redundant/unnecessary work.

Martin Polley — Fri, 06 Jun 2008 16:27:57 GMT

@Jonathan: Thanks for mentioning Spket. I was not aware of it. Looks interesting.

As I see it, the upside of using OpenLaszlo (or Flash, or XHTML+CSS+jQuery, or whatever) is that it allows you to simulate things that you just can’t do in a static, annotated wireframe. And also that you can play around with the interactions and make sure you have covered all the possible flows and ensure they make sense (e.g., what happens if the user cancels here? does it make sense to disable this control when the user makes a selection in a different control? etc.).

The downsides are that (a) it is not visual in the way that Photoshop or Visio are, and (b) it takes quite a lot of time and effort to create a prototype this way.

So the way I see it, if you choose to go down this route (whether it’s Flash, Laszlo, XHTML+whatever), you need to know when it’s necessary and when you can get away with something static. That is, the level of complexity determines whether you go with static or whether you go with dynamic.

Am I on the right track here?

Jonathan Baker-Bates — Fri, 06 Jun 2008 15:03:00 GMT

Martin: I think a lot of the utility of OpenLaszlo for prototyping would stand or fall on the quality for the IDE you use to create the prototype. As far as I can tell, IDEs that support OpenLaszlo are rather few in number, and (eg Spket IDE) are aimed at developers building real apps rather than people like us who want to knock out concepts for demonstration purposes in short periods of time. That issue goes to the heart of what a prototyping tool is about. That said, it would be interesting to give OpenLazlo a try.

Martin Polley — Fri, 06 Jun 2008 14:00:45 GMT

I have often thought that OpenLaszlo would make an excellent alternative to Flash as a prototyping tool, without having to (a) shell out any cash or (b) having to learn ActionScript. In fact, I am in the process of playing around with it now.

But I have not seen any resources online that talk about using it for prototyping.

Has anyone here tried it or considered it? What were your experiences/conclusions?

Chris Korhonen — Fri, 06 Jun 2008 14:00:28 GMT

Nice tutorial – I think that in many cases a visual representation of a final design is much more useful than a set of functional specifications.

That said, I would advise caution when using this method, mainly clients – particularly where agencies tend to get carried away, in my experience, is with some of the additional presentation features which are possible in Flash. A cool pre-loader, swirly fade in-animation may be fantastic when it comes to impressing people when pitching a design, but really just sets everyone up to fail with unrealistic expections.

Be careful not to get carried away making something which is poor usability (but looks cool), or which is itself a pain to implement with vanilla HTML.

Jonathan Baker-Bates — Mon, 02 Jun 2008 22:55:53 GMT

This is an excellent article. Far too many resources on Flash are way over my head, but this is just what I’ve wanted to kick-start my Flash usage (until Thermo arrives of course, then we’ll all be using that I would expect).

Jamie Owen — Mon, 02 Jun 2008 22:56:10 GMT

Thanks for the tutorial, Alexa. I was impressed with how detailed it was, plus how you made sure to reiterate the value and context of it throughout. (Wait, that sounds like…design!)

What strikes me about these prototypes is their potential for generating a greater frequency of cross-cultural “a-ha!s” for both designers and users. Since the IXD’s role is to understand and then design for the different world of the users, the prototype is a good way to communicate the designers’ understanding (or identify a misunderstanding) of what the users need/expect. Particularly when the designers come from a demographic, nation, class, or language group which differs from the client. And profoundly when the user group may not yet fully understand the role or utility of the technology (e.g. when mobile tools were introduced to clinicians in hospital wards).

Conversely, designers have a chance to observe all the culturally-based subtleties of how the users interact with the technology. By observing the other-culture user experience, designers can identify trouble-spots that they never would have anticipated. Or they might find the test subjects use a feature in unanticipated but positive ways.

Yeah, I’ve just described the basic idea of usability testing, but I’m thinking here about the cultural dynamics. A deep understanding by both parties would not necessarily occur with lower fidelity prototypes because many cultural elements of the onscreen ecosystem (which impact interaction) are not present. The fact that a designer can make these robust prototypes quickly and change them efficiently means that cross-cultural epiphanies might occur more.

Ben Arent — Mon, 02 Jun 2008 22:56:12 GMT

Great collection of Stuff here. I have recently had to pick up AS3 as part of a Product design project. I found that flash is great for conveing the core concpet, even if it is all smokes and mirror. I also found that a good search of the forums means you can find code snippets for just about everything. Another advantage for myself was the abilty to use a range of sensors to create a new and novel concpet. You can see my concept at http://jive.benarent.co.uk and can see my code at http://www.benarent.co.uk/bog/design/how-to-create-a-magn…

Peter Hinchley — Mon, 02 Jun 2008 22:56:15 GMT

Excellent tutorial Alexa. Your instructions were easy to follow and you provided heaps of valuable background info. I can really see the benefits of this approach. Great work!