IW : project 4 : FINAL Presentation

Your interactive environment will be shown through the use of a presentation video.

Include the following pieces of information in your video:

—introduce your cuisine/global community through what you learned during your research process, what you found interesting etc. “Spanish cuisine has a history rich in tradition and has influenced other Latino cultures such as Puerto Rico, Mexican and Cuban. The secret to making Spanish cuisine authentic comes through the selection of specific ingredients such as olive oil and spices, etc.”

—introduce your interactive environment’s context and the user’s goal.
“An interactive iPad application was created for someone interested in putting together a Spanish themed meal.”

—introduce the tasks the user has already done up to the point where you begin showing the site. “Our user, Ellen, has logged into the Spanish Cuisine Helper application and selected main course as her menu item.”

—Then begin to walk through the scenario of use. Avoid language that says…click here and this happens. Instead say “Ellen needs to find the necessary ingredients in the kitchen environment and begins with items in the cabinet…” The voiceover happens while you are showing interactions.

—Credits: Include your names, Michigan State University, STA468 Interactive Web Design, Spring 2012, and bibliography of info/photos.

Steps for creating your video presentation:
1. Create outline for storyboard, use the list of info from above
2. Write Script to support storyboard
3. Photograph/Source any images you need (for introduction, the more you can take on your own the better)
4. Gather Sound (in addition to voice overs) (optional)
5. Compile all elements in keynote or other software (including your screens)
6. Work out animations of screens in keynote (need animated keynote)
For iphone and ipad, either use actual video of hand interacting (or use a photographed hand) OR, use icons to represent fingers
7. Record Voiceover in keynote
8. Export Keynote as Movie file
9. Upload to Vimeo

EXAMPLES of PRESENTATIONS:
Hooked
Blind Tiger 
Soless

KEYNOTE TIPS:
example of what is possible in keynote
voiceover
animation
more animations

IW : project 4 : for April 17th T

In your group, prepare a site diagram that uses Lynch’s organizational elements of imageability as a way to structure information. Refer to your content diagram and determine what information is integral to an interactive experience that instructs a user on how to prepare an authentic meal. Your interactive experience will also inform the user of the historical origins of the food and preparation processes (plus anything else you feel is fun and relevant). The site diagram should show how the information is organized and how the user will move through the information…what is their path?

After creating a site diagram(s) (you may need to do a few to narrow down to the specifics) begin to create a low-content wireframe and/or prototype. This should illustrate how the user interacts with the information. Remember “low-content” means just that, design details are not a priority, the interactive properties are. Be creative in how you show this, think outside the typical black and white wireframe process. Is it similar to the example I showed in class? Analog sketching combined with digital?

Both the site diagram(s) and low-content wireframe/protoptype is due on April 17th at the beginning of class. At that time I will also introduce the last project objective and that will pertain to how you will present and design the rest of your interactive experience!

Refer to this post for information about Kevin Lynch and the organizational elements.

Kevin Lynch : Imageability

From: Spatial mapping and navigation: physical and online environments
by Rebecca Tegtmeyer
North Carolina State University, 2009

When asked to visualize a city versus a town, we are quickly able to imagine each. Imagining a “city”, we see skyscrapers, crowded streets, various noises and traffic. When thinking of a “town” we picture smaller scale buildings, houses, and parks. When asked to imagine New York City and Omaha, Nebraska, our perceptions shift, based on our past experiences and memories of other cities and towns. However, we would find our way through each city by drawing from these experiences and memories, calling upon the ‘imageable’ characteristics to navigate us. imageability is “that quality in a physical object which gives a high probability of evoking a strong image in any given observer” (lynch, 9).
All cities comprise a certain structure that maintains its imageable quality despite the particular features that construct the city’s overall identity. Lynch’s theory of city imageability is supported by the organizational elements of landmarks, districts, nodes, edges, and paths. These elements construct an underlying structure in any environment that is approached with little difficulty, forming an environment that is legible. A legible environment is one that is made up of parts that are easily recognizable, that has clarity, and can be organized into patterns. We are able to orient ourselves, recognize places of interest, and choose from a variety of paths connecting to locations and people. It involves the daily occurrence of getting from one place to another as we continually interact within our physical environment. This interaction can form either positive or negative ‘environmental’ images, all filled with meaning. Lynch describes an environmental image as the “result of a two-way process between the [audience] and its environment. The environment suggests distinctions and relations, and the [audience] selects, organizes, and endows with meaning what [they] see” (lynch, 6). Our collection of environmental images varies due to our individual cognitive differences and situated context.

elements of imageability
landmark: external to the user, cannot go into, prominence in location, use in orientation, may be isolated, not integrated.
district: can be linked together, observer can go inside of, identifiable from the inside but visible from the outside.
nodes: small points in the city, user can enter, can be several nodes, can carry a theme, focus of a district, can be dominant feature.
edges: boundaries between two kinds of areas or content, can have directional qualities.
paths: may not be identifiable or continuous, user moves along a path through his/her interaction within an environment.

Lynch, Kevin. The Image of The City. Cambridge: The Massachusetts Institute of Technology Press, 1960.

Discussion Thread that answers the question: How might chapter III, The City and its Elements from Kevin Lynch’s book “The Image of the City”, relate to effective development practices of interactive media? from NCSU Digital Imaging course

Kevin Lynch, overview of “The City and Its Elements”, The City Reader: R LeGates & F Stout, 1996

IW : project 4 : Apr 5 TH

For Tuesday 4/3, have the following tasks completed/started:

—begin a google document and/or a facebook group for your group as a collaboration space
—individually begin to research the country and the various cuisine types that are from the region
document and share your research with your group via your online collab. space
—determine a few key dishes that you would like to focus on, eventually you will narrow to one (perhaps each person picks one dish)
—list the ingredients and process for creating each dish
—research origins of ingredients, the dish, the people, influences, etc.
—organize a meal together where you have to prepare it (this should happen at some point during the project!)
—as a group select the one dish you will focus one

In class on Tuesday 4/3 you will be creating a map/diagram of your content, so come prepared!

The final map/diagram is due at the beginning of class on Thursday 4/5 as a digital file posted to your online collab. space and/or blog space.

IW : project 3 : DUE Mar 27 T

Project 3 is due on Tuesday March 27th. The following must be completed before you come to class that day.

Organize your project into a presentation book and export that book as a PDF. Make this 11 x 8.5 landscape and arrange it the way I have indicated here. You must bring to class a printed and bound (stapled, wirobound, other creative ways) booklet and a PDF file of your work. You must also have the PDF posted to your blog.

You will be presenting your PDF in class on Tuesday. Be prepared!

IW : project 3 : for Mar 15 TH

Begin the high-content wireframe of your website. Your low-content wireframe laid out the content and sequence of information, the high-content wireframe will exhibit the visual design. It is expected that your content structure and sequence continue to evolve throughout the creation of your high-content wireframe. Nothing is set in stone!

Apply the “visual look and feel” to your site making decisions about color, typography, positions, hierarchy and image all while taking into consideration the behavior of your persona. Pay attention to how your design decisions are either enhancing or distracting the ease of navigation and comprehension.

Ask yourself these questions while working:

—How will you make design decisions with the persona in mind?
—Are there moments when visual elements are more helpful with navigation than typographic elements?
—What other visual cues invite the user to interact with information? Think of motion qualities…
—With each task carried out in the site, will the user have a sense of place? Will they know where they came from and where they are going?
—Are there tasks that can be carried out on the same screen? Or does the user have to move through several “pages” to complete their goal?
—Consider when the user has control and when the system has control, are there moments when the user path becomes directed by the system? Offering limited options for interaction?

Be prepared to share your high-content wireframe in progress on Thursday March 15th.

IW : project 3 : for Feb 28 T

read “Don’t Make Me Think” Chapter 6, “Street Signs and Breadcrumbs” Designing Navigation by Steve Krug
I will be emailing a PDF of this chapter to the class. You must read it as it will assist you in making design decisions.

begin to structure and categorize what information is needed
Refer to your task exercise and documentation as well as your persona to determine WHAT INFORMATION IS NEEDED and WHEN IS IT NEEDED? Start to visualize this information into a sequence. Focus on the information only at this point.

low-content wireframe
After you decide what information is needed and when, begin to structure this information into an organized layout. Make decisions based on what would make it the most clear and easiest for your persona to use. This is the process of organizing information spatially and determining how the information delivered (via what type of medium, map, video, charts, infographic, etc.). Is it a good decision to have the user connect to other people via a video that they engage with as a passive viewer or perhaps they have the option to schedule a video chat or tour with someone. Maybe your persona type would prefer to have several options or maybe a more directed approach is the solution.

Work within dimensions appropriate for a variety of browsers 1024 x 768 px, your solution is for a web-based application (not for iPad or iPhone). Use Illustrator in the design of your wireframes. Remember a “low-content” wireframe functions as the “barebones”, “blueprint”, “stucture” BEFORE the design phase (high-content). You are showing the structure, sequence, and hierarchy of information along with the navigation. In addition to considering how to categorize information and functions.

You will be reviewing your low-content wireframes in progress
with small groups on Tuesday 2/28

You will be reviewing your completed low-content
wireframes with me on Thursday 3/1

IW : project 3 : for Feb 21 T

Perform an online task through Craigslist:
Each of you have randomly selected a task and goal to be carried out through the use of Craigslist. If you want to make slight modifications to your task you can, but it must remain within the main category of search (listed at the top of your sheet).

Carry out the task through Craigslist, go through all the steps online to initiate and achieve your assigned goal (and task), this includes sending email inquiries if needed to complete your task. Take SCREEN CAPTURES of every step, page, and click you go through to reach your goal and complete the task. Arrange your screen captures into a storyboard-type of layout/sequence add notes about your experience, these can be details about your thought-process, decisions you were making, moments of confusion, dates and times (as some tasks may span a few days) etc.

You may not end up completing your goal by Tuesday, you should have at least made many efforts to try to complete this task.

Post your annotated storyboards of your experience to your blog before class on Tuesday Feb. 21

IW : project 2 : for Feb 16 TH

plan a scenario of use:
With your group plan a creative and entertaining story that will enable you to show your prototype in use. Have an actor be the “user”, consider the environment and the device(s). The user’s goal and motivation for using the tool and the task to complete with the tool must be evident in the scenario. Don’t use text or a voiceover, be creative in how you SHOW the information.

build a paper prototype:
Using various analog materials (pen, paper, post-its, markers, whiteboard, cork board, buttons, pipe cleaners, foam pieces, colored paper, transparencies, index cards, highlighter, glue, scissors, etc.) build out the interface for your tool. Take into consideration the device through which the interface is accessed, navigation (will the user know where they are in the system?), other options of functionality to include (for example if your tool also orders coffee make sure this function is implied even if it is not shown in the scenario). Begin to build your protoype around how your scenario plays out…in response to a specific task.

make a stop motion narrative 
of the paper prototype in use:
Your group will show your scenario and paper prototype in use through a stop motion piece. No voice over or text will be included so you need to pay attention to the details in your narrative. Consider first and third person points of view to show interaction with your tool. Create a rough storyboard to determine the sequence of information and actions. How will you tell the story?  It will be helpful to have a “blueprint” to follow as you create your prototype and stop motion narrative. For those of you that have done a stop motion piece before you understand the importance of planning what to shoot…winging it doesn’t work for successful stop motion pieces. Details are important, take into consideration your background, focus and cropping while shooting your images.

The final stop motion piece is due on Thursday Feb. 16th. It must be uploaded to vimeo and posted to your blog before class. As you are working be sure to document the process in someway and post to your blog as well (to give the final piece some context).

For class the stop motion piece needs to be posted to at least one person’s blog in the class, the others can post it later!

For Reference:

Paper Prototyping by Carolyn Snyder
A List Apart: Paper Prototyping by Shawn Medero
Example of paper prototyping shown in lecture: Get Walking

Prototyping Interaction with Video Scenarios by frog, design mind

IW : project 2 : for Feb 7 T

Meet in your small groups to plan 
for your interactive tool:
As a group review your process diagrams to determine moments where an interactive tool could provide aid to your process. Work out the following:
—who are the potential users of this tool?
—what are the users motivated by speed, money, coffee, praise, social engagement?
—what task will the tool aid with?
—when will the tool be used?
—what other functions will the tool perform?
—and finally how will the tool be used? iphone/smartphone, ipad, computer, kiosk, all?

Begin to sketch several ideas for how the interface might work, the interface is how the user will interact with the tool. Determine the ease-of-use in interface design decisions. You will be sketching for the duration of the class as a group. Be prepared to share you ideas at the end of class.

Bring your full-size (large enough to read the tiny type) printed, color creative process map/diagram. Have your experiential and reflective moments labeled in someway on your map/diagram.

Read pages 22-28 from “Things That Make Us Smart” by Donald Norman