Putting your eggs in one basket: What single prototyping tool to learn.

14 Jan 2011 - 2:28pm
3 years ago
23 replies
1691 reads
Damon Dimmick
2008

Fellow IXDers,

A question I keep running up against from colleagues and friends in the field: If I only have time to learn one technology to help enhance my IxD practices (such as basic wireframing), which one should it be?

I get this question a lot, and I'm torn on the answer. Most of my colleagues do very precise wireframes using omnigraffle (near pixel perfect), but there's certainly a push to do more interactive prototyping, and I agree that we all need to be getting better at that if we don't want to go the way of the dodo. But I'm torn on the answer. There are a lot of great technology sets / apps out there than can help, but if pressed to give only one, I'm not sure what I would choose.

Common recommendations:

1. DIY JavaScript + HTML/CSS

2. JavaScript Libraries (Jquery, dojo etc) + HTML/CSS

3. Adobe Flash / Catalyst

4. Dedicated prototyping tools, including Axure

I know that when I look at job postings, groups like IDEO seem to want their interaction designers to use Flash, but it seems that something like straight javascript might be more useful in a long term portfolio.

Any of you have any thoughts on this? If you could only dedicate your time to becoming very strong at one ptototyping crutch, which one would you choose? I'd love to hear thoughts.

-DD

Comments

14 Jan 2011 - 3:40pm
Jack L. Moffett
2005

Hi Damon,

This is going to depend greatly on what type of work you do and the makeup of the teams you are on. For me, it's HTML/CSS. I work primarily on browser-based applications, and I work with a bunch of devs that know JavaScript. They rely on me to implement the HTML and CSS.

Best,

Jack

14 Jan 2011 - 5:05pm
Scott McDaniel
2007

Well said - I think this is the most generic answer one can give to the question, because there's no necessary proprietary software, it can duplicate a wide range of scenarios/pages/views/applications and present whatever level of detail to interactions and fidelity to appearance as required),

Furthermore, the skills transfer to front-end coding*, which is something chicks and/or dudes dig.

The only one I can thing of that's more freely available is paper, but I've had that met with variable enthusiasm/eyerolling with biz stakeholders, alas.

Scott

*relax! I didn't say 'use the prototype as the front-end! who on earth would do such a thing?

On Fri, Jan 14, 2011 at 3:51 PM, Jack L. Moffett wrote: > Hi Damon, > > This is going to depend greatly on what type of work you do and the makeup > of the teams you are on. For me, it's HTML/CSS. I work primarily on > browser-based applications, and I work with a bunch of devs that know > JavaScript. They rely on me to implement the HTML and CSS. > > Best, > > Jack > >

14 Jan 2011 - 4:01pm
denniskardys
2010

I use a number of tools for creating basic deliverables... my normal process is to sketch everything on paper first. Then I've been using Omnigraffle for site maps and architecture diagrams, and InDesign for wireframes. I package all my deliverables up in InDesign so that I can brand everything in a visually consistent manner. I do most my annotating in InDesign as well. I am not sure if this is the most efficient process, but it works for me because I am overly concerned with consistency of  presentation and the visual clarity of what I am trying to communicate. It also makes it easy for me to export everything to a PDF at once for the client.

After the initial static deliverables are created, I swear by writing HTML/CSS and using jQuery for interactive prototyping. It makes sense for me because I work mostly on web projects and am speedy and comfortable working with these tools. I am not sure that I would prototype an html site in flash or a flash application in html though. I think its important for prototypes to be low-fi, but at the same time be suggestive in feel of the final interaction. Even at the most basic level, flash and html feel entirely different. I wonder if others feel this way as well? Plus, in the case of programming, using a language that is consistent with what will be used in the final product gives some opportunity for reusability.

I have not yet tried, but am interested in trying Axure and Keynote for interactive prototyping.I just honestly can't envision there being one tool that can do it all. If you find it let me know. Hope this helps!

Dennis

 

14 Jan 2011 - 4:10pm
Alan Dickinson
2009

It's going to be hard to give you a definitive answer. As Jack said, it depends on the work and the skill set of the designer. So.. a few different suggestions below..

You can build click-through prototypes with Omnigraffle pretty quickly. If you're already using Omnigraffle for wireframes this would be a good first step. It doesn't require any coding.

If you're prototype need to show transitions, movement from one state to the next, Omnigraffle won't cut it. Keynote or Powerpoint are options, and there are some good resources for using these as prototyping tools if you do a quick search. These also do not require any coding.

There are a few applications dedicated to prototyping, and I'm sure we'll be starting to see more. I've been beta testing Antetype and like it. 

If you're comfortable with code.. there are a lot of routes you can go. If you're prototyping a website then HTML & CSS makes sense. Any time you can work in the intended medium upfront is great.. it'll minimize the amount of throwaway work you do.

Flash is also an option, though unless you already know it, it can take some time to learn and probably won't be reusable.

Hope that helps.
-Alan

14 Jan 2011 - 4:13pm
livlab
2003

Since you started your question with a time constraint "if I have time to learn one..." I think that already answers the question. Whatever is fastest for you to learn. If you know HTML and CSS, a refresher and some JavaScript may be the best path. If you used any IDE in your life, Axure has a minimal learning curve.

Ultimately I think it's a matter of how much effort it will require versus what you want out of it. Nobody has the time to learn every approach. I keep a list of things I want to explore and when I start a new project I ask myself "is this a good opportunity to try any of them?" then comes the effort x outcome question.

In my last project I had a perfect opportunity to experiment with replacing wireframes and functional specifications with a dynamic prototype. Which made it the right moment to try Axure, which I had been interested in. I also knew the design had a lot of dynamic screen interactions which I had not been happy about describing in specifications, so that how Axure was the answer to the outcome question. It was a great experience and I learned a lot in the process - both about using Axure as a tool and the prototyping approach itself. 

People get nervous about trying a new tool on a real project (what if they estimate things wrong? what if they can't do it? what if they need more time?). It depends on your risk tolerance I suppose. If that's a show stopper, than I'd just pick any approach that looks most interesting and make a fake project out of it. I personally think you get more out of it by trying it in a real use scenario - unless the approach you are learning is so foreign to you and you really have no idea what you are doing and you are not willing to take the risks. In that case, pick something tiny and like, redesign replicate something that exists, using the tool/skill you are trying to acquire.

14 Jan 2011 - 4:38pm
Damon Dimmick
2008

I'm personally very comfortable with HTML/CSS and a little JavaScript, and at my company we work on web apps / web pages primarily. When people ask me this question, I think they are wondering if they should invest their time in getting some JavaScript Chops, vs maybe using Flex / Flash.

Any take between those?

16 Jan 2011 - 7:34pm
AK
2010

That also depends on your company's target platform. We standardized on JQuery for a number of reasons. The main ones were (a) if we needed to make a change, we had access to all the source code. With Flash, you need access to the FLA and recompile (b) The number of Mobile Safari users increased and (c) our software development team understood Javascript better than ActionScript., allowing them to contribute updates to client-side code.

14 Jan 2011 - 6:59pm
Jack L. Moffett
2005

If I were choosing between the two, I would choose JavaScript, because it is more likely to be useful to me in my work. We don't use Flash. For somebody else, the opposite may apply because their firm uses Flex/Fash extensively.

If, however, you are posing the question within the context of "what will help me in the future, not knowing where I'll be working or what I'll be working on", I'd have to lean on the side of JS. It's more generally useful. Of course, a better answer in that context might be "Neither. You should be improving your design skills, rather than learning a technology, for long term benefit."

Best,

Jack

14 Jan 2011 - 7:43pm
Jackie
2008

Technology? Hmm, I still Iike low-tech  pen & paper ;)  However,  if you need digital files,  I like omnigraffle for for basic wire-framing and flow diagrams... and   Axure  for quick prototyping. I am not a huge fan of javascript/HTML...  while it can be useful for user testing prototypes, there can be an expectation that you are developing the actual production code.  I'd rather spend my time designing than debugging javascript.

15 Jan 2011 - 7:59am
Joe Sokohl
2004

I'm like Jackie--OmniGraffle works best for me when it comes to lo-fi wireframing, after I've gone through an iteration of sketching (big, big fan of design studio & 6-8-5 method, even if I'm alone). When I want to communicate more, though, a prototype often works best. For prototyping, I tend to pick up Axure more than I do Fireworks or hand-coded HTML.

15 Jan 2011 - 10:16am
Dave Malouf
2005

paper & pen/pencil doesn't really require learning. Just do it and practice.

I think it doesn't depend at all. I would go so far as to say that for 90% of the UX world a strong understanding of the HTML5 eco-system (HTML, CSS, JS, JQuery, SQL) is the new long term requirement for design practice. With that technology you can move from wiefreames to interactive high-fi prototypes. 

If I had to put my eggs into 1 basket that is what I would do. As for the concern about Flash, I'd say that if you are strong in HTML5 world the forced transition to a Flash world is relatively easy.

As for the Omnigraffle, Visio, etc. part of the equation, I find the tools to be too limited in purpose and leave the UX Professional too low on the totem pole of valuable contribution. I would say though that you can't REALLY put your eggs in 1 basket like this. You have to add something like Adobe CS to your arsenal as well. So for me it is a 1-2 punch and not about a single basket.

Adobe Suite for graphical needs (models, maps, controls)
HTML5 environment for interactivity and layout needs

I highly recommend every Jr. designer and heck most mid-level and senior designers to get a Lynda.com account and go to town on it. if you work for a large organization, I suggest a site license for your team.

We didn't even talk about the growing importance about tools like After Effects, Premiere, etc. for creating strong experience prototypes.

-- dave

15 Jan 2011 - 12:05pm
Joel Eden
2006

I used to think that it would be good to use Javascript/HTML/CSS to prototype, but a lot of the work I've done the last few years is design (sketch/wireframe/prototype) for either desktop applications, or web applications, across many platforms such as Silverlight, WPF, ASP.NET, Windows Forms, and of course straight web standards. I tend to think of wireframes as prototypes that don't work...so lately I've been trying to augment wireframes with prototypes, at least for the novel interaction aspects of an idea.

Therefore, I don't see how getting really good at just web standards, or any single platform as a prototyping tool is a good choice when I have to support so many platforms. I've been putting my time into using InDesign (especially with the new CS5 prototyping and animation features), and just got a license that includes Flash Catalyst which seems like a good choice. Of course, prototyping in the actual platform the end solution will be realized in seems tempting so that you don't design beyond the realities of the platform, but I don't see how consultants like me that have to support many platforms would have the time to learn to code/develop in all of these platforms. I know Java and C++ from 10 years ago, so I could learn to do .NET development, but I prefer to spend my time on ideas (sketching, wireframing, prototyping).

I too would love to hear what others think about this...

Joel Eden, PhD Senior User Experience Architect, Infragistics

On Fri, Jan 14, 2011 at 2:36 PM, Damon Dimmick wrote: > Fellow IXDers, > > A question I keep running up against from colleagues and friends in the > field: If I only have time to learn one technology to help enhance my IxD > practice, which one should it be? > > I get this question a lot, and I'm torn on the answer. Most of my colleagues > do very precise wireframes using omnigraffle (near pixel perfect), but > there's certainly a push to do more interactive prototyping, and I agree > that we all need to be getting better at that if we don't want to go the way > of the dodo. But I'm torn on the answer. There are a lot of great technology > sets / apps out there than can help, but if pressed to give only one, I'm > not sure what I would choose. > > Common recommendations: > > 1. DIY JavaScript + HTML/CSS > > 2. JavaScript Libraries (Jquery, dojo etc) + HTML/CSS > > 3. Adobe Flash / Catalyst > > 4. Dedicated prototyping tools, including Axure > > I know that when I look at job postings, groups like IDEO seem to want their > interaction designers to use Flash, but it seems that something like > straight javascript might be more useful in a long term portfolio. > > Any of you have any thoughts on this? If you could only dedicate your time > to becoming very strong at one ptototyping crutch, which one would you > choose? I'd love to hear thoughts. > > -DD > >

15 Jan 2011 - 4:38pm
mdostert
2010

One of my professors said that industry is trying to hire people who are programmers and can pick up interaction design to save money.

It is a drag looking for work in this field becuase they all ask for five years experience with certain tools. I have learned balsamiq which I love, I was learning Axure.

 

17 Jan 2011 - 12:04am
Dave Malouf
2005

Interesting. If you are looking at this from the point of view of hireability I suggest these tools in order of priority:

1) Adobe CS: photoshop, illustrator, inDesign, Fireworks, Flash, Flash Catalyst (though I might swap Photoshop & Fireworks for personal reasons)
2) HTML, CSS, JavaScript
3) Visio &/or Omniograffle

After that, all other tools are a crap shoot w/o a critical mass of companies that require them.

I still think that if you are designing interactivity, you need to understand and be able to work with the material that interactivity is built on: code. 

15 Jan 2011 - 5:46pm
holger_maassen
2010

I can’t count the number of wireframes and prototypes I have developed, using diagram tools, HTML or WYSIWYG editors.

... but as other members said my normal process is to sketch everything on paper first - and sometimes it eventuates in paper-prototypes.

And throughout various projects I saw pros and cons – sometimes again and again the same and from time to time new one. Again and again I have to recognize that a lot of agencies and colleagues act, develop and do what they do just because they did it already several times before.

Perhaps, it might be interesting for you to take a quick look at these articles ...  

Why and why not ... Wireframing

Prototyping and Wireframing - It's your choice which diagram tool supports your work best

15 Jan 2011 - 6:39pm
Dave Malouf
2005

The reason I suggested HTML++ is b/c you can wireframe in it, but probably more importantly it is the material that you are designing for and with. Flash platform would be my next suggestion and after that Blend/Visual Basic. Understanding the art & science of code is really important to the success of an interactive media designer. and in the end a UX designer's first and primary medium is interactivity.

15 Jan 2011 - 8:05pm
ambroselittle
2008

I agree with everything Dave Malouf said on this thread.  Wow. :)

-ambrose

15 Jan 2011 - 8:05pm
tonyzeoli
2008

David:

I agree with your statement. It's hard to be an interaction designer, if you don't know what's possible. You don't necessarily need to be a master at HTML/CSS and Javascript (or jQuery and ajax), but you should be familiar with what they do, so you can layout your sketches/wireframes/prototypes that depend on these technologies. An interaction designer must have some understanding of how long it would take to code a function/feature, so they can let their PM lead know, and that person can bring the estimate to the client.

I was just in a situation where I was wire framing an "invite friends" feature for a WordPress site. The client didn't have any specific plug-in he wanted to use, but he had seen something on another site he wanted to build. But, he didn't have the budget to build something custom. Nor could we find out what the other site was using. The developers hadn't started looking that closely at the project yet. It became my responsibility to set up a test environment and run through 3 or 4 different plug-ins to understand their functionality, so I could replicate it in the wireframes. In that effort, not only did I not find the right tool, which allowed the developers to focus on the overall site framework, but I did find another script that could be converted into a plug-in, which gave the PM what she needed to then work with the developers to estimate the hours.

While I couldn't write the script itself, I could look at it and see how it was using the API's from the major email providers and give the developers advance notice it was something they could use. I was also able to warm them that the other plug-in may not work, because I had run through the tests already.

As an interaction designer, I think you should have a bit of a product development mindset.

Tony Zeoli
Lead Developer
ReeseNews.org



On Sat, Jan 15, 2011 at 6:45 PM, Dave Malouf <dave.ixd@gmail.com> wrote:

The reason I suggested HTML++ is b/c you can wireframe in it, but probably more importantly it is the material that you are designing for and with. Flash platform would be my next suggestion and after that Blend/Visual Basic. Understanding the art & science of code is really important to the success of an interactive media designer. and in the end a UX designer's first and primary medium is interactivity.

15 Jan 2011 - 9:06pm
Neil Lee
2007

On 2011-01-15, at 18:45, Dave Malouf wrote: > The reason I suggested HTML++ is b/c you can wireframe in it, but probably more importantly it is the material that you are designing for and with. Flash platform would be my next suggestion and after that Blend/Visual Basic. Understanding the art & science of code is really important to the success of an interactive media designer. and in the end a UX designer's first and primary medium is interactivity.

I totally agree with this. I don't think anyone doing web interaction design has to be pushing out production-quality code, but it's a huge benefit to be able to articulate what you're trying to accomplish with a prototype (picture == thousand words, etc.).

I also think this is an amazing time to learn front end coding as there are a plethora of frameworks, templates, and other things you can leverage to speed up prototyping. Hell, use a WYSIWYG like Dreamweaver, or buy a cheaper solution like RapidWeaver or Sandvox (if you're a mac user - PC recommendations?). I don't think the tool here matters, as long as the output is a rough representation of what the final design will be.

For what it's worth, here's my usual prototyping workflow:

  • sketching
  • Balsamiq / Omnigraffle if required
  • HTML / CSS / JS prototype
  • repeat, rinse, etc.

Ultimately if you only can dedicate the time to learn one system, sketching and raw code prototypes will get you a long, long way.

Neil

16 Jan 2011 - 7:28pm
AK
2010

I agree with HTML/Javascript approach for web apps, though I would use a WYSIWYG editor so you can focus on the interaction rather than the code. If you're going for a software, I collaborated with a software developer to create the prototypes. It allowed the developer to "show off" the wiz-bang stuff they could but haven't been asked to use and I focused on putting the appropriate pieces together. I was also much faster than taking classes and learning to code.

On a side note... I have never been evaluated on my choice of tools. I've used whatever I had on hand to communicate my ideas to the people who would implement them.  I have had to learn new software,  use a different version, or improvise with whatever is on hand. It will be rough until you find the process that works for you and your team/client. 

17 Jan 2011 - 10:16am
Matt Nish-Lapidus
2007

I'm a little late to this thread, but thought I'd chime in anyway.

I'm in agreement with Dave's thoughts on this subject, as he probably know :) 

My usual design process is whiteboard -> paper -> prototype. The prototype stage changes depending on the goals of the project. If it's a web project then I'll prototype in HTML/CSS/JS (that includes desktop and mobile web), but if it's non-web and requires more depth of interaction then I can pull off in those tools I'll use something else. I'm experimenting with Catalyst CS5 right now and love it so far. I used to use After Effects to simulate rich interactions, animation, and physicality.. but Catalyst seems to let me do all of that while actually making the prototype fully interactive. 

Prototypes also often take physical form.. we do a lot of acting out scenarios with paper or lego objects to test larger interaction systems and environments.

It's worth noting that learning Adobe CS and some basic coding (JS to start) will take you really really far for interactive prototyping. JS is a great starting point because it easily translates into ActionScript if you need to use Flash, or into things like Processing if you want to do other types of prototypes.

I'm a proponent of holistic design, whether it be a single person or in highly collaborative teams. It's important for the IxD to understand some level of code, physical devices/objects, and visual design in order to make a product the best it can be. Learning these tools will help you get there, and help you work better with other specialists in those areas.

---

Matt.

17 Jan 2011 - 2:08pm
Jaydeep Savant
2009

That was a good insight. Can u build interaction which is multimodal in nature -----Original Message----- From: Matt Nish-Lapidus Sender:
Date: Mon, 17 Jan 2011 10:49:28 To: Reply-To: discuss@ixda.org Subject: Re: [IxDA] Putting your eggs in one basket: What single prototyping tool to learn.

I'm a little late to this thread, but thought I'd chime in anyway.

I'm in agreement with Dave's thoughts on this subject, as he probably know
:) 

My usual design process is whiteboard -> paper -> prototype. The prototype
stage changes depending on the goals of the project. If it's a web project
then I'll prototype in HTML/CSS/JS (that includes desktop and mobile web),
but if it's non-web and requires more depth of interaction then I can pull
off in those tools I'll use something else. I'm experimenting with Catalyst
CS5 right now and love it so far. I used to use After Effects to simulate
rich interactions, animation, and physicality.. but Catalyst seems to let me
do all of that while actually making the prototype fully interactive. 

Prototypes also often take physical form.. we do a lot of acting out
scenarios with paper or lego objects to test larger interaction systems and
environments.

It's worth noting that learning Adobe CS and some basic coding (JS to start)
will take you really really far for interactive prototyping. JS is a great
starting point because it easily translates into ActionScript if you need to
use Flash, or into things like Processing if you want to do other types of
prototypes.

I'm a proponent of holistic design, whether it be a single person or in
highly collaborative teams. It's important for the IxD to understand some
level of code, physical devices/objects, and visual design in order to make a
product the best it can be. Learning these tools will help you get there, and
help you work better with other specialists in those areas.

Matt.

(((P

19 Jan 2011 - 6:48am
smitty777
2010

Hi Damon, 

My advice would be not to get too caught up in any particular technology.  Learn the basics concepts inside and out, pick a technology you are interested in and learn it well.  Once you get into the real world, the technology will have changed.  Also, many of the good employers will allow you an adjustment time or training to get on top of their particular technology.  And of course you will be ahead of the game if you just happen to be acquainted with that particular technology.  

I've done hiring before, and I would much rather take someone who is intelligent and enthused that I can train on my particular tech than hiring a less motivated person that happens to know the specific language I'm using on a program. 

Syndicate content Get the feed