Rapid Prototyping (was: Konfabulator)

15 Jun 2004 - 10:24am
10 years ago
8 replies
676 reads
Nathan Moody
2004

FWIW, I thought I'd share several techniques that my firm uses for=20
rapid prototyping.

1. Visio. Since all our IA schematics/wireframes originate in Visio,=20
it's fairly easy to assign objects HTML links and export your Visio=20
deck as HTML. This is a great way to also test your IA thinking on test=20=

audiences and conduct wireframe usability reviews. Adobe Illustrator=20
and Macromedia Freehand can do similar stuff, but the true multi-page=20
Visio environment is easier to manage.

2. Flash. This is really our prototyping weapon of choice. We've=20
prototyped everything traditional HTML websites (using flat comps) to=20
shrinkwrapped desktop applications using Flash (with advanced=20
scripting)...you may not be able to simulate everything, but it's fast,=20=

easy to code (ECMAscript-ish syntax), and XML handling makes it a whiz.=20=

What's more, the prototypes are Web-deployable, or can be published as=20=

self-running executables for MacOS or Windows, and there's even a Flash=20=

player for Linux.

3. Director. While Director is cool, the switch to ECMAscript syntax is=20=

a recent one, and so we've had a long separattion from Director once=20
Flash got more robust...Lingo as a language was a complete roach=20
(IMHO). ;-) That said, though, if you need to write files to the=20
filesystem and interact with the OS in app-like ways (printing,=20
saving), Director is excellent. Its system of aftermarket Xtras=20
(extensions) makes a lot of crazy stuff possible. Making a Director=20
prototype Web-accessible requires the Shockwave plug in, and is a much=20=

more onerous process than with Flash.

HTH,
-Nathan

On Jun 14, 2004, at 9:16 PM, Benjamin Michie wrote:

> I see that no one has replied so i thought i might do the honours :)
>
> I graduate from university in a week so i can't really speak about=20
> industry practice but...
>
> It=92s my expectation that knowing a little about coding would be =
quite=20
> beneficial - although it stands to reason that being disciplined in=20
> both software engineering and interaction design would be better than=20=

> being disciplined in either one of those alone.
>
> At university we were shown how to use a program called Macromedia=20
> Director for the purpose of prototyping interfaces and IMO it's a very=20=

> useful skill. Director performs a similar function to konfabulator but=20=

> uses Macromedia's own scripting language called Lingo. I personally=20
> think Lingo is easier to grasp than javascript (used by konfabulator)=20=

> but that's pretty subjective.=

Comments

15 Jun 2004 - 10:27am
Chris Ryan
2004

On Jun 15, 2004, at 8:24 AM, Nathan Moody wrote:

> 2. Flash. This is really our prototyping weapon of choice. We've
> prototyped everything traditional HTML websites (using flat comps) to
> shrinkwrapped desktop applications using Flash (with advanced
> scripting)...you may not be able to simulate everything, but it's
> fast, easy to code (ECMAscript-ish syntax), and XML handling makes it
> a whiz. What's more, the prototypes are Web-deployable, or can be
> published as self-running executables for MacOS or Windows, and
> there's even a Flash player for Linux.

I don't know Flash but isn't it a little "high fidelity" for
prototyping purposes? I use PHP extensively; with about four of its
functions I can easily mockup up fairly complex Web interactions in
short order.

Chris

15 Jun 2004 - 10:39am
Michael Bartlett
2004

We don't build web sites, we build thick-client applications and have tried
many different prototyping approaches.

I've found the most cost effective to be Photoshop + PowerPoint, and its
basically an interactive paper prototype. What I do is build up the
screenshots in Photoshop - which we have to have anyway to show the
developers exactly what the interface should look like. I then bring them
into powerpoint and what I do is I draw rectangles on top of any "hotspot" -
which is generally a button or a tab or something. I then hyperlink the
rectangle to another slide that shows the next state.

So for example say I have

Slide 1: Main interface with a bunch of buttons.
Hyperlink shape over button 1 -> Slide 2
Hyperlink shape over button 2 -> Slide 3
Hyperlink shape over button 3 -> Slide 4

Slide 2: Say it's a dialog that pops up when clicking on the button
Hyperlink shape over OK/Cancel button -> Slide 1 (or could be another slide)

etc...

Note that the rectangles or shapes I draw over my buttons I will then set to
No Line, No Fill - so they are effectively transparant hotspots, much like
an image map. I used to do something similar in HTML, but found it took
longer as I'd have to manage all of my .html pages and rearrange my
hyperlinks if anything changes - whereas in PowerPoint if I insert a slide
between 2 and 3, it will reorder my hyperlink to slide 4 automatically for
me.

Additionally, sometimes I had onclick annotations/animations on top of the
screenshots to illustrate key points to the likes of product
marketing/management or even imporant points I wish to make or questions I
wish to ask when putting it in front of someone.

The other great thing about it is my Product Management team feel
comfortable taking PPT's out to clients to validate - and they are even
comfortable editing them. If I give them HTML, they constantly come back to
me with silly little changes that they can quite easily do themselves with
PPT.

(On a side note, I spoke about providing the developers with screenshots of
what we want. Even when I print the damn things out in colour and stick them
to their computers they call me over to show me what they've done and I'll
look at the screenshot, look at the application, stare into their eyes, and
just sort of shake my head and say "um, can you actually make it look like
the screenshot?" :) )

15 Jun 2004 - 10:43am
Nathan Moody
2004

On Jun 15, 2004, at 8:27 AM, Chris Ryan wrote:

> I don't know Flash but isn't it a little "high fidelity" for
> prototyping purposes? I use PHP extensively; with about four of its
> functions I can easily mockup up fairly complex Web interactions in
> short order.

That just depends on how efficiently you can use technology (X), what
tools you have at your disposal, and the context of the project and the
client.

For example, I only know a little PHP, so to me that to me seems
"hi-fi"! :-) PHP is a great technology, though, and I agree that you
get a lot of bang for the rapid-development buck.

Project/product context is important. HTML and PHP might be less suited
for, say, a game UI or a digitial video recorder (a la TiVo) UI, while
Flash or Director might not make sense for an all-HTML site. "The right
tool for the right job," and all that...

Client context is obviously also critical. Some of our clients are
happy with wireframe walkthrough (some want linear clickthroughs, some
want fully functioning nonlinear navigation), some require rich
interaction simulations, and some demand deep technical
proofs-of-concept...and, of course, every project schedule is different
and places different constraints on prototyping. Heck, we're even
prototyping in Java using Swing components on one current project.

Thanks for responding and expanding our view on what tools people use!

Best,
-Nathan

15 Jun 2004 - 10:44am
Nathan Moody
2004

On Jun 15, 2004, at 8:27 AM, Chris Ryan wrote:

> I don't know Flash but isn't it a little "high fidelity" for
> prototyping purposes? I use PHP extensively; with about four of its
> functions I can easily mockup up fairly complex Web interactions in
> short order.

That just depends on how efficiently you can use technology (X), what
tools you have at your disposal, and the context of the project and the
client.

For example, I only know a little PHP, so to me that to me seems
"hi-fi"! :-) PHP is a great technology, though, and I agree that you
get a lot of bang for the rapid-development buck.

Project/product context is important. HTML and PHP might be less suited
for, say, a game UI or a digitial video recorder (a la TiVo) UI, while
Flash or Director might not make sense for an all-HTML site. "The right
tool for the right job," and all that...

Client context is obviously also critical. Some of our clients are
happy with wireframe walkthrough (some want linear clickthroughs, some
want fully functioning nonlinear navigation), some require rich
interaction simulations, and some demand deep technical
proofs-of-concept...and, of course, every project schedule is different
and places different constraints on prototyping. Heck, we're even
prototyping in Java using Swing components on one current project.

Thanks for responding and expanding our view on what tools people use!

Best,
-Nathan

16 Jun 2004 - 1:51pm
vutpakdi
2003

>FWIW, I thought I'd share several techniques that my firm uses for
>rapid prototyping.

>1. Visio. Since all our IA schematics/wireframes originate in Visio,
>it's fairly easy to assign objects HTML links and export your Visio
>deck as HTML. This is a great way to also test your IA thinking on test
>audiences and conduct wireframe usability reviews. Adobe Illustrator
>and Macromedia Freehand can do similar stuff, but the true multi-page
>Visio environment is easier to manage.

I use Canvas from ACD Systems (formerly Deneba) to do the same thing except
I tend to export to PDF. In Canvas, HTML or in document hyperlinks are
easy to assign to any object. Canvas also supports multi-page documents
and also exports to HTML and PDF (along with a host of other formats).

Others here do the same sort of thing in PowerPoint (but with considerably
more effort). On the plus side for PowerPoint, everyone here has a copy
(corporate license), so anyone can view and modify the prototype. If
absolutely pushed, I'll do my wireframes in Canvas and then do the linking
in prototype (under duress).

Ron

=====
============================================================================
Ron Vutpakdi
vutpakdi at acm.org

16 Jun 2004 - 2:16pm
Dave Collins
2004

>FWIW, I thought I'd share several techniques that my firm uses for
>rapid prototyping.

>1. Visio. Since all our IA schematics/wireframes originate in Visio,
>it's fairly easy to assign objects HTML links and export your Visio
>deck as HTML. This is a great way to also test your IA thinking on test
>audiences and conduct wireframe usability reviews. Adobe Illustrator
>and Macromedia Freehand can do similar stuff, but the true multi-page
>Visio environment is easier to manage.

I've been experimenting with using Visio as a lo-fi prototyping tool for
our software. I am having trouble getting it to do what I want, and
could use some pointers.

Eg: I put a button on-screen and activate it to go to page 2. I've tried
Object Behaviours and I've tried Hyperlinks. Since Visio likes to float
every page uniquely on the background, linking from one page to another
causes undesired jumpiness. I tried viewing fullscreen, but the
hyperlinks don't preserve full-screenness (full-screnity?) from page to
page. Why is it so difficult to do what I thought would be a commonly
desirable task?

Offline help would be fine if this is too focussed and off-topic for the
board, just give the word.

Thanks.

16 Jun 2004 - 2:31pm
david gee
2004

>FWIW, I thought I'd share several techniques that my firm uses for
>rapid prototyping.

>1. Visio. Since all our IA schematics/wireframes originate in Visio,
>it's fairly easy to assign objects HTML links and export your Visio
>deck as HTML. This is a great way to also test your IA thinking on test

>audiences and conduct wireframe usability reviews. Adobe Illustrator
>and Macromedia Freehand can do similar stuff, but the true multi-page
>Visio environment is easier to manage.

I've been using XML/XSLT/CSS recently, but the project called for some
pretty complex interaction prototypes, with state being kept across
different pages. While the overhead in setting up the first round of
screens was a bit higher than doing it in Dreamweaver or Visio, it
enabled us to iterate through designs very quickly, without the "copy
and paste" overhead of having 50 different mockups with slight
variations in each. As I was keeping all the state info and dummy
content in the XML file, it was also very easy to switch it out with a
translated version to test the constraints of the design. As the visual
design was all implemented in CSS, it made it pretty simple to go from
very basic wireframe blocks to the final design.

David

16 Jun 2004 - 7:35pm
Jim Hoekema
2004

Dave Collins wrote:

> I've been experimenting with using Visio as a lo-fi prototyping tool for
> our software. I am having trouble getting it to do what I want, and
> could use some pointers.
>
> Eg: I put a button on-screen and activate it to go to page 2. I've tried
> Object Behaviours and I've tried Hyperlinks. Since Visio likes to float
> every page uniquely on the background, linking from one page to another
> causes undesired jumpiness. I tried viewing fullscreen, but the
> hyperlinks don't preserve full-screenness (full-screnity?) from page to
> page. Why is it so difficult to do what I thought would be a commonly
> desirable task?
>
> Offline help would be fine if this is too focussed and off-topic for the
> board, just give the word.
>

Keep it on the board! I'd like to know about using Visio interactively, too.

- Jim Hoekema
www.hoekema.com

Syndicate content Get the feed