Ask HN: Clickable Prototypes | Hacker News Reader

Ask HN: Clickable Prototypes

15 pointstdonia15 comments

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:

Visio/Omnigraffle - you can export to a pdf or a selection of images & hack out a click through from there.

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

Axure RP: http://www.axure.com/

I've used previous versions of Axure and while it was initially thrilling (hitting that sweet spot in between handcoding a click through & 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 & if anyone is interesting i can let you know how that compares to the mix.

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.

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.

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 & subsequently not great for user testing.

Any secret (or not so secret) weapons out there? Seems like this could be an interesting emerging market...

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...

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.

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.

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.

<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.

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...

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.

Adobe Catalyst will be the next big thing in prototyping.

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...

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.

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?

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

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).

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

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

http://www.justinmind.com/wireframe/how_it_works

Reply on news.ycombinator.com