L E A R N I N G B Y D E S I G N DEVELOPING TEEN DESIGNERS Blurrydots Media Group

A Facilitator’s Curriculum Guide LEARNING BY DESIGN A Facilitator’s Curriculum Guide

ã Blurrydots Media Group 4048 Twyla Lane, Campbell, CA 95008 Phone 650.315.7424 • Fax 561.760.0376

Deborah Kim – [email protected] Sarah Lewis – [email protected] Bhavin Nicholas Shah – [email protected]

Table of Contents

Facilitator Letter i Peer Review 27

Design – Redesign Cycle 28

CHAPTER 1 - OVERVIEW & BACKGROUND Toolkit 29

Curriculum Rationale 1 CHAPTER 4- LESSON PLANS

Reframing the Digital Divide 1

The Need 3 Lesson Overview 32

The Site 3 Preparatory Lesson 33

Historical and Demographic Context 4 Day 1 35

Overall Goals 5 Day 2 38

Constraints 6 Day 3 40

Day by day 6

Learning and Pedagogical Framework 7

Theoretical Context 7 CHAPTER 5 - APPENDICIES

Practices 8

Assessment Rubric 43

CHAPTER 2- FACILITATOR PREPARATION Eye-for-Critiquing Worksheet 44

Props and Iteration 45

What is design? 9 Usability Checklist 46

Summary of Visual Design 12 User-testing/Think Aloud Worksheet 47

Summary of Readability Design 15 Tufte Presentation Tips Sheet 48

Summary of Interaction Design 18 Discourse Glossary 49

Summary of Usability Design 19 Site Requirements 51

Mini – Lesson for Learning Design 22 Redesign Example (bad) 52

Redesign Example (good) 53

CHAPTER 3- THREADS OF THE LESSON PLAN Web Design Resources Online! 54

Web Resources for Exploring 55

Warm-up 24 Design and the Digital Divide 56

Critique 26 Bibliography 63

ii

Learning by Design

Dear Instructor,

Welcome to Learning by Design, a curriculum to get teen web designers thinking about underlying issues in their work as media creators. Over the course of four afternoons, you will be guiding teens as they explore issues related to design of media, learning to see from the point of view of a designer and critic. Throughout the days, youth will uncover principles behind "good design" by exploring their own likes and dislikes in web and print media; they will practice using these principles while designing and producing a public service announcement meaningful to them and their community.

We hope you and the youth you work with will find the approach to be empowering, in that it focusing on the development of teens own ideas about design rather than presenting rules. The curriculum is designed to be flexible in that it is modular. Each activity could take the allotted time, or could be spread over days or weeks, depending on the needs of participants. It is consistent, providing a model for design process that is durable beyond the immediate classroom; and it is sustainable, focusing on the development of enduring team dynamics and the creation of a "toolkit" that can be used by design teams in their future work.

We hope that you will customize the lesson plans and supporting materials to fit your own and your students needs, using the "my adaptations" margins to record what works and doesn't work so that the curriculum becomes a living document for your organization.

Sincerely, BlurryDots Media Group

ii OVERVIEW & BACKGROUND Chapter 1

Overview & Background

This curriculum is designed to bring the thinking strategies and best practices of designers to teens involved in web development.

Curriculum Rationale hile many of the budding urban technology training programs established to bridge the “digital divide” (commonly understood as the differential access to technology of low-income and “minority” populations to W technical training and skills), most programs limit goals to creating fluent technology users. This curriculum hopes to open the issue of “access” up to a broader definition, in which members of all communities strive to be not just users of technology, but designers. Designers have a different relationship to technology than consumers; they create technological experiences for others, and they view media with a critical eye, understanding the goals and constraints of creating with technology. While knowledge of technical skills opens many doors for employment in the high- tech job market, skills in design are essential to breaking into the most creative (and more lucrative) web design positions. A language of design provides a platform on which to continue to build technical skills. Being able to design engaging and effective web-based media enables a voice, reflecting communities’ own identities and intentions in the new information economy.

Reframing In recent months, public attention to the problem of the “Digital Divide1” has grown with the release of research studies, news reports, and even a television series on the the Digital topic. The basis for public concern stems from a series of U.S. Department of Divide Commerce studies (1994, 1999) reporting that low-income households are much less likely to have Internet access or a computer in the home than households that earn incomes of more than $75,000. These same studies have shown that African American and Latino household are much less likely to have Internet access than Anglo-American households and that the gap between the technology “haves” and

1 For further information see “Design and the Digital Divide” in the Chapter 5: Appendices.

1 OVERVIEW & BACKGROUND

“have-nots” has only widened in recent years. As a recent study by the Children’s Partnership shows, differential access to the Internet is only one manifestation of the Digital Divide.

Youth and adults in the communities studied understand that the Digital Divide is not just a problem of access to technology but fundamentally one of access to opportunities to learn and succeed in the new economy, that is an economy driven by information and shaped by rapid cycles of product and technology innovation. The Children’s Partnership study underscores that the technology access divide may in fact contribute to an opportunity divide in the new millennium. In other words, low- income Americans with little access to technology may have fewer opportunities to learn technology skills that are often required for jobs in today’s information-based economy.

The opportunity divide is nowhere more evident than in the San Francisco Bay Area, where there is perhaps the highest concentration of high technology jobs in the United States. A study published by Joint Venture: Silicon Valley Network (1999), a partnership of government and industry leaders in the region, has found that area high school students have little understanding of high-tech careers and almost no interest in pursuing computer science and other technology-related majors in college. Awareness of the region’s economic opportunities is lowest among girls in general and among Latino students, who tend to come from more low-income communities in the area.

Community centers and community-based youth organizations have been points of access for youth and their families for much more than the Internet. They have been “urban sanctuaries” (McLaughlin, Irby, & Langman, 1994). In fact, those groups of people with less access to the Internet at work or at home are more likely to use technology in a library or community center (U.S. Department of Commerce, 1999). This is especially true for lower-income families and for African Americans, who are much more likely to use these access points than Anglo-American and middle- and high-income families. These centers have been growing in number and resources, thanks to a number of federal initiatives, including the U.S. Department of Education’s Community Technology Centers program and the U.S. Department of Commerce’s Technology Opportunities Program, and foundations that have invested in technology for community-based organizations.

Studies by the Educational Development Center (EDC) of its Community Technology Centers' Network (CTCNet) have found that overall the centers are perceived as safe, supportive environments that provide valuable resources to community members. A large majority of participants surveyed said they had taken classes to improve their job skills, literacy and language skills, to get help with homework, or to participate in GED and other adult education programs (Chow, Ellis, Mark, & Wise, 1998). Community- based organizations that integrate new technologies into their activities have tremendous potential to improve access to technology, prepare youth and adults for

2 OVERVIEW & BACKGROUND

the jobs of tomorrow, and allow community members to engage critically with the social forces behind the new economy.

The Need Currently there is a dearth of materials that present advanced design principles to youth. Most of the materials available for youth teach them only the technical skills to construct web pages and online content, covering subjects such as HTML, Photoshop, and Dreamweaver. The focus has been to teach youth how to use the applications for web design. They tend to concentrate on tools that youth can use to express themselves online, but do not provide them with design principles that they can use to help guide their construction. Much knowledge exists about presentation of information and navigation on computers, yet very little has been distilled and transformed into curriculum for youth.

One reason for the scarcity of relevant design materials for youth has been a lack of relevant resources and professional development for the staff who work with teens. Unlike schoolteachers, there are no avenues for program directors and staff of community technology centers to gain the skills necessary to teach about or with high- level design principles. Many program staff attempt to stay two paces ahead of their students by reading manuals and teaching themselves how to create online content and web sites. In addition, overworked staff have little time to develop cohesive curriculums that are attentive to theories of youth development, learning, and design. The extent of support these program staff receive are curriculums that others may have published on the Internet; even these tend to lack a teacher’s guide to support instruction. In addition, many program staff struggle with adapting the curriculums to fit the context and the age group with which they work.

Site Background and Community Context The aforementioned curriculum is being designed for the East Palo Alto non-profit The Site organization OpenVoice, which develops online communities by and for teens. The real-life project-based learning model of OpenVoice empowers teens of East Palo Alto to be technologically fluent, learning high-tech work skills, writing and critical thinking skills, as well as multimedia production (including video and graphics) while producing sites on the web and AOL that create crucial dialogues amongst teens of diverse social backgrounds and from all parts of the country. While the curriculum is structured to fit OpenVoice’s programming structure schedule, has been designed to be flexible enough to be used by any technology training programs interested in exploring concepts of design with youth.

Understanding the community context is an important piece to understanding how an organization such as Open Voice is being used by its participants and how the program can be improved to better serve the participants’ needs. This particular organization is located in a unique community that has shaped its present needs, availability of resources and potential for continued growth.

3 OVERVIEW & BACKGROUND

Historical and East Palo Alto is a newly incorporated city in the southeastern most section of the San Mateo County. Its 2.5 square mile municipality is nestled among a fast growing Silicon Demographic Valley economy. According to the 1990 U.S Census figures, East Palo Alto has 23, Context 451 residents, a 29.5% increase in population since 1980. Much of the increase is attributable to continued immigration of families from Mexico, Central America and the Pacific Islands. The ethnic diversity of the city is composed primarily of minorities as seen in Table 1. The once dominant African-American population is now more equal to the population of Latinos with a growing number of Pacific Islanders.

The ethnic composition of the city of East Palo Alto compared to the ethnic composition of the local school district

ETHNIC COMPOSITION

Ethnicity % of Population % of students in Ravenswood School District African American 41.87% 29% Latinos 33.7% 58% Caucasian 12.63% N/A Asian/Pacific Islander 10.11% 12% Other 1.68% 1%

Surrounded by some of the wealthiest communities in Northern California, East Palo Alto is an economic anomaly. Nearly 2,600 households (37%) in East Palo Alto earn less than 50% of the county median of $46,437. Coupled with the low income of households, East Palo Alto has a shortage of quality housing, lack of job opportunities, comparatively high poverty levels and poor education. East Palo Alto has the fewest jobs available of any community in San Mateo County (An estimated 920 jobs in 1990). This city makes up 3.6% of the county population, but represents only .3% of the county’s jobs. In 1990, approximately 18% of the city’s residents were living below the poverty level, as compared to 6% of the county population as a whole. Based on these low-income levels, approximately 16% of the city’s households receive some form of public assistance, while only 5% of San Mateo county households received public assistance. In 1990, it was estimated that in the Ravenswood City School district 75% of all students were AFDC recipients or received food stamps.

In terms of educational achievement, 20.38% of the East Palo Alto’s residents have less than a ninth grade education; an additional 20.47% have not graduated from high school. Only 22.16% of the city’s residents have received a high school diploma or GED certification; and as of 1996, the high school drop out rate was 65%. A small number of residents with some college education (22.88%) and an even smaller number of residents that have obtained a bachelor’s or graduate degree (14.11%) live in the community, but few hold jobs within the community.

4 OVERVIEW & BACKGROUND

Also unique to the East Palo Alto community is its nontraditional family households. A striking 67.24% of the city’s family households are not traditional two- parent households. Forty percent of youth live in households headed by a single parent and 25% of youth live with a grandparent. This data however is not broken down by ethnicities. Research on family structures indicates that African-American and Latino family structures are quite different, especially with the influx of immigrants; this percentage could be skewed ethnically (citation, 19XX).

Along with the low number of jobs available in the city of East Palo Alto and the low levels of education, the unemployment rate, the crime rate and also the rates of drug and alcohol abuse are among the highest in the county. With only one supermarket, no banks, and few retail stores within the city boundaries, the economic options for the city’s residents are few to none. Many of the community concerns stem from needs for economic development and job opportunities. The limited local investment, very low property and sales tax base and inadequacy of distribution and availability of affordable, accessible, and acceptable goods and services has created a vicious cycle of inadequacies and needs in housing, crime and public safety, transportation, education, health and human services and economic development.

The poor economic status in East Palo Alto places its children and youth at risk. As a community, East Palo Alto is still developing. Many of the adults are struggling with difficulty maintaining jobs, earning sufficient incomes, and paying the price of early school departures. Therefore, children and youth in East Palo Alto have few role models for successful development within their community. Nonetheless, East Palo Alto does have a reputation for fighting for the needs of its children and youth. Key adult figures in the community have worked diligently and creatively to improve the current experiences of young people in East Palo Alto, and to improve their future prospects within the community and the growing digital economy in the surrounding Silicon Valley. An example of such innovation and dedication is Open Voice.

Overall This curriculum endeavors to help teens develop a discourse of design while fostering their personal growth, sense of confidence, competency, and identity as designers. Goals While there are many courses that teach teens basic technical skills such as desktop publishing, web page authoring and graphic design, very few offer an environment and structure to explore design principles and design processes. The curriculum covers basic design principles in the areas of information design, readability design, and interaction design. Teens learn about design processes and are given an opportunity to apply them to their own work. The focus on “process” helps teens develop “soft skills” necessary to work on design teams.

Design is pervasive throughout people’s lives, yet often it is not explicit. Designing is about seeing below the surface and making deliberate decisions based on sound rationale. People design when they write a paper. Students are designing when they plan a route to take home. Because design is about a way of thinking and seeing,

5 OVERVIEW & BACKGROUND

although more abstract than technical skills such as web page authoring, design skills are highly transferable among domains. For example, skills learned in the context of automobile design can be transferred to a domain such as desktop publishing.

This curriculum hopes to make explicit to teens some of the techniques and best practices of professional designers. By practicing information design, teens will be able to convey their messages and thoughts more effectively. Teens will be able to transfer their new design skills to whatever field or occupation they decide to pursue.

Constraints The curriculum was design to meet constraints established during an interview with the director of OpenVoice. Specific issues included length of class time, and short duration overall, as well as the need for explicit instructions for the instructor, structured activities in small time increments for the teens, and concrete reference materials that can live beyond the curriculum itself. The focus on self-expression fits within the mission of OpenVoice, as does the PSA activity, as OpenVoice have been contracted to produce PSAs for local nonprofit organizations.

Day-by-day Preparation Lesson In this introductory lesson, teens construct their initial public service announcement Goals (PSA). Public service announcements inform people of an issue that might be plaguing society or sometimes encourage positive social behavior. They can manifest themselves in any form such as billboards, flyers, commercials, web sites, etc.

Through critiquing existing PSAs, youth examine three critical aspects of design: the message, the audience, and the medium, developing a critical eye for underlying issues in design of media. Some groups at OpenVoice may have already created and discussed PSAs; these groups may want to skip directly to the first redesign lesson.

Day 1 On day one teens examine elements of visual and readability design. Through the process of iteration, teens begin to improve their designs using principles they uncover in critical review of the designs of others. They practice reviewing their peers’ work and providing constructive criticism. It is the hope of this lesson that teens use their instinctual knowledge of design in addition to the generally accepted design rules of information and readability design to formulate their own set of design rules. These will be manifested in the toolkit that will continue to be developed through the next two lessons.

Day 2 Upon completing this lesson, teens will be knowledgeable of usability and interaction design skills. Through role-play teens explore the difference between a user’s goals and a designer’s goals. They further their peer-reviewing skills by learning to take a different perspective other than their own on their peers’ designs. Teens will revisit their designs in light of these new factors and continue to improve them. They

6 OVERVIEW & BACKGROUND

continue to externalize their collective design philosophy by adding design principles to the toolkit, fostering a community of practice within their organization.

Day 3 After completing the last lesson, teens will be familiar with user testing methodologies. This is the final day of production of their PSA, in which they incorporate findings from their own user studies into their designs. Teens have the opportunity to present the rationale behind their design decisions in brief presentations to the group. To close the course, the group reviews their toolkit, summarizing principles learned and committing to using the toolkit in their future design endeavors.

Learning and Pedagogical Framework We believe that powerful learning occurs when people come together voluntarily to engage in design activities that are meaningful to themselves and their communities. In communities where significant numbers of youth are alienated from the traditional educational system, these activities often take place outside the classroom. In addition to teaching advanced design principles and processes, this curriculum intends to bring teaching ideas, strategies and techniques from the field of education into community- based organizations working with youth in design tasks. Awareness of pedagogy can help guide instructors through learning activities. Theories and strategies include:

Theoretical Constructionism Constructionist learning theorists have described the learning that takes place when Context people build things. Through the process of designing, building, examining, discussing, and redesigning, students develop a deep understanding of the design process, the materials they are working with, and their constraints. Students gain project management skills, leadership skills, a sense of personal and collective voice, and the ability to accept and give criticism impersonally. Connection to this curriculum: Students actively engage with the design process in every stage, improving their work through group feedback, personal reflection, and redesign. A focus on process and group work facilitates team building for future design tasks.

Critical theory Critical theorists seek to reveal the underlying values and assumptions in various aspects of society and its representations. Through critically understanding social institutions, students develop an awareness of the potential for social change. Connection to this curriculum: Youth are bombarded with media constantly throughout the day. By offering time and context to examine and reflect on underlying assumptions such as audience, message, usability and graphic design, the curriculum will encourage youth to be conscious of hidden contexts and meanings as they design.

7 OVERVIEW & BACKGROUND

Situated learning Situated learning theorists focus on learning through doing authentic tasks in authentic contexts. Connection to this curriculum: By participating in an actual design team engaged with an actual design task, students will learn not only design skills, but what it means to think like and talk like a designer.

Practices Collaborative learning Students learn from each other by working together to develop, organize and complete tasks, reviewing each other’s work, discussing and drawing conclusions. Connection to this curriculum: Design tasks take place in teams throughout the curriculum, while assessment and review take place in the full group context. Students and facilitator jointly develop assessment criteria.

Project based learning Students construct meaning through the completion of a project that can be evaluated. Connection to this curriculum: All learning in the curriculum takes place within the context of the PSA project. Students final presentation of their project, their process and their design rationale serves as an assessment tool to evaluate student learning.

8 FACILITATOR PREPARATION Chapter 2

Facilitator Preparation

This chapter will help the implementer of this curriculum become familiar with the discourse of design and the concepts that run throughout this curriculum.

earning about design is different than learning about a lot of other disciplines because it is very experiential. This makes teaching about design very different from other subjects. The following chapter explicates the design principles L that this curriculum is attempting to deliver. Teachers, facilitators, and implementers of this curriculum should read the design principles below and become familiar with them. We have created a mini-lesson at the end of this chapter that will help make concrete the design principles presented below.

The main areas of design that are covered by this curriculum are visual design, readability, interaction design, and usability design. Each of these areas is discussed below. The principles below should not be taken as face value, but should be used as guidelines to help foster these principles in the teens.

On Design What is Designing is making deliberate decisions based in sound rationale about how something should be. Designing involves planning, thinking, and constructing, testing, Design? and redesigning. It is the unifying of form (the way something looks and feels) with content (what it says or is) within a set of constraints. Something that is well designed has a sense of unity of form and purpose. Information design is the designing of information so that it is effective in conveying its intended message to its intended audience. This includes paying attention to visual design, readability, interaction and usability.

Although people often think of information as collections of facts, in this PSA-based curriculum we want students to look at the concept of information through a broader lens, including often subtle, sometimes “hidden” political, social and economic agendas, as well as cultural cues as to intended audience. Students will be exploring

9 FACILITATOR PREPARATION these concepts while designing their own effective message to be delivered via the media of the Internet. With the advent of the World Wide Web’s multimedia capabilities, information designers for web-based media now have access to all the powerful tools used by film, video, animation, interaction and print designers. Effective sites, however, present information carefully, and use tools selectively to carry the greatest impact. Being able to think critically about media is an important aspect of effective design.

Thinking like a critic Think about the last television show you watched. The information conveyed was probably more complex than facts alone, including social context, possibly humor, probably emotional cues (such as music or a laugh track), as well as other hidden elements that producers included to make the show engaging and effective at carrying a message. Public Service Announcements are written to promote social change – a change in the way in which people act. While most Americans consume media for entertainment, every medium can be a powerful tool for either social change or for social conformity. Televised video from the Vietnam war changed history, conveying information to US citizens that had been unavailable during previous wars. Videotape of the beating of Rodney King had a powerful impact on American society. Films such as “Set it off” “Do The Right Thing” or “Dangerous Minds” have had a powerful impact on the way people think about urban youth. GAP ads, in which all actors are dressed exactly alike, also conveys a larger social message than facts about GAP clothing. Messages in media can be overt or hidden, intended or unintended, but they are always present.

Questioning students about their understanding of media helps make them aware of the strong influence it has over their lives. What are the implications of more recent media coverage of war, in which the media cover the scene more like a sporting event, often avoiding shots of direct conflict? How would our perceptions be different if the OJ Simpson case had not been videotaped? What if Black and Latino filmmakers had not made any movies about the inner city? Would Nike be as popular if it didn’t advertise? Why do we think one fashion looks great one year, but the next year it doesn’t? What would people’s impressions be of East Palo Alto (or any similar neighborhood) if residents rather than corporations designed the news?

Thinking like a designer Once people become creators of media rather than just consumers, they need to start thinking like designers to be effective. Designers consider many factors when creating media, including basic issues such as their target audience, their intended messages, and the best medium for the audience and message. When these issues are decided, their job is to think about the user of the media, structuring the experience so that the user gets the most out of it. We currently have many tools available on the web, including text, graphics, audio, animation and video. Some media and designs may be more effective at conveying specific information than others; for example, an entertainment page will certainly have a different design and may contain more multimedia elements

10 FACILITATOR PREPARATION than a page quoting stock prices for investment bankers. Some designs are easier to read or use than others, providing clear text, clean images, and obvious navigation (ever get stuck in a site with no way to get back? Not been able to read animated text because it moves too fast?) While multimedia capabilities gives young people access to powerful persuasive techniques, without some training in thinking like a designer, multimedia also provides numerous opportunities to make cluttered, difficult to read or understand pages. No matter how deep the message, if the user can’t read it or has an unpleasant experience, she or he will leave before getting the message. All that hard work for nothing!

Guidelines for design Luckily there are a few basic principles designers generally agree on to help new designers start out. These are guidelines, not hard rules, because designers make things for real people, “users,” who may have specific preferences and needs. The guidelines have been broken up into three categories: visual design, readability design, interaction design and usability design. This material forms the core of the design content presented in this curriculum. We recommend that facilitators and implementers read through this material and complete the mini lesson at the end of this chapter. This will help familiarize him/herself with the terms, concepts and discourse associated with design.

The following sections cover three main areas of design that are covered by this curriculum. In the margin next to each concept is the lesson in which that concept will be covered.

11 FACILITATOR PREPARATION

Visual Some of the most widely accepted principles of information design include layout techniques (how the information is displayed on the page) such as: proximity, alignment, Design repetition, and contrast. An overarching goal of these principles are cohesion, unity, and purpose. Although color is part of repetition and contrast, its high impact merits a separate heading. These terms are explained in the list below.

Proximity (nearness) Group related items together, so that they are seen as one cohesive group instead of a bunch of unrelated bits. Things that are not related to each other should not be in close proximity. Grouping elements helps the user see the structure of the page; its easier to read because the users eye flows from one related element to another. It’s easier to find things.

Proximity is related to an understanding of white space, the blank spaces between elements on the page. If related items have space between them, this “trapped white space” tends to visually push them apart, making them seem unrelated. Designers use white space (which on the web, by the way, is rarely white!) to separate elements, give the eye a rest, provide a clean, uncluttered look to their pages. While white space is a designers friend, “trapped white space” is almost always visually confusing.

Tip: Avoid leaving equal amounts of white space between elements. Avoid too many separate elements on a page.

Alignment (line stuff up!) Everything you put on the page should be put there deliberately with a clear reason. Everything on the page should have some kind of visual connection to something else. When things are aligned (lined up in some way) on a page, there is an invisible line in your mind that connects them, even if they are far apart. Alignment gives a page a sense of cohesiveness, meaning it all looks as if it is meant to go together. It has a sense of what designer refer to as “unity.”

Tip: More than one alignment on a page can be confusing, for example mixing centered alignment with left alignment. Avoid “data imprisonment.” Use alignment to group items in charts rather than harsh gridlines that fight with the data for attention.

Repetition (do it again!) Repeat some aspect of the design throughout the entire piece. Reuse a font, a line, bullets, color, an image, an alignment, etc. Repetition brings consistency, telling the user how to use the page; headers, buttons, navigation tools all have the same look.

12 FACILITATOR PREPARATION

Beyond this, repetition conveys a strong sense of unity or purpose to the design. It makes your pages more visually interesting.

Tip: Don’t repeat so much that it’s annoying or distracting.

Contrast (make different things look different!) If items on your page are not exactly the same, make them deliberately different. Not just a little different, but really different. Contrast makes pages more interesting to look at and helps information stand out. Contrasts include using large type next to small type; thin lines with thick lines, cool colors with a warm color, a small graphic with a large graphic.

Tips: Be deliberate and strong about contrast. Wimpy contrast isn’t real contrast; if things are only a little different, they will fight for attention.

Color (use it deliberately!) Use of carefully chosen color combinations is a powerful tool to create mood, highlight or label information, to enliven or decorate. Colors represent different emotions in different cultures, and subgroups within cultures view use of color differently. For example, the color red symbolizes “stop” in most cultures; however, in China it also symbolizes marriage and fidelity, while in the US it often symbolizes daring and promiscuity. Different ages often appreciate color differently. You might expect to find more neon or bright colors in a site for children than in a corporate site. Knowing your audience is important when thinking about color.

Tips:

· Starkly contrasting colors next to each other can have a glaring effect, making information hard to find or read.

· Overuse of color dulls the impact of each color; to maximize the force of a bright color on a page, use it sparingly against duller background tones.

· High contrast can make text difficult to read; using a pale background color such as pale green or yellow can calm video glare.

· Colors found in nature often work well together if the intent is to provide a sophisticated look.

· Color tones vary greatly according to the quality of the monitor used. Check your colors on a high-quality monitor if possible to see if they work well together.

13 FACILITATOR PREPARATION

· Use color to reinforce the concepts of repetition and contrast mentioned above. Using too many colors can detract from the sense of unity of the page; many designers choose three basic colors to work with and stick with them.

Above All: Less is More! When designing a page, one or two carefully chosen graphics to illustrate a point can often be more effective than scrunching in as many as possible. Think of the user; she or he needs time to focus on each element in the page. If too many elements are serving the same purpose, the user is slowed down, and may become frustrated. Everything must have a reason for being there; if it doesn’t serve a purpose, take it out!

Where this fits in the curriculum: Day 1 Students will be introduced to the basic concepts of visual design during the first day’s critique and peer review session. Focus of this material should be on students uncovering what they like and think is most appropriate for a variety of audiences. As a result, different groups may emphasize different principles. Instructors should look for opportunities to explore the basics such as color, repetition, alignment, and contrast in every page visited. Summations of the groups opinions are recorded in the design toolkit.

14 FACILITATOR PREPARATION

Readability In addition to information design, readability is an important aspect of design. Many designs utilize text to convey a message (often times, web design classes fail to cover Design text and focus solely on visual graphic design). Whether it is a brochure or a billboard, designs that use text as a medium of expression, must be sensitive to physical and organizational characteristics of text. Human perception plays a large roll in understanding and interpreting text. Therefore, understanding the elements of text that influence understanding is a key skill that effective designers possess. Below are a list of basic and advanced design principles. This curriculum will emphasize the basic principles.

Font Size This is not a simple consideration. Text needs to be adjusted in size depending on the distance the reader is from it (will the page be read at a kiosk, or from a desk computer). Also, it is important to know what screen resolution the viewer will be looking at the page. 11pt font has been shown to read the fastest.

Font Design Serif is easier to read than san-serif An example of serif font is Times New Roman, and a san-serif font would be Arial. Because Serif fonts have ‘feet’ and distinguishable curls on parts of the letters that make it easier for the eye to distinguish.

Mixed-font presentations are less readable Using many fonts on the same page can make reading difficult. Try to use font sizes and types consistently throughout a site. This helps the reader anticipate what is coming.

Bold is attention grabbing Since bold grabs the reader’s attention, make sure to use it sparingly, so that having too many bold items does not dilute its effects.

Italics take longer to read They retard reading by 15.5 words/minute (5% slower to read)

Contrast Text needs sufficient contrast to the background. Very high contrast increases fatigue. Often white isn’t the best choice for a background color. Pale green or pale yellow tend to work much better.

15 FACILITATOR PREPARATION

Layout Left-justified text (ragged right) is easier to read than justified text (flush on both left and right). Margins should be set so that the number of words on a line is about 10-12. Paragraphs should be clearly marked by indents or spacing. There should be sufficient leading to make the text clear (Leading is the space between lines).

Amount of text In general, the greater the mass of text, the more difficult it is to read. The amount of text should fit the purpose.

Line length Lines should not be too short or too long. For most typical web sites, the ideal length for each line (given a 11pt font) is 600 pixels. Lines should contain 10-12 words.

Conceptual (advanced) Text is readable if the cognitive load is not excessive. Must make estimates, even if only informally, of what the intended audience knows. Don’t bore your audience with information they already know and don’t exclude information they may want to know.

Hyperlinks The user should be able to return from a hyperlink (frames might make this complicated). Just because a link might be relevant, it may not be beneficial to the reader. Don’t put links in if you don’t need them. For web pages, try and avoid using underline because it can be confused with a hyperlink. Avoid seductive detail – luring the reader to another area or page when it isn’t absolutely necessary can reduce readability

Microstructure (advanced) Difficult text to read at the microstructure level are long sentences, sentences that use passive voice, clauses embedded in the middle of the sentences

Macrostructure (advanced) How the text is organized should reflect its purpose. If the text is elaborating a problem and solution, then the text should be organized into problem and solution sections.

Redundancy (advanced) Avoid redundancy between text and other media such as pictures. There should be a reduction in the number of media used. If multimedia is redundant to the text, then it interferes with what the text is trying to convey to the reader.

16 FACILITATOR PREPARATION

Where this fits in the curriculum: Day 1 On the first day, the teens should be guided to look at issues related to font design, contrast, layout, amount of text, line length, and hyperlinks. This will provide teens with a basic understanding of readability issues. If teens seem ready for more principles, they should be prompted to explore some of the advanced features of readability, including micro/macrostructure, purpose, redundancy, etc. These concepts are more abstract and less obvious.

17 FACILITATOR PREPARATION

Interaction Interaction design encompasses designing interface solutions for users. There are two steps in this process: the synthesis of the solutions and the testing of the validity of the Design solutions. The latter is called usability design, while the former is referred to simply as user interface design. In a book by Alan Cooper, “About Face: The essentials of user interface design” focusing attention on the user’s goals is presented as a method of good user interface design. Through goal-directed design the designer pays attention to what the user’s goals are. He captures them in three points: · Not to look stupid · To be more effective · To have fun!

In order to make sure we attend to the user’s goals, one should asking him/herself the following questions: · How will the design be used? · Who will use it? · How frequently? · For how long? · How important are considerations of data integrity? · How important are considerations of learnability?

Humans tend to process information better visually than textually. It is also much faster and can be seen as a whole and in context. The way to design for this is to shift from a focus on the graphical nature of the website to the “visualness” of the interaction. · Visually show what, Textually show which. · Use visual patterns to help guide the user.

Where this fits in the curriculum: Day 2 & 3 The students will be introduced to the idea of the user on Day 2. Students will have the opportunity to explore the target audience for their PSAs and develop personas with goals, interests, and needs for these hypothetical users of their website during the warm-up activity. The teens will then be given the opportunity to redesign their web pages once again with considerations for interaction design principles and peer feedback. Once again, these design principles will be added to the design toolkit.

18 FACILITATOR PREPARATION

Usability Usability design is simply user-centered design and focuses mainly on testing of how the user interacts with the design (it demands that the designer become aware of and Design attend to how people interact with things). Because people make mistakes and often times are blamed for the mistakes, usability design acknowledges people’s mistakes may actually be due to poor design. In order to remedy people interacting with poor designs, usability designers like Donald Norman who wrote the book “The Design of ve developed a set of design principles that address user’s needs for understandability and usability.

Four guiding principles of usability design

Conceptual models It is important to begin with providing the user with conceptual models of the design. Conceptual models are mental picture that present a coherent consistent system image – one that has consistency in the presentation of operations and results.

Visibility A second key design principle for decreasing a user’s mistakes is making the appropriate elements visible. Visibility is the ability of a user to tell the state of the device and the alternative actions just by looking at it. This means that the correct parts are visible and they convey the right message and are connected to “natural designs.” Natural designs are natural signal in the design that need no conscious explanation.

Appropriate clues Making things visible is accomplished by providing appropriate clues for the user. Appropriate clues are good mappings between what the user wants to do and what is possible. By incorporating the right balance of visibility (either visually or through audio cues), the user is able to determine the relationship between actions and results.

Feedback Finally, to ensure continued successful use of a design, the design must incorporate immediate and ongoing feedback to the user. Feedback is the sending back to the user information about what action has actually been done, what result has been accomplished. It is important to give the user full and continuous feedback about the results of his/her actions if continued use of the thing is desired.

19 FACILITATOR PREPARATION

Slips Users make mistakes everyday. In usability design, these everyday errors are called slips. They are actions that we intended to do one thing, but find ourselves doing another.

Norman describes six different kinds of slips:

1. Capture errors – this is when a frequently done activity suddenly takes charge instead of (captures) the one intended e.g. You go off to your bedroom to change your clothes for dinner and find yourself in bed

2. Description errors – the intended action has much in common with others that are possible. The actions are specific but the intended outcomes could be ambiguous. Description errors generally result in the correct action on the wrong object. e.g. After using the sugar in your coffee you put the sugar that is supposed to go into the cupboard into the refrigerator

3. Data-driven errors – automatic actions are data-driven – triggered by the arrival of the sensory data e.g. Calling your mom to give her the address of the restaurant, you end up dialing the address

4. Associative-action errors – internal thoughts and associations trigger actions e.g. Ringing of the telephone and knocking on the door both signal the need to greet someone, but responses are different

5. Loss-of-action errors – forgetting a step in a sequence of acts e.g. Going to bedroom to get something, but forgot what it was on the way 6. Mode errors – these errors occur when devices have different modes of operation and the action appropriate for one mode has different meanings in other modes e.g. In the time mode a button can turn on the light, but in stopwatch mode, it may reset the stopwatch

Challenges Thus, the design challenge for usability designers are: · Don’t put aesthetics first; and · Remember that designers tend not to be the users

20 FACILITATOR PREPARATION

Where this fits in the curriculum: Day 2 It is the goal of this day to introduce the concept of the “user” in designing. · What are their needs? · What are their goals?

The teens will have spent two days constructing their PSA websites and exploring basic issues of visual and text design principles from their own perspectives. On this day, the teens will create personas for a potential “user” of their web page and work through redesigning their web page after considering different users.

Where this fits in the curriculum: Day 3 On this day, students are introduced to user testing. Through the warm-up exercise, students participate in a Think Aloud user test before conducting one on their own. Using the Think Aloud worksheet, students will work in pairs and have each one go through the website talking through their navigation, what was clear, interesting, unclear, unpleasant, etc. Then students will go through a redesign process based on their user tests.

21 FACILITATOR PREPARATION

Mini-Lesson for Learning Design Principles In order to help you understand how these design principles manifest themselves in real designs, we have provided two activities that will help you identify and apply the principles mentioned above.

Activity 1: Notice it! An important skill of being a designer is being able to identify and characterize different design decisions that have gone into a final product. To help you gain these skills, we have provided a flyer that was redesigned using the principles of visual and readability design.

The flyer can be found in Chapter 5, under redesign example.

· Take a few minutes to list 3 design principles that were used to redesign the flyer. For each principle, describe how it was used. For example, how is proximity used to lead your eye? What alignments are used? Do you see invisible lines formed by strong alignment? What elements are repeated? What elements contrast? How would you describe the use of color? What considerations were made on the fonts? Does the layout reflect the purpose?

· List 3 other design features that you feel are important that were not mentioned in the sections on visual and readability design above.

Activity 2: Apply it! Find a web site you find visually unappealing or confusing. (see Chapter 5, for a list of web sites). Can you find opportunities to improve the design though use of design principles presented in the interaction and usability sections above?

· Choose 3 design principles from the interaction and usability section and apply them to the design of the web site. Sketch a redesign on paper.

22 THREADS OF THE LESSON PLAN Chapter 3

The Threads of the Lesson Plan

This chapter discusses in detail the themes (threads) found throughout the curriculum.

hreads are consistent fibers that run throughout the curriculum, weaving together to form the material presented. The threads of this curriculum are designed to encourage students use of an iterative design process. Each day T consists of a warm-up exercise, a critiquing task, a design/redesign session, a peer review session, and a “toolkit” wrap up session to summarize the days learning and outline for future design work. The threads include multiple types of activities, affording social interaction, personal and group reflection as students work toward producing their PSAs.

23 THREADS OF THE LESSON PLAN

Warm-up Thread Each day of the course begins with a warm-up exercise. They should last approximately 15 minutes long. Warm-ups have multiple intentions in a lesson.

On the first day of a course, they can serve to help students feel relaxed, allow them an opportunity to get to know one another and begin to feel like a team, if future interactions will depend on it. The warm-up can also help to focus students. Many students will still be thinking about where they came from physically and mentally; it is important to help them get into the frame of mind that is appropriate for the kinds of tasks and interactions of your context. Other times, warm-ups can help to frame the day’s objectives. The warm-ups for this course have been designed to focus the students to the objectives of each day and the kinds of participation expected for that day.

Preparatory Lesson The students will begin creating PSA web pages during this introductory class. To assess their existing understanding of messages and PSAs, the warm-up for this day is a brainstorm that gets them thinking about the kinds of messages that are out there about teens, who the messages are targeted at, who created the messages, and how the messages make them feel. Students will be drawing solely on their prior knowledge and intuitions. To make this brainstorming activity effective, we suggest that several ground rules be established before beginning the exercise:

Ground rules for brainstorming

1. NOSTUESO (no one speaks twice unless everyone speaks once)

2. Repeat ideas are okay

3. No one is allowed to comment/critique other people’s ideas during the brainstorm

Day 1 On Day 1, students will be introduced to peer review as a key aspect of the design process. To scaffold their learning of what peer review is and what it should look like, the warm-up will begin to set the tone for giving positive feedback to each other that is related to the work that they do. This idea will be present in the form of playing the compliment game. It is important to stay clear of feedback that is person-related or starts with "What I like about…" or "What I dislike about…"

Day 2 On Day 2, the teens are introduced to usability and interaction design, which takes into account the user’s needs and goals. To aid the teens in understanding what is means to

24 THREADS OF THE LESSON PLAN take the user’s perspective, the warm-up activity has the teens create personas (a.k.a. composite character) for users of their PSA website.

Day 3 Day 3 is comprised of user-testing and a final presentations of the PSAs. To demonstrate one technique of collecting information on how a user will interact with their web pages, a skit of a think aloud will be presented. A think aloud is a type of user testing where the user vocalizes everything that he/she is thinking as they are interacting with the product or design. During this activity the designer will make notes of the user’s navigation, what they say verbally, and mistakes that they make.

25 THREADS OF THE LESSON PLAN

Critique Thread The critiquing thread in this curriculum provides students with an opportunity to discover their own design principles by commenting on the designs of other existing web sites. Teens will be directed in their critiquing by being asked to focus on specific elements supported by prompting worksheets. They will critique both good and bad examples of design and will be asked to provide constructive criticism for both. Teens will also evaluate their own design by looking at the data they gather from user testing.

Preparatory Lesson During the preparatory lesson, teens will critique existing sites. This critiquing exercise will have the teens focus on three elements: the audience, the message (along with attitude), and delivery medium. This activity will introduce them to key features that designers identify when they are critiquing a web site. This guided study of other sites will require the teens to focus their criticism, instead of simply saying how they feel about a site.

Day 1 On Day 1, teens will critique examples of bad text/visual design. This critiquing session will not only require the teens to provide criticism of sites, but also to provide suggestions for improvement. Students will be asked to provide constructive criticism of the sites. By doing so, teens will transform their suggestions into design principles. This will help them extract and externalize what they already know into general and reusable principles.

Day 2 On Day 2, teens will be discussing usability and interaction design. Following a small lecture on these subject matters, teens will be given a list of web sites to critique based on usability and interaction principles. They will use the Eye for Critiquing worksheet, to help scaffold the activity.

Day 3 The third day will be characterized by user testing of the teens’ PSA web sites. This testing will be conducted in pairs. One teen from each group, will user test another group’s site. The format of this testing will be a think aloud. Students will be saying what they are thinking as they are interacting with the site. This will provide the teens, who designed the site, with data informing him/her of his/her design. The teen will then use this data to perform a self-critique and reflection of their own site.

Overall, the critiquing activities in this curriculum serve several purposes. First, they help teens focus and externalize what they already know and feel about design styles. Second, they help the teens translate what they already know into general principles. Thirdly, they provide a means in the form of user testing for the teens to receive feedback on their own site.

26 THREADS OF THE LESSON PLAN

Peer Review Thread

Peer Review is the opportunity for individuals or teams within a group to share their work and receive feedback. Feedback is then used to help the individual or teams to revisit their work and make any changes from what they heard. Ideally, this activity can be used at multiple times during the course of a project and can be directed by the facilitator to focus on different aspects of the project at different times. It is important that the peer review be directed toward the design process and products the individuals or teams create and not at the people themselves.

Peer review not only helps to improve the designs, but also supports the development of communication and higher order thinking skills, which is one of the major developmental tasks of adolescence.

The peer review activities within this course are designed to offer students the opportunity to learn how to give and receive balanced feedback. In addition, they will learn how to make decisions about what to then incorporate in redesigning their projects. They will engage in the process of developing rationales for their decisions and through this process will become more confident about their decisions and their competence as a designer. Hopefully, the students will gain a level of comfort with seeking out and giving feedback and will develop a community of practice around the design process and design principles within their organization.

In order to scaffold the students in this process, Day 1 through Day 3 include a peer review activity.

Day 1 On the first day, the warm-up exercise introduces the students to one aspect of peer review – the positive dimension – in a game called the compliment game. Later in the lesson, the students are introduced to a tool we’ve developed to scaffold peer review. Students will show their first redesign efforts to the group. Their designs will be based on incorporating the first part of the information and readability design principles. Using the Props and Iterations worksheet, the students will learn how to give and receive feedback and present rationales for design decisions.

Day 2 On the second day, the peer review consists of having each team of teens examine their PSAs with respect to usability issues and through the personas the teams created.

Day 3 During the third day, the peer review consists of each of the teams presenting their final designs and once again through Props and Iterations, the students will have the opportunity to present rationales and comment on feedback the group gives them for future designs.

27 THREADS OF THE LESSON PLAN

Design/Redesign Thread One of the most powerful ideas in design is that of iteration. It is also one of the most difficult for students who have gone through “assignment-based” schooling to grasp. In school students are taught to do an assignment. When they are done, they are graded by the teacher. Students are left with an evaluation of not only their work, but also their capability or effort in doing that work. Students who do well make an effort to “get it right the first time.” This lends students to develop an “entity-based” notion of intelligence or ability in an area; either you are good at math, or you’re not. These feelings of entity-based ability can inhibit our motivation to keep trying when confronted with difficult tasks.

This is contrary to one of the most fundamental principles of creating a usable design – that of iteration. Design is an ongoing process in which there are no right answers, only better ones. Better designs can only be reached through the process of developing an idea, getting feedback, testing it, changing it, and testing again. Because designers are building things for other people to use in the real world, they cannot design purely in their heads. Designers build within the constraints of their materials, in conversation with other team members about their users’ ideas and needs. Because users and designers have different understandings and lenses thru which they view/use the design, many problems are uncovered through watching people try to use the product. Design is inherently a social activity.

Participating in an iterative design process can be a liberating experience for students who perceive themselves to have low ability levels in any area. Because the process emphasizes that nothing is ever finished or perfect, its simply better, those students who otherwise might be hesitant to try for fear of failure often readily engage in tasks. Group processes such as brainstorming (in which students are encouraged to put forward crazy ideas without criticism), as well as team problem solving, constructive criticism, user testing and redesigning, take the focus off individual abilities, and provide a variety of media for students to display their strengths. The final presentation’s focus on process and rationale over product provides a supportive environment for reflection and self-assessment.

By maintaining a focus on the design process throughout the curriculum, instructors provide new territory on which a student can reconstruct notions of their own ability. Instructors also can provide new territory for design teams to reconstruct their social interaction, fostering task-oriented collaboration over self-oriented competition.

In the Design/Redesign thread, students practice implementing the design principles they have been discussing in earlier sessions, focusing on improvement rather than perfection.

28 THREADS OF THE LESSON PLAN

Day 1 Students uncover some basic design principles while reviewing sites in the critique sessions, and incorporate these principles into their own designs during the design phase. While students are sharing their review and critiques, the design toolkit will have grown to include some fundamental issues such as color, alignment, repetition, contrast, and text design. Students redo their original sites, which were developed prior to the presentation of visual/readability design principles, by paying attention to these elements.

Day 2 Students uncover usability issues during the course of the warm-up, and critique, and revisit their own designs in light of new principles added to the design toolkit.

1. generate ideas (brainstorm)

4. incorporate 2. first mock-up feedback and then of idea redesign

3. Self/peer reflection and then review

29 THREADS OF THE LESSON PLAN

Toolkit Thread While there are numerous commonly recognized principles of design, they are not set in stone; to be of any value they must reflect the needs of the designers, the design medium, and the users. The intent of this curriculum is not to provide hard and fast rules for students to follow when designing, but rather to help them develop a sense of the necessary questions to ask and things to be aware of while designing. In light of this, a fundamental aspect of this curriculum is the students’ development of a design toolkit over the course of the four days.

The design toolkit represents a summary of the collective ideas of the group regarding general design principles they wish to follow. It is developed each day in the process of designing, as students uncover usability and audience issues, likes and dislikes, processes and problems. The design toolkit informs future iterations of their designs, and may contain items as broad as “Provide visible navigation tools” or as specific as “use these two fonts: ___” The nature of the design toolkit will depend on the future of the design team: will they continue designing together and therefore need style guides to keep work consistent? Will they be working on varied projects, and therefore need general underlying themes?

Design toolkits are developed on butcher paper and kept visible and available throughout the design process. The design toolkit is used both in the design phase of the process and in the review, discussion and assessment phase. Because it is so central, before principles get included in the toolkit they it is important that they be discussed and agreed upon by the group. It may help to organize ideas under headers such as “Graphic design principles” “Usability principles” “Readability principles” and include a space for specific examples.

Design toolkits are an important part of teambuilding, providing a sense of unity among all designs, as well as a reminder of what the group has learned throughout the course.

Our Design Toolkit

Day 1 ! Contrast (make different things look different) ! Lines should be 10- 12 words long

Day 2 ! Make things visible

Day 3 ! Think about the central persona

.

30 THE LESSON PLANS Chapter 4

The Lesson Plans

Lesson plans are provided in this chapter to guide daily activities.

hile stating suggested timeframes for activities to fit within the OpenVoice schedule, the lesson plans are intended to be flexible according to a sites needs. The concepts within each day are robust enough to provide W multiple days of content if an instructor chooses to stretch lessons out. The first lesson covers the concept of PSAs and basic media literacy. The second day presents visual and readability design principles, while the third and forth day focus on interaction and usability issues. Thus, each activity is designed to be accomplished in one day or extended across several days. This feature is based on a philosophy of Donald Schon’s that designers are never done, they just decide it’s time to walk away.

The daily plans contain a side margin for notes where the instructors can continuously adapt the plans to their specific sites for future projects with the same group or improvement with new groups of students. Even the lesson plans are designed to be iteratively designed and redesigned by the facilitator of the curriculum.

31 THE LESSON PLANS

Comprehensive Course Overview Preparatory Lesson Day 1 Day 2 Day 3

Agenda/Objective · Orientation to the concepts of · Visual/readability design · Cover Interaction/usability design · Explore user testing/think aloud Public Service Announcements · Understanding of basic visual and · User goals · Final presentations (PSA) and the field of design. readability design principles · Designer goals · Construction of a PSA · Introduction to peer review · understandability Materials · Butcher paper, markers, · Props/Iteration worksheet, sites · Usability Checklist worksheet, · Tufte Presentation Tips Sheet Dreamweaver, Photoshop for redesign, butcher paper, butcher paper, markers, · User Testing worksheet, markers, Dreamweaver, Dreamweaver, Photoshop Dreamweaver, Photoshop Photoshop Warm-up · Message Brainstorm · Compliment Game · Developing a persona · Role play of user testing

(15 minutes) (15 minutes) (20 minutes) (10 minutes) Critique · Pick a site and identify: audience, · Display discussion of “bad” · Have teens guide the facilitator · Conduct User testing/Think aloud message/attitude, delivery medium readability/visual design. through a web site, noting using worksheet · Note impressions: test, graphics, · Develop principles affordances · Add any new principles to toolkit ease of use, effectiveness · Instructor fills in any missing · Discuss usability and interaction (design process) principles issues and come up with principles · Add to toolkit · Have teens fill out the usability checklist for a bad web site · Add usability principles to toolkit (45 minutes) (25 minutes) (20 minutes) (20 minutes) Re/Design · Message (10 minutes) · Redo using three of the above · Redesign for usability and · Redesign site based on user testing · Concept (10 minutes) principles: interaction · Web design (25 minutes) · Revisit site · Choose three principles · Redesign (45 minutes) (45 minutes) (30 minutes) Peer Review · Show redesigns · Revisit characters · Design presentation · 2-3 students pose questions · Each team’s characters does a · Present final designs · Discuss rationale using personal analysis of each of the · Rationale props/interaction worksheet other team’s sites (25 minutes) (20 minutes) (45 minutes) Wrap-up · Share sketches and designs · Review · Closing review · Review toolkit · Provide rationale · Quick shout out summary · Brainstorm for next time (15 minutes) (10 minutes) (15 minutes) (15 minutes)

32 THE LESSON PLANS

Preparatory Lesson My Adaptations

Goals: During the introductory lesson, students construct a public service announcement (PSA) looking at three critical aspects of design: the message, the audience, and the medium. Students uncover these concepts by critiquing existing PSAs (print, radio, or web- based), developing both a critical eye and a language to express critical ideas. The students will then use this framework to inform their own design throughout the course.

Learning Objective: Students will be able to identify the message, the audience, and the medium in a PSA. Students will be able to provide a clear description and rationale of their own PSA design using these terms.

Materials: Butcher paper, markers, Macromedia Dreamweaver, Photoshop, Eye-for-Critiquing worksheet

Warm-up: Time: 15 minutes

Brainstorm: PSAs and advertisements for teens

1. The facilitator presents to the teens a series of magazine PSAs and advertisements directed toward teens.

For each example ask the students: · Who the creator of the message is? · What the message is? · Who the audience is? · What the attitude of the message is? · What delivery mediums were used (text, graphics, animations, etc.)? · Why they think the designer made these choices?

2. Use butcher paper to record a summary of student ideas.

3. Debrief and summarize students’ ideas about the message, audience, attitude, delivery medium, and rationale for the examples.

33 THE LESSON PLANS

Critique: Time: 45 minutes

Students fill out the Eye-for-Critiquing worksheet (found in the documenting tools section of the appendices) on a web site of their choosing.

They identify: · The audience of the site they chose. Ask them to categorize their audience by age, ethnicity, economic status, etc. (whatever they might feel is important to the site). · The core message of the site or page. What sort of attitude is the site trying to convey? · The delivery medium that the site chose to deliver its message to. Did the site only use text, or did it use lots of graphics, or maybe it chose to use flash or video to convey parts of its message?

Finally, have the students comment on other elements of the site such as: text, graphics, ease of use, effectiveness of site. What is their overall opinion? What would they change? Why?

Design/Redesign: Time: 45 minutes

· Students select a partner and decide on a message they would like to present as a PSA (10 minutes) · Students sketch a brief concept map on paper of their idea, sketching in any graphics, links, and text they would like (10 minutes) · Students mock up an initial draft of their design using Dreamweaver, downloading any graphics they would need from the Web, getting as far as they can in the time available, but ensuring to include a minimum of a paragraph of text and one graphic to support work the following day. (25 minutes)

Wrap-up: Time: 15 minutes

Teens come back together in a group to share their initial concept maps of their designs, presenting a rationale for their choices using the terms message, audience, and medium.

34 THE LESSON PLANS

My Adaptations Day 1

Goals: The goals of this lesson are to promote a understanding of visual and readability design, as well as for teens to learn to accept and review their peers’ work with constructive feedback. Teens will begin to improve their designs through iteration, using their instinctual knowledge of design in addition to the generally accepted design rules to formulate their own set of design principles. This set of design principles will be manifested in the toolkit that will continue to develop over the next two lessons.

Learning Objective: Students will be able to identify basics elements of visual and readability design, including font styles, color, alignment, repetition, and contrast. Students will be able to provide constructive criticism for peers in a supportive environment.

Materials: Props & Iteration worksheet, Macromedia Dreamweaver, Photoshop, list of sites for redesign (found in the appendices).

Warm-up: Time: 15 minutes

The Compliment Game:

1. Put everyone's name in a hat. 2. Students each draw a name. 3. Instructor explains: · You are each going to give a "Prop" to the person whom you drew a name for. · They must be work-related. · Something you have noticed about a skill, talent or interaction you've had with that person that was positive. · It’s more meaningful if they say what they did well and why it was positive. Try not to use the words “I like…”

4. Debrief what that experience was like for the giver and the receiver. Are props hard to give? To receive? Why or why not? How do they effect the team?

35 THE LESSON PLANS

Critique: Time: 25 minutes

In this critiquing activity students focus on sites with poorly presented text/visual design · Present the teens with several ‘bad’ websites that contain text as well as visual displays that attempt to convey information to the reader. · Teens verbally indicate why the sites are difficult to read · -providing rationales for their impressions · -focusing on the physical characteristics of the text and visual elements (alignment, repetition, contrast, font style, etc) · Teens uncover as many as possible of the design principles found in the “summary of design principles” section of the “facilitator preparation” for information and readability design. · Teens add those principles that they come up with to the toolkit.

Re/Design: Time: 45 minutes

Students get together with their design partners to: · Choose three principles from the design toolkit (5 minutes) · Discuss how they can be applied to their current page design and why it would improve their designs (5 minutes) · Make changes based on these principles (10 minutes) · Add any additional elements to their design (25 minutes)

Peer Review: Time: 25 minutes

· Students take turns presenting their designs to the group. · Two to three students from the group pose questions and give feedback using the Props and Iterations worksheet as a guide. · The presenters are given the opportunity to provide a rationale (the reasons) for their decisions. · The feedback is recorded and will be used the next day during the redesign activity.

36 THE LESSON PLANS

Wrap-up: Time: 10 minutes

Review the day’s concepts and experiences through a “Shout-Out” · Students quickly share and summarize what was learned that day. · Students point out the key design principles, skills, techniques and tools. · Then brainstorm things to work on next time.

37 THE LESSON PLANS

My Adaptations Day 2

Goals: Upon completing this lesson, teens will be knowledgeable of usability and interaction design skills. Teens will revisit their designs in light of these new factors and iteratively improve them. Through the construction of a central persona, teens will explore the difference between a user’s goals and a designer’s goals. They will further their peer- reviewing skills by learning to take a different perspective other than their own on their peers’ designs. They will also continue to externalize their design philosophy by adding design principles for usability and interaction to the toolkit.

Learning Objective: Students will be able to distinguish between the users’ goals and designers’ goals through constructing a central persona for their PSAs .Students will become familiar with the dimensions of usability and be able to improve their designs by incorporating features that attend to a user’s needs.

Materials: Macromedia Dreamweaver, Photoshop, Usability Checklist, butcher paper, markers

Warm-up: Time: 20 minutes

Developing a persona: · Do a quick brainstorm asking teens to imagine the “average Jane/Joe user” of Teen magazine (What does she/he look like? Like to eat? Wear? How old? Etc.). Explain that this character is a “central persona,” typifying the main user, or audience, of a product. Try this for another product such as Exlax laxative. · In their PSA pairs have them brainstorm a central persona appropriate for their message (Given their personal a name. What age is the character? Is it a female or male? What are his/her interests, values, etc?) · Have them go around and quickly share their personas · Debrief the affordances and constraints of developing a persona for their projects

38 THE LESSON PLANS

Critique: Time: 20 minutes

· Pull up a web site that is especially difficult to navigate and have the teens tell you how to navigate and interact with the web page. · Prompt them with questions like: · What should I do next? Where should I look now? How can I get back to the page on...? · Prompt them with questions about the site’s affordances. Ask them what elements of the site afford navigation. · Present some of the design principles on interaction and usability. · Have the students add principles to the toolkit · Have the teens critique a web site using the Usability Checklist Tool

Design/Redesign: Time: 45 minutes

Have the students get together with design partners to: · Walk through their site, identifying usability issues from the usability checklist and noting them next to the checklist item. · Discuss what ways they could redesign their site to address these issues. · Redesign elements they have identified to make their site more useable for their central persona.

Peer-Review: Time: 20 minutes

During this activity, the teams will now get in groups of two teams. They will once again use the Usability Checklist and the other group’s central persona to examine whether or not their PSA is usable and understandable for him/her.

Wrap-up: Time: 15 minutes

· Review the concepts of usability and interaction design. · Do a thumbs-up/thumbs-down check around the group of its usefulness. · Then have someone review all the design principles thus far added to the toolkit.

39 THE LESSON PLANS

My Adaptations Day 3

Goals: After completing the last lesson, teens will be familiar with user testing methodologies. They will learn how to incorporate what they gather from user testing into their designs. They will begin to learn the subtleties of user interaction. Teens will learn how to rationalize and present their PSAs in terms of the design principles that they learned through this course. After reviewing the toolkit, teens will be discuss how they will use the toolkit in their future design endeavors.

Learning Objective: Students will be able to conduct a user test using the Think Aloud method. Students will be able to redesign web pages based on the results of user tests. Students present their designs and a rationale for their designs using the language and terminology learned throughout the course.

Materials: Macromedia Dreamweaver, Photoshop, Think Aloud worksheet, Tufte Presentation Tips Sheet

Warm-up: Time: 10 minutes

Think Aloud

A think aloud is a user testing strategy that simply asks the user to talk constantly while walking through the site. The user expresses what s/he’s thinking, what s/he may be confused about, what s/he likes and dislikes.

During the think aloud, the tester can ask questions to clarify the users thoughts. (See appendix for Think Aloud worksheet)

· The instructor presents a role play of a Think Aloud · Ask one of the students to volunteer to test a website. Have the student browse. While the student is browsing ask them to talk aloud what they are doing and thinking. · Have the students in the group share what they saw. What were the problems? Were they major? What worked well? · What did the designer do to encourage talking? (Students note the kinds of questions that were asked, where the designer was sitting, how often the questions were asked, etc.)

40 THE LESSON PLANS

Critique: Time: 20 minutes

During the critique session students user test using the “think aloud” technique · Teams pair up · One at a time, each team conducts a “think aloud” of each other’s sites · Students use the Think Aloud worksheet to document what the other teen is experiencing and saying about their site. · Teens critique their own sites by analyzing the data from their usability test

Design/Redesign: Time: 30 minutes

Have the students get together with their design partners to:

· Review the user testing results (5 minutes) · Identify and discuss alternatives for making their site more usable, pretending they are a new user. · Then begin to redesign their site based on these findings and decisions.

Peer-Review: Time: 45 minutes

On this final day students present their final designs and rationales using the Tufte’s Presentation Tips Sheet, answering questions and explaining their process and rationale using design terminology.

Wrap-up: Time: 15 minutes

Review the toolkit and decide how it should best be preserved (what form it should take, where it should find a home at the organization, and how the group will make sure they are adhered to, revisited, and built upon).

41 APPENDICIES Chapter 5

Appendices

This chapter contains supplementary materials to the curriculum, including background and tools to use in the lessons.

he documents in this section provide more details on the philosophy, the pedagogy, and context of the curriculum. In addition, it provides support for implementing the curriculum such a glossary of terms and ideas presented in T the curriculum (which are denoted within the curriculum by blue highlighted terms), documenting tools to use in the lessons, and tools for assessing the usefulness of the curriculum and student progress. Finally, the facilitator will find an extensive reference section of texts from which the principles were taken from so that they create future design curriculums using the same frame.

42 APPENDICES

Assessment Rubric

Process Non-Designer Beginning Designer Intermediate Designer Advanced Designer

Ideation/brainstorm · Has an idea and runs with it · Has an idea and generates alternatives · Rapidly generates ideas and in a team · Rapidly and unselfconsciously generates in a team context context without criticism ideas in a supportive team context, actively seeking to harvest and build upon the work and ideas of others Design · Puts an idea into production · Generates alternative designs on paper · Sketches alternatives, designing with · Rapidly sketches many alternatives, without planning or discussing before production respect to users needs and revisiting the focusing on team process as well as alternatives, constraints and essential idea. product. Actively seeks input and feedback opportunities from others, involving user/concept studies early in the design process

Critique/ Review · Criticizes work from her/his · Critiques work from own point of · Critiques work from the point of view of · Critiques work from multiple frameworks own point of view, focusing view, using supportive language and users, invoking principles of design when and points of view anticipating multiple mainly on likes and dislikes. making concrete suggestions making concrete, supportive suggestions audiences and situations of use, and using · Presents work from her/his · Presents work from own point of · Presents work from the anticipated point of the terminology and principles of design own point of view without view, providing rationale behind view of users. Presents rationale behind while making supportive concrete rationales. decisions when asked. decisions without being asked. suggestions. · Presents work from the point of view of users, anticipating multiple personas and contexts providing a rationale for decisions and discussing tradeoffs without prompts.

User Test · Does not user test · Observes users to uncover errors and · Observes users to uncover functional flaws · Takes notes or records observations of design flaws. Still considers the self and questions users about goals and intents. users; actively questions users to uncover (designer) as a user. Is able to distinguish self separate from design flaws; seeks to elicit users ideas to user. improve the design.

Re-design · Does not redesign · Redesigns based on personal interests · Redesigns based on user feedback with · Redesigns based on a close reading of and intentions she/he has discovered regard to errors as well as user intents. observation records; incorporates users or observed. Revisits initial goals of design. feedback and ideas in the redesign; is willing to redesign the fundamental aspects of the product to meet user needs.

This assessment rubric is designed to give team leaders a sense of process and interaction in professional design teams. Individual comfort with these ideas and interactions will vary based on a participants individual experience and the overall dynamics of the team. Design process improves through designing; however, a students' awareness of common stages in the development of a designer in a team context can help the student identify her or his own strengths and weaknesses, enabling the whole team to progress more smoothly.

43 APPENDICES

Documenting Tools

Eye-For-Critiquing Worksheet:

Pick and identify a site

Site URL: ______

Site name: ______

Describe the intended audience of the site:

What is the message of the site?

What is the delivery medium of the site?

What other positive/negative features can you identify about the site?

44 APPENDICIES

Documenting Tools

Props & Iterations Worksheet The strongest part of your design was:

I saw that you used these design toolkit principles:

For the next iterations you might consider:

These design toolkit principles might help your design in these ways:

45 APPENDICIES

Documenting Tools

Usability Checklist How do we make sure that we’re attending to the user’s goals?

Ask the following questions:

How will the design be used?

Who will use it?

How frequently?

Does this change what the site should look like?

In what ways?

What kinds of consideration should be made regarding navigability?

In what way does the design attend to the user's need for understandability?

46 APPENDICIES

Documenting Tools

User-testing/Think Aloud Worksheet

User information

Age:_____

Occupation:______Computer Experience: ______

Testing notes

(Notes on what the user does. How does she or he navigate through the site? What was hard for them to find? Did they make any errors?)

Think Aloud Notes

(What does the user say? What parts of the site does the user like best? What gives the user trouble?)

Self-Critique Redesign Notes

(Use the data gathered from the user-test above to critique the design of your site. What design principles can you apply to your site to improve its design?):

47 APPENDICIES

Documenting Tools

Tufte Presentation Tips Sheet (From E. Tufte, Visual Explanations 1997)

1. Near the beginning of the presentation, tell the audience:

What the "problem" is

Why the "problem" is important

What the solution to the problem is

2. To explain complex ideas or data, use the method of PGP

Present the Particulars

Present the General

Present the Particulars again

3. No matter what, give the audience one or more pieces of paper, with material about your presentation

4. Analyze the details of your presentation; then master those details with practice, practice, practice

5. Show up early - something good is bound to happen

6. Finish early

48 APPENDICES

Discourse Glossary Affordances: Attributes of the environment that encourage and lead an individual to appropriate actions. ex: While some doors afford pushing, others afford pulling. Some software have affordances for exploration, while others constrain the user to movement in explicit stages.

Brainstorm: An activity where ideas are rapidly generated about a topic, for a task, for product, solutions, etc. They usually last about 10-15 minutes and the focus is on quantity rather than quality of ideas. Some guideline for conducting a brainstorm are 1. NOSTUESO (No One Speaks Twice Until Everyone Speaks Once) 2. Repetition is okay 3. All ideas are written down, no matter how silly 4. No commenting on suggestion.

Constraint: Conditions under which a designer work or a system operates that limits their functionality. ex. OpenVoice are teens must work within the constraints of AOL's Interface templates defined by Rainman Designer must often work under time and budget constraints.

Critique: An activity in which group members review and/or deconstruct a product or process for underlying problems, concerns, issues, or meaning. In addition, this activity is a time for generating ideas for improvement. For this curriculum, it also includes peer review, so make sure that the focus of the critique is on the processes or product of design rather than the designers.

Design & Redesign: The activity within the design process in which designer engage with their materials, translating their ideas into reality. Then with new information from critique and user testing, the designer revisits their designs and makes changes.

Design Principles: Guidelines which a team or individual designer agree to use in their process both implicitly and explicitly. ex. When beginning a new design project always start with a team brainstorm and include 1-2 iterations. Use contrast to differentiate between elements - for example use backgrounds such as pale green or pale yellow with a charcoal black font type.

Interaction & Usability Design: The design and testing of interfaces that takes into account the user’s goals and psychology, providing clear affordances and feedback for interaction

49 APPENDICIES

Iteration: A revisiting of a design incorporating new ideas generated by user tests, adherence to design principles, and personal intuition.

Readability Design: The design of text that maximizes users’ comprehension.

Think Aloud: A usability testing method that investigates a user's thought processes and behaviors while interacting with a design. In addition it reveals the affordances and constraints of the design. ex. See Think Aloud Worksheet

Toolkit: A collection of guidelines, processes, facts, and resources that help a designer through the different stages of the design process. Helpful if made explicit and tangible.

User test: Having a group of potential target users of the design engage with different versions of the design, and thus incorporating their feedback into the design. This includes user preference, understandability, learnability, utility, etc.

Visual Design: The design of information to be visually appealing and easily accessible.

Warm-up: An activity that helps relax the group, focus their attention, and begin to present the topic of the day's lesson.

ex: Spaceship: Tell the group they will be going on a trip to outer space. They will only be able to take one item. Go around the room and have each member say their name and the item they wish to bring. Unbeknownst to the group, the items must begin with the same letter of their first name. You as the facilitator will begin the game. So you would say, "Hi my name is George and I am going to bring a guitar." If the first students says, "Hi my name is Marta and I am going to be a radio." You would say, "I'm sorry, but you will not be able to get on the ship at this time." Then continue around the circle until the students catch onto the game's rule. This is a good get-to-know you and let down your guard type of game. Spend only about 10-15 minutes playing the game. And if the students don't figure it out, just save it and try it again next time.

Wrap-up: An activity that that concludes a day's lesson, by recapping the concepts, emotions, lessons learned, or frames topics to be covered the next day.

50 APPENDICIES

Site Requirements A needs assessment was conducted by interviewing the director of OpenVoice, who is responsible for training teens selected for the program. His current practices include a two-week training session in which teens learn the basics of web design. Youth would work with this design curriculum after completing the basic training session.

The following are guidelines and requirements for the curriculum as given by the director of OpenVoice:

· The entire curriculum should span two training sessions. · Each training session should be no longer than 1.5 hours · There should be one over-arching principle for each lesson · The curriculum should be very specific and detailed · Don’t require the instructor to fill in too many gaps · The curriculum should be broken down into 15-20 minute blocks · Schedule more time for the activities than you might think (allow for flexibility in the timing) · The curriculum should be example heavy (find examples that are not so obvious) · An autonomous curriculum won’t work for teens. They need guidance and direction · The teens need to express themselves. As a result they will be resistant to rules and guidelines that might seem to hinder their intuitive sense. · Their culture is gaudy, so it will be a challenge to help them break away from it. · The idea of having the teens create a PSA is a great idea. OpenVoice is actually being funded to produce PSAs. · Give them handouts with bulleted points that they can reference while they are designing.

51 APPENDICES

Redesign Example (bad)

Stop Gentrification in EPA

Seven out of the top ten regional cities that have high job growth and a dearth of housing are located in the Silicon Valley. Middle income and low-wage workers cannot afford housing in these highly competitive housing markets near their jobs. Therefore, they look to other Bay Area cities and neighborhoods such as San Franciscos Mission District, East Palo Alto, Oakland and West Oakland for more affordable housing.

This jobs/housing imbalance not only exacerbates traffic congestion, drives sprawl, and threatens the environment, it also tears apart the fabric of low-income communities, whose residents are priced out of their neighborhoods by more affluent demographic groups willing to pay more for housing. As the Urban Habitat Program report points out, the changing demographics of these communities is an important issue. Gentrification almost always means the displacement of a community of color with newly arrived white residents.

Get involved! X?s vH c Contact YEP - the Yuppie Eradication Project X?s vH c 888-555-2020

52 APPENDICIES

Redesign Example (good)

Stop Gentrification in EPA

Seven out of the top ten regional cities that have high job growth and a dearth of housing are located in the Silicon Valley. Middle income and low-wage workers cannot afford housing in these highly competitive housing markets near their jobs. Therefore, they look to other Bay Area cities and neighborhoods such as San Franciscos Mission District, East Palo Alto, Oakland and West Oakland for more affordable housing.

This jobs/housing imbalance not only exacerbates traffic congestion, drives sprawl, and threatens the environment, it also tears apart the fabric of low-income communities, whose residents are priced out of their neighborhoods by more affluent demographic groups willing to pay more for housing. As the Urban Habitat Program report points out, the changing demographics of these communities is an important issue. Gentrification almost always means the displacement of a community of color with newly arrived white residents.

Get involved! s Contact YEP - the Yuppie Eradication Project 888-555-2020

53 APPENDICES

Web Design Resources Online! http://www.jnd.org/index.html Don Norman's homepage -- the king of user centered design http://www.useit.com Jacob Nielsen's homepage -- the king of user centered web design http://www.webpagesthatsuck.com/suckframe.htm A site dedicated to help students "learn good design by looking at bad design" http://builder.cnet.com/Graphics/Design An discussion of web design process http://usableweb.com 803 links about web usability http://webdesign.about.com/compute/webdesign/library/weekly/aa010500a.htm General guidelines for web usability http://webdesign.about.com/compute/webdesign/library/weekly/aa010500a.htm More web design guidelines http://websitegarage.netscape.com A site for diagnosing usability, optimizing graphics and traffic on your website. http://www.builder.com/Graphics/NavSpotlight Great site for navigation design http://webreview.com High level technical tips but also some articles on design techniques http://graphicdesign.about.com/arts/graphicdesign Graphic design site with tips on techniques with graphics tools, but also overall design issues

54 APPENDICIES

Web Resources for Exploring The following sites utilize movement, sounds, color (or lack of) and interesting layouts to draw the viewer into the website. Some use interactivity to further draw the viewer, now the participant, into the website. http://www.balthaser.com/ (SF-based design firm; site launches an automatic tour of the company’s business and their site; one of my favorites) www.yugop.com (very cool design and unique technology features) www.cartier.com (surprisingly creative and interactive; be sure to go deep into site and check out the “magazine” components) www.hillmancurtis.com/site3/motion/index.html (lots of interesting sites and other media on this design firm’s site) www.3dreality.net (quality design and use of colors/light - design and media firm) www.pixelon.net (need to register, but they use flash and video-based media. Have their own “pixelon viewer” that pulls up a viewing screen to watch a their full-screen video/film) www.artasdsign.com (Arnold Richardson’s site – very cool) www.nagafugi.com (interesting design, but not much behind covers) www.insomnious.com/3d (interesting design, but not much behind covers) www.macromedia.com/gallery (lots of cool sites using macromedia technology) www.eye4u.com (NEW) www.caribiner.com (NEW) www.manifestival.com (films change each week, also look at interactive cinema) www.contagiouspictures.com (film company with an interesting interface, not many films) http://www.vir2l.com/ (pretty confusing navigation, but their “Seasons” is definitely worth checking out) www.digitalasylum.com (unique program map, good use of sound) www.jaegermeister.de/anfang.htm (fun site, uses lots of animated “stories”) www.dennisinter.com (good black/white “techno-design”) www.yenz.com/menue/garden/intro.html (really odd, but cool and unique) www.boo.com (go to “boom magazine” on their site) www.amoebacorp.com (very odd) www.egomedia.com (interesting shadows of people – seems Pulp-Fictionesque) http://www.newbeetle.co.uk/flash/sight.html (pretty simple site, but seems effective) http://www.amaze.co.uk/noodlebox/window.html (bizarre, click on rooms) http://www.bullseyeart.com/index_5.html (also bizarre) http://www.kodak.com/US/en/corp/features/veniceDreamTeam/frame.shtml http://www.ricochetcreativethinking.ca/ricochet.htm http://www.tagheuer.com/

Film sites (generally short films using a variety of media): www.ifilm.com www.den.com www.atomfilms.com

55 APPENDICIES

Design and the Digital Divide

The Theory of Multiliteracies In the domain of education, calls for school reform are focused perhaps more now than ever on increasing student achievement in reading and writing. President Clinton, for example, has called on educators to meet the goal of making sure every child can read by the third grade. For the past two decades, however, researchers have begun to investigate literacy as a set of diverse practices that go far beyond traditional conceptions about the ability to read and write (Scribner & Cole, 1978; Gee, 1990). Literacy certainly includes part of what is measured on standardized tests of reading achievement, but it also involves learning how to participate in different arenas of activity that are mediated by print, images, sounds, movement, and technological innovations. Literacy practices are multiple, and different modes of representation, all of which contribute to academic success for students and allow young people access to different social futures.

One diverse group of researchers in education has examined how changes in pedagogy and the economy relate to the development of multiliteracies among students in schools. The New London Group (1996) is comprised of researchers in education, sociolinguistics, psychology, and sociology and are concerned with identifying pedagogies that can provide students with access to jobs in the new economy while at the same time helping students be critically engaged with the social forces that shape their different social worlds. The researchers begin with the premise that young people must have opportunities to learn to represent ideas in different modalities, “much broader than language alone” (New London Group, 1996, p. 64).

The concept of design, moreover, guides the New London Group’s understanding of what becoming multi-literate is. They write, [W]e are both inheritors of patterns and conventions of meaning and at the same time active designers of meaning. And, as designers of meaning, we are designers of social futures—workplace futures, public futures, and community futures. (1996, p. 65)

Design is the key concept for the theory of multiliteracies. As designers, the individual is both the receiver and creator of meaning. And, as designers of meaning, human beings are designers of social futures.

Three concepts about design are central to the New London Group’s ideas about what students need to learn. First, students must learn how to use available designs, that is, the way people typically communicate (orally, in print, via technology) in particular social spaces and the conventions people use to structure their relationships with one another. This can include language as well as other modes of literacy that have been previously established. Students must also learn the art of designing, that is,

56 APPENDICIES transforming given knowledge and conventions into new interpretations, arguments, and representations of knowledge. Design may result in presentations that demonstrate print literacy, but it may also result in demonstrations of students’ skill in combining visual, auditory, spatial, gestural, and other kinds of meanings into a coherent product (Penuel, Means, & Korbak, 1999). Finally, through the practice of re-design, learners engage in a process of creating new languages for expression, problem solving, and integration into new and emerging communities of practice. Re- design involves transformations of learners’ relationships to each other and to their own identities through the process of examining, deconstructing and negotiating a new common ground for discourse and learning.

The New London Group emphasizes the idea that the juxtaposition of different languages, discourses, styles and approaches supports the development of meta- cognitive and meta-linguistic abilities. This empowers an individual to use the tools of critical framing when diagnosing a complex system, interaction, or problem. The kinds of problems that are most critical for learners to encounter are those that might be described as “wicked problems” (Popper, 19xx; Rittel, 1967). Wicked problems describes a class of social system problems which are ill-formulated, the information is confusing, there are many clients and decision makers with conflicting values, and the ramifications in the whole system are thoroughly confusing." (Rittel, 1967). Whether learners are solving a math problem, building a robot, creating a sculpture or negotiating a business deal, practice in learning how to flexibly choose modes of discourse will make this exchange more successful.

Multiliteracies in School and Out Schools are by no means the only place where there is an emphasis placed on literacy or multiliteracies. In fact, many after-school programs in community centers, libraries, churches, and other locations outside school have focused on the same goals identified by the New London Group, namely providing youth access to and tools for critical engagement with the social futures of the new economy. In many ways, these settings have more readily identified with the need to provide access to literacy practices that go beyond print and have emphasized youth development in music, visual arts, drama, and design. They have seen participation in valued community practices, moreover, as the goal of their programs, and their evidence for success has been measured far less by standardized test scores than by the service youth have performed in those programs, the artistic performances they’ve presented to their communities, and the jobs that others have hired them to do helping others in the community (see Heath & McLaughlin, 1994).

The clear connection drawn by many youth programs between individual youth development and community change puts these community-based organizations in a particularly strong position to develop a pedagogy of multiliteracies that includes all of the different strategies. First, youth organizations offer opportunities for meaningful

57 APPENDICIES practice, through cycles of planning, acting, and evaluating (Heath & McLaughlin, 1994). Their practice frequently involves students in addressing wicked problems (Rittel, 1967) of their community. These are problems such as community violence that are ill-formulated, that have no “right” answer, but that require youth to consider conflicting information and examine discrepant value systems. The solutions to the problems, moreover, may have consequences that cannot be predicted ahead of time but must be experienced (and responded to) as the solutions are enacted.

For low-income, urban youth who are at risk of dropping out, schools are often “experienced as hostile and demeaning environments where neither youth nor their interests are heard or taken seriously” (McLaughlin, Irby & Langman, 1994 p. 213). The learning opportunities embedded in experiences within youth organizations provide different structures for participation than school, encouraging youth to re- evaluate themselves and redefine their role in the community. The projects youth participate in are contextually authentic – authentic to youth – within a supportive organizational structure. [A]pprenticeship, peer learning, authentic tasks, skill-focused practices and real outcome measures permeate these organizations that shape ‘everyday’ learning for inner-city youth between the ages of 8 and 18 into cognitive and social apprenticeships. (Heath and McLaughlin, 1994, p.472)

Participation on a tumbling team or contributing to a community’s mural teaches youth to value perseverance, responsibility, and dedication. Individuals develop strategies to overcome obstacles and to treat mistakes as learning opportunities rather than failure. Being able to see the product of their hard work encourages youth to recognize their potential and, in turn, disregard the negative messages they may be receiving in school (McLaughlin et al, 1994). They recognize that learning can be related to authentic tasks and need not be limited to traditional school assignments. In being authentic, the projects youth engage in at youth organizations employ the strategies of situated practice and overt instruction – allowing youth to begin to feel comfortable with the language of design.

To be sure, many youth organizations offer young people much more than just situated practice. Adults often provide specific overt instruction that introduces youth to tools that others in the community value—such as conflict mediation, presentation skills, and activity design—that give them access to a wider audience for their activities. Many organizations also provide youth with opportunities for constructive critique (critical framing), focused on identifying conditions such as poverty, racism, sexism, and homophobia, that may block community development. Finally, youth in community-based organizations often take on leadership roles in which they themselves transform social practices, by creating youth businesses, community murals, or by acting as role models for other teens.

58 APPENDICIES

Technology and the Development of Multiliteracies To teach design, the New London Group (1996) identifies four distinct pedagogical strategies. They are situated practice, overt instruction, critical framing, and transformed practice. Situated practice refers to providing youth with opportunities to become immersed in practice, to have a legitimate role within the ongoing activities of the design process, even as they are novices learning to become more expert in some particular area. Overt instruction is training in the use of a “language of reflective generalization that describe the form, content, and function of the discourses of practice” (p. 86). In other words, it involves teaching a language to describe design processes and elements so that students can gain mastery over the process of design. Youth learn critical framing when their adult and peer guides help them to frame their growing mastery of design practice in larger cultural, historical, and political context. In critical framing, students learn to apply and extend the language of design, offering constructive critique to existing designs and tools. Finally, in transformed practice youth develop ways to demonstrate their skill in creating new designs—innovative solutions to difficult problems—through the application of design skill, critique and revision, and the construction of new social futures in which they are active participants.

Among the different kinds of modalities of literacy described by the New London Group, the researchers emphasize the significance above all of helping students learn to construct multimodal meanings. In other words, they advocate students learning how to integrate different modes (visual, audio, gestural, spatial, and linguistic) to one another into a coherent design. The multimodal “relates all the other modes in quite remarkably dynamic relationships” (New London Group, 1996, p. 80).

While we are learning more and more about the ways that engaging students in using technology to develop multimodal literacy in school, we know far less about the effects of such technologies in community-based youth organizations. A growing number of innovative programs across the U.S. have started to use technologies in their programs in ways that have already begun to enhance and transform their practices. Given these organizations unique relation to the community, we believe that the potential is great, for both individual students and the communities in which they live. In the following section we introduce a conceptual framework for describing, evaluating and understanding learning technologies in community-based youth organizations as part of a pedagogy of multiliteracies.

Our theory is grounded in three core design principles that proposes that technology changes the processes and outcomes of learning. [Bill- this sounds weird, I know. What I want to point to is that we want to acknowledge the work of Heath and McLaughlin, but say more because of technology.] Within the design principles of our theory are six sub-elements of our framework that describe program features that afford the greatest opportunities for the transforming potential of technology through a pedagogy of multiliteracies.

59 APPENDICIES

The first principle addresses providing access to the language of design. Through two of the modes of pedagogies for mastering the language of design, situated practice and overt instruction, this first principle addresses ways that youth have access to the tools of design, practice with the tools, and introduction to the community of practice of designers. The three program features that support providing access to the language of design are projects and performances, multimedia design, and all-way expertise. Through participating in ongoing projects, performances, and artistic creations that allow for exploration and practice of basic design skills, youth have opportunities to participate in meaningful activities that give them access to the workplace. In addition, projects and performances support the development of self-expression, learning through querying, and learning how to present ideas that may differ from the norm.

Computer technologies are particularly powerful tools in helping people to construct multimodal designs, and therefore are a potentially powerful means to supporting youth development. Multimedia technologies, for example, are a potentially powerful support for learning to become a competent member of a community of practice (see Erickson & Lehrer, 1998). Through multimedia designs, students begin to learn to language of "multimodal literacy." When students produce multimedia products, they make public artifacts that connect them to communities beyond the classroom. The prospect of having their work published on the Web or shared with the community at a public showing can engage students’ identities and excitement about learning and motivate high-quality work. Technology can also support the development of meaningful peer collaboration by allowing youth to recognize diverse skills and the competencies of their peers (compare Cohen & Scardamalia, 1998). Currently, overt instruction of multimedia design is based on off-the-shelf graphics software. If the teaching of multimedia design were to extend beyond these tools, people can learn to incorporate their thinking process and artistic and social expression with the skills of math and technology.

Through such multimedia-based authentic activities, students become familiar with different aspects of design. The authenticity of the learning through design in technology-rich CBOs engages youth from beginning to end as full-thinking and acting members of projects. The seasonal cycles of plan, prepare, practice and perform are embedded into all ways that youth engage in ongoing projects. Youth contribute to the collective learning process along with reflecting and building on their own learning process. Whether it be a performance, art exhibition or community mural, the learning is an ongoing process embedded in the participation in the practice of or engagement in the activity. Public performances and finished products shared with the wider community provide a real accountability to youth programs, offering young people opportunities to demonstrate their skills to others and (often) to prove to adults the breadth of their competence. Especially where young people have created their own businesses, the external accountability provides a strong motivation to succeed.

Essential to the model of providing access to the language of design through situated practice and overt instruction is all-way expertise. Ongoing projects demand that both

60 APPENDICIES skilled adults and peers provide strategic support to scaffold learning of youth in the process of design, projects and reflection. Within authentic activities, youth organizations design projects where youth can play the role of the expert and the learner, or the coach and the coached helping to foster their sense of competence and sense of self. Not only are the adults mentoring the youth, but the youth begin to see each other as resources as well.

The adult leaders are key to successful CBOs because they value the diversity of age, talents, experiences and needs of the young people that participate in their programs. They demonstrate their perspective that youth are resources rather than problems to be fixed through the participation structures within the activities and the discourse around youth. Employing the suggestions of youth and supporting their execution of ideas are ways that the adult leaders confirm their view that youth belong in the organization and have a voice in the organization.

The second design principle focuses on the reflection within the design process which builds on the pedagogy of critical framing. Reflection within the design process challenges the learners who have been introduced to the language of design to reflect on their the available designs they have learned to use and begin to engage in a process of designing their own works. Through activities that culminate in some sort of performance, youth work towards external deadlines. Certain audiences can give feedback, which contributes to an individual's self-assessment processes. Peer critique becomes a critical element in the self-assessment process. Because the design of activities in CBOs do not end with a final performance, but rather continue with reflection and more cycles of planning, preparing and practicing until the next performance, opportunities to share work with community members, families, clients and even perhaps experts add to the authenticity of activities in CBOs. Opportunities for ongoing reflection within projects allow youth to question themselves and build confidences in their competencies.

Through collaborative projects that incorporate the concepts of authentic learning mentioned above, youth are discovering their competencies in areas such as planning, problem solving, and decision-making. In most projects, youth must work toward an external deadline to complete their work or prepare for a performance. At the end of a project, there is time for closure and reflection. Authentic learning designs promotes conceptual understanding and flexible use of the knowledge gained through a task which are key to preparation for participating in the new economy.

The design of activities within youth organizations steers focus away from measures of competence that emphasize merely academic achievement. The authenticity of the learning environment promotes a more holistic set of competencies that include socio- emotional well-being and critical thinking.

Finally, through participation in practice and engagement with other youth and adults in youth organizations, young people develop identities that include commitments to

61 APPENDICIES social responsibility and reflect their growing sense of themselves as competent members of their organization.

The third design principle involves the designing of social futures. Building on the mode of pedagogy of transformed practice, this principle employs the notion of youth as designers of social futures. Challenging youth with "wicked problems" and guiding them through innovative solutions - through the application of design skills, critique and revision, and the construction of new social futures in which they are active participants- represents the core of this final principle. Supporting youth to feel competent as designers of social futures is only possible because youth feel safe and supported within the context of the organization. Membership and belonging to a youth organization and design of persistent changes in the community are two program features that offer the a "comfort zone" and products that validate one's membership to a larger community. These two features support the final design principle. Membership and belonging provides opportunities for youth to develop identities, affiliations, and friendships that give them a sense of belonging in an extended family. Projects and performances that transform practice by creating lasting effects of their work for themselves and their community can only happen when an individual feels a sense of belonging, especially to a community of practice that involves the designing of social futures.

Many of the youth that participate in CBOs feel alienated from schools (McLaughlin, Irby & Langman, 1994). In addition, the messages and influence of the streets in their communities are strong and filled with risks. CBOs offer a place for young people to reflect on the places they come from and feel alienated from and the places they’d like to go. They serve as border zones for youth who need a place to sort out the discontinuity between the messages they receive from the streets in their neighborhoods and the mainstream institutions of employment and education. Technology serves as a tool for enhancing the potential of CBOs as border zones by bringing new students to the center and engaging them in "wicked problems" that are relevant to each individual.

Due to the voluntary nature of CBOs and the performance piece of the authentic task within CBOs, adult leaders within youth organizations must demand some level of commitment from the youth. The rules are guided by the philosophy of minimal rules with maximal impact. These rules are generally linked to the notions of family [Need to build in more about how these places serve as extended families], co-created by the adults and the youth, and designed to promote the successful completion of projects. Because the rules within CBOs are co-constructed by the adult leaders and youth, upholding the rules becomes part of a joint effort and a mark of ownership and belonging within the organization. These structures help to create an environment that rarely looks or feels like school, which many young people perceive to be domains of rules rather than learning.

62 APPENDICIES

Bibliography

Cooper, A. (1995). About face : the essentials of user interface design. Foster City, CA: IDG Books.

Cope, B., & Kalantzis, M. (1995). Productive diversity: Organizational life in the age of civic pluralism and total globalisation. Sydney: Harper Collins.

Gee, J.P. (1997). The new work order: Behind the language of the new capitalism. New York: Westview Press.

Joint Venture: Silicon Valley Network. (1999). Joint Venture’s workforce study: An analysis of the workforce gap in Silicon Valley. San Jose, CA: JVSV.

Kim, Deborah & Penuel, William. (2000). Technology Access and Learning Opportunities in Community Technology Centers: A study of promising practices and organizational challenges. In collaboration with the vStreets Research Group at the Center for Technology in Learning, SRI International.

Kirkpatrick, W. H. (1918). The Project method. Teachers College Record. Also reprinted in Schultz, F.(Ed.) Sources: Notable Selections in Education. Guilford, CT: The Dushkin Publishing Group.,Inc., pp.26 - 33.

Lazarus, W., & Lipper, L. (2000). Online content for low-income and underserved Americans: The Digital Divide’s new frontier. Santa Monica, CA: The Children’s Partnership.

Lynch, P. J., & Horton, S. (1999). Web style guide: Basic design principles for creating web sites. New Haven, CT: Yale University Press.

McLaughlin, M.W., Irby, M.A., Langman, J. (1994). Urban sanctuaries: Neighborhood organizations in the lives and futures of inner-city youth. San Francisco: Jossey- Bass.

New London Group. (1996). A pedagogy of multiliteracies: Designing social futures. Harvard Educational Review, 66, 60-92.

Norman, Donald A. (1988). The design of everyday things. New York: Doubleday

Readability principles summarized by Michael Kamil, Ph.D. (Winter 2000)

63 APPENDICIES

Penuel, W. R., & Means, B. (2000, April). Designing a performance assessment to measure student communication skills in multimedia-supported project-based learning. Paper presented at the American Educational Research Association’s Annual Meeting. New Orleans, Louisiana.

Rawcliffe, F. W. (1925). Practical problem projects. Chicago: F. E. Compton & Company.

Tufte, E. (1983). The Visual Display of Quantitative Information. Cheshire, Conn.: Graphics Press.

Tufte, E. (1990). Envisioning Information. Cheshire, Conn.: Graphics Press.

Tufte, E. (1997). Visual Explanations. Cheshire, Conn.: Graphics Press.

U.S. Department of Commerce. (1999). Falling through the Net: Defining the Digital Divide. Washington, DC: National Telecommunications and Information Administration.

VStreets Research Group. (1999). Spanning the Digital Divide: Designing social futures with technology in community-based youth organizations., SRI International.

Williams, Robin. (1994). The non-designer's design book: Design and typographic principles for the visual novice. Berkeley: Peachpit Press.

Yale C/AIM WWW Style Manual. (http://info.med.yale.edu/caim/manual/contents.html)

Zeldin, S., & Price, L. A. (1995). Creating supportive communities for adolescent development: Challenges to scholars. Journal of Adolescent Research, 10, 6-14.

64

65