Documenting interaction design can be a little tricky. What the designer is trying to convey is form(visual) and function(behavior). Often what needs to be articulated is the movement and actions of the user. Movement isn’t easily translated into static documents. Showing screen to screen interaction is usually done with a flow diagram:

Flow diagram

There are some established tools for creating these (Visio, OmniGraffle, Illustrator) and a few libraries that make it easy. I prefer Jesse James Garrett’s IA Visual Vocabulary

But when it comes to on screen events the practice of documentation and it’s intended benefit aren’t as established. Some examples are:

Callouts: A document with boxes of text which describe the interaction on the screen. e.x “User clicks “submit button” – open JavaScript Alert box “confirm all changes”

Behavior tables: Similar to above but instead of cluttering the document with boxes the designer uses indicators to denote interaction and uses a legend to fully describe the function.

Animated Gifs/Flash: These are a bit more labor intensive but they can be very useful to show the exact interaction (blind open 1.2seconds after click). Creating these artifacts is also a good exercise for the designer so they can explore different options and see the interaction before it has been coded.

Prototyping: This is probably the most time intensive but usually yields the best results. If done well the up front design work can be integrated into the product. There are some great new tools (WPF and Flex) being developed to make this process easier with less “throw away” work.

As interfaces become more complex and the user experience becomes more of a differentiator in the marketplace, designers will need to adapt to more robust and integrated design tools to remain competitive and relevant.