The Powerful Webcomic Approach – Learning from the Smithsonian

302

The Powerful Webcomic Approach – Learning from the Smithsonian Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History

July 16 & 17, 2009

Produced by Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

Robert Costello, Smithsonian National Museum of Natural History Dan Bliton, Booz Allen Hamilton

2 Hey. I am Dan.

Hi. I am Robert.

Go on. Tell them..

[email protected]@si.edu [email protected][email protected] ReferencesReferences at: at: http://del.icio.us/Learning2007 http://del.icio.us/Learning2007

Session 302 – The Powerful Webcomic Approach – Learning from the Page 1 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

Agenda

I. Stories Compare a typical case study approach and more sticky story-based approach (see your hand out for Case Study One) The sticky story checklist II. Visual Storytelling at the Smithsonian Why use visual storytelling, like Webcomics? Example design from the Smithsonian’s Webcomic – The Secret in the Cellar Results and Lesson Learned

StoriesStories areare experienceexperience simulators.simulators. TheyThey provideprovide thethe information,information, thethe context,context, andand thethe modelsmodels thatthat peoplepeople needneed toto makemake decisions.decisions.

4 How familiar are you with Storytelling and Visual Storytelling approaches?

Why did you choose this session?

PleasePlease type type your your replies replies into into thethe chat chat window. window.

Session 302 – The Powerful Webcomic Approach – Learning from the Page 2 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

5 Approaches for Making Your Learning Stick!

Storytelling Visual Storytelling

Improves retention Makes oral and written text more concrete

Engages learners Increases the number of concepts learned

Yields deeper, more accurate learning Improves recall

Enables emotional connections and Taps into existing visual acuity skills advocacy Offers knowledge instead of data Facilitates action-based stories with limited text Impacts affective domain

How do you turn a boring story about a machine into a sticky story that will produce action?

An example from Sources of Power, by Gary Klein http://www.decisionmaking.com Using a Stephen Denning storytelling approach

www.stevedenning.com

Session 302 – The Powerful Webcomic Approach – Learning from the Page 3 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

7 We are going to present the same basic information it two ways First - A typical case study Second – A more sticky story-based approach

Malfunctioning Heart Monitor - a case-study story

Session 302 – The Powerful Webcomic Approach – Learning from the Page 4 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

9 Read the case study below targeting new neonatal nurses and offer suggestions for improving the instructional intervention.

Case Study: Malfunctioning Heart Monitor Teaching Point: When a patient is suffering a pneumopericardium, the heart rate monitor does not reflect the real heart beat. Definition: pneumopericardium (new – mO – perI – cardium) - A condition of new-born babies: Air fills the sac that surrounds the heart and turns it into a balloon. The heart is essentially paralyzed. Scenario: A nurse in a neonatal unit notices a baby having subtle color changes over a period of several hours. Then in a matter of seconds, the baby turns blue-black… The Goldway 4000F Vital Sign Monitor shows that his heart rate drops but then holds steady at eighty beats per minute. The nurse assumes it’s a collapsed lung. He calls for X-ray, and a doctor to come and puncture the baby’s chest wall to relieve the lung. Because neither the doctor nor the nurse recognizes that a pneumopericardium is present in time, the baby dies.

Source: adapted from Klein, Gary (1998) Sources of Power : HowHow would would you you improve? improve? Please Please type type How People Make Decisions. MIT Press youryour replies replies into into the the chat chat window. window.

Action story

Session 302 – The Powerful Webcomic Approach – Learning from the Page 5 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

Session 302 – The Powerful Webcomic Approach – Learning from the Page 6 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

14 A case study is made interesting

The boring story of a malfunctioning machine The courageous story of Karen

The story now provides simulation (knowledge about how to act) and inspirationinspiration (motivation(motivation toto act).act).

Session 302 – The Powerful Webcomic Approach – Learning from the Page 7 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

15 Answer the ABCs to turn a case study into a story

Action - What is the starting event? Background - What is the situation? Conflict - What needs to specifically happen? Development - What happens and who is involved? End - Why is this valuable?

16 Sticky Story SUCCESS Checklist

Simple Unexpected Concrete Credible Emotional Sparks Action (or provides Solution)

Source: Adapted from Made to Stick: Why Some Ideas Survive and Others Die www.madetostick.com

Session 302 – The Powerful Webcomic Approach – Learning from the Page 8 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

18 Can you predict the most effective communication method for an organization?

A study analyzed the effectiveness of four different methods of persuasion - when given the task of communicating that an organization really practiced a policy of avoiding layoffs. Which was the most effective method? A. A story alone B. Statistical data alone C. A combination of statistics and story D. A policy statement by senior company executive

Source: Martin, J. and Powers, M. "Organizational Stories: More Vivid and Persuasive than Quantitative Data."

Session 302 – The Powerful Webcomic Approach – Learning from the Page 9 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

19 Trouble at Checkpoint 4 was used to kick off discussions in online Army forums

Source: Command Performance Research, Inc.

StoriesStories provide provide the the context context for for learners learners to to make make decisions. decisions. WithinWithin 48 48 hours, hours, Trouble Trouble at at Checkpoint Checkpoint 4 4 was was the the highest highest ranked ranked contributioncontribution of of the the 5705 5705 knowledge knowledge objects objects posted posted in in the the discussion discussion forum.forum.

Smithsonian’s National Museum of Natural History

We inspire curiosity, discovery, and learning about nature and culture . . . 6 – 7 million onsite visitors and 30 million online visitors in 2008

Session 302 – The Powerful Webcomic Approach – Learning from the Page 10 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

21 The Museum needed to expand reach and teach scientific learning objectives STUDENT RESPONSES

Percent of students that selected “Very – Extremely Well” on the • Increase public question - How well did the Webcomic understanding of the inform you on: process of science The scientific process 67% • Increase public awareness of NMNH The practice of archaeology 57% research The practice of forensic 85% • Increase understanding Anthropology of forensic science Colonial Chesapeake 52% history

22 Audience characteristics – middle and high school students • Very computer savvy and connected • The members of the EYE generation are visually acute. They play video games, watch movies, and read comic books.

Session 302 – The Powerful Webcomic Approach – Learning from the Page 11 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

23 Design idea: Webcomic with a main storyline and links to additional information and other activities from the main storyline Scene 1 – Introduce hero Scene 2 – The hook

•Les sons •De finiti •P ons redic • tive Bran activi ching ties story Image Source: Smithsonian National Museum of Natural History

Why do a Webcomic?

StoriesStories are are experience experience simulators. simulators. TheyThey provide provide the the information, information, the the context, context, and and the the modelsmodels that that people people need need to to make make decisions. decisions.

Session 302 – The Powerful Webcomic Approach – Learning from the Page 12 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

25 Visuals can help stories be more understandable – Example: Macbeth | Act I, Scene 2 MALCOLM. This is the sergeant Who, like a good and hardy soldier, fought 'Gainst my captivity.--Hail, brave friend! Say to the king the knowledge of the broil As thou didst leave it.

SOLDIER. Doubtful it stood; As two spent swimmers that do cling together And choke their art. The merciless Macdonwald,-- Worthy to be a rebel,--for to that The multiplying villainies of nature Do swarm upon him,--from the Western isles Of kerns and gallowglasses is supplied; And fortune, on his damned quarrel smiling,

WantWant more? more? See See What What is is “Visual “Visual Language"?:Language"?: What What comics comics can can tell tell us us aboutabout the the Mind Mindbyby Neil Neil Cohn. Cohn. Source: http://www.classicalcomics.com

26 Have you seen the Manga section at your local bookstore and library?

“It's old news that shojo is hot. And the corollary, that girls are pushing graphic novel sales, is well known. What's less well known is that young female creators are among the hottest new comics artists.”

Session 302 – The Powerful Webcomic Approach – Learning from the Page 13 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

27 Visual storytelling is sticky and an effective instructional approach Visual storytelling: • Makes oral and written text more concrete – more understandable • Increases the number of concepts learned • Improves recall • Taps into existing visual acuity skills • Facilitates action-based stories with limited text

Image Source: World Bank Comic: 1 World Source: Stephen Cary Manga Passage 2: HIV/AIDS - First Love

Click the image above and then use the arrow Source: L10 http://l10.biz/ Click the image above and then use the arrow buttonsbuttons to to advance advance through through the the 9 9 pages. pages.

Session 302 – The Powerful Webcomic Approach – Learning from the Page 14 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

29 What other options did we consider?

Decided not to do a game nor add audio. Do you think we were right?

30 Webcomic Storyline Development Process

1.1. PencilsPencils inin PPTPPT 2.2. InkedInked inin vectorvector formatformat

4.4. LimitedLimited 3.3. ColoredColored inin andand animationanimation andand put in Flash texttext addedadded

Session 302 – The Powerful Webcomic Approach – Learning from the Page 15 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

31 Smart thing – Held focus group with middle and high school students When: After the pencils were done How: Each character role assigned to a student; read story aloud (no activities)

32 Great feedback from the focus groups confirmed approach was on target

At first I didn’t think I would like it. I am not the type of person who likes comic book-type stories, like this one. Luckily, I enjoyed it greatly. I think most of the panels were excellent.

I thought it was good I liked it. It was a good story. If they made it a website it would be awesome.

I thought the overall impression of the story was nice because I understood what the story was saying. It’s also interesting because the story is about someone our age. The presentation was nice, a little boring but maybe it’s because there was no color

Session 302 – The Powerful Webcomic Approach – Learning from the Page 16 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

34 Activities allow the learners to view new information in an article format and then apply it

After the learners were introduced to a need for knowledge and information within the story, they were provided thethe opportunityopportunity toto digdig deeper,deeper, makemake theirtheir ownown judgmentjudgment calls,calls, andand compare their answers against other viewers. Sometimes, photos from the actual case were compared against examples.

Session 302 – The Powerful Webcomic Approach – Learning from the Page 17 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

35 Used polling questions instead of standard static multiple-choice questions to make the activities more of a connected experience

Our audience is used toto collaboratingcollaborating asas partpart of an online community. Plus, we thought that theythey wouldwould paypay moremore attention once they saw theythey werewere oneone ofof thethe fewfew people to choose a certain answer.

36 Design idea: Make activities modular for flexible use by teachers and incorporate Facebook fan site

The audience uses Facebook and hopefully will viral-market thethe sitesite throughthrough theirtheir socialsocial networking.

Session 302 – The Powerful Webcomic Approach – Learning from the Page 18 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

37 Would the Webcomic be more instructionally effective with audio?

You can also submit responses about the use of audio in e-Learning in a more complete survey..

Session 302 – The Powerful Webcomic Approach – Learning from the Page 19 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

39 Google Analytics for Tracking With low numbers at the start of a rollout it is risky to say there are any trends at all, but … • Bounce Rate is low - good • Time on Site is high - good • Behind the Scenes is highest page and exit page - good • Print – Help is third highest exit page • Top content roughly follows the sequence it is offered • Highest traffic areas are VA and MD

Google Analytics generates multiple reports based on a small piece of script that was included on all pages, but …

40 Sample Survey responses

Who is using The Secret in the Cellar Webcomic?

• I am 72 years old and fascinated by the scientific study of the world around us. • Parent, History Buff, Homeschool Mom, Forensic Anthropologist—really! • Retired Diplomat, Museum Curator, Museum Educator, Budget Analyst age 55 • Retired Military, Retired Teacher, Genealogist 50 year-old

Session 302 – The Powerful Webcomic Approach – Learning from the Page 20 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

41 Would you recommend the Webcomic to a friend by sharing the Web address?

42 Sample Survey responses to the question - What aspects of the Webcomic did you like best?

• Sharing the information with my grandchildren and building their interest prior to visiting the exhibit • That you could click on extra links to learn more . . . the process they go through . . . that really captured my 9 year old interest • My kids all liked the comic aspect of it and the “mystery” aspect of the story • Visuals, pictures are good for my memory and my type of learning • “Vote” is a seamless test your knowledge approach • I found myself interested in a topic that wouldn’t ordinarily interest me • At first, I thought sound might help. However, on second thought, it would prohibit the student from focusing on the PROCESS of learning, which I believe is the goal of Education.

Session 302 – The Powerful Webcomic Approach – Learning from the Page 21 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

43 Section 508 Compliance Approach

• Long Description link (only seen by a screen reader) to text-only version • Webcomic is readable by a screen reader – provided alternate text and revised text in a separate script for each page • Printable and screen readable PDF versions available for the Webcomic and Activities

44 The ABC Guidelines for Visual Storytelling

• Action – Show the story, don’t just talk about it • Balloons – No more than 3 to 4 balloons per cell • Cells – No more than 6 cells/panels per page • Dialogue – No more than 12 to 15 word per balloon or 30 words per cell

Session 302 – The Powerful Webcomic Approach – Learning from the Page 22 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

45 Lessons Learned

• Instructional Designers should sometimes think about themselves as knowledge marketers and writers • Sustaining an interesting story is a deliberate process (and you still have to work with SMEs) • Apply multiple Section 508 (Flash, HTML, and PDF) approaches • Surveys can be branched to capture the interests of different audiences Write short simple surveys and then make them shorter • Use social networking for marketing and feedback (Facebook) • Adobe Flex is different from Flash

What was Tom Hanks character’s big idea in the 1988 movie BIG?

PleasePlease type type your your replies replies into into the chat window. Source: the chat window. 20th Century Fox

Session 302 – The Powerful Webcomic Approach – Learning from the Page 23 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History Not Just a Pretty Interface: Visuals and Graphics that Enhance Learning July 16 & 17, 2009

The Secret in the Cellar Webcomic: http://writteninbone.si.edu/comic

Links to additional references and examples at: http://del.icio.us/Learning2007

Please complete the survey about the use of audio with static images in e-Learning at: http://www.surveymonkey.com/s.aspx?sm=Dpvvrq9312f5qcre97wy4w_3d_3d

Robert Costello ([email protected]) Dan Bliton ([email protected])

Session 302 – The Powerful Webcomic Approach – Learning from the Page 24 Smithsonian - Daniel Bliton, Booz Allen Hamilton and Robert Costello, Smithsonian’s National Museum of Natural History