The tools we use to solve design problems are profoundly important to the outcome.  We need to understand problems, experiment with solutions, simulate user experiences and deliver professional results.  Tools that support our thinking, toying and prototyping lead to better designs.  Tools that are cumbersome lead to worse designs, because we must spend more of our precious time diddling with the tool rather than exploring the ideas that might turn into a breakthrough solution.

I’ve been designing interactive products for over twenty years, and I’m always looking for more more efficient ways to solve design problems.  Today we are fortunate to have a large set of powerful, evolved, stable products to pick from, but it can take ages to sort through them all.

So I thought it would be helpful to share what tools I have settled on for interaction design and information architecture.  Some of these you will know, some are gems you may not have heard of

[I've added some links to Amazon for related products.  If you buy anything through these links you're tossing me tip.  Thanks!]

Favorite computer: MacBook Pro

I have a 2.3 GHz, 3GB RAM model from two years ago.  Fast and stable.  I can easily go two months without rebooting.  I’ve never owned a computer this long without pining for another.  I don’t really need anything faster (although more RAM would be nice).  The computation speed of computers has caught up to the needs of a mainstream users.

The funny thing is, my MacBook Pro is actually running faster and faster due to the continued optimization of Mac OS X, and my gradual migration to Intel-native apps.  And, my prior machine, a five-year-old Powerbook is humming along contentedly in the living room as the surfing computer.  Apple treats the elderly well.

[ MacBook Pro at Amazon ]

Favorite  tool for boxes and arrow diagrams: OmniGraffle Professional

It’s so nice having the right tool for the job.  OmniGraffle Pro is the world’s best program for drawing connected diagrams: sitemaps, flowcharts, state transition diagrams, Feature -> Objective Chains (for product vision work), and so on.  Any graphics tool can draw boxes and arrows, but boxes and arrows are OmniGraffle’s mother tongue.

Many people still use Illustrator for this type of work.  The results can of course look gorgeous because of the fine level of control, but it is too painstaking and low-level for this type of work.  OmniGraffle makes making edits trivial, while offering enough fine control to make professional-looking deliverables.

I once laid out and re-engineered a complex internal workflow process with OmniGraffle.  The wallpaper-sized printout would have made Tufte proud.  The state transition diagram representing the new parallelized process was actually fun to do.

On the PC, the best-of-class diagramming product is Visio.  But I have tipped PC people to switch to the Mac by showing them OmniGraffle.

Some people are using OmniGraffle for UI layouts.  It’s got a big community and several shared GUI widget libraries.  But I still prefer Stone Create for this work.

Omni has been courageous at inventing and re-inventing the UI to get it right.  The level of refinement and love of the product shows.  [If it could obviate Inspiration I'd be even more pleased.  See below.]

[ OmniGraffle at Amazon ]

Favorite  tool for UI design: Stone Create

Back in the day, I used to use ClarisImpact 2.0 for most of my interaction design work because it was simple & powerful.  (And, er… because I designed it when I worked at Apple/Claris.)  When Apple eventually dropped Mac Classic support in OS X, I had to find a new workhorse.  Stone Create it was.

Stone Create is a general object-based graphics program that happens to be great for designing UIs.  I use it for wireframes, specs, interaction designs, layouts, mock-ups, low-fi prototypes and scrapbooks of screenshots.

In Create, I have libraries of GUI objects for different media I design for: Windows apps, Mac apps, Web apps, mobile apps and so on.  Composing a screen is a drag and drop affair.

Text blocks are handled very smoothly.  Text boxes can be single-line, for titles that shouldn’t wrap unless you ask them to, or fixed size to fit into containers or fixed width, where you define the width and it grows vertically as needed.  This means Create knows your intent with the text block, and when you shuffle things around and resize them, they do the right thing.

I can make the designs as pixel-perfect or as rough as is needed for the project.  For precise layouts, Create lets me drop in bitmaps from anywhere (screen grabs, Photoshop).  It maintains a 1:1 pixel ratio, so the results do not get distorted.  This is a  useful and rare quality!  Bitmaps and vector objects are all objects so you can directly manipulate them.  Unlike some apps whose name will go unmentioned, you don’t have to switch to the right layer.  Just grab an object and move it or resize it.

For rough wireframes and paper prototypes, I’ve been having fun using a set of sketchy GUI widgets that was inspired by an intriguing (but immature) AIR-based product called Balsamiq Mockups.  Layouts look like they were hand-drawn with a medium-width marker.  It lets everyone know implicitly that the solution they are looking at is still at the early, formative stage, and that the emphasis at this point is how well it works, not how it looks.

Create is great for generating paper prototypes.  Hand-drawn paper prototypes tend to suffer by being out of proportion.  It’s easy to draw out a page that is not viable on screen.  With Create and a good sketchy UI widget library you can get the proportions correct from the get-go.  And when you need to iterate a layout you just have to tweak what you started with; you don’t have to redraw it from scratch.

Stone Create deals with multi-page documents easily (even 30 page specs if you are into that sort of thing).  One document can contain many related designs, design alternatives and explanations.  Designs can be explained in the margins of the same document.  Other graphics apps tend to be designed around single page documents, and they don’t do multi-page docs without a struggle.  Stone Create serves as a sort of InDesign-lite, and it is fast and efficient with long documents.  Depending on the work, I will create PDF deliverables from Create or migrate the UI’s I design in Create into other apps like Google Sites.

Create supports master pages.  I might have one master page with a basic footer information, and another for a 1024-pixel-wide browser frame.

Create helps you design better because it facilitates experimentation.  I can pump out several variants of a design in a flash.  Just duplicate the page and tweak, duplicate and tweak.  Page up and page down to flip between them and compare.  Then delete the pages with dumb ideas before anyone else sees them.  It’s the envy of any designer who must keep track of which combination of layers and folders are needed for which version of the design.

The same feature lets you illustrate UI walk-throughs really easily.  Duplicate the page and tweak it to show the next state, and keep going.  Last week, I whipped up a walkthrough in 15 minutes after a whiteboard brainstorming session with a colleague.  It was convincing enough that he though it was a functioning prototype!

I also use Create as a scrapbook app.  During discovery, I’ll walk through existing UIs or those of competitors, collecting and annotating screenshots for future reference.  I can intermix these screenshots with designs as needed.

Create lets you hook up  click-through prototypes by linking objects or runs of text to other pages.  The pages can then be exported to HTML pages to run in anyone’s browser.  No native runtime client is required other than a web browser.  These quick & dirty prototypes are a viable alternative to fumbling through an actual stack of paper prototypes during early usability testing.

Create is not well-known.  And it definitely still has its quirks to get used to.  But it’s an inexpensive secret weapon for interaction design.  I’ve used it for years on dozens of projects, milking the free lifetime upgrade policy.  The developer Andrew Stone was so responsive to my feedback that we became friends, and I ended up designing a bunch of interaction design-related refinements to Create.  It’s now a joy to layout text, arrange things evenly and experiment experiment experiment.  It’s my workhorse tool for interactive product design.

[ If you order Stone Create, use my super secret Obvious Design/Create discount link for an extra $9 off. ]

Favorite tool for brainstorming, mindmapping: Inspiration

An oldie, but a goodie.  I have used Inspiration for over twelve years and consider it my second brain.

Inspiration is like an infinitely sized whiteboard. Click and type to create box there.  Command click and type to create a connected box.  Drag things around and they stay connected.  Links are always under the boxes so they don’t interfere.  Copy and paste box styles easily.  You don’t have to think about scale or pagination; the point of these diagrams is to think, not deliver something pretty.  This approach to diagramming for the purpose of thinking is simple, yet it eludes even the elite diagramming apps like OmniGraffle.

I use Inspiration to sort out my thoughts before I write an article, solve thick interaction design problems, lay out a work breakdown structure when planning a project.  Whenever I need to solve a problem that is bigger than my brain (i.e. most problems), Inspiration plus the largest monitor I can plug into are my friends.  Adding speech recognition makes for an even wilder party.  (see below)

Other mindmapping software creates spider diagrams, which the early thinkers of mindmapping advocated.  But to me they are an eyesore, and they miss out on the spatial value of having information clustered where you want them.

Today Inspiration marketed mostly for educational use.  But do yourself a favor and look past the farm animal graphics.

[Vision to steal: Someone, create a multi-user shared virtual whiteboard with stickies and arrows.  Then we could reach the holy grail: the benefits of collaborative sticky note processes plus the flexibility and longevity of digital storage and manipulation.]

[ Inspiration at Amazon.com ]

Favorite version of Adobe Creative Suite: CS4

That every product designer just needs Photoshop and Illustrator (and maybe Flash and Dreamweaver and InDesign) is a given.  It’s not a question of whether a designer should have the CS suite, but of which version.  CS4 is a highly regarded upgrade and it’s working for me.

Incidentally, Adobe has been trying to reposition Fireworks (which came with Adobe’s acquisition of Macromedia) as a rapid prototyping tool.  I tried it, and I just don’t buy it.  The emphasis is on one page at a time, it doesn’t let you spawn five variants to experiment with, and Fireworks still feels like you are dealing with pixels rather than menus, lists, tables and labels.  I can run circles around Fireworks productivity with Stone Create.

[ Adobe CS4 at Amazon.com ]

Favorite tool for documenting designs: Google Sites

Even with agile processes, designs still must be communicated from designer to developer, and to QA and to the docs people.  Documentation is needed.  For years I sent around PDF documents with documentation.  But this year Google Sites changed how I work.

Google Sites represents a shift in the basic paradigm of how information is created and shared in a work environment, that is difficult to understand without living through.  In the old world of MS Office and Word documents, we’d labor away in our caves to create a document as near to perfect as we could get it, then solicit and incorporate feedback, and repeat.  It was slow.  Versioning was an issue.  Documents were shared haphazardly, by paper, email or on a file server available only to people on the right LAN with the right passwords.  They were islands of information that could not be linked to from other places.  Locating related prior work was nearly impossible, so wheels were reinvented.

Evolved wikis like Google Sites represent a new world.  Instead of the perfect -> publish -> iterate cycle, partial, incomplete works are available constantly, instantaneously and globally.  They are searchable and linkable so old works can be found and referenced.  Input and refinements can happen during the formative stages, not after something has reached a “publishable” state.  That’s why I like using Google Sites for specs.

I will typically have one table of contents page leading to mini-specs for each feature.  They are hyperlinked to each other as needed.  Graphics integration is pretty smooth: I can drag graphics directly from Stone Create into the image upload dialog.  Reviewers can comment on each page.  When I see a UI issue in the build I can report it in the bug database and copy and paste the text into the spec, so it is always up to date for QA and publications.  Versioning is automatic, so we don’t have to worry about losing old information (not that we ever go back to it).

The big issue with Google Sites is that you have to trust your data to Google.  An internally-hosted Wiki with Google’s level of refinement would be even better. [There are million wikis out there.  Readers, got any favorites that really work?]

Favorite text editor and note taker:  TextEdit

TextEdit has a tiny footprint, is powerful enough for note taking, and deals well with graphics.  It’s stable and fast.  The humble text editor that ships with all Macs is almost always open on my Mac with half a dozen documents in the works.

I’ve tried many note-taking and information organization apps.  (Honorable mention goes to VooDooPad.)  But plain old TextEdit documents, prefixed with the date in YYMMDD format, in the appropriate project folder in the Finder, fully searchable with Spotlight is the simple, reliable solution that I fell back on without even realizing it

And there you have my preferred tools of the interactive product design trade.  I’m always open to improved workflow, so please share your favorite solutions, and let me know if you have any questions about my recommendations.

[Update 5/26/09:  I drank the Kool Aid and am now addicted to DevonThink Pro as a general note taker and snippet database.  It's hard to get how useful and important such a tool is until you have used it.  The functionality should be built into the OS.

I am also using Scrivener to compose, organize and write long articles and the book.  Simple and wonderful.  It's what Word would have become 15 years ago, had Microsoft realized that writers need word processors to help them think.]

—

Philip Haine is a product designer and product vision specialist. He founded Obvious Design, LLC in San Francisco in 1997.  His other blog on product vision can be found at ProductVision.org.  You can follow his high signal-to-noise ratio thought stream on Twitter @dphaine.

Posted by Philip Haine on Wednesday, December 31st, 2008 at 1:45 pm.
See similar articles in: Commentary, Design Tools & Resources, Product Design.

7 Responses to “Top 7 Tools for Interaction Design and IA”

1. Peldi Guilizzoni wrote on January 2nd, 2009 at 1:45 am :

   Hello Philip, thanks for the great article, I didn’t know about Stone Create and it looks really good.

   I am interested in hearing why you think Balsamiq Mockups is “immature”. I agree that it’s not “done”, but I am pretty happy with version 1.5 which I released a couple of weeks ago: http://www.balsamiq.com/products/mockups

   I am always working to improve the tool and feedback from experts like yourself is just what I need: if you have the time, write me at peldi@balsamiq.com, I’d appreciate it.

   Thanks again for the great article,
   Peldi

2. Philip Haine wrote on January 3rd, 2009 at 11:59 am :

   Thanks, Peldi!

   I sent you my notes on an earlier version of Balsamiq Mockups. I will try looking at v1.5 when I can.

   Philip

3. Dave Cortright wrote on January 11th, 2009 at 6:37 pm :

   I still believe the MacBook is a much better value than the MacBook Pro. Unless you need the extra screen real estate on your laptop monitor, save your money. I personally run a second monitor off of my MacBook for my heavy design work, and the laptop screen is sufficient itself for basic email and web tasks (and even the occasional design tweak here or there.)
   http://www.rated-best.org/blog/2008/06/best-laptop-apple-macbook.html

   I used to be a Visio guy on Windows, but I’m an OmniGraffle fan on the Mac. I use it for flow charts, mind maps, and UI designs. I have the pro version and use the Outlining and Mouseless Editing groups under the Edit menu for quickly creating connected boxes. You can then context-click one, select similar, and format them all how you wish. Omni Graffle has a lot of depth. and while there are annoyances, there are fewer than I remember in Visio.

   Perhaps not technically a tool, but the “Print to PDF” function built into the Mac is critical to sharing my designs with stakeholders. On the PC, I highly recommend PDF Creator for similar functionality.
   http://sourceforge.net/projects/pdfcreator/

   Could you elaborate on why CS4 is so much better than 2 or 3? I see no compelling reason to spend the hundreds of dollars on an upgrade to software I use rarely, and even then only for the core basics. If you are an interaction designer spending substantial time in Photoshop or Illustrator, you are not spending your time well. IMHO

   I like Stickies even better than TextEdit for basic note-taking. You don’t have to hit save. You can then copy/paste your notes into a more permanent place later, like Evernote.

   Great post, though, Phil! Thanks for the conversation starter. It’s a topic that needed discussion.

4. Philip Haine wrote on January 11th, 2009 at 9:09 pm :

   Dave, yes, today’s MacBooks could very well be better than yesterday’s MacBook Pros. I happen to be using both Firewire ports, 3GB RAM and I plug into a 30″ display requiring dual link DVI. I’m not sure the regular MacBooks have those.

   I had been using Adobe CS2, so the jump to CS4 was huge, because it’s now Intel native. (I don’t feel like the kid with worn out shoes anymore.) I cannot speak to the delta from CS3, except to say that the consensus reviews out there say it’s worthwhile.

5. Requirements docs: Goodbye word processor, hello wiki | The Product Vision blog wrote on June 22nd, 2009 at 12:58 pm :

   [...] couple of years ago, I underwent the most significant change in my toolset in years. I switched from word processors for such documentation to wiki’s.This had a number [...]

6. Troy wrote on January 14th, 2010 at 5:16 pm :

   Hi Phillip,
   Thanks for your work here. Questions, you mention Google Pages for your tool for documenting designs. Why does this all need to be documented in text? What about using something like Adobe’s Flash Catalyst so that designers can convey exactly what they expect to the Web developer?

   I know this is an older write-up, but Catalyst was in beta at the time I believe.

   Thanks,
   Troy

7. Philip Haine wrote on March 3rd, 2010 at 12:59 pm :

   Hi, Troy –

   Sorry for the delay in responding.

   Thanks for the pointer to Catalyst — I will check it out.

   I’m definitely in favor of prototyping tools, but there will always be some behavior that the designer cannot prototype. This must be conveyed to developers verbally one way or another.

   Best regards,
   Philip

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website