Prototyping tools: Axure (on Mac) VS Fireworks VS Flash Catalyst VS ???

20 Apr 2010 - 2:44am
4 years ago
22 replies
14287 reads
jnwllm
2010

Hi all,

For one of our clients I am asked to create a 'clickable demo' for usability testing. I've started this thread to ask you guys what tools you use/prefer/advice to create clickable demos (including arguments would do best). The project is about a recruitment section of a corporate site and will include pretty much dynamic content and some flash elements.

I have been experimenting with Axure and Flash Catalyst (Beta on Mac) before, but don't have a lot of experience. The experience I have with Axure is that it's easy to use, but it forces you to keep the mock ups really (and IMHO too) low fidelity for what I'm trying to make now. Flash Catalyst offers some great features as well, especially because I'm interested in designing web applications, widgets, etc. for the web. But it was quite slow and buggy as well (again, with the Beta-release).

Before/instead of trying (and purchasing) them all, which will be a very time consuming method, I'd like your advice:

What software do you use for prototyping, what are your experiences with it and why do you use your tool instead of another?

Any input is welcome, looking forward hearing from you!

Comments

20 Apr 2010 - 4:24am
Simon Thulbourn
2009

Like the majority of people who use this site (I'm assuming), I use OmniGraffle (http://www.omnigroup.com/products/OmniGraffle/); I also use some of the Konigi tools (wireframe stencils and the UX template) found at: http://konigi.com/tools/overview. 

OmniGraffle has the ability to export the wireframes as HTML, thus creating a clickable prototype. There is a limitation with the HTML export though, inside the app you can set it to hide and show layers on a slide, this functionality doesn't get exported with the HTML, so you're forced to create a new slide to simply hide a layer (unless I'm missing something).

I've also been hearing a lot of buzz about Mockingbird (http://gomockingbird.com/), which is a web-based wireframe app, which allows clients to test prototypes online.

20 Apr 2010 - 9:48am
jnwllm
2010

I'm an Omnigraffle user as well. And I love the software, but as you said, not the best for prototyping.

Mockingbird seems to be too limited (few interactions can be assigned to an object). And I've got the feeling that web apps are not stable enough to create prototypes of >10 (interactive) pages.

Thanks for the feedback though and perhaps others come up with good alternatives that might fit you as well.

20 Apr 2010 - 8:10pm
Diana Wynne
2008

I think if you export Omni files to PDF rather than HTML, you get the same clickable objects but only visible layers.

It's not a prototyping tool exactly, and I'd love the kinds of working multi-part controls we had way back in SuperCard days. But unlike many of the other tools mentioned in the discussion, OmniGraffle is a pleasure to use.

Diana

On Tue, Apr 20, 2010 at 12:23 PM, jnwllm wrote: > I'm an Omnigraffle user as well. And I love the software, but as you said, > not the best for prototyping. > > Mockingbird seems to be too limited (few interactions can be assigned to an > object). And I've got the feeling that web apps are not stable enough to > create prototypes of >10 (interactive) pages. > > Thanks for the feedback though and perhaps others come up with good > alternatives that might fit you as well. > >

20 Apr 2010 - 4:37am
Etienne
2010

Hi,

Have a look at Justinmind Prototyper on Mac. It´s cheaper than Axure, plus it has instant simulation (no need to export), exports to clean HTML/JS (so that you can integrate user testing tools), it simulates real data. The good thing is that you can create wireframes or hi-fi prototypes that are fully functional, dynamic (with data) & interactive (Jquery-like interactions) without coding.

http://www.justinmind.com

Regarding Fireworks, I´d say it´s a great tool, but not for prototypes (no good for interactions). Flash Catalyst was indeed quite buggy last time i used it. It´s good for events and interactions but limited if you want to create a prototype using real data.

20 Apr 2010 - 9:43am
jnwllm
2010

Thanks for the advice, I'll try it tomorrow to see how it's working.

The argument about Catalyst, that it doesn't real data, is not that relevant to me. I have to demonstrate and sell the concept, clients can understand that their own data will be shown there. Does anybody else have (good) experiences with Catalyst?

20 Apr 2010 - 7:40am
bmeunier
2007

For me, wireframing is giving specifications about the interactions layers by layers. Starting with a <strong>pen and paper</strong>, I can built my wireframes on any software used by my client. In general, <strong>Illustrator</strong> is the most flexible tool for low and hi-fi wireframes

20 Apr 2010 - 9:40am
jnwllm
2010

True, I'm using Omnigraffle myself. But that's software used for wireframing. Making an interactive/clickable demo or prototype is something else. As far as I know Illustrator doesn't feature such demands...or does it?

27 Aug 2010 - 2:05pm
tessa
2008

Illustrator is part of the Adobe Suite and thereby default is set up to dive into any level of prototyping (FIreworks for click models, Dreamweaver for hi fi protos, Flash/Flash Catalyst for anything in between. :)

On Tue, Apr 20, 2010 at 10:40 AM, jnwllm <me@jnwllm.nl> wrote:

True, I'm using Omnigraffle myself. But that's software used for wireframing. Making an interactive/clickable demo or prototype is something else. As far as I know Illustrator doesn't feature such demands...or does it?

27 Aug 2010 - 3:05pm
johnweiss
2010

Axure and Eight Shapes solid options too.

John (via IPhone)

20 Apr 2010 - 11:12am
umanka
2010

I have been using Axure for sometime now (hifi as well). Once you master dynamic panels, case and variables you can achieve really good level of fidelity. If you are looking for super hi fi protoype with arithmetic operations and all - you cannot achieve that. 

20 Apr 2010 - 1:52pm
Chris Griffith
2008

I've been using Flash Catalyst for quite a few projects and once you work past the Beta issues, it is quite powerful (The final release is right around the corner). Adobe just release a number of tutorials on their Adobe TV site (http://tv.adobe.com/watch/flash-catalyst-1-1-with-doug-winnie/) that might serve as a resource guide if you choose to develop with Catalyst. 

Picking a prototyping tool depends on a lot of factors. One thing I noticed that you did mention was if you were starting with high quality visual comps or just working with basic wireframes. Some tools are better suited to use visual comps than others. If it is just a throw away demo, almost any tools will work. Pick the one that you are most comfortable with. You also need to look at how complex could the demo grow to. You don't want to paint yourself into a corner. For general web site prototypes, I usual create the html (but for Firefox only), but if the application is richer (or a RIA), then I will use Catalyst or Flash. 

Hope this helps.

FYI: I'm speaking on Prototyping for Richer User Experiences at the Web 2.0 Expo (http://www.web2expo.com/webexsf2010/public/schedule/detail/14833)

20 Apr 2010 - 9:30pm
Jarod Tang
2007

Yup, pen/paper + Flash Catalyst rocks

On Wed, Apr 21, 2010 at 5:22 AM, Chris Griffith <cgriffit@qualcomm.com> wrote:

I've been using Flash Catalyst for quite a few projects and once you work past the Beta issues, it is quite powerful (The final release is right around the corner). Adobe just release a number of tutorials on their Adobe TV site (http://tv.adobe.com/watch/flash-catalyst-1-1-with-doug-winnie/ [1]) that might serve as a resource guide if you choose to develop with Catalyst. 

Picking a prototyping tool depends on a lot of factors. One thing I noticed that you did mention was if you were starting with high quality visual comps or just working with basic wireframes. Some tools are better suited to use visual comps than others. If it is just a throw away demo, almost any tools will work. Pick the one that you are most comfortable with. You also need to look at how complex could the demo grow to. You don't want to paint yourself into a corner. For general web site prototypes, I usual create the html (but for Firefox only), but if the application is richer (or a RIA), then I will use Catalyst or Flash. 

Hope this helps.

FYI: I'm speaking on Prototyping for Richer User Experiences at the Web 2.0 Expo (http://www.web2expo.com/webexsf2010/public/schedule/detail/14833 [2])

((
20 Apr 2010 - 8:12pm
yg15
2008

I've been using Catalyst and really like it.  I just finished designing a web portal with multiple (6) apps. I use it for quick low-fidelity prototypes by using the library elements, publish it and experiment with it and get programmer feedback and then use it again with psd/illustrator imported files for hi-fidelity prototypes.  We were working in Flex so it became the base since it generated all of the code required for the styling plus I could see which styles could be generated from code and which were to complex and had to be converted to pngs. Really helped me optimize my elements.  Its a great way to create simple air apps for the desktop as well.

 

20 Apr 2010 - 10:39pm
Haig Armen
2008

A few months back we had a Prototyping Show n Tell IxDA event here in Vancouver. I demo'd Catalyst and found it a pretty useful prototyping tool. For years I've been using Flash to prototype complicated interface transistions and interactions, so I found Catalyst's timeline very easy to dive into.

That said, I fell like Catalyst is like using Flash with one hand tied behind my back, perhaps being able to import Catalyst files into Flash would be helpful. I do believe that Catalyst is made for people to avoid any coding and it's definitely worth trying.

 

21 Apr 2010 - 1:38am
dom.latham
2010

We are doing some work with Silverlight now and I've been asked to look into Expression. Has any body got any opinions about how the Microsoft offering fits into this line-up.

29 Apr 2010 - 1:07pm
vcagwin
2007

Dom - I use Expression Blend for my Silverlight and WPF projects. I would highly recommend it if you are working with a team developing in Silverlight. The Sketchflow tool provided in Blend is great for fleshing out hi-fi prototypes with little effort. I will say the learning curve is high, but worth it in the end.

21 Apr 2010 - 1:39am
Graham Sear
2010

I use Fireworks for the entire path of: lo-fidelity wireframe, into clickable prototype and then assemble the images for the final hi-fi build there as well. In my opinion it's pretty much the only piece of software that allows me to do everything in one; although I'll admit it does lack the full clickable prototyping qualities of something like Axure or the wireframing of Omnigraffle - maybe CS5 will have more to offer?

I haven't tried Catalyst yet (so I can't comment), although as Fireworks will export as FXG it sounds like you can add the extra interactivity that Fireworks doesn't allow quite easily in Catalyst.

It might be worth looking at Fireworks (for wireframe/image assembly) to Catalyst (adding flashy bits) as an option as the interface across the Adobe suite is (give-or-take) very similar so the learning curve would be relatively small.

I'd be really interested to know if anyone else has software they can use for the entire skeletel/information design through to fully-fledged visual design?

21 Apr 2010 - 2:33am
jnwllm
2010

Thanks everybody for replying.

My summary of what's been written is:

  • everybody has it's own favorite tool(s)
  • what tools you're going to use (in what phase) depends on the work you're going to do (hi/lo fi)

 

Futurewise I'm really interested in Catalyst, because I'm making a lot of brand campaign websites and gadgets (where the experience is of bigger importance then i.e. a library database front end).

In this case the website has both an 'experience part' and a part where functionality and interaction is key; it's a recruitment website where visitors need to get a good feeling about the employer (brand) and eventually apply for a job online. Since the stable release of Flash Catalyst hasn't been released yet, I don't have any experience with Fireworks (and don't know about the learning curve) and I do have experience with Axure from a few years ago, I guess I'm going for Axure in this stage.

What would really help me as well is to get an idea of what your end deliverables are with prototypes. Anybody willing to share his/her prototypes in this discussion or via mail (me@jnwllm.nl)?

While we are at this subject, I'm thinking it would be really interesting to share IxD/UxD/IA deliverables, both 'paper' documents and interactive productions like we're talking about in this discussion. I know there are sites where libraries of components/widgets/... are being shared, like Graffletopia for Omnigraffle. But I don't know of a (secured) environment where end deliverables are being shared. Anybody knows of such a platform? Or are deliverables too valuable to simply share with others?

If a lot of people are willing to talk more about this subject, perhaps it's better to start a new discussion.

Thanks again for all of your experiences, knowledge and time!

21 Apr 2010 - 6:47pm
Queen Catherine
2009

But wait - there's more:

http://mortenjust.com/2010/04/19/a-wireframe-kit-for-google-drawings/

It's a beautiful thing.

29 Apr 2010 - 2:17pm
Chris Risdon
2010

I actually think Axure and Catalyst can coexist. I've found Axure is better for demoing task flow and multi-page experiences. It handle's the IA better. It can do pop-ups and is great for conditional interactions (i.e. "if/then" like for a wrong user name validation) but it does not handle the IxD has naturally (delays, fades, animations).

I found that Flash Catalyst became harder to simulate larger experiences with more cross-linking between "pages" or "states", in other words the IA broke down. (But I am not an expert, so maybe others have cracked this.) However, I have found it really useful for taking 'modules' from the page and prototyping more nuanced interactions (delayed rollovers, fade-ins and fade-outs, any animated transitions, etc.). 

For example, if it were an e-commerce experience, I'd use Axure. If it was demoing some 'in-page' interaction design for a new photo-editing web app I'd probably use Catalyst. Axure can do high-fidelity, but takes some slicing of assets. Whereas if you are creating high-fidelity from an Adobe program (PS or FW) then Catalyst brings in all the layers perfectly. As with most stuff it becomes context dependent - but I think that's how I'd classify their differences.

I have used both for a larger experience where we went through the flow in Axure, got it approved, then after designer created some high-fidelity UI, broke out 3-4 key modules to show more nuanced interactions. But usually a project needs just one or the other depending on its nature. If you have to pick between one - again, just personally - I'd pick Axure because I think you can prototype a wider range of project types on it, and it handles the IA better. And there are patterns for doing some of the more IxD oriented features (http://www.acleandesign.com/2008/09/axure-design-pattern-library-v2/), once you become an intermediate user.
My 2-cents.

- Chris

 

29 Apr 2010 - 3:46pm
dirtandrust
2008

You can also use Balsamiq Mockups to make a clickable demo. Any user can download a demo version of Balsamiq Mockups and view your content and click through them if you set them up right. They can even do full screen mode! Sweet as...

26 Aug 2010 - 9:53am
mimojito
2010

I've been using Catalyst since Beta 1 and I think it's probably one of the best prototyping tools in the industry today. I also use OmniGraffe as well as Balsamiq but I find that Catalyst is just as easy to use and understand.  I'd give it a two-thumbs up rating as far as ease of use.

Syndicate content Get the feed