FINALS 12.14.09 Monday : 3:00-5:00 pm

Durning our finals time you will be presenting to the class
your final Flash Prototype.

I will be collecting your Flash File (.fla) and the Flash Player File (.swf). Please title and save the files with your lastname.

If you need suggestions on how to present all of your work from this semester in a portfolio, I am around next semester to advise.

High-Content Storyboard Due Monday 11.23.09

All content and visual attributes of your online environment must be shown in your storyboard. These are in sequence to your user goal that you identified with your persona development.

Storyboard PDF (one page only of the entire sequence of actions)
Storyboard shown in sequence with annotations. Annotations are the detailed notes that you have been working on since your wireframes. These outline USER INTENT (user path/actions), SYSTEM BEHAVIOR (what the system/environment does), and TRANSITION (how does the system/environment reveal to the user that they are leaving a specific moment in the site). ALSO, annotate the comments and results of your simple user-testing where applicable (your questions and the results). Use a cursor to indicate/represent the user. At the top be sure to title it with your User Goal and your name.

If you worked this out using layers in Illustrator, you can take a screen capture (option + apple/command + 4) of each step, with your annotations off to the side, then lay this out into a flat overview of the entire sequence.

Storyboard Quicktime Movie (a movie showing the individual moments of your story board, in sequence)
No annotations are needed for this deliverable. Take screen captures of your storyboard and using JPGs or PNG files put the screen captures into iPhoto and create a "slideshow". Adjust the settings (1-2 seconds and NO transition) and export it as a Quicktime Movie. The user/cursor must be show in this.

Project 2: Part 4: High-Content Storyboards

Your high-content storyboards should show the design of your online environment and the content within it. Continue to develop and annotate user and system interactions and begin to think about transitions.

Using Illustrator design your storyboards in one of the following proportions (1280 X 720 pixels) or (1280 X 1024) pixels. Keep your design files organized as you will be bringing these into Flash. You can choose to work either in multiple layers or in multiple frames. Your annotations should be shown in this file as well.

You will use a print out of your storyboard to conduct a simple user-test with someone that has NOT seen your work or heard of the project (not a peer from the class). To do this you will ask specific questions at specific moments in your site. Craft these questions well so that it will begin to reveal how someone might approach your site.

You will present this storyboard as a PDF and in a sequence to the class. This must show a clear user path. While presenting share with us how your simple user-testing informed some decisions you may or may not have addressed.

Group Discussion : Wireframes

In your small assigned groups share your user goal along with the sketches/storyboards showing ideas for interaction in your online environment. When sharing your sketches be sure to articulate the reason why you made a particular design decision.

"One important difference between interaction design patterns and architectural design patterns is the concern of interaction design patterns not only with structure and organization of elements but
also with dynamic behaviors and changes in elements in response
to user activity."
About Face 3 pg. 156

As a group begin to identify patterns in the structure and organization of the environment as well as patterns in object and user behaviors. Ask the following questions of your own work and your peers:
-are the patterns being set up visually consistent?
-are the behaviors consistent?
-do the patterns support the goal of the user?

Working with the notion of "elegant interaction design" from
the About Face 3 reading ask the following questions:
-are there any elements or behaviors that can be taken away?
-is every element and behavior necessary for the user
to meet their goal?

Project 2: Part 3: Low-Content Wireframes & Style

Project 2: Part 3: Low-stakes Wireframes & Style

Now that you have developed a user persona with a specific goal, begin to sketch how your user meets that goal in an online environment. Focus on the interactions within the environment: what the user is doing, how the system/environment responds or behaves in response to the user's actions. Annotate that these interactions along with ideas of what the content will be. These annotations must be clear enough so that one can read your wireframe notes and understand what is happening without you present. You can choose to make analog or digital wireframe sketches.

You are NOT working on what the environment "looks like" yet. These are low-content wireframes that begin to layout user paths, system behaviors, and patterns of interaction. The style and content will come in the next round of storyboards.

After you send you wireframe to me for review, you can start to think about the "look and feel" of the environment. Develop a mood/style board that gives a feeling of how your environment will be designed. Show typography, illustration and photography style as well as color palettes.

Project 2: Part 2: Project Brief/Persona

Project Brief Step 1: Setting the problem
and Defining an Audience

Using your activity diagram and the annotated "Perceptions/Interpretations", "Evaluations" and "Proposals" begin to determine ways in which the online environment can offer affordances that the physical environment can not.

Along with setting a problem, your project brief will define a range of audiences you foresee as possible users. Identify 3 different audiences. Outline these audiences in terms of your establishment/organization's physical environment, refer back to your activity diagram to help you generate these possible audience scenarios.

These are specific questions to answer in your Project Brief. Answers these questions for at least three different audiences. Bring a draft of your brief to your midterm meeting.

Goal:
What is the end goal of the audience member's search?

Information Needed:
What information do they need to met this goal?

Motivators:
What is motivating this particular audience
member to perform their search?

Problem setting:
What are the problems or obstacles they may encounter during their search in the physical environment? What factors play into this? Consider the variables in audience knowledge, past experience, and motivators that make this a problem.

Affordances:
What can the online environment provide to this particular user that the physical environment can not? How? Be specific.

Project Brief Step 2: Creating a "Persona"

Now that you have identified three possible audiences, you need to select one to develop further and make final decisions in regards to the Goal, Information Needed, Motivators, and Problems. This will be the audience you are working with in the creation of your online environment. You are essentially creating a "Persona". See the reading from About Face about the use and structuring of personas in interaction design.

Project 2: Part 1: Activity Diagram

Activity Diagram Step 1: To be completed by Wednesday 10/14

Choose a search that takes place in the physical environment of your establishment/organization and perform do the search. Document any aspect of that search and create an activity diagram showing the steps in sequence of the activities you took to meet your goal. Do this documentation through use of photos and/or notes. The diagrams can be designed in whichever way you choose (InDesign, Illustrator). Have a rough diagram for class on Wed 10/14.

Activity Diagram Step 2: To be completed by Monday 10/19.

According to Norman's Action Cycle (from the last reading assignment), you started out with a GOAL that initiated a search of some sort, that was translated into an INTENTION setting forth a sequence of ACTIONS that were executed in the PHYSICAL ENVIRONMENT, you are at the point to begin EVALUATION.

Now that you have documented your search AND started to diagram the sequence of actions, add annotated notes to your diagram initiating the EVALUATION step in the Action Cycle. Look at each ACTION you took throughout your search experience annotate the following:

-Perception/Interpretation: indicate your expectations for what you thought would happen in your actions and interactions with people/objects/places (your activity diagram should show what really happened)

-Evaluation: problems, needs, or obstacles that inhibited your search distracting you from meeting your goal faster or easier

-Propose: annotate possible design interventions, moments where design could possibly alter, change, enhance the experience

FINAL DIAGRAMS DUE MONDAY 10/19 at the beginning of class. We will be reviewing each in a class critique. Diagrams DO NOT need to be printed. Have PDF of the diagram to be projected.

Project 1: Part 2: Interactive Map

-think sequentially, in steps
-what information is revealed when, what information stays, what information goes away
-you are making your map and information into
simplified nuggets of information
-you are the only user, this is not for an audience or anyone else to use
-how do you know where you are, where you are going, and where you are at in the sequence of information?
-identify what you click, rollover

Project 1: Part 1: Research

Begin to research your topic.
On Monday come to class prepared to show evidence of:

-connections, patterns in information gathered
-broad to narrow concepts, ideas, topics
-lists
-what are you finding out?
-what is it about the location/topic you chose that interests you?
-definition of terms and concepts related to your topic
-identify missing information you need

Do not start to construct a concept map on the computer...yet. Use analog materials to begin your mapping process.

Concentrate on the place, environment, system, activities, people, etc.