For starters I recommend looking at this excellent article from UX Matters which talks about how to extend Jesse James Garret’s visual vocabulary to reflect rich interactive applications which recommends highlighting the interactions as synchronous (requiring a page load)and asynchronous (happening within the page). To quote the article
For user interactions that do not require a page reload, asynchronous
RIA technology—use an arrow with a dotted line like that shown in
Figure 3—Arrow representing an asynchronous state change
Synchronous State Changes For user interactions that require an entire page to reload, synchronous interactions, use a single-line
arrow, as shown in Figure 4. This is the standard arrow Jesse James
Garrett uses in his visual vocabulary.
The article further gives an example of how the visual vocabulary could be extended and used to show a login process for a site.
That said, I generally find it useful to create interactive prototypes using axure which allow users to walk through the different interactions and I use an interaction flow diagram to highlight key interactions in the page which will be of interest to the development team. Other options which we have exploreed are
- Creating a walk through video of the interactions to show clients the different functionalities
- Doing a live product demo to show the different use cases and documenting the important work flows
- Creating story boards for important user flows to show the different interactions
- Treating it like a flow design where I use flow charts to map out the flows.
Here are some articles which you might find interesting
Interactive Wireframes: Documenting RIAs
Stop designing pages and start designing flows
Wireframes and Interaction Design Documents