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.
