

Ask HN: Clickable Prototypes - tdonia

So what's the latest/greatest way of getting your ideas into a clickable prototype that can be used for basic user testing?  These seem to be the most prevalent:<p>Visio/Omnigraffle - you can export to a pdf or a selection of images &#38; hack out a click through from there.<p>Balsamiq with this: 
http://eclecticguy.com/2008/11/06/assembling-demos-from-balsamiq-mockups/
while waiting for this: 
http://getsatisfaction.com/balsamiq/topics/help_me_design_the_linking_mockups_feature<p>Axure RP:
http://www.axure.com/<p>I've used previous versions of Axure and while it was initially thrilling (hitting that sweet spot in between handcoding a click through &#38; having the project features of a Visio-type program) I found the undesirable tendency for the tool to influence the designs. I'll be testing the latest version &#38; if anyone is interesting i can let you know how that compares to the mix.<p>Adobe InDesign / Powerpoint - granted, this is the strangest method i know - but it can be rather effective used to build an (internally) linked document.  Too bad every other part of that experience is clunky.<p>Beyond those above, there's always the code it from scratch and/or use a WYSIWYG approach.  There's also paper and/or index cards - but for now I'm limiting the field to digital options.<p>My ideal tool of course gives me complete control to present the ideas quickly while not requiring me to get so far into their domain specific language that I lose perspective on the actual problem at hand.  This seems to be the biggest danger with the 'from scratch' approach as you can of course to all sorts of wonderful things in an html clickthrough that have nothing to do with the work at hand. At the other end of the spectrum, though, a pdf presentation is quite quick - but not very interactive &#38; subsequently not great for user testing.<p>Any secret (or not so secret) weapons out there?  Seems like this could be an interesting emerging market...
======
rman666
I blogged a bit about this:

* <http://www.clintonsecurity.com/2009/01/gui-mockup-tools.html>

* [http://www.clintonsecurity.com/2009/01/more-on-gui-developme...](http://www.clintonsecurity.com/2009/01/more-on-gui-development.html)

------
four
This is a perennial question amoungst UX/IxD/UI folks. I haven't used Axure
and confess to be suspicious of its hype. My secret weapon is still: paper. I
know you said digital, but in my experience all digital prototypes have the
inherent weakness of needing a nontrivial investment of time and brainpower
JUST TO MANIFEST the thing, to say nothing of making it well designed, or even
just coming-out-how-you pictured-it.

I never have this cost/risk with paper. And ALL development participants
(users, devs, designers, businessy types) can use pencil and paper
expressively.

Bottom line: keeps the focus on the design and the user task and not on the
clumsy medium. Helpful?

If you twisted my arm: I'd either say vanilla drupal instance with commmon
modules (views, etc.), rails stack with widget libraries or ...Powerpoint.

------
mixmax
I use good old fashioned HTML. It has several advantages:

\- You can easily change it, even when in front of a customer/user

\- You can get actual interaction. Flow and what happens when you click
different links, how pages are linked, etc. is an important part of an
interface.

\- You can use it as a starting point for coding

\- You can easily put it on the net so that customers/users can click through
it in their own time, not just when you're there.

------
BobbyH
Balsamiq Mockups (<http://www.balsamiq.com>) is an awesome way to make
mockups. They also recently introduced a way so one mockup can "link" to
another mockup (<http://www.balsamiq.com/blog/?p=1181>).

You can use this for usability testing on Macs or PCs (it uses Adobe AIR). I
bought the license for the desktop version ($79) after downloading it for
free. The license lets you load/save multiple mockups.

There's also a web version, although I haven't tried it.

------
mattknox
<shameless self promotion> I use goaloc ( <http://github.com/mattknox/goaloc>
) for rapid prototyping-it allows me to blow smart scaffolds out into rails
code, which I then style. Usually, this gives me about the level of
functionality I need for clickable prototypes. That said, I often prototype on
paper, too.

------
larrywright
I've been doing just standard HTML mockups, often with some sort of generic
stylesheet, so that I don't have to spend much time fiddling with CSS. The
things I mock up are typically applications for internal use, this wouldn't
work well for client work I would guess.

This works well for a generic stylesheet:
[http://www.mostinspired.com/blog/2009/01/28/rapid-
interactiv...](http://www.mostinspired.com/blog/2009/01/28/rapid-interactive-
prototyping/)

On the most recent application that I did mockups for, I ended up taking it a
step further and building a quick prototype in Rails that I populated with
dummy data. Our final development will be in Java, so this is throwaway code,
but it was useful for working out how some problems would be solved. I doubt
that I would do this for most things, but in this situation it was beneficial.

------
ieatpaste
Adobe Catalyst will be the next big thing in prototyping.

~~~
wallflower
Adobe Catalyst is promising in that it aims to allow designers working on
Illustrator/Photoshop templates to convert them into Adobe Flex UI screens
(mxml). It is "promising" because from what I've seen so far the MXML output
isn't very developer friendly.

The aim, of course, is for the designer to generate the exact look and feel
for the wireframes and render them (using Catalyst) to MXML for the Adobe
Flash/Flex developer to code in the behavior/functionality. Catalyst will
require Flex Builder 4 (which will not be out until 2nd half of 2009).

<http://labs.adobe.com/technologies/flashcatalyst/>

FXG (the interchange format spec - from Adobe CS to Flex):

[http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Spe...](http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Specification)

------
Barnabas
I just used Protoshare (<http://www.protoshare.com>) on a recent project, and
it's a very good web-based tool for making clickable prototypes. It has good
discussion features and there's an entire workflow for doing both wireframes
and design comps as you get further along in the project.

~~~
coopr
Is anyone else using Protoshare? From the brief demo I saw it looked super-
awesome, but I'm sure there are some "downsides" - any comments?

------
start_something
<http://www.iplotz.com> is a sweet hosted solution with some basic
collaboration tools as well. Works very well for us.

------
vollmond
You can knock out a basic interface in Flex pretty quickly, just hardcoding
the data (I've done fairly complex interfaces in a few hours this way).

------
mikecuesta
I've used Fireworks and it works like a charm. CS4 especially has some new
features that make prototyping a cinch.

------
xrportet
You can take a look to Justinmind Prototyper v2.5. it's a new tool to simulate
and prototype.

~~~
rman666
<http://www.justinmind.com/wireframe/how_it_works>

