Prototyping Tool Recommendations

16 Nov 2009 - 5:58pm
4 years ago
18 replies
2347 reads
Chris Rink
2009

Hello, i have recently been given the task of identifying prototyping
tools to test high fidelity and high functionality. Our goal is to
have prototypes that will be high enough quality to work as design
specs.

I have looked at Axure and iRise but am unsure about their ability to
handle interactions like resizing and Drag n Drop.

Has anyone used found a tool that handles those dynamic aspects well?
Am I just better off using a javascript library?

Comments

17 Nov 2009 - 3:22am
Jarod Tang
2007

flash catalyst

On Mon, Nov 16, 2009 at 10:58 PM, Chris Rink <rink_chris at emc.com> wrote:

> Hello, i have recently been given the task of identifying prototyping
> tools to test high fidelity and high functionality. Our goal is to
> have prototypes that will be high enough quality to work as design
> specs.
>
> I have looked at Axure and iRise but am unsure about their ability to
> handle interactions like resizing and Drag n Drop.
>
> Has anyone used found a tool that handles those dynamic aspects well?
> Am I just better off using a javascript library?
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

--
@jarodtang
http://designforuse.blogspot.com/

17 Nov 2009 - 4:38am
ueno
2009

IxEdit
http://ixedit.com/

--
Manabu Ueno

On 2009/11/17, at 17:22, Jarod Tang wrote:

> flash catalyst
>
> On Mon, Nov 16, 2009 at 10:58 PM, Chris Rink <rink_chris at emc.com>
> wrote:
>
>> Hello, i have recently been given the task of identifying prototyping
>> tools to test high fidelity and high functionality. Our goal is to
>> have prototypes that will be high enough quality to work as design
>> specs.
>>
>> I have looked at Axure and iRise but am unsure about their ability to
>> handle interactions like resizing and Drag n Drop.
>>
>> Has anyone used found a tool that handles those dynamic aspects well?
>> Am I just better off using a javascript library?
>> ________________________________________________________________
>> Welcome to the Interaction Design Association (IxDA)!
>> To post to this list ....... discuss at ixda.org
>> Unsubscribe ................ http://www.ixda.org/unsubscribe
>> List Guidelines ............ http://www.ixda.org/guidelines
>> List Help .................. http://www.ixda.org/help
>>
>
>
>
> --
> @jarodtang
> http://designforuse.blogspot.com/
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

17 Nov 2009 - 6:18am
Andy Polaine
2008

I had a look at Pidoco the other day too: https://pidoco.com/en

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=47441

17 Nov 2009 - 9:17am
David Lambert
2009

I haven't used it myself, but Micrsoft's Expression Blend has some
nice features in its new release (if you're doing Silverlight work).

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=47441

17 Nov 2009 - 9:44am
zakiwarfel
2004

On Nov 16, 2009, at 2:58 PM, Chris Rink wrote:

> Hello, i have recently been given the task of identifying prototyping tools to test high fidelity and high functionality. Our goal is to have prototypes that will be high enough quality to work as design
> specs.

Actually, you can do high fidelity in PPT (MS used it to prototype much of Windows XP and the ribbon), Axure, Fireworks, HTML, Flash... there are a number of tools. I cover a few of them in my book, Prototyping: a practitioner's guide, which just went on sale this past week http://bit.ly/19Hiir if you use discount code PRPUBNOT you can get 15% off.

Cheers!

Todd Zaki Warfel
Principal Designer
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at zakiwarfel.com
Blog: zakiwarfel.com
Twitter: @zakiwarfel
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

17 Nov 2009 - 10:24am
pradeepnayar
2009

This is a question that can give you different answers depending on who you ask. Everyone has their preference.

I have used Balsamiq in the past and it has worked for some low fidelity wireframes pretty well. Besides, it's pretty inexpensive considering what it does. ($79, I think) They also have a pretty useful user-generated library (http://mockupstogo.net/)

I am currently using Firework and like it but only wished there were enough people using it to have communities like Graffletopia ( http://graffletopia.com/)

What's good about fireworks is that it can be used for both high & low fidelity wireframes. Using Adobe bridge, you can port what is done in fireworks to photoshop & indesign. Here are several links I sent to my team before we decided to give it a try:

Designing interactive products with Fireworks
http://www.adobe.com/devnet/fireworks/articles/cooper_prototyping.html
http://www.adobe.com/devnet/fireworks/articles/cooper_interactive_02.html

Designing a website with Fireworks (1 hr video)
http://tv.adobe.com/watch/max-2008-design/designing-a-website-in-firewor...

The complete design process (11 mins %u2013 MUST SEE)
http://tv.adobe.com/watch/fireworks-tips-and-tricks/the-complete-design-...

Industry trends in Prototyping by Cooper:
http://www.adobe.com/devnet/fireworks/articles/cooper_prototyping.html

There are way to embed javascript into fireworks but I haven't figured it out yet.

Keep Prototyping!

later,
Pradeep
www.twitter.com/designonmymind

17 Nov 2009 - 8:43am
mag
2009

http://www.justproto.com/en/
http://www.balsamiq.com/

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=47441

17 Nov 2009 - 10:37am
Brian Mila
2009

How are you going to put dynamic interactions into a design spec? For
us, we just include screenshots or wireframes, and then describe the
interaction in the text of the spec. Do you do something different?

> -----Original Message-----
> From: discuss-bounces at lists.interactiondesigners.com [mailto:discuss-
> bounces at lists.interactiondesigners.com] On Behalf Of Chris Rink
> Sent: Monday, November 16, 2009 8:58 AM
> To: discuss at ixda.org
> Subject: [IxDA Discuss] Prototyping Tool Recommendations
>
> Hello, i have recently been given the task of identifying prototyping
> tools to test high fidelity and high functionality. Our goal is to
> have prototypes that will be high enough quality to work as design
> specs.
>
> I have looked at Axure and iRise but am unsure about their ability to
> handle interactions like resizing and Drag n Drop.
>
> Has anyone used found a tool that handles those dynamic aspects well?
> Am I just better off using a javascript library?
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help

17 Nov 2009 - 11:05am
Charlie Kreitzberg
2008

Todd Zakai Warfel said < ...you can do high fidelity [prototypes] in PPT (MS
used it to prototype much of Windows XP and the ribbon)

I would be very interested in learning about techniques for creating
hi-fidelity prototypes in PowerPoint. I found the visual design tools in PPT
2007 really easy, powerful and convenient although somewhat limited. Great
for banners, buttons and making illustrations look good.

In terms of creating shapes and more complex structures, I have not be
nearly as successful in PowerPoint. I usually end up, reluctantly, in Visio
because it offers a lot more flexibility and precision. But its visual
design capabilities are primitive.

It would be great to learn about techniques that can make PowerPoint more
usable as a prototyping tool.

Charlie

============================
Charles B. Kreitzberg, Ph.D.
CEO, Cognetics Corporation
============================

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of Todd
Zaki Warfel
Sent: Tuesday, November 17, 2009 9:45 AM
To: Chris Rink
Cc: discuss at ixda.org
Subject: Re: [IxDA Discuss] Prototyping Tool Recommendations

On Nov 16, 2009, at 2:58 PM, Chris Rink wrote:

> Hello, i have recently been given the task of identifying prototyping
tools to test high fidelity and high functionality. Our goal is to have
prototypes that will be high enough quality to work as design
> specs.

Actually, you can do high fidelity in PPT (MS used it to prototype much of
Windows XP and the ribbon), Axure, Fireworks, HTML, Flash... there are a
number of tools. I cover a few of them in my book, Prototyping: a
practitioner's guide, which just went on sale this past week
http://bit.ly/19Hiir if you use discount code PRPUBNOT you can get 15% off.

Cheers!

Todd Zaki Warfel
Principal Designer
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at zakiwarfel.com
Blog: zakiwarfel.com
Twitter: @zakiwarfel
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

17 Nov 2009 - 11:14am
zakiwarfel
2004

On Nov 17, 2009, at 11:05 AM, Charles B. Kreitzberg wrote:

> It would be great to learn about techniques that can make PowerPoint more
> usable as a prototyping tool.

As Fred Beecher points out in his recent UIE virtual seminar, fidelity comes in two flavors: functionality and visual aesthetics. I really like the way Fred illustrates these two levels of fidelity using an X/Y plot.

Keeping that in mind, PowerPoint won't get you high fidelity visual aesthetics on its own. Typically, it's combined with Photoshop, Illustrator, or something similar to create the visual assets and pull them into PowerPoint for prototyping.

PowerPoint can get you a fairly moderate to high level of fidelity on the functional axis. I've even done things like fake javascript fade techniques (a pretty standard Ajax-style transition) in PPT. While it's not as robust as HTML or Flash, it's a tool with a fairly low learning curve and it's on nearly every business machine on the planet, making it readily accessible.

Oh, and if you're interested in finding out how to prototype with PPT, why not pick up the book Prototyping: a practitioner's guide. I cover PPT and 5 other tools in there, each with it's own hands on tutorial, as well as a number of general best practices and guidelines for prototyping regardless of the tool or method.

Pick up a copy of the book http://bit.ly/19Hiir and save 15% with PRPUBNOT. You'll even get sample files and templates for prototyping in Fireworks, PPT, and other programs.

Cheers!

Todd Zaki Warfel
Principal Designer
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at zakiwarfel.com
Blog: zakiwarfel.com
Twitter: @zakiwarfel
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

17 Nov 2009 - 11:42am
jrubero
2009

Flash Catalyst is a very flexible and powerful tool for building detailed prototypes. Plus, it creates development code in the background so dev-team members have something to work with immediately.

17 Nov 2009 - 11:45am
Dave Malouf
2005

Like PPT Keynote by Apple is really powerful. Most of my students can
dive into Keynote like they were doing finger painting while PPT
takes a lot to get going with the same level of functional fidelity.

Also! if you are worried about cross platform viewership, keynote
beautfiully exports to a clickable quicktime! Just marvelous.

Otherwise, I really try to push them to Fireworks and once CS5
becomes available i will transition them to Catalyst. Still waiting.
Feels like forever since Catalyst has been in testing or otherwise
available for review.

-- dave

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=47441

17 Nov 2009 - 12:32pm
Dan Harrelson
2007

I have collected (and continue to collect) the names, prices and URLs
for decent prototyping tools. You can find the list on Adaptive
Path's blog.

http://www.adaptivepath.com/blog/2009/09/16/rapid-prototyping-tools-revisited/

Take a look at http://protoscript.com/ by Bill Scott. It's a
collection of JavaScript behaviors that you can literally drag onto a
web page. Try exporting HTML from Fireworks or Axure and then using
protoscript to add behaviors.

...Dan

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=47441

17 Nov 2009 - 1:17pm
Fred Beecher
2006

On Mon, Nov 16, 2009 at 8:58 AM, Chris Rink <rink_chris at emc.com> wrote:

> Hello, i have recently been given the task of identifying prototyping
> tools to test high fidelity and high functionality. Our goal is to
> have prototypes that will be high enough quality to work as design
> specs.
>
>
Hi Chris!

It looks like a lot of people responded, so I'll chime in by adding a second
recommendation of both Todd Zaki Warfel's new prototyping book as well as
Dan Harrelson's continually edited comparison of prototyping tools.

It seems like you have a concrete goal for your prototype, which is great.
But think about what level of fidelity is really necessary to achieve that
goal. (Todd referenced my graph on visual fidelity vs. functional
fidelity... if you want to check it out, look at my recent Boxes & Arrows
article. There's additional info in there you might find useful too.
http://bit.ly/2WtdZp ) As you reach higher and higher levels of visual &
functional fidelity, the balance between the time you spend prototyping &
the value you get back from that starts to decline. At a certain point, you
might as well have just coded the thing yourself. : ) You need to really
think about what interactions, conditions, etc. you *absolutely need* to
prototype. Because if you prototype them all, you've just built your whole
system.

> I have looked at Axure and iRise but am unsure about their ability to
> handle interactions like resizing and Drag n Drop.
>
> Has anyone used found a tool that handles those dynamic aspects well?
> Am I just better off using a javascript library?
>

I am, of course, a huge Axure fan, and while resizing & drag 'n drop aren't
currently (easily) possible, you do have options. It seems like you have
some coding experience or have access to someone who does? If so, you can
use a widget in Axure called the inline frame to seamlessly load outside
code into an Axure prototype. But the big advantage I see for you with Axure
is that it allows you to document your design as well as prototype it. That
documentation can show up as part of the prototype or as a separate
document. That way, you don't have to prototype every single interaction.

However, if you do have significant coding experience (and it seems like you
might), maybe you *would* want to consider prototyping with jQuery or
whatever (go here for more code libraries:
http://konigi.com/tools/tags/prototyping ). But you still need to handle the
documentation side of things. Protonotes might be helpful there. You can use
that to annotate your prototype and indicate what additional unprototyped
interactions might be required.

I hope this helps!

F.

------------------------------------------------------------------------------------------
Fred Beecher
Sr. User Experience Consultant
Evantage Consulting
O: 612.230.3838 // M: 612.810.6745
IM: fbeecher at gmail.com (google/msn) // fredevc (aim/yahoo)
T: http://twitter.com/fred_beecher

17 Nov 2009 - 12:26pm
Chris Rink
2009

Thank you for all the great feedback and keep it coming :D.

In response to the question of why put dynamic interactions in the
design spec:

Are goal is to write as little as possible in the design specs. We
have a very globally distributed team and have found that there is a
lot of misunderstanding that happens in a design spec. Also the spec
becomes a pain to maintain and often are not read after being
updated. This is why creating prototypes to describe interactions is
much more desirable from both a testing and development perspective.
We also found that by not testing the dynamic interactions that
issues arise because the dynamic interactions weren't thought of.
This is especially true with how docked expand collapse panes work.

There is of course the flip side of doing prototypes which is writing
and maintaining code. This is why I wanted to see where the technology
was to see if it has helped mitigate some of these risks.

As of now, I am thinking we might need a mix of technologies. Using
Axure for most of the interactions and then using a html based
version for the more dynamic scenarios.

Thank you again for all the great feedback and feel free to keep the
discussion going.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=47441

14 Dec 2009 - 9:50am
Wilson YUEN
2009

Expression Blend 3 + SketchFlow

Any comments on this tool?

http://www.microsoft.com/expression/

15 Dec 2009 - 12:39pm
Kevin Silver
2010

I've been using Blend 3 + Sketchflow since it was in beta. I wrote
about my experience in an UX Matters article, which you can find here: http://www.uxmatters.com/mt/archives/2009/11/using-expression-blend-to-explore-demonstrate-and-document-design-solutions.php

Enjoy!

Kevin

On Dec 14, 2009, at 6:50 AM, Wilson YUEN wrote:

> Expression Blend 3 + SketchFlow
>
> Any comments on this tool?
>
> http://www.microsoft.com/expression/
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help

16 Dec 2009 - 6:37pm
mtumi
2004

I've been checking out Flairbuilder recently. It's very quick and easy to use and comes with a lot of controls. Controls are all edited via text. It feels a little like wiki meets GUI. :-)

http://www.flairbuilder.com

Michael

Syndicate content Get the feed