Running Head: WEB DESIGN PRINCIPLES AND THEORY

Web Design Principles and Theory

ETPT 7210
Melissa Jacobs
December 6, 2015

Running Head: WEB DESIGN PRINCIPLES AND THEORY

Web Design Principles and Theory

The purpose of my website, Linear Functions in Childrens Literature, is to
get teachers to embrace childrens literature as a medium to teach functions.
Research says that using literature motivates students and promotes a
deeper understanding of functions (Billings). As the Algebra Coach for Toledo
Public Schools, it is personally important that the teachers Im coaching give
their students as many opportunities to solve problems in context as
possible. The pieces of literature I present on my site are familiar and
comfortable to middle school students; they are a safe place to explore a
concept that can feel abstract. The teachers are my target audience, and
my goal is for them to not only understand the material on my site, but to
apply it in their classrooms. For this to occur, my website needs to be
_______. There are so many words that can fill that blank. Im going to fill it
with two: the best. As a novice web designer trying to do my best, I used
Gardners Theory of Multiple Intelligences, Cognitive Theory of Multimedia,
and Cognitive Load Theory to help me create a website that will help me
achieve my goal.
Multiple Intelligences Theory
The idea of Multiple Intelligences comes out of psychology. Its a theory that was developed
to document the fact that human beings have very different kinds of intellectual strengths and
that these strengths are very, very important in how kids learn and how people represent things in

Running Head: WEB DESIGN PRINCIPLES AND THEORY

their minds, and then how people use them in order to show what it is that theyve understood
(Gardner, 1997).
To get teachers to understand how to use childrens literature when teaching functions (and to
apply that knowledge), I need to appeal to their varied intelligences. Howard Gardner identified
each of the eight intelligences that I focused on in my website.
1. People with Visual/Spatial Intelligence possess the ability to represent the dimensions of
their worlds in their minds. To appeal to these teachers, I made my pages clean and free
of clutter. I also incorporated elements that would appeal to these teachers, which they
could also use with Visual/Spatial students. I modeled the use of Bubbl.us, an application
for brainstorming and mind mapping. My mind map is a series of questions to facilitate
student discourse for the story There Were Ten in the Bed. I also incorporated a
Makebeliefcomix.com comic strip to show how students can create their own story

around a function. This example is embedded on the page for The 12 Circus Rings.
Bodily/Kinesthetic Intelligence is strong in people who need and like to move. This
intelligence is challenging to accommodate when the users are likely seated while
looking at websites. To accommodate Bodily/Kinesthetic learners, I made every possible
action on my website an action that would be controlled by the user. They choose which
pages to click on. They control the audio and video features, including the Chirbit for
The Crow and the Pitcher and the readings of Ordinary Marys Extraordinary Deed and
The Cat in the Hat Comes Back. They can also follow links to Amazon.com to purchase
books and to a variety of activities included on different pages. Bodily/Kinesthetic
people will also enjoy the actions of mind mapping on Bubbl.us and the actions required
to create comic strips on Makebeliefcomix.com. Also, teachers and their students can
trace the graphs of the functions on Desmos (the online graphing calculator), observing

Running Head: WEB DESIGN PRINCIPLES AND THEORY

the change between points and making observations on the changes in relation to their

location on the coordinate plane.

Musical learners appreciate and thrive when rhythmic elements are involved. To appeal
to the teachers visiting my site with Musical Intelligence, I included a Chirbit audio clip
of myself, reading The Crow and the Pitcher. They will also appreciate the audio of the
stories being read on YouTube, even though there isnt music involved. The rhythmic
elements of the stories, along with the tone and cadence of the voices reading, will be

appreciated and enjoyed.

Interpersonal learners learn best when interacting with others. For these teachers, I have
included the opportunity for them to recommend literature pages on Google+. They can
also pin any of the story pages on Pinterest as well as share them on Facebook. There is a
social media bar in the footer that will take them to various National Council of
Mathematics Teachers social networking sites. I have also included a link to BoomWriter
as a way for teachers and students to interactively create their own story around a

function. This can be found on my Classroom Applications page.

Those who learn best through feelings and values have a high Intrapersonal Intelligence.
People with this intelligence will enjoy mind mapping on Bubbl.us. They will also enjoy
overall mathematics in the website, as all linear functions have a pattern (slope, also
known as unit rate or rate of change). These people are often deep thinkers and will be
drawn to the mathematical thinking involved in picking apart childrens literature and

using it as a context to teach functional relationships.

Verbal/Linguistic Intelligence represents people whose learning strengths lie in written
and spoken words. They enjoy reading, writing, speaking, and listening. The
incorporation of audio readings will appeal to people with this intelligence. They will
also appreciate the summaries of the stories on each page. On the Classroom

Running Head: WEB DESIGN PRINCIPLES AND THEORY

Applications page, there are links for applications that involve writing, including Tikatok,
BoomWriter, and Storybird. I also created a function template (inspired by NCTM) to

scaffold the writing necessary to identify a function in literature.

People with Naturalistic Intelligence excel when information is organized into categories.
All of my literature is under one menu, and all of the information on each page is

presented in the same way.

It appears as though my entire site was created for those who possess a strong
Logical/Mathematical Intelligence. To further appeal to these learners, I have added a
link to Desmos, the online graphing tool, on my Classroom Applications page. With each
story, I created graphs of the functions and embedded them on their corresponding pages.
When they go to the graphs on Desmos, they can further analyze them with their students
by tracing the line. They can also compare graphs by entering more than one function
into one graph. Desmos automatically makes the lines a different color, matching each
line to its function. This is a great tool for Logical/Mathematical learners, whether a
teacher or their students.
Cognitive Theory of Multimedia Learning

Multimedia refers to content that uses a combination of different content forms. This contrasts
with media that use only rudimentary computer displays such as text-only or traditional forms of
printed or hand-produced material. Multimedia includes a combination of text, audio, still
images, animation, video, or interactive content forms (Wikipedia). More simply, multimedia
makes life more interesting. This is especially true if the content on your website isnt frivolous.
If the purpose of your site is to convey information or teach someone something, then the
Cognitive Theory of Multimedia Learning (CTMM) will help you reach your goals because you

Running Head: WEB DESIGN PRINCIPLES AND THEORY

will be taking advantage of each users full capacity to process information. CTMM states that
words and graphics are more conducive to learning, rather than just graphics or text alone.
While creating my website, I maintained a balance between both while ensuring I didnt
create stimulation overload for my users. To justify the balance I maintained, consider several of
the principles embedded in CTMM (Cognitive Theory of Multimedia, 2015).
1. Multimedia Principle: Deeper learning is attained through the use of words and pictures
than from the use of words alone. All of the pages on my website combine pictures and
words.
2. Spatial Contiguity Principle: Deeper learning is attained when words and pictures are
presented spatially in close proximity. The words and pictures must be in working
memory at the same time to facilitate development of schema. I thoughtfully planned the
layout of each page so that the words and pictures that relate to each other are visible
together.
3. Temporal Contiguity Principle: Deeper learning is attained when audio and visual are
presented temporally, in close proximity. There are four pages where I utilize audio and
visual. On each of these pages, both elements are in close proximity.
4. Coherence Principle: Type 1: Deeper learning is attained when irrelevant details are
removed from the presentation. Type 2: Deeper learning is attained when irrelevant
sounds and music are removed from the presentation. Type 3: Deeper learning is
attained when irrelevant words are removed from the presentation. There is not a single
page in my website that contains irrelevant details. Every word, every graphic, and every
link is for a specific purpose. There are no extraneous graphics or words. I have no
sound effects or music that plays on my website. The entire website is clean and simple.

Running Head: WEB DESIGN PRINCIPLES AND THEORY

5. Modality Principle: Deeper learning is attained when words are presented as narration
than as onscreen text. I chose to embed three narrated stories on my website. None of
these include onscreen transcripts of the narration.
6. Redundancy Principle: Deeper learning is attained when words are presented as
narration than as narration and onscreen text. Again, the narration I embedded stands
alone.
7. Personalization Principle: Deeper learning is attained when words are presented in a
conversational manner rather than in a more formal style. There are two different blocks
of text on any given page. One block involves the identified function and defines the
variables. This language is more formal, as it is the mathematics that is embedded within
the literature. The other blocks of text on each page are the short summaries of the
books. These are written as I would present them in a casual conversation.
8. Interactivity Principle: Deeper learning is attained when students have control of the
pace of the lesson. The user is in control of every move they make while exploring my
site. They choose which page to go to and must advance to any page at their leisure. The
Chirbit and the YouTube videos are purposely not set to auto-play. I wanted my users to
have full control.
9. Signaling Principle: Deeper learning is attained when students receive signals that
inform them of key steps. The essential information is highlighted with text blocking and
the strategic use of whitespace. This includes the identification of each function and the
definition of the variables.
10. Individual Differences Principle: Deeper learning is attained when these design
principles are applied to low knowledge learners than to high knowledge learners. I
never assume that teachers understand the content they are teaching. Functions are
abstract for students. I kept this in mind as I designed my website, even though the
teachers are my target audience. I simplified everything and assessed the information by

Running Head: WEB DESIGN PRINCIPLES AND THEORY

having my own middle-school-aged children visit the site and critique the information
based on their own knowledge.
Cognitive Load Theory
Cognitive Load Theory (CLT) refers to the state of mentally attending to one or more
tasks along with the task at hand. In other words, its the total amount of mental effort being
used in the working memory. CLT has three assumptions. The Active Processing
Assumption states that the learner is actively engaged in the process of knowledge
construction. The Dual Channel Assumption says that information processing takes place in
two separate channels: auditory/verbal and visual/pictorial. The Limited Capacity
Assumption states that the working memory is limited when we are processing new
information and these limitations disappear when information is from long-term memory.
There are three types of cognitive load. Intrinsic load has to do with the amount of
processing necessary to comprehend material. This is the thinking part of cognitive load.
Extraneous load deals with all information processing thats irrelevant to the instructional
goals. This is controlled by the instructional designers and is the materials part of
Cognitive Load Theory. Germane load is the formation and automation of schema when
learners engage in deep cognitive processing. Total cognitive load is the combination of all
three.
Instructional techniques should attempt to reduce extraneous cognitive load because this
facilitates learning. Since my purpose is instruction and my goal is application, I kept each
page simple. Teachers are busy and overwhelmed. To motivate them to use childrens
literature as a medium for teaching linear functions, I have made it very simple. I have given
them a variety of stories to choose from. Each story has a different linear function that I have

Running Head: WEB DESIGN PRINCIPLES AND THEORY

already identified. The variables are also defined. Each page has a picture of the cover and a
short summary. I have even included a function template that teachers can use for their own
personal exploration and understanding. Teachers can also print this PDF file and make
copies for their students. They have almost nothing to do in order to implement this strategy
immediately.
Web Design Principles
Usability and the utility, not the visual design, determine the success or failure of a website. Since the visitor of the page is the only person who clicks the mouse and therefore
decides everything, user-centric design has become a standard approach for successful and
profit-oriented web design. After all, if users cant use a feature, it might as well not exist
(Friedman).
In addition to what Friedman prefaces her article, 10 Principles for Effective Web Design,
web design is, simply, fun. A person in only limited by their imagination. That and the limits
of the web design platform they are using. For example, I was going to include five other
types of functions on my website. Unfortunately, Wix wouldnt support the complex
exponents I needed to enter into text. I had to scrap my original idea and move in a slightly
different direction. I still had complete creative freedom in my design. Creativity doesnt
equal quality. To justify my respect, knowledge, and application of good web design
principles, consider Friedmans 10 Principles for Effective Web Design (2008).
1. Dont make users think. I prioritized simplicity on every page of my website. Knowing
that thinking would actually create a negative experience for my audience (teachers)
helped me to keep focused on remaining noncomplex.

Running Head: WEB DESIGN PRINCIPLES AND THEORY

10

2. Dont squander users patience. This is a good rule for entering into a conversation with
anyone. No one wants to have their time wasted. I made sure my site would be an
efficient resource for teachers by making it easy to navigate and avoiding extraneous
graphics and information.
3. Manage to focus users attention. I utilized color blocking to create an intentional eye
flow on each page. The information is easy to find and direct.
4. Strive for feature exposure. Any text, icon, or photo that is a link shows when the
hovering mouse becomes a hand.
5. Make use of effective writing. On each page, I have used short and concise phrases and
my language is plain (considering my audience). Even if my users dont read the little
text I have, I used a scannable layout so that my point can still get across in a quick and
simple manner.
6. Strive for simplicity. I made sure my menu was clear and easy to read. The navigation is
easy and the layouts are simple. There are no complicated steps and it is impossible to
get lost on my site.
7. Dont be afraid of the whitespace. I used whitespace strategically to highlight
information while reducing cognitive load. I also created a hierarchy of information
through my use of whitespace that draws my users to specific items in an intentional
order/direction.
8. Communicate effectively with a visible language. I maintained clear communication with
minimal words while appealing to my audience. Every function is also matched with a
graph to further communicate its definition, making them more concrete.
9. Conventions are our friends. By using Wix as a platform and utilizing everything that it
offers, I have embraced conventions.
10. Test early, test often. Usability tests always produce useful results. Either youll be
pointed to the problems you have or youll be pointed to the absence of major design
flaws which is in both cases a useful insight for your project (Friedman). The majority

Running Head: WEB DESIGN PRINCIPLES AND THEORY

11

of my time was spent in a cycle of save/preview/test/revise for the sole purpose of

ensuring usability. As a teacher, I definitely want what I deliver to be accurate and
operable. This is even more true with a website, as my students will be viewing this
independent of my presence. If something doesnt make sense or doesnt work, than I am
a failure in the delivery of my lesson. To further ensure that my site was ready to publish,
I had my mom open it and test it on two different computers with different browsers. I
also had my sixth and eighth grade children visit the site. They read the material and
tested the links. If something was incomprehensible to them as middle school students, I
knew it needed to be changed.

Running Head: WEB DESIGN PRINCIPLES AND THEORY

12

References
Billings, E., & Beckmann, C. (2005). Children's literature: a motivating context to explore
functions. Mathematics Teaching in the Middle School, 10(9), 470-478. Retrieved
October 6, 2015, from www.nctm.org
Cognitive Theory of Multimedia. (n.d.). Retrieved September 28, 2015, from
http://cogload.wikispaces.com/
Friedman, V. (2008, January 31). 10 principles of effective web design. Retrieved August 26,
2015, from http://www.smashingmagazine.com/2008/01/10-principles-of-effective-webdesign/
Gardner, H. (1997). Howard gardner on multiple intelligences. Retrieved August 26, 2015, from
https://www.youtube.com/watch?v=iYgO8jZTFuQ
Girard, J. (n.d.). Web design basics. Retrieved August 26, 2015, from
http://webdesign.about.com/od/webdesignbasics/u/webdesignbasics.htm
Krug, S. (2006). Don't make me think!: a common sense approach to web usability (2nd ed.).
Berkeley, Calif: New Riders Pub.
Lynch, P., & Horton, S. (n.d.). 2 universal usability. Retrieved August 26, 2015, from
http://www.webstyleguide.com/wsg3/2-universal-usability/index.html
Multimedia. (n.d.). Retrieved December 6, 2015, from https://en.wikipedia.org/wiki/Multimedia
Sweller, J. (n.d.). Cognitive load theory. Retrieved December 6, 2015, from
http://www.instructionaldesign.org/theories/cognitive-load.html
Ta'eed, C. (2007, December 17). 9 essential principles for good web design. Retrieved August
25, 2015, from http://design.tutsplus.com/tutorials/9-essential-principles-for-good-webdesign--psd-56