Best prototype simulation tool

15 Jun 2005 - 9:27am
9 years ago
7 replies
915 reads
russwilson
2005

Apologies if this has been discussed before.

I'm interested in introducing "interactivity"
into my mockups/prototypes without having to
code (or at least with very little coding).

What tools/techniques do most people use to accomplish this?
I've heard mention of Flash, but have no experience
with it.

Currently, I create mockups in Visio or Illustrator,
paste them into Powerpoint, and then move through
slides to "simulate" some of the interactivity of
the design.

Thanks for your feedback,
Russ

Comments

15 Jun 2005 - 9:41am
Jeff Isom
2005

I've used "Axure RP 3" (www.axure.com) to do rapid prototyping. It is not a
perfect tool, but it does allow you to quickly create wireframes/mockups and
export them to a clickable HTML prototype without knowing how to code. They've
got a 30 day trial that you can download from their site.

Jeff

------------------------------------------------------------------------------
This message may contain confidential information, and is
intended only for the use of the individual(s) to whom it
is addressed.
------------------------------------------------------------------------------

15 Jun 2005 - 10:26am
Chad Jennings
2004

Russ -

For prototypes that only require a view, page, or single UI component
update (such as a pop-up menu) on each mouse click I have had great
success with HTML image maps as well as interactive PDF's. Acrobat
provides tools to draw invisible buttons and then link to other pages
or files. The biggest issue is it doesn't allow you to save and reuse
these buttons from page to page so for larger prototypes it becomes
time consuming. Adobe may have changed this in the latest version.

The other solution is to simply create JPEG or GIF stills of each
screen state within the prototype then use an HTML image map,
Dreamweaver works well enough, and link the prototype together. You
then must run the prototype from within a browser, but i have tested
desktop apps this way by going to full-screen view.

If you need to test more complex behaviors such as drag and drop or
use dynamic data then then you reach the limits of these middle-
ground techniques, but they are fast and cheap.

Cheers,
Chad

On Jun 15, 2005, at 8:27 AM, Wilson, Russell wrote:

[Please voluntarily trim replies to include only relevant quoted
material.]

Apologies if this has been discussed before.

I'm interested in introducing "interactivity"
into my mockups/prototypes without having to
code (or at least with very little coding).

What tools/techniques do most people use to accomplish this?
I've heard mention of Flash, but have no experience
with it.

Currently, I create mockups in Visio or Illustrator,
paste them into Powerpoint, and then move through
slides to "simulate" some of the interactivity of
the design.

Thanks for your feedback,
Russ
_______________________________________________
Welcome to the Interaction Design Group!
To post to this list ....... discuss at ixdg.org
(Un)Subscription Options ... http://discuss.ixdg.org/
Announcements List ......... http://subscribe-announce.ixdg.org/
Questions .................. lists at ixdg.org
Home ....................... http://ixdg.org/

15 Jun 2005 - 9:47am
Marcy Jacobs
2005

Hi Russ,

What I have done, that has worked pretty weel, is create gifs of all your screens from visio, put each in an html file and image map the links to "fake" the behavior. It will enable you, or a user, to click through a flow as if it were built.

the draw back, is the maintenance - everytime my wireframes change, I have to remember to re-gif them and put the new image in my html.

best,
Marcy

"Wilson, Russell" <Russell.Wilson at netqos.com> wrote:
[Please voluntarily trim replies to include only relevant quoted material.]

Apologies if this has been discussed before.

I'm interested in introducing "interactivity"
into my mockups/prototypes without having to
code (or at least with very little coding).

What tools/techniques do most people use to accomplish this?
I've heard mention of Flash, but have no experience
with it.

Currently, I create mockups in Visio or Illustrator,
paste them into Powerpoint, and then move through
slides to "simulate" some of the interactivity of
the design.

Thanks for your feedback,
Russ
_______________________________________________
Welcome to the Interaction Design Group!
To post to this list ....... discuss at ixdg.org
(Un)Subscription Options ... http://discuss.ixdg.org/
Announcements List ......... http://subscribe-announce.ixdg.org/
Questions .................. lists at ixdg.org
Home ....................... http://ixdg.org/

15 Jun 2005 - 1:00pm
Alexey Kopylov
2004

2005/6/15, Wilson, Russell <Russell.Wilson at netqos.com>:
> [Please voluntarily trim replies to include only relevant quoted material.]
>
> Apologies if this has been discussed before.
>
> I'm interested in introducing "interactivity"
> into my mockups/prototypes without having to
> code (or at least with very little coding).
>
Now we've used the Adobe InDesign to make interactive PDF prototypes.
Advantages:
1. Easy deployable.
2. Easy printable.
3, Look very good.
3. InDesign has power abilities to reuse interface elements, for
example cascade templates.
3. We can turn on and turn off special layers (with callouts) to
generate prototypes for various purposes..
Disadvantage: InDesign is bloatware – slow and unstable

Now I am inspecting Norpath Elemets Studio (http://norpath.com/) -- it
looks quite perspectively.

There are (by this time ) special prototype tools:
GUI Design Studio (http://www.carettasoftware.com/)
Axure RP Pro (http://www.axure.com/)

But this tools too weak yet.

Senior researcher, partner
UIDesign Group
http://uidesign.ru
+7 (910) 412 04 96

15 Jun 2005 - 4:09pm
George Olsen
2004

The key thing is to use the simplest method that will get the job done --
and that depends on what you're trying to show.

For relatively static stuff, linked images work well as discussed.

If the flows are relatively simple, I've used PowerPoint, since you can link
screens there with hidden buttons to trigger changes. The downside is
maintenance can be problematic if you're iterating. PowerPoint comes with a
decent set of drawing tools, although you have to hunt to find them.

In general though, I've found HTML mock-ups work well. Julie Stanford wrote
a great article for Boxes and Articles on using DreamWeaver to do this. The
plus side is that you can fake a decent amount of functional behavior --
albeit none of it tied into a real base-end -- such as pulldown menus,
tabbing between views, etc. And changes tend to be fairly easy, although if
you completely overhaul things, you may have to rebuild the screen. The down
side is that is does really help to know something about HTML and
occasionally you have do some debugging -- for example DW's show/hide layer
JavaScript (useful for updating screens ala Ajax) has been a bit buggy for
me.

The key thing is to develop for only a single targeted browser so you don't
waste time dealing with browser inconsistencies. Nor do you worry about
making something even remotely like production-grade code. For example, if
there's a part of the screen that the user won't interact with, then I may
just place part of a screenshot there. (The nice thing about this is that if
this piece changes, changing the one image will update itself in every HTML
file it's used in.) Likewise, I'll mostly use tables instead of CSS divs.
It's inelegant code, but often faster to build.

You may also want to keep the resolution low. OTOH, if you're revising an
existing site -- or especially software apps, which don't have a lot
"design" to them -- it may make sense to start with a screenshot of the
existing product that you convert into a HTML page.

For complex stuff, Flash may be your best bet -- although I've never needed
to use it myself. But Tivo uses it a lot because it better simulates how
their product works.

Finally, don't discount a stack of paper mock-ups. They're fast to generate
and easy to re-ordered as needed. While sometimes I'll sketch them, most of
the time these days I'll use a drawing program to rough out screens,
especially if there's a lot of repeated elements that can be copied and
pasted.

George
___________________________________________________
George Olsen Principal, Interaction by Design
650 329 1728 george at interactionbydesign.com

15 Jun 2005 - 11:59pm
Tadej Maligoj
2004

I'm interested in introducing "interactivity"
into my mockups/prototypes without having to
code (or at least with very little coding).
_____

Making html prototypes needs little coding. I use MS FrontPage as a
tool, though writing most html code by hand (but I needn't if I had
not been a code purist ... ;+)
I use tables for stable basic page structure and css for look and
feel. I change it often during the development process, so changing
static gifs would be too slow.

I am not a programmer, but was pulled by magic of css. So now I am
allowed to make and enhance prototypes hands on during the meeting
with a customer.

Good luck!

Tadej

--
_______________________________
Tadej Maligoj, Information Architect
e1: tadej.maligoj at gmail.com
e2: studio at maligoj.com
m: 031 306 986
w: www.maligoj.com

17 Jun 2005 - 12:38pm
Coryndon Luxmoore
2004

I also use HTML image maps but since I do most of my design work in
Fireworks we can skip the giffing step. I have a single folder for all
of the current screen comps which are in the fireworks native PNG which
are automatically updated in the prototype as soon as they are saved.

You can minimize the repetitive work of image maps by either using PHP
includes (or you favorite language). Alternatively, if you need flat
HTML, the old school search ad replace works well you just need to be
diligent about labeling the image map components. You can do some
simple styling and use layers to super impose dialogs etc to make it
even more sophisticated.

The client feedback has been very good overall, and the users are
fooled enough for basic flow and sequence testing.

--C
-----------------------------------
Coryndon Luxmoore
Interaction Designer
21 Sarah St #2
Providence, RI 02906

coryndon at luxmoore.com
W: (401) 709-2377
M: (401) 952-4867
AIM: cluxmoore
-----------------------------------

Syndicate content Get the feed