Since then I’ve added a couple of other power tools to my frequently used set.

I drank the DevonThink Pro Kool Aid.  DevonThink is 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 for a while.  The functionality should be built into the OS.  [That's a vision to steal, btw.]

I also started using Scrivener to organize and compose 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.

(Interestingly, both these Mac-only tools use TextEdit at their core.  They also rest on the Mac’s package architecture that lets a document contain other documents.)

Find the most qualified user for the design in question. It could be someone who’s used the product for years or who’s written a book about it, or who is on the engineering team.

Show this expert user the design and see if he or she can make sense of it as you are expecting regular users to.

If they can, so far so good.  Continue designing or test with less apt users.

If not, your design has failed the Einstein test. The most qualified users of your product are incapable of figuring it out on their own, and therefore, there is no  hope that regular people will be able to. Go back to the drawing board.  If it fails the low bar, it is certain to fail the high bar.

This test is slightly counter-intuitive; common practice has it that you should test against typical users, not experts.  But there are a surprising number of designs out there that fail the Einstein test.

What examples springs to your mind?  Did you have any experience with doing something simple simple that you, as an expert computer user, should have been a snap?  Please comment with examples.

Over the course of a typical excursion across the city recently I used eight different apps without thinking about it.  Not for the sake of using them, but because I had real problems to solve.  The apps were: Google Maps with GPS to get me to the appointment, email to see if a friend responded to a coffee request, SMS to confirm, Yelp to find a coffee shop, phone to finalize, NYTimes, Facebook and Wikipedia to catch up on news while I waited, photo app to grab a snapshot of my friend.  These were the scenarios we envisioned circa 2000 when I did some vision consulting with Palm.  They have now become a reality in a sleek package.

I’ve ranted about the iPhone and criticized its inefficient UI and lack of needed buttons.  It’s not the best phone in the world, but it is by far the best multi-purpose handheld computer and communicator.  I even think it is worth the high monthly cost.  But I can’t say for sure, because I can’t bear to look at the bill.

Recently I’ve been talking about the tools I use for interaction design and for general mac productivity.  Now I’ll cover the tools I use on the iPhone.

The first page of the home screen contains my most frequently used apps.  (Tip: press the physical home button in the home screen to get to the first page.)  On the iPhone the focus of attention is really near the bottom of the screen, so the most used ones are actually at the bottom of this list.

• iPod – (Now that I think about it, it doesn’t need to be here, since I can get to the iPod by double-pressing the Home button)
• Settings – To turn wifi off when walking around the city.  This is working around a design issue.
• App Store
• Safari
• Clock – for alarms & parking timers
• Zenbe lists – shared shopping list
• Google Maps
• Mail
• NetNewsWire – Offline RSS reading.  Syncs with my desktop RSS reader.  Outstanding!)
• Facebook (which I think of as Headline News of your friends)
• NYTimes
• Google – Amaze your friends by speaking your query
• Wikipanion – surprisingly how often we reference things in casual conversation
• Say Who – voice dialing makes up for the sluggish performance of the iPhone on my 2,400 contacts
• OmniFocus (which I’m going to demote soon because by the time it’s launched, 2.5 minutes later (!) I’ve completely forgotten what i needed to record.  I suggest you avoid this until they revamp their sync architecture and make launching instantaneous.)

In the grey bar, available on all pages of the home screen I have:

• Phone
• SMS/Text messages
• Camera
• Calendar

I sure wish I had physical buttons for accessing those items at any time, like the Palms!)

My page 2 apps include:

• Pandora – The best music app on the iPhone.  We plug it into our home sounds system and leave it on for hours.  (I have AOL Radio and FlyCast next to them for coherence, but in my experience they have been flaky or commercial-laden or both.)
• Instapaper – Click a single button on your PC’s web browser and the long article you don’t have a chance to read will be available on your iPhone, reformatted appropriately.  Great app!
• Weather
• Stocks
• Twinkle – Twitter app.  I may switch to Twittelator.  (Follow me: @feign)
• Yelp – look up restaurants and stores
• MoMuni, so I know when the bus will come by
• Stanza – eBook reading.  Excellent!  Wish I had more time to use it.  Reading prose on this small but hi-res screen really works
• My dreaded AT&T page, a Safari bookmark – so I can see if I’m going overboard in text messages, or just to feel bad
• Tip – restaurant tips
• Calculator

I have four more pages of apps I never look at.

iPhone apps are evolving faster than I can keep up.  So please tell me what absolutely must-have apps there are that I missed.

—

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.

These are nice clean calendars with no ads or even a copyright notice.  Very handy for planning projects and vacations, for collecting stickers, for Seinfeld’s productivity method and for manually counting the number of days until Christmas (356 as of this writing).

Download free printable 2009 calendar pdfs in 3 formats

Happy new year!

[Trivia: these nice calendars were generated in the very obsolete ClarisImpact 2.0, which I designed when I worked for Apple/Claris back around 1995.  To make them I have to use an old Powerbook that still emulates Classic mode.]

It really does take years of trial and error and filtering through dozens of products to converge on a set of tools that really work, so let me give you a push start if you haven’t thought about this topic in a while.

Favorite general productivity boost on the Mac: LaunchBar

LaunchBar is my very top recommendation for enhanced productivity on a Mac.  It lets me do umpteen most frequently tasks from the keyboard, with close to the minimum number of keystrokes possible:

• open common files and folders
• get to any bookmarked website
• initiate a search in Google or Wikipedia or Amazon or Netflix or Google Maps, etc.
• look up phone numbers
• initiate an email to someone

What is unique about LaunchBar is that it learns the abbreviations you like to use to do these things automatically, without you having to preconfigure anything.  As your habits adapt, it adapts.

I use it hundred times a day, never moving my fingers from the home row.  No Mac and no Mac user user should be without it.  It’s that good.  I wrote about LaunchBar at KPAO.

Favorite text expansion tool: Typinator

I’m very judicious when it comes to adding launch-on-boot utilities to my computer and so it was with skepticism that I tried text expansion programs after reading an article on the topic.

Text expansion is when you type something short and it’s expanded into something long.  It’s the sort of thing that you don’t see the need for until you try it.  But I gave it a shot and the more I used it, the more SSNiFs emerged:

• Expanding frequent but hard-to-type phrases.  Typing “pvo” automatically gives me “ProductVision.org”
• Correcting typos. “teh” becomes “the”.  There are many many of these pre-built into Typinator.
• Expanding boilerplate: “tbr” changes to “Thanks and best regards,”
• Date and time stamping.  I have these two adjacent keys: <;’> return the current date in this format: “12/30/08″, the opposite sequence <’;> give me this format: “081230 ” (which is great for prefixing document and folder names!)

Now I’m pretty dependent on it.  I tried a few text expansion tools and I think there are multiple quality products that could work, but I settled on Typinator.

Instant messaging client: Adium (free)

Just one free client handles all the major services.  I switch to Skype or iChat when the need to send documents, talk by voice or by video chat arises.

Favorite tool for getting things done: OmniFocus

OmniFocus puts my scattered brain on track, and helps me juggle a dozen projects.   When I have a productive day, OmniFocus usually had something to do with it.  OmniFocus is always running, so I have it auto-launch when I boot.

<whine>OmniFocus is faithful to Robert Allen’s seminal book, but a bit too faithful.  Major wishes: 1. Help me estimate time it will take to do a project  2. Help me plan my day and my week.  3. Make a usable iPhone version.  (Despite the tuning tips, it’s simply too slow to accomplish tasks like checking the list or adding something, which need to be instantaneous to be usable.  The comparison points are paper planners and the PalmPilot.)  4. Don’t require a context; 99% of what I put in OmniFocus are things I do at my computer, so Dave Allen’s contexts are not very useful to me.</whine>

Favorite handheld PIM/communicator/entertainment/information device: iPhone.

The word iPhone is a misnomer.  It would be like calling a car an iCarRadio.  The phone is just one of several things it does, and for me, only about 10% of what I use it for.  I noticed recently that over the course of a typical excursion across the city I used 8 different apps: Google Maps with GPS to get me to the appointment, email to see if a friend responded to a coffee request, SMS to confirm, Yelp to find a coffee shop, phone to finalize, NYTimes, Facebook and Wikipedia to catch up on news while I waited, photo app to grab a snapshot of my friend.  These were the scenarios we envisioned circa 2000 when I contracted with Palm, and they have now come together in a usable package.

I’ve ranted about the iPhone and criticized its inefficient UI and lack of needed buttons.  It’s not the best phone in the world, but it is by far the best multi-purpose handheld computer and communicator.  I think it is worth the high monthly cost (but I can’t say for sure, because I can’t bear to look at the bill).

Oh the most frequent apps that have bubbled up to my home page are, from top to bottom: iPod, Settings, App Store, Safari, Clock (for alarms & timers), Zenbe lists (shared shopping list), Google Maps, Mail, NetNewsWire (Offline RSS reading.  Syncs with my desktop RSS reader.  Outstanding!), Facebook (which I think of as Headline News of your friends), NYTimes, Google, Wikipanion, Say Who (voice dialing) and OmniFocus (which I’m going to demote soon because in the 2.5 minutes mine takes to launch I’ve completely forgotten what i needed to record.).  In the grey bar I have Phone, SMS, Camera and Calendar.  (Sure wish I had physical buttons for accessing those items at any time, like the Palms!)  My page 2 apps include Pandora (great!), Instapaper (great!), Weather, Stocks, Twinkle, Yelp, MoMuni (San Francisco transit), Stanza (eBook reading.  Great!), Tip and Calculator.  I have four more pages of apps I never look at.

Favorite Keyboard: GoldTouch

As I write this, my feet are up on the desk, I’m reclining comfortably with my keyboard in my lap.  (I wonder why the world hasn’t discovered that the lap is such a comfortable place to put a keyboard.)

The Goldtouch keyboard is divided into two halves that articulate around a ball joint to match the angle your wrists.  Your hands, arms and shoulders are in a natural position. If you have, had or are bound to get repetitive stress injury (RSI) you will appreciate the difference this makes.

[ GoldTouch Keyboard on Amazon ]

Macro Expander I use: iKey

Who wants to get into programming macros for productivity boost?  What a drag.  Well, if you are working 2000 hours a year for five, ten, fifteen, years, that’s 30,000 hours of working at a computer.  It’s worth taking a few of those hours to learn how to use a macro program.

I don’t think I’ve actually programmed a macro in over a year, but I use them daily without even being aware of it.

Whenever you think,  “boy, I wish all programs would standardize on one key for that operation” or “boy I do that operation 100 times a day; I wish I could just hit a command key for that function” then you have an opportunity to fix the issue yourself with a macro program.

Here are some macros I use:

• Globally assign F3, F2 and F1 to Cut, Copy and Paste.  This is a wrist saver.  You do these operations dozens or hundreds of times a day, and curling your thumb under your palm to hold down the command key and pressing V, C or X is a contortion that hurts if you do them thousands of times.
• Hide the frontmost app by pressing F6.  (Deceptively useful!)
• Get each app to agree to increase or decrease text size using the same key
• Get each app to agree to paste and match style using the same keystroke.  (Every app has this feature but they all seem to use different keys for it.)
• Disable Cmd-Q in Safari, which I would inadvertently hit when typing Cmd-W to close a tab.  That was bad because I’d lose all my tabs.  To quit I do it through the menu.
• Get each app to agree to use standard text editing keystrokes (next word, end of line, etc.)
• Copy and paste an object’s style using F5 and F4.  Super helpful.  I use this a lot in Inspiration.
• Paste a date stamp in various format.  This saves not only typing but having to look up the date.  You can also use text expander for this.

[TIP:  I prefix all my documents with the date in the format YYMMDD (for example, "081231 Mydoc.pdf").  It lets me sort reliably by the date I assign, and carries the critical meta-information of when the document was produced right there with the title.  The latest documents in a project folder are always at the bottom (or top if you prefer).  When you search for a document, the title tells you immediately whether it's a day old, a year, or five years old.  Last Created/Modified/Opened dates have never been reliable, but this is.  I've been doing this for 10 years and it's invaluable.]

I happen to use iKey for my macroriffic needs, because it worked when I needed it.  But I am glad that I don’t have to edit my macros very often, because the UI is not as easy as it could be.  I’m not going to switch now, because I have something that works, but I suggest you read some up to date reviews and see what today’s best product is.

Favorite tool to tell me how much time I have left: Pester (free)

This is another obscure but useful tool.  All it does is tell me how long I have left to work on something.  To set it up, just click the icon and say how many minutes, or what time, you need to stop.  You can set multiple events.

Pester is really useful to get things done and leave time to prepare for for the next activity.

[Design to steal: What would be better is if iCal automatically showed you in the dock icon how many minutes were left until your next appointment.  It would then be a hands-off affair.]

Favorite system monitoring tools: ActivityMonitor and MemoryStick (free)

In a perfect world you would never have to think about your computer’s status at all.  Just your work.  Apple’s out of the box experience pretends that the world is perfect, and it’s difficult to see how the machine is dealing with all those apps you have open and all the tabs you’ve got going in your browser.

But the world is not perfect, and we have to be cognizant of when we are asking our computer for too much.  Before launching that phat Adobe app, it really helps to know if you should close something else first.  And if the fan is coming on and the machine is getting sluggish, it helps to know that the CPU is sweating on some lame Flash component in a Firefox tab you opened three days ago.

The top of my dock showing Finder, LaunchBar, Typinator, Pester, Activity Monitor, MemoryStick, Dictate, OmniFocus, Adium

My dynamic duo of system monitoring tools, which I have set to open automatically on launch and which are always visible in the dock:

• Activity Monitor, set to show CPU activity in the dock. (ActivityMonitor can be found in your Application/Utilities folder.)
• MemoryStick, an obscure little utility that reflects how much RAM is available.  When the sliver of green gets too small, quit something you aren’t using or close some browser tabs to free up some memory.

MemoryStick bings at you when your system starts paging stuff out, meaning you’ve maxed out your RAM and it’s chugging along swapping memory to hard drive.  (I set mine to be consistent with the colors you see in System Monitor tab of Activity Monitor.)

The number represents the number of page files you have.  If this gets to be 6 or 8, poor you, you probably ran Windows.  Gigabytes of your hard drive is now devoted to page files.  To remedy, reboot.  (Boo!  Can this be done without rebooting?)

Favorite speech recognition:  MacSpeech Dictate (or Dragon NaturallySpeaking for Windows users)

[Update 9/11/09: I must put my recommendation for Dictate on hold.  The current version, v1.5.2 crashes and hangs so much as to be literally unusable.]

Speech recognition hit a threshold of usability two or three years ago with version 8 and 9 of Dragon NaturallySpeaking.  Speech recognition really works, and it has been a wrist savior and productivity booster.  The bummer is, it has been a PC-only product all this time.

Because I was writing specs and a book about product vision, my need for wrist relief was great enough to find some way to make Dragon work for me and my Mac.  I hacked together a solution.  It wasn’t pretty.  (spoken word -> headset -> Mac -> Parallels Desktop -> emulated Windows XP -> Dragon NaturallySpeaking.  Text output goes from Dragon -> VNC client on XP -> VNC server on the Mac -> foreground Mac app.)  Buggy, flaky, but workable when I had serious prose to churn out.  It was a pain, but less of a pain than RSI.

After years of waiting, my #1 UI wish for 2008 was granted, and the speech recognition engine for Dragon NaturallySpeaking was ported to the Mac in the form of MacSpeech Dictate.  Dictate has only the engine of NaturallySpeaking, not all the nice bells & whistles, so reviewers who knew Dragon complain about it and give it lower stars than it deserves.  It’s not perfect, but it works, and it’s hella better than my jury-rigged emulated solution.

Incidentally, my input is multi-modal.  I speak prose to the machine, and do corrections and editing with my keyboard and mouse.

When I worked at Microsoft in 1989 few of my co-workers (professional software engineers) could touch type; now most people can.  Today, few people speak to their machines, but eventually, most of us will.   Speak to a computer is not as intuitive as it sounds.  It involves training, practice, and patience, but the investment pays off, just like learning to touch-type does.

Here’s to more investment and even better speech recognition in 2009 and beyond.

[ MacSpeech Dictate at Amazon ]

—

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.

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.

Parallelized state transition diagram made with OmniGraffle

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.

Stone Create is excellent for wireframes and mockups that integrate GUI widgets and bitmaps. (click for larger view)

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 articulate issues, brainstorm alternatives and weigh the pros and cons graphically.

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.

For years, I have sketched out a simple diagram to explain my answers to these types of questions.

This diagram, the Design Pyramid, suggests that the design we can see and touch is just the tip of the iceberg.  It is supported by layers of information and prerequisite decisions that are largely invisible to the naked eye.  The four layers of the Pyramid are, from top to bottom: Design, Requirements, Vision, and Understanding.

The key premise of the Design Pyramid is that each layer can only be as good as those below it.

The Design Pyramid clarifies why many products and designs fail, and suggests what should be done differently in the product creation process to achieve breakthrough products.

Let’s go through each layer.

The Design Layer

The Design layer is simply the solution to a design problem.

The solution takes different form depending on what is being designed.  For software products, the solution includes the user experience architecture, the interactions, conceptual model, and the internal software architecture.  For a process design, the output is a process map.  For public policy, it’s a legislative bill, and so on.  In all cases, the design is the solution to a functional problem.

The Requirements Layer

Design requirements are detailed criteria that describe what the solution must accomplish.  They provide enough detail to give the team concrete guidance for designing and building the product, and for knowing when it is done.

Requirements can sometimes be a big, onerous deal.  When that’s the case it’s often because its authors are trying to do more than one thing at at time.  They are trying to write down requirements while they still figuring out the vision for the product.  Trying to do them both at the same time is like trying to paint a room while still deciding on a paint color.  It’s a lot easier to paint if you only have to worry about painting and not color schemes.

If the vision is flawed, incomplete or not properly thought through, the requirements will be difficult to write.  And they will be bound to shift radically, because the flaws in the vision can’t be swept under the rug forever.  Eventually they will make themselves known and will force the team to make major course corrections.

When the vision is clear and correct, the requirements fall out easily and are much more stable.

The Vision Layer

If you’re going to cross the sea in search of riches, it helps to know where you’re going, and it helps to know that where you are going will be a worthwhile destination.

A product’s vision is like the destination port.  It establishes the direction in which everyone should be paddling.   If the destination is not well-defined, at best, time and energy will be wasted making course corrections.  (If the new direction is chosen by the same means as the original destination, I would start to worry. Who’s to say that the new destination is much better?)

In the worst case, the ship runs out of supplies and never I makes it.   With a badly chosen destination, the journey has actually failed before it begins.  It couldn’t have made it no matter how hard everyone paddled.

And so it goes with products: a faulty vision dooms the initiative before it sets off.  When you see requirements shift repeatedly, or when you see a product get canceled just before or after launch, it’s a sure sign that the vision was fundamentally flawed from the get-go.

How can we translate the idea of product vision in more concrete terms that we can do something with?

Think of it this way.  Any group of customers has not one, but a whole host of needs.  We can’t possibly solve all of them, especially in the near term.  Before even attempting to solve them, we must first select which needs are worthy of solving, and we need to formulate the set of needs into a cohesive package.

This is the purpose of product vision process.  The vision establishes which problems the design should solve.  (This is equivalent to establishing which profile of customer needs we should address out of the universe of possibilities.)

That is the vision layer.  Where do the flaws in the vision arise?  They often stem from missing or erroneous assumptions, which reside in the Understanding layer below.

The Understanding Layer

If the vision is the destination port of the journey, then our Understanding is the map of the seas and ports.  We need the map to peruse our destination options.

This is where the Understanding layer comes in.

The Understanding layer is made up of pretty much any insight that help us come up with a good solution.  That is a pretty broad definition.  In practice, there is a core set of elements that we need to understand no matter what we are designing — a software product, a business process, a building, or a piece of legislation.  We need:

1. Understanding of stakeholders: who the customers and users and others?  How they naturally segment themselves, so we are clear on who needs what?
2. Understanding their specific situations and needs: we need to understand not only what matters to them, but why it matters.  Achieving the “why” is what lets us attain the deeper empathy with the stakeholders that lets us put ourselves in their situation.  It’s what allows us to interpolate and extrapolate beyond what they tell us they need —  beyond what they may even be capable of telling us — to what they actually need.  And this is what lets us create things that customers will want, but which they cannot anticipate  (Hint: this is a key source of innovation!)
3. Understanding of the competition: It does us little good to address needs that are already solved well enough by the competition.  We need to understand where the competition is now and where they are heading.
4. Understanding of the status quo:if we are improving on an existing product, we need to get honest and lay bare its limitations, devoid of spin.
5. Understanding of technology: Technology is not an end in and of itself.  It’s a means to addressing important unmet needs.  We need to understand the nature of current and emerging technology so we can connect what is needed by customers with what is possible thanks to technology.

How well we understand all of these things determines the upper bound on the quality of our vision.  A shallow understanding begets shallow, unimpressive product visions.  Breakthrough insight leads to breakthrough product vision.

Now that we’ve touched on all four layers, let’s use the Design Pyramid to get back to some of the questions I opened with.

Why is great product design so elusive?

Each layer of the Design Pyramid is only as good as those below it.  If the requirements don’t make sense, then neither will the design. If the vision is flawed, the design will be irrelevant; the product is solving a problem that is unimportant to customers.  If the understanding of customers and their needs is flawed, it will misinform the vision and undermine the whole effort.

Great product design is elusive not because of flaws in the design effort but because of inadequacies at the lower two levels of the Pyramid: Understanding and Vision.

The vision layer gets short shrift in common practice, despite its profound influence on the outcome.  Organizations have teams that are are eager to jump in the boat and get paddling, and they rarely allot time to properly draw a map and chart a course to a worthy destination.

Some organizations do put effort into arriving at breakthrough product visions.  But without clarity on the ingredients, without a good conceptual model and process, the efforts often fall flat.  (This is something I help clients with!)

Product vision is the missing discipline in product creation, and a ripe area to be matured over the next ten years.  (I’ll have heaps more to say about this in the coming months!)

Where does the Design Pyramid apply?

The power of the Design Pyramid is that its lessons apply to all types of functional design.

I’m using the term “product” in this article, but the Design Pyramid also applies to any functional design problem including interaction design, information architecture, services, database design, new process workflow, retail store layout, public policy, architecture, legislation and more.

All of these type of functional problems have the same intrinsic nature: we need masterful understanding of customers, competitors and technology to sculpt a vision of a problem with solving.  The high-level vision needs to be translated into concrete and actionable requirements so we know the characteristics of a “good” design.

[nb. Designs that are primarily about aesthetics, emotions, taste, and fashion operate under a different set of rules.  I would not look to the Design Pyramid for guidance on composing a song, writing a poem or painting a mural.]

Where do breakthrough products come from?

Breakthrough product ideas come from from breakthrough understanding.  The spark happens at the understanding level and bubbles its way up the Design Pyramid, inspiring the vision that guides the requirements that guides the design.

Take, for example, the overused example of the iPod.  Apple noticed that early batch of MP3 players played music well enough, but getting songs on the device was excruciatingly slow over the USB 1.0 interfaces common at the time.  Plus, the quirky, proprietary music transfer software was hard to manage.  This was a real problem.  The solid-state devices of the day had such small capacity that unless you liked listening to the same three albums over and over again, you had to spend a lot of time transferring new music onto the device.  Because of this cost, MP3 players often ended up gathering dust in a drawer.  These were Apple’s core insights, at the Understanding level of the Pyramid.

The iPod vision was sculpted to address these problems: make music management easy with great desktop software (iTunes); make transfers fast (using Firewire) and make transfers rarely necessary (with a high-capacity, hard-drive based player). Beyondthis, Apple understood that the that gadgets you are seen with in public are a reflection of your image, and that an MP3 player should look and feel cool.

Their easy, fast, high-capacity, cool looking iPod was a breakthrough product that virtually owned the digital music market through its entire arc (until smartphones and pocketable computers like the iPod Touch relegated the single-purpose music player to niche product).

If you examine other breakthrough innovations (see the product vision hall of fame), you will find this same pattern: key insights into customer needs (understanding) leading to radically different problem definition (visions), translating into unique requirements.  When a good vision is followed through with excellent design (not to mention engineering, marketing, sales, distribution and support… you know, the easy stuff) the stage is set for a breakthrough product.

There is heaps more to say about product vision, so stay tuned!

Philip Haine is principal of Product Vision Associates, a product innovation consultancy that helps product leaders and their teams envision new, breakthrough products and reboot older ones.  To follow him on Twitter click here.

Thanks to Michael Poremba and David Cortright for reviewing earlier drafts of this article.

[Updated 10/14/09 - Edited for clarity]