How do you specify UI interaction to data mapping (server side to client side)?

Question

For a given data model and business logic (which processes /extracts that data), how do you specify a UI to display / interact with that data in a way that a developer can create it from.

A trivial example: would be that that a forename, surname and sex are stored in a database along with signUpDate. The business logic exposes a fullName property (made up from forename + " " + surname).

The UI requirement is that the UI should display a fullName label, and an man / woman icon depending upon the value in sex. When you mouse-over the label, it should show the signUpDate value.

How would you specify this such that

• the customer can understand what is being displayed, user will interact with the ui (eg the mouseover)?
• the developer can understand where the data is coming from and that it changes dynamically depending upon the data?

Currently we're using a combination of Balsamiq, ER diagrams, Sequence diagrams, data model diagrams and words to describe complex layouts / data mapping / interactions.

Edit: Specifically in terms of RIA's rather than html based websites (think Silverlight / Flash / GWT)

Answer 1

Axure is pretty awesome for this -- you can design your wireframes and do interactive elements that create interactive HTML clickthroughs. Costs though.

Answer 2

The best way to specify interaction is with an interactive prototype. Since a prototype is as close to the real thing as you can get, it removes almost all layers of abstraction between the design and the final app, making it easier to communicate how things are going to work. This will significantly boost customer understanding. It will also allow you to test things you're uncertain of (since you're asking about how to specify things such that the user will interact with a mouseover).

To show developers states and how those states change, your prototype model should support those states and allow the person viewing the prototype to activate different states of the app. You can do this using mock data (and it should be actual mock data, not lorem ipsum filler) and possibly simple templating allowing for modality.

The format of the prototype doesn't need to be the same as the final product. It just needs to represent the interactions in the same way the final product will. So you can use HTML, for instance, to create your prototype, even if your final app will be a desktop client or Silverlight app.

All of the above is supported by the product we're developing and I recommend it for the situation you're describing.