How to read a wireframe

When creating prototypes we also create a Functional Specification which is an equivalent of an offline version of the prototype with some additional information we can’t include in the prototype.  Each page/module in the prototype will result in a wireframe.  Here is a explanation on how each wireframe page is laid out.

1.Header -  Contains the title of the page/module and a summary of what the page/module is intended to do.

2. Wireframe - Image of the web page with numbers(Footnotes) overlaid.

3. Action Response Table - Consists of:

- Footnote: Corresponding to the number on the wireframe

- Label: Name of the element 

- Action: When either the user or web site triggers an action.

- On click: the user clicks on the element using their mouse

- On load: when the page loads in the users browser

- On mouse over: the user moves their mouse over the element but hasn’t clicked

- On Selection: used on form elements (dropdown list, check box, radio buttons) to indicate what happens next once a selection has been made.

- On Submit: used when the user has clicked on a submit button on a form.