I did a search but didn't find anything that quite meets my needs. We are looking to test two variations of website navigation. One is basically a tree structure, while the other has only top-level links that take the user to an overview page with more information and related links. Note my entire team is on Macs (so Morae based tools are out)

We would like to build interactive prototypes and test to compare efficiency and accuracy with both approaches. I've looked at Optimal Workshop and in theory, both Treejack and Chalkmark would provide what we need, except that 1) Treejack only tests tree structures (we couldn't test our overview with links pages) and Chalkmark only tests a single image per task (doesn't allow interactivity to display different or additional information when the user clicks somewhere). However, the statistical output of these tools is exactly what we are looking for.

Will likely be creating the prototypes in Axure but could use something else, even just .pngs with hotspots for clicking.

Suggestions? My google searches don't seem to be finding the right fit.

  • 1
    you could always just use html if you have a programmer. – VoronoiPotato Jan 27 '14 at 20:01

HTML, CSS, and JavaScript will give you the best fidelity and control, but will take the most time. It's quite easy to host these kinds of prototypes on GitHub Pages, if you're okay sharing them publicly.

Pencil is a free/open source prototyping tool that might work but doesn't really feel "Mac-native" if that's a requirement for you.

Invision App is pretty slick, and is popular right now among designers.

Fireworks is slightly more "traditional", especially for folks familiar with Adobe products. It's pretty heavy-handed though.

Hype is another Mac application that might meet your needs.


You could try using Invision App for creating hotspots on pngs. I've heard people successfully use the Invision App prototype with usertesting.com for qualitative feedback through video/audio and for the recruiting. As for something similar with the statistical output of Optimal Workshop products, I haven't found that yet either.

  • InVision is very pretty and polished, but also extremely limited in terms of interaction design. I think it's great for 'fancy paper prototyping' to figure out flows and such, but I'd be wary of using it as an interaction design tool. – DA01 Mar 5 '14 at 18:08

The simplest testing tool that I know of is Keynote. Drop your pngs or jpgs into it, add hotspots, link up those hotspots to urls or other slides, and then send it around either as a presentation or PDF.

The only tricky thing about this process is that unless you are there to setup the testing environment, most people will probably interact with the prototype as a typical document by scrolling through it.


OK, you have a couple of things you want to do.

1st. Creating very simple prototypes: Use either Axure or Fireworks. You already know the deal in Axure, but in fireworks is super easy. Create pages (not layers) for each screen you want to test and then add slices for any interaction. You can link your slices to other pages in your document. Use this component for creating slices on top of your design This is very easy and fast.

Sitespect could be used to divide traffic for different versions.

Google Analitics, Tag each link you want to test independently.

Hope that works


interactive prototypes


That is the only way to test the true interaction.

The problem with tools like InVision, Axure, Flash, etc is that while they can be interactive, it tends to be interactions that are based on the tool, rather than the actual interactions that will be built.

The risk here is that you have to now be very careful as to what you are testing. Is the navigation not working because of poor IA? Or is it not working because the interactive elements are confusing the user? If the latter, is it the idea that's the issue, or is it the limitations of the tool?


I actually was looking to do the same as you in order to test our interactions before deploying stuff to the dev team and the tool we've found to be the most helpful is Indigo Studio from Infragistics. Really amazing app.

As you are creating your wireframes, you can add your interactions right there, show state changes or send them to different screens you've created, export all of your screens/states as png wireframes, a navigable pdf document, or even as a url to your servers OR the infragistics servers. It can be used to build desktop apps, websites, or even mobile apps for iPhone or Android. In fact, it even allows the transition movements you see within iOS 7 and Droid.

We use these for everything we build now and it really helps close the gap with how are products are going to work and all the little details.

Not the answer you're looking for? Browse other questions tagged or ask your own question.