Casa Basa ˜ blending art with technology

Course Description:

This course is an exploration of design for interactive entertainment. Students learn to combine principles of communication design, sequencing, and interactivity to create engaging user-centered experiences.

Punctuality is expected. Points are deducted for excessive (more than 3) tardies. You can track your grades by your name and student id on my Gradekeeper page. Grades are updated once a week, usually Sunday morning.

Course Competencies:
Upon successful completion of this course, the student should be able to:

1. Understand and resolve design issues for a variety of interactive formats.
2. Design sequencing and navigational systems that effectively engage users.
3. Apply principles of sequential design in the production of interactive prototypes.
4. Use sound and motion as effective elements of interaction design.

List of lectures and labs

 

Weeks: 1 2 3 4 5 6 7 8 9 10 11

Students are responsible to check this at least one day prior to class. Email me at sharon@casabasa.com if you have any questions. Tutoring is available on Mondays at noon, rm. 309.

Week 1: Tuesday October 4, 2011

Lecture:

Complete the student survey.

What is interaction design? 5 principles of Interaction Design: http://tv.adobe.com/watch/classroom-five-essential-principles-of-interaction-design/part-1-five-essential-principles-of-interaction-design/. Defining the terms of this class.

 

Lab:

Class exercise: without words, describe assigned phrase. Class is divided into two teams. As a team, decide on a phrase from http://www.idiomsite.com/, then decide role each will take to non-verbally give your message. 10 minutes to plan, 10 minutes to present. This is an exercise in verbal communication.

Create a web page or blog to post assignments. Before end of class, give url to instructor.

• Homework:

  Identifying Modes of Online Entertainment.

  Research examples of the following entertainment sites:

  1. Webisodic site - a site you would return regularly for the next episode of an ongoing storyline
  2. Promo site - usually a teaser site, often one page, that stirs up interest in an upcoming event
  3. Information site - this spans a lot of different areas of interest, so try not to go for the obvious
  4. Advergame - Often a kid's food site, the games often use the same familiar characters of the company's commercials
  5. Movie or band website
  6. Artist portfolio
  7. Sports reporting
  8. Games
  9. Social networking (fun)
  10. Social awareness or community (personal interest)

  Since this is a class about entertaining the viewer, part of your points will be based on entertainment value.

  What is entertaining? What has "stickiness" and what makes you click? We'll explore different ways you can be surprised, entertained, amazed or bored. On which side will your final project end?

  • http://www.castleintheair.biz/ Parallax interface

Week 2: Tuesday October 11, 2011

Lecture:

• Discussion and presentation of examples. Why did you choose each example? As we look at each, discuss whether or not you would return to the site - what is known as "stickiness".

Navigation and interaction design: http://tv.adobe.com/watch/classroom-five-essential-principles-of-interaction-design/part-2-interaction-design-navigation/

Can navigation be entertaining? (think on how this was made) Nike | Rosso | Tennessee Trails

Here is an example of parallax and "the cluttered desk" effect. http://www.siebennull.com/

Sequencing. What is it? Think of a book, a movie, a website. How do they move you through their pages/scenes? Think of your favorite piece of art. How does the artist pull you in and move your mind/view around?

 

Lab:

• In groups of 2-3, find examples of sequencing and of navigation that do their job well. They are two different things but serve similar purposes. Navigation is assisting the Human-Computer Interaction. Through our designs, we help someone understand what is expected of them in order to view the site's content. Sequencing visually moves us through that environment...kind of like navigation gives us the function while sequencing gives us the form.

  Discuss the process of creating compelling navigation in HTML or Javascript or Flash or jQuery and what role the choice of technology plays.

  • Basic means of navigation and their strengths and weaknesses: www.grantasticdesigns.com/navigation.html. Some more thoughts on navigation (a bit newer): http://uxmovement.com/navigation/top-navigation-vs-left-navigation-which-works-better/ and generally a good resource site.

  15 minutes to research, then select one person to give a 5 minute overview of your examples.

Homework:

Create an unusual navigation or sequence of pages. You can use whatever resources you are comfortable with: javascript, actionscript, php, Flash, Fireworks, movie, whatever. But push the envelope of creativity. Blog about the process and post link.

Read an article (your choice) from http://uxmovement.com/category/navigation/ and be prepared to talk about it briefly next week.

Week 3: Tuesday October 18, 2011

Lecture:

Principles of sequential design "models an agent that simultaneously attempts to acquire new knowledge and to optimize its decisions based on existing knowledge." Wikipedia

An important fact of web design is that the biggest amount of your work is done before you start coding: the documentation. Items to include: Overview, Research, Target Audience, Competitors, Design Sketches, Usability and Technology, Flow chart, Prototype, and Final project are discussed.

Matt Webb, Interaction Designer: http://ia301520.us.archive.org/1/items/Reboot70HallAspeakerssaturday/9.Matt_Webb.mp4

Lab:

As a team, begin research of promo sites (midterm project) and discuss. Look at other sites. Take notes, bookmark sites, even begin writing your one paragraph overview for your midterm project. Thanks to Jenna, here is another example: http://www.playatmcd.com/

While deciding your theme, begin layout of your pages in either Illustrator, InDesign, Word/Acrobat (pdf), or any publishing software you are comfortable.

Homework:

• Begin work on your Promo page, your midterm project. It is due week 5.

Useful Links:

http://webdesignerwall.com/tutorials/jquery-sequential-list

http://www.thewebsqueeze.com/web-design-tutorials/sequential-fade-in-jquery-plug-in.html

http://naldzgraphics.net/inspirations/30-impressive-sequential-type-of-logo-designs/

http://www.usability.gov/pdfs/chapter7.pdf

http://christinakeffer.com/list-of-promo-promo-sites/

http://www.welie.com/patterns/showPattern.php?patternID=brand-promo-site

Promo of sites (seo): http://www.apromotionguide.com/ | http://www.promotion-websites.com/

http://www.smartwebby.com/website_promotion/promotion_sites.asp

Finally, one way to use promotions: http://minnettemeador.blogspot.com/2011/03/list-of-romance-promo-sites.html

http://www.thefwa.com/

http://the-planet-zero.com/

Week 4: Tuesday October 25, 2011

Lecture:

Media Rich. Types of media: static artwork, text, sound, video. Conventional uses and cutting edge applications of these media. How much should a designer infuse their own style into the mix?

http://www.wimp.com/sheeplight/

An exploration of ways to add multimedia and sound to improve the entertainment value of your sites. Further discussion of "stickiness". What can make you memorable?

 

Lab:

Students choose an area to strengthen their media skills. Discussion of ways to create interactivity. What defines entertainment?

http://subtraction.com/

http://tv.adobe.com/watch/adobe-touch-apps/adobe-ideas-and-rock-album-cover/

http://www.coolinfographics.com/

http://infographicworld.com/

http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers/

• Machinarium.net
• http://www.digital-librarian.com/audio.html
• http://www.asktog.com/basics/firstPrinciples.html
• http://www.useit.com/papers/heuristic/heuristic_list.html
• http://www.jnd.org/dn.mss/affordances_and.html
• Patrick Sean Gibson [Chocolate Covered Brain Cells]

Homework:

• Continue work on your midterm project. Review links and discussions listed on this site.

 

Week 5: Tuesday November 1, 2011

Lecture:

Presentations of your midterm project: promo site.

Lab:

A discussion of the final project, an information site that is entertaining to use. It will have to be something that gives information in a clever way. Research ideas in groups of 2-3 and discuss.

As an alternative, we will discuss interactive portfolio sites.

Homework:

Decide on what your next project should include, bearing in mind that it needs to have multiple media and should add to your portfolio. Assignment five To successfully complete this, you need to do some research and order your thoughts.

Examples: jTransport proposal (Jarcques Pretorius) and mm3301 proposal (Lauren Merka)

Week 6: Tuesday November 8, 2011

Lecture:

[Midterm Quiz]

The importance of designing for your user. Creating a persona. Discussion of your final project, creating an information site. Discussion on what each student project proposals.

• Language - There is a cultural barrier when the language you are teaching in, is a second language to part of your audience. How well can your target audience read, write, speak and understand the language the lesson plan is written. Avoid cliches and colloquialisms. Simplify writing, graphics and multimedia. Provide a written guide if you determine a need for translation.
• Culture - When we communicate, we find out what we share in common and we explore our differences. Language certainly is one aspect of our culture, but there are other differences you may not have considered. Think of other differences that can impact your course:
  • Symbology - Are our symbols, images, icons and navigational elements interpreted the same across cultures?
  • Values - Values that are important to the American culture may not be relevant to other cultures, or at least, less relevant. How does the target audience respond to the day-to-day aspects of American culture - what we take for granted? Do they define correct behavior in the classroom, work space, and social activities the same as you do? Is innovation or tradition more important? What are expected relations between classes? Ages? Genders? Economic classes? What is the relative importance of self to the family, classroom, workspace?
  • Educational expectations - How do people expect to learn? Theory or practice? Structured or free exploration? What is the expected role of the instructor?
• Geographic Location - Where will learning take place? Will there be any temporal changes that can affect your application? Can their daily activities affect the outcome and success of your proposed project? How will it affect their willingness to learn and to apply and participate in your course?
• Technical capabilities - Take into account your target audience's experience, skills, and technical capabilities. How reliable is their ability to access your course?

Students will demonstrate a comparable project and their Project Proposal to the class. Review in using Microsoft Word to write a research paper and proper formatting.

Overview on how to conduct scientific research.

 

Lab:

Read this for classroom discussion http://www.whatcreative.co.uk/blog/tips/the-importance-of-user-centered-design/ on what should be considered when designing for your audience: Usability, User experience design, Information architecture. What are the kinds of things that can trip us up in our design?

We will conduct our own ethnographic study: Observation lab.

Points awarded today for participation. Create 2 personas based on research. Post to your blog or page by end of class. http://msdn.microsoft.com/en-us/library/ms997577.aspx

Homework:

• Conduct research on your final project proposal. Research your target audience and how you need to approach your final project. Week 6 homework assignment is to create 3 screen designs for your proposed final project. Make it a considered project.

 

Useful Links:

http://netforbeginners.about.com/od/navigatingthenet/tp/How-to-Properly-Research-Online.htm

http://www.nus.edu.sg/nec/InnoAge/documents/ethnography_primer.pdf

http://www.nova.edu/library/dils/lessons/wilsonweb/

http://library.aii.edu:7208/vwebv/searchBasic?sk=aicasf

http://sfpl.org/index.php?pg=2000034501

http://www.educause.edu/ResultsBasedInteractionDesign/163444

Week 7: Tuesday November 15, 2011

Lecture:

User centered design

• In the physical world, many things can vie for our attention. How is our world structured so that certain things/items/people catch our attention, while we ignore so much more? Experiential Education. To receive credit, you must document yourself engaging (interacting) with the physical world, in some multimedia, online way and email me your url. According to research, the brain receives 40 billion sensory inputs every second. How much do you NOT notice?

Lab:

• After this exercise, we will discuss the experience and how we can use it to better our projects. The rest of class will be lab.

 

Screen designs: communicating the site's look and feel.

http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns

http://ui-patterns.com/patterns/Wizard

http://uxmag.com/articles/rich-internet-application-screen-design

Homework:

Complete documentation and begin development of final project. For those of you who want to do an interactive portfolio, below are the links Dana Sheikholeslami forwarded. He's done a lot of research for you.

 

Week 8: Tuesday November 22, 2011

 

Lecture:

Guest lecturer, Bonnie O'Neill, Digital Film and Video.

Lab:

• Critique of projects to date

http://www.smashingmagazine.com/2009/10/01/how-to-respond-effectively-to-design-criticism/

• Critique Form
• Analyze the visual aspect of your site-in-progress, and suggest improvements and uncover "design blind spots."

Homework:

• Continue work on final project and make adjustments based on this week's group critique. Develop a questionnaire for user testing next week. You should be testing both technical and user experience. About 10 questions total.

 

 

Week 9: Tuesday November 29, 2011

Lecture:

Community Building. Giving visitors an opportunity with the site and with each other. Visit Community Building on the Web (www.naima.com/community) and discuss.

Testing.

Lab:

• We will user test prototypes of each project. Please have your questionnaire or form ready.

Homework:

• Revise user testing based on today's class suggestions.

Week 10: Tuesday December 6, 2011

Lecture:

• [Final]
• Discussion of individual projects and technical testing.

Lab:

General discussion of usability assessment, design and evaluation of individual group projects.

Homework:

Final project presentation next week. All materials due. Read http://www.hcidesigns.com/2007/09/what-does-an-interaction-design-portfolio-look-like/

Week 11: Tuesday December 13, 2011

Lecture: Formal presentation and critique of student projects.

Lab: None.

Homework: None but wrap up your online production log with your final thoughts.

 

Student information - Fall 2011