Prototyping Tool Recommendations
16 Nov 2009 - 5:58pm
18 replies
1843 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?
Get the feed
Comments
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/
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
>
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
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
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.
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
http://www.justproto.com/en/
http://www.balsamiq.com/
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=47441
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
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
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.
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.
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
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
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
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
Expression Blend 3 + SketchFlow
Any comments on this tool?
http://www.microsoft.com/expression/
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
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