I'm writing documentation for some interactive Ajax user interface but instead of writing everything in words I would rather provide diagrams that are faster consumed than whole paragraphs of text. I did provide page navigation flow diagram but that's very high level before you drill down to individual pages and their inner workings.ExampleSuppose I have to document a typical search panel:is collapsed by default and can be expanded on clickhas basic search fields that provide basic search criteria over my model entityhas advanced fields as well that show when one clicks a particular link which expands search with additional fieldshas two actions Search and Reset that are pretty much self explanatory, but have particular behaviours attached to themI know you will say that this already is documentation, but it's usually not this simple and trivial. Search panel is just an example.I can see that most of my interfaces (or interface components) need two types of documentation:properties related to contained controls (i.e. drop down field with these and those values of which that particular one is selected by default)actions and behaviours that describe what happens when user interacts with controls related to those propertiesWhat would be the best diagram or documentation format to describe these kind of interactive interfaces so that it's easy and quick to consume by implementers?
How to visually document interactive user interfaces for fast consumption
documentation;diagrams