Book design ÂŠ 2015 by Hannah Coward. #03674764 All rights reserved. Hannah Coward firstname.lastname@example.org Published by Hannah Coward for the course GR 801: Thesis Refinement, instructed by Carolina de Bartolo in Fall 2014 at Academy of Art University, San Francisco, CA. No portion of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means electronic, mechanical, photocopying, recording, or otherwise without the express written permission of the publisher.
CONTENTS Problem & Research
PROBLEM HIGH SCHOOL SCIENCE IS CONFUSING AND DIFFICULT 48% OF CONFUSION COMES FROM TEACHER EXPLANATION
30% COMES FROM POOR MATERIALS*
*Self-conducted survey of 100 high school students, all grade levels. Students assigned percentages to sources of difficulty: teacher explanation, poor materials, lack of effort or motivation, other. These percentages represent the average percentages assigned to the top two categories.
STUDENT INTERVIEWS: WHAT MAKES LEARNING SCIENCE DIFFICULT? Out of 100 high school students surveyed, most attributed confusion to poor materials and explanation, but attributed difficulty differently. It was important to make the distinction between confusion and difficulty because any solutions had to be both clear and easy to use. These results made it clear why so many students opt out of Chemistry, and why 58% of juniors and seniors consider concepts in Chemistry to be the most difficult aspects of science to understand. 28%
Difficulty visualizing concepts Move to next topic too fast
Difficult vocabulary Topics seem pointless and itâ€™s difficult to care
To students, chemistry is infamously boring and difficult to visualize. And the reason for this is because we really don’t know how it works. For every rule there is an exception, and for every fact we know, there are ten we don’t. Unlike Biology or Physics (where objects obey tangible forces like gravity), Chemistry operates on a somewhat different set of rules—rules that boil down to quantum physics. Students can’t fully understand why or how certain things in Chemistry operate, but must still use math to describe reactions and relationships between chemicals.
58% JUNIORS AND SENIORS AGREED THAT CHEMISTRY IS THE MOST DIFFICULT SCIENCE TO LEARN
PROBLEM & RESEARCH
What is the most confusing topic you have ever tried to learn in science? CHEMISTRY!
Everything about Chemistry
Conversion of units
When math mixes with science
PROBLEM & RESEARCH
INSTRUCTOR INTERVIEWS: HOW DO STUDENTS LEARN? After determining the problem area within high school science, I went to ask teachers how students learn best. Students themselves tended to be biased in their answers, generally equating fun with learning, so instructor interviews provided important context for interpreting student responses—as well as understanding teachers’ needs.
My kids love hands-on stuff. Unfortunately,
You can lead them to the answer...but they
most of the time, they’re not prepared to
can’t do the exact same thing again.
do hands-on stuff.... They don’t know how to analyze what they see when it actually does happen.
They want you to drop it in their lap. And we’ve created that video game generation.
We’ve helped them so much that they can’t do it by themselves. It’s sincere. They honestly can’t do it by themselves. And we’ve enabled that.
If I don’t remember something, I can just whip out my phone and look it up. [Which is also how students know to find answers.]
THE CLASSROOM SETTING PRESENTS ONE OF THE BIGGEST BARRIERS FOR LEARNING BECAUSE IT LACKS INSTANT FEEDBACK. Technology has trained students to learn as they go, which is the most easiest and often most efficient way to learn new technology or programs. Solutions must take this natural inclination into account in order to be effective, particularly with topics that require students to execute a process足 such as a math problem or a lab. Digital materials can provide instant feedback at just the right points, creating an individualized learning experience, and allowing students to learn in the way that is most comfortable and efficient for them.
PROBLEM & RESEARCH
STANDARD MATERIALS TEXTBOOKSâ€ƒ Books make it difficult to learn process-based objectives, or to understand how moving things interact (especially in a way that is seemingly unnatural, as in atoms). Among those interviewed, students tended to cite textbooks as something suitable only for supplemental learning (and only in certain subjects, like English). Insight: textbooks are not the ideal medium for learning science because they are linear, they overwhelm with information, and they lack instant feedback SLIDESHOWSâ€ƒ Surveyed teachers overwhelmingly used slideshow presentations to communicate new material to students, and 90% of students preferred this method to video. (But students still contributed the majority of their confusion to poor instruction and supporting materials like slideshows.) Insight: responsive materials and better visuals are needed.
PROBLEM & RESEARCH
INSIGHTS FROM EXISTING SOLUTIONS HELPFUL VISUALS
PERIODIC TABLE APP Must concentrate on the most important concepts of chemistry in order to be useful.
DIFFICULT TO LEARN KEY CONCEPTS
DIGITAL TEXTBOOKS Ebooks need to take full advantage of the digital medium to improve on traditional textbooks.
DIGITAL LABS Labs do not make intangible concepts easier to learn. CRASH COURSE VIDEOS Entertaining â‰ easy to learn.
OTHER YOUTUBE VIDEOS
Moving visuals are needed to explain
Fills the problem space by concentrat-
ing on visuals with meaning and by not working against studentsâ€™ natural thinking. It develops new materials instead of simply making incremental improvements to what already exists.
EASY TO LEARN KEY CONCEPTS
KHAN ACADEMY Visuals need to carry as much information as possible.
PROBLEM & RESEARCH
OBJECTIVE: CREATE ENGAGING, EASY TO LEARN HIGH SCHOOL CHEMISTRY MATERIALS WEBSITE Public site for teachers to view, access, and download images for use in PowerPoints and class lectures.
IMAGES Graphics, gifs, and short videos for slideshow presentations. Simple, accurate, and in a single visual system for consistency.
INTERACTIVE An iPad app with instant feedback mechanisms for learning process-based chemistry word problems.
AUDIENCE: HIGH SCHOOL CHEMISTRY STUDENTS AND TEACHERS
WHAT QUALIFIES ME TO DO THIS PROJECT? I have taught high school science and have seen firsthand how students struggle with the way in which materials are presented, and also understand how difficult it is for even the best teachers to obtain quality visuals for abstract concepts.
PROBLEM & RESEARCH
IDENTITY SYSTEM DESIGNING FOR AN INDEFINABLE SUBJECT 3X LONGER THAN OTHER BRANDING PROJECTS
This was not at all like branding a business, however intangible. I struggled to personify a subject that had no intent or form.
En Hs Sc M engaging
I derived the first logo from a poster created in week 3 of
class for exploring possible thesis topics and creating a proposal.
The periodic table has become a design cliché for all things pure, lab-crafted, and “elemental”. It is also a contrived device—something man imposed on the natural world— not a reflection of nature’s actual constructs. In an effort to get away from the periodic table imagery, I created a system drawn directly from an image of an exploding atom.
WHY IS CHEMISTRY SO HARD TO BRAND? BECAUSE CHEMISTRY = ATOMIC STRUCTURE.
CANNOT SEE, SMELL, TASTE,
DON’T KNOW WHY IT WORKS
OR HEAR CHEMISTRY
Even abstract types of businesses (like life coaches or B2B service companies) have tangible associations to the real world—things that designers can draw on when creating an identity. Even if a buyer cannot see what is being purchased, s/he understands the purpose of the service on some level. Chemistry is not like any business or person. It has no purpose and no true form. And all associated imagery (and culture) is sterile and lofty— not something relatable or engaging for high school students.
No color on the atomic level No visible form (what we “see” is computer read-outs of energy and particles) Actual form is ever-changing Existing models do not accurately show atomic structure Rules of form and structure change
4. Select best sketches, refine
2. Mind Map (or brief notes)
5. Digital roughs/refinement
3. Rough sketches of whatever
comes to mind that relates to keywords
My usual process (above) wasn’t working well with this difficult branding problem. But I knew—even having never tried it before—that if I spent time designing a process, I could come up with a workable solution. If every design problem is different, wouldn’t the means of finding each solution naturally be different?
DESIGNING THE BRANDING PROCESS To design the process, I gave myself a daily brainstorming task. Each task required me to approach the problem from a different angle, and I hoped that with all the different approaches and sketches, there would be at least a few quality ideas at the end of the four days. DAY 1 Copy all symbols and shapes from chemistry textbook. Cut each out. Rearrange, play. Copy down 100 ideas. DAY 2 Find the 10 defining images of chemistry. Ancient to present. Develop 10 ideas from each. DAY 3 List the hardest aspects of chemistry. Symbolize each in several ways. Subvert each symbol so it appears simple. Develop about 100. DAY 4 What is the definition of Chemistry? Symbolize it as simply as possible. Come up with 50.
ATOMS IN FLUX A repeating theme emerged: a convention of using a plus sign to symbolize the nucleus. This has a double purposeâ€”indicate what it is (by its positive charge) and to suggest that its size is so small relative to the atomâ€™s total size that it can only be indicated by cross-hairs. All forms of the logo depict some characteristic of atoms. When the brand was expanded to Simple Science, I kept the atomic references, since all matter is composed of atoms, but selected logos for each branch of science based on how their form suggested a topic within that branch. For instance, the Earth Science logo looks like layers of the earth.
This stop-motion cartoon sponsored by IBM uses atoms to depict a boy playing with a ball. The images were created with an electron microscope. The “solid” appearance of the atoms is deceptive. 99.99% of an atom is empty space.
COLOR PALETTE AND GRAPHICS If atoms have no color, what color palette is appropriate for a brand built on atomic relationships? The only way we can “see” atoms or their energy is with the right equipment and data visualizations. Therefore, this is the most native color scheme we have for atoms, and what I chose as reference. Though I was using graphics with misregistered color before this system, I kept it because it served an important purpose. In chemistry, everything moves in some way at all times— a famous physicist once said the universe “vibrated”, speaking of this phenomenon. With static graphics it is difficult to conceive of any movement taking place, so I retained the misregistration to suggest the vibration of atoms.
REIMAGINING CHEMISTRY ATOMS AND BONDING WERE AN OBSTACLE To visually explain chemistry, one must show atoms, but atoms have no tangible form. Before I could design diagrams and resources, I had to develop a new system for depicting them. This system had to balance accuracy with ease of understanding.
STANDARD ATOM DEPICTIONS: TOO DETAILED / TOO SIMPLE Chemistry books and problems depict atoms in these two ways. One is overly-complicated and shows all of an atom’s electrons—most of which are unnecessary to the problem. The other is extremely simple, and helpful in certain contexts, but lacks important contextual information (like the size and composition of the nucleus). My solution was to combine the two models.
Difficult to count electrons in
Cannot determine atom’s size
Does not show nucleus
Does not distinguish significant
and insignificant electrons Does not show nucleus composition
REDESIGN Only significant outer electrons shown. Insignificant electrons shown with
filled “shells”. It is easy to tell if a shell is full or not in this model. Atomic number (also number of protons in the nucleus)
Though it is easy to see the spatial
Though more difficult to see the
arrangement of the electron clouds,
spatial arrangement, this version is
this model is very difficult to draw
easy to draw, shows electron loca-
and does not show where electrons
tion, and shows what subshells are
are or whether subshells are full.
full or not (and has space for the atomic symbol).
I thought your use of the Lewis dot diagrams as inspiration for the new diagram was good. I really like your concept. —Robert DeWees, chemistry instructor
USER TESTING In order to arrive at the finalized solutions, I conducted user testing. The test subject was a rising sophomore who had just taken Physical Science—the natural lead-in to Chemistry. I presented her with different models (including those from a Chemistry textbook), and asked her to label the various parts and tell me what information she could gather from the models. Then I had her look at a series of electron orbital sketches and create 3D models from them in order to assess which sketch resulted in the most accurate model.
A student’s sketch of an atom’s structure prior to testing. This shows that the user was familiar with the parts of an atom, but not with orbitals. Since she had no prior knowledge of orbitals to skew her perspective, I was able to assess how effective my models were at communicating atomic structure.
These [sketches] are easier to understand than the book ones. It’s easy to tell which things—orbitals— are full and which aren’t. —high school sophomore
SIMPLIFYING ATOMIC BONDING When atoms share an electron, the electron clouds of the shared particles must merge. This is fairly straightforward when there is only one bond, but when there are two or three shared electrons, things get weird, and diagrams get messy and confusing. Below is a dialogue between me and my test subject.
How many shared orbitals are there?
One. Wait, are those line things electrons being shared?
The figure 8 may look like two orbitals, but it’s actually one. This means that when this single orbital shares an electron with another atom’s orbital, it creates one bond that loops in a circle. / The textbook depiction (above) does not show how the orbitals combine nor does it show where shared electrons are located.
And how many shared orbitals are here?
How do you know?
That one kind of looks connected...like it circles around. And there are two electrons in it like the other one. So that’s probably just one orbital.
The PowerPoint template I created for teachers is available blank and in use. The lesson covers bonding, using the diagrams I created. / This shows more strengths of the redesign: the fat center bond is visually (and actually) stronger than the loop bond, and the â€œplaneâ€? of the atoms (important to bonding and someimes shown with an actual plane in textbooks) is suggested by the alignment of electrons.
POSITIVE AND NEGATIVE CHARGE Attraction between atoms is usually depicted with plus and minus signs, which are not intuitive ways of showing attraction. It requires the user to think about what the symbols mean, instead of simply showing the force in some way. It also clutters a space that already has many symbols in use.
What is happening in this image?
The atoms are...attracted to each other
How do you know?
The lines look like they fit together.
The convex and concave convention is novel. Works well. â€” Ming Lun Yu, phycisist with chemical engineering patents
HYBRIDIZATION: ATOMS CHANGING SHAPE TO BOND
I have found no adequate depiction of hybridization. Chemistry instructors rely on verbal descriptions with static before and after images to describe how two different types of orbitals merge to create a hybrid. Because this was such a lacking area, I created a long, stop-motion pdf describing what hybridization is and how an atom transforms. (I also animated the transformation section.) Of all the diagrams I created, chemistry instructors responded most positively to this.
The hybridization and simple science presentations are marvelous! ...the way the hybridization runs is so smooth and shows amazing transition between the separate to hybridized states. In short, I love it. Would you mind if I use this in my chem 2 class? â€”Robert DeWees, instructor
The concept is explained in a way that almost any student could get the main idea... â€”Sharon Pitts, instructor
INSTRUCTOR RESOURCES SIMPLE VISUALS FOR CLASSROOM PRESENTATIONS 30% OF TEACHERS INTRODUCED NEW MATERIAL WITH AN ACTIVITY
70% INTRODUCED NEW MATERIAL WITH SLIDESHOWS; 60% MADE THEIR OWN
SIMPLESCI.ORG Though the thesis topic is Simple Chem, I expanded the brand into Simple Science to show how the graphic system and approach could be applied to all other branches of high school science. To demonstrate its expandability, I created at least one
PAGE OF CONTENT
for each branch.
UNITS OF MEASURE
ACIDS & BASES
ROCKS & MINERALS
COAL & OIL
NUCLEAR ENERGY ALTERNATIVES
SIMPLE SCI STORE
I wish they had flashcards like these at school. I love the puns. â€” high school sophomore; remembered 13/21 elements and numbers after only 15 min.
To complete chemistry problems efficiently, students must know the symbol and atomic number of the elements in the periodic table, which requires memorization. The flashcard mnemonics are designed to help students remember all these components, and are an easy filler activity for the classroom.
POWERPOINT TEMPLATE Because 60% of surveyed teachers create their own slideshows, I created a PowerPoint template that complemented downloadable images and included helpful graphics and ideas for comprehension questions and review.
AAUX CALIBRI Most instructors use PCs to create their slideshows, so I used the widely-available Calibri throughout the template. It also happened to look stylistically similar to Simple Scienceâ€™s font Aaux.
Comprehension or critical thinking question icon. Review or key concept icon.
The bullet icon (derived from the Simple Science logos), or icon used to call out important information.
Images like these are designed with the 10x7.5â€? PowerPoint dimensions so they can be dropped right into a slide without any further effort.
INTRICACIES OF CHEMISTRY Textbooks and high school teachers often ignore the core of chemistry because it is seen as too complicated (and some instructors don’t even know what’s beyond the textbook, since they did not focus entirely on science in their teaching degrees). But some of this information, if presented correctly, can be very accessible. Even the basics of particle physics can be understandable:
Why would high school chemistry students need to understand particle physics? They don’t need to. But a more fundamental knowledge will make the information they have to learn more memorable because it has a context. Learning what protons and neutrons are made of makes nuclear decay and other events more understandable. The idea of a protons changing to a neutron doesn’t make much sense if one believes the textbooks: that one of three particles somehow begins behaving differently and changes the entire charge of the nucleon.
How does a neutron change into a proton, transform into another thing? If a student knows that the inside of a neutron and proton are almost the same except for one particle (and that these particles move around and “communicate” with each other), then it makes more sense.
Nuclear fusion and fission—though not obviously related to particle physics—are similarly difficult to visualize. In these I experimented with pictoral depictions versus analytical depictions.
ATOMIC SCALE Atoms are difficult to understand in the context of larger things like DNA, cells, or groups of atoms because itâ€™s hard to grasp how small they are. To aid visualization and to pique studentsâ€™ interest, I created these diagrams which can lead into key concepts like stoichiometry (measuring chemicals in a reaction).
Additional fact: the size of a nucleus
Other possible lead-in questions
to the total size of an atom (with
from these diagrams:
electron clouds) is approximately a tennis ball to a football stadium. A consideration of atomic scale and structure sparks critical thinking and is a lead-in to a lesson on
What are the atomâ€™s roles in the larger picture of science? Why might atoms be measured using such a strange number?
bonding: if everything is basically
Why would we ever need to measure
nothing, how is anything solid?
individual atoms? Canâ€™t we just stick to milligrams?
INTERACTIVE STOICHIOMETRY HOW TO ENGAGE STUDENTS WITH AN INTANGIBLE TOPIC Stoichiometry is mathematical word problems applied to chemical reactions, and one of the most despised topics in high school science. Determining how to present it was a study in engagement as much as technical presentation.
Insight: textbooks are not the ideal medium for learning science because they are linear, they overwhelm with information, and they lack instant feedback.
What about digital textbooks?
It will be easier to do the same wrong things that donâ€™t work. â€” Mathew Richards, high school science teacher
Looking back on any given
Going out and driving.
week, what are the activities that stand out to you? What do you most look forward to?
During a long group interview, students were constantly texting. But they repeatedly cited non-digital activities as those things that were most memorable, engaging, and most lacking from their science classes. This initially led me to consider nondigital solutions, even going as far as mocking up a 3D textbook with pull-outs and textures.
INSTANT FEEDBACK (CORRECTLY USED) GIVES VALUE TO DIGITAL MATERIALS, EVEN THOUGH STUDENTS INHERENTLY VIEW ELECTRONICS AS DISTRACTIONS. Ultimately I decided to go with digital in spite of the negative factors because there was one key component of digital that made it worthwhile—a component not effectively used in existing interactive science materials for high school students. And that is the need for instant feedback. Students today learn by doing and by being prompted as they complete an activity. They cannot learn by hearing instructions and then following them, because they struggle to consciously keep track of linear information. As humans in a digital world, we have been trained to be responsive. We don’t listen to complex driving directions from a friend. We just follow the GPS. We don’t read the manual to a new device. We just turn it on and expect it to prompt us. The only way to accommodate this need for instant feedback in the classroom is to either have a teacher for every student, or to use a digital device to give students instant feedback.
My original plan was to create a more traditional interactive textbook, but realized that the problems and need for feedback were more suited to gameplay than a textbook model. So I created an app, taking ideas from existing games.
My first idea in creating the app was to have an introductory section where students learned how to set up stoichiometry problems using coffee beans—something more relatable than atoms. But the analogy wasn’t so helpful as to make the complexity of stoichiometry decidedly more simple.
STORYLINE In order to give students an added incentive to work through the lessons—and to give a strong sense of place and progression—the app needed a storyline. Naturally the setting is a chemistry lab, but the “events” were difficult to determine, particularly because the brand guidelines did not allow for depictions of humans.
In each section of the game, the user must solve a problem in the
OH NO! A clumsy assistant spilled acid in the lab! The clean-up kit is empty from his last spill, so you must make a neutralizing agent.
lab, caused by not following proper safety procedures. After completing each level, the user earns a chemical. At the end of the section, in order to solve the problem, the user must answer questions correctly to mix the chemicals they have into the compound they need.
WHAT IS STOICHIOMETRY? Stoichiometry is measuring chemicals in a reaction. And because chemicals are measured different ways, it requires conversion. In a reaction, molecules combine, separate, or recombine, and there is always a release of energy. To gauge the efficacy of a reaction, one must keep track of all components before and after. What percentage reacted? Was there too much of one substance? Is the end product diluted by an unreacted chemical? Stoichiometry deals with questions like these.
1 Drag finger from unit you have to unit you want to convert to.
[Workboard fills in as user drags finger above.]
Insert numbers for each unit Multiply top numbers together; multiply bottom. Divide top product by bottom product for final answer.
VISUALIZING UNITS It’s difficult to visualize conversions in unfamiliar units. To get students more acquainted with the metric system (though most know how the units relate), I used interactive screens where users “fill” beakers and scales and watch how the same amount of substance is measured in different ways simultaneously. Atoms, however, are almost impossible to fully grasp. I could not show individual atoms, so I drew comparisons (below) and then segmented the mole and visualized a tiny percentage. These everyday comparisons were helpful in making the units more tangible.
There are 100,000 tiny dots on this screen, which—if they were atoms—would be .001% of the total number of atoms that make up the width of a grain of table salt. The grain of salt, in turn, represents a tiny fraction of a mole, which is 602,200,000,000,000,000,000,000 atoms—10 times more than the number of stars in the universe.
I like the parts when I can move the pieces.
IT’S EASIER TO LEARN HOW UNITS RELATE WHEN THEY ARE SHOWN IN RELATIONSHIP AND MANIPULATED TOGETHER. To pass each level, users must create the correct path from the unit they have to the unit they need; drag ratios (with auto-filled numbers for ratios like 1g/1000mg); then solve, selecting the answer from four options. If the user answers incorrectly, the “beaker” empties and s/he must start over. After a user passes all the levels of a particular section, s/he comples a three question quiz. For each correct answer, a collected chemical pours into a beaker. All three mix together then fix a problem in the lab (in this case the elements form lye to clean up an acid spill).
I think it would be easier [than learning from a slideshow lecture] because you get to see the ratios and move things to the correct places... It’s way easier than the way we were taught in my last science class. —high school sophomore
FUTURE SIMPLE CHEM & SIMPLE SCIENCE BRANCHING OUT These materials demonstrate how teaching science in a visual way can make even the most notorious topics engaging. But there are still unaddressed topics in Chemistry, and approaches I havenâ€™t explored. I plan to keep testing new ideas and work to make complex information clearer and more quickly digested, both in Chemistry, and other fields.
Published on Apr 8, 2015