Flowcharts+and+System+Map

=Flowcharts, System Maps and Wireframes=

=Flowcharts= In order to turn our requirements into specific tasks, we need a flowchart to design the user experience. A flowchart is not a content-based (like a site map), but focused on the process or sequence of actions needed to support the desired activity. It is different from a site map, in that time is the added element the information structure

Some examples of flowcharts: [|Baseball Project] [|fc_question.pdf] [|flowmaps.pdf] [|fc_studentpda.pdf]

Here is the link to [|jjg visual vocabulary] where it explains the different symbols used in the system map and provide a library of the symbols.

=System Map= A system map is taking the flowchart one step further.The system map uses interface screens (called wireframes) to describe the intended user experience for a particular task. By using wireframes, the designer can get a good sense of what functions need to be present in a procedure being conducted by users. The designer can also make effective decisions in regards to interface widgets (ie. scrolbars, menu buttons, etc) and layout of all the elements on the screens needed to present the desired content.

[|Student example] of system map using wireframes

The wireframe is used as a development tool for building graphical user interfaces (GUI). While it is a visual representation of what the user may encounter, it is still a skeleton. This means there are no detailed visual elements like photos or typographic treatment. Wireframes are used in the design process to assess the the function, content and structure of the GUI. Wireframes are effective because:
 * Wireframes**
 * allow for flexible changes in the design stage
 * good communication tool between team members and with client
 * concern with “how it works” not “what does it look like”

[|Strange Systems] is a site that explains more about wireframes.