Documenting interaction design on UI level 23:12 on Thursday

Documenting interactions for Flash projects can be a pain, and I guess the same goes for AJAX-driven websites (or whatever the acronym of the day is). I regularly do it by writing and drawing notes on printouts of the user interface, yet I always forget to ask the client (usually a web design company) to bring the printouts to the meeting where we review the interface desings.

My very low-tech method is to draw an outline on the prints around each interactive screen element. After that I go through each element, writing down what’s going to happen when the user:

  • rolls mouse over the element
  • rolls mouse out the element
  • clicks the element

In some cases it might be appropriate to also think of different dragging and keyboard events.

Another important thing to consider is how the elements will transition in to and out of the screen. For documenting the transitions I usually have a separate set of printouts. Again I go through all the screens with the designer asking how the different elements will be moved, faded, or otherwise transitioned in and out, and if there are different transitions based on the next or previous screen.

These exercises will give me a good idea of how to build the thing in Flash; ideas about a working combination of movieClip hierarchy and ActionScript class hierarchy, should the transitions or visual effects be coded or animated, and so forth.

One Response to “Documenting interaction design on UI level”


  1. Jasmo Says:

    What comes to AJAX it’s cooler to speak about Web 2.0 instead. :)