System+Maps+and+Flow+Charts

=Functions, System Maps and Flowcharts= In order to plan our new interactions, each group will need to develop the process and states as flowcharts and system maps. By putting it down on paper, as both a process (flowchart) and a series of interface states(system map), we can design the functionality of the design.

Functions
Functions are the things we want our system to do and it is best to start from a user oriented way. For instance, if you want your users to explore works of art in the database, think of a list of verbs that would describe this: //read, look, compare, store, study, define//, //capture, question, share, write, evaluate, clarify, inspect, review, survey, prioritize, recommend, listen, critique, compile, arrange, interpret, connect.// [|Action Words]

These words will help you decide on what function are appropriate. For example, if you decide //evaluating// is a needed activity, then perhaps the system may need: //This does not have to be complicated ; design for simplicity ...easier said than done!//
 * 1) a way of examining the art in detail (zoom and/or selection)
 * 2) writing notes about the experience (text eg. tagging)
 * 3) capturing the image (save eg. )
 * 4) sharing (publish eg. messaging)

Flowcharts
The flowchart is used to design a process, whether it is buying a cup of coffee from Tim Horton's or ordering a book from Amazon. Each stage of these processes had to be designed in order to develop the desired outcome (a happy coffee drinker or reader). This type of activity flow can be broken down into a series of //tasks// to understand that include decisions, conditions and results. It works to break things down in incremental steps so we can understand the entire process and not assume or leave out important details in the procedure.

For this project, try not to get to caught up in the technical details (eg. log in + password loop) but rather focus on the overall process. The details can be filled in later, but try and come up with the important tasks that make up the process.

A good strategy in describing your process flow will be using a scenario approach. Using a narrative to describe the process a typical person might experience, it allows the designer to imagine the possible needs in specific situations. It helps illustrate the process and interactions without having to explain all the details of every possible situation.

The example below is a flowchart showing an ordering process in a non-hierarchical manner:

Think of a scenario to describe this process ie. a person buying a book from Amazon.

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.

Think of a system map as a way of embedding the process and interactions into an interface. For instance, if your team decides it needs a recommender function to support and enhance the experience, then :
 * How does that appear in the interface? (dropdown list, type ahead, text field, etc)
 * What are the sequential states of the screen at various stages in the process?

[|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. They should be very lo-fi. 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.