Running head: WEB DESIGN PRINCIPLES AND THEORY

Web Design Principles and Theory

Nora Beerline
University of Toledo
ETPT 7210
Dr. Judy Lambert
December 10, 2015

WEB DESIGN PRINCIPLES AND THEORY

Web Design Principles and Theory

The title of my website is Experimental Prewriting and, as the name implies, its
purpose is to teach students how to use different prewriting techniques throughout the
writing process. I have taught English and writing classes for five years now, and
teaching prewriting strategies is one of my favorite lessons because it enables students to
unleash their creativity and have fun with writing. It is one of those lessons, however, that
has been more successful in the face-to-face class than in the online class. In the online
class I include a short narrated PowerPoint online, and I have students freewrite a journal
topic in one of the early weeks, but I have long felt that the online students were not
getting the full prewriting experience. The great thing about prewriting techniques,
however, is the fact that they are so interactive, which I think makes them great
candidates for multimedia applications. Also, because the preference for a particular
prewriting strategy is very individual what may work for one student or writer may not
work for another I wanted to create a site that allowed students to explore and
experiment with what worked best for them. These reasons are why I decided that
prewriting strategies would not only make a great topic for this final website project, but
also be of great practical use to me as a teacher in both my face-to-face and online
classrooms.
Multiple Intelligences Theory
Howard Gardners theory of Multiple Intelligences has significant implications
for multimedia usage in web design. According to Gardner, there is not just one
intelligence or general intelligence, (as cited in Davis, et al., 2009) but several.
Gardners claim is based on years of compiled empirical studies which indicate at least

WEB DESIGN PRINCIPLES AND THEORY

eight discreet intelligences that all normally functioning human beings have to one degree
or another. These intelligences are logical-mathematical, linguistic, musical, spatial,
interpersonal, intrapersonal, kinesthetic, and naturalistic. If one accepts Gardners theory
as valid, it seems reasonable to assume that teaching lessons in a way that appeals to
multiple types of intelligences as opposed to just the linguistic, for example is a more
effective way of reaching a diverse group of students who will be stronger in some
intelligences than others.
Since reaching a diverse group of students is not only my goal for this website,
but also my daily experience as a teacher, it made sense to design the website to appeal to
as many of the multiple intelligences as possible. The overall topic of my website
prewriting techniques obviously appeals to those with the linguistic/verbal intelligence.
People who like words and who love to write should enjoy exploring the different
prewriting techniques that the site offers. Gallagher (2003) suggests that those with the
linguistic intelligence are often storytellers, so the student scenarios that are provided
throughout the site should appeal to that storytelling nature as well. In addition, there is
also a text-based explanation on every page and, finally, a blog that is written in both the
voice of the instructor (me) and the fictitious students whose stories are highlighted
throughout the site. Students can actually reply to those blogs as well, which also appeals
to the linguistic/verbal intelligence.
Of course, the student scenarios also appeal to those with the interpersonal and
intrapersonal intelligence. As part of my research for this site, I surveyed my students and
offered them extra credit for giving me feedback on it, and the student scenario was a
universally popular feature of the website (See Appendix A). In response to the question

WEB DESIGN PRINCIPLES AND THEORY

Did you understand the student scenarios? Why or why not? One student replied Yes
it was very helpful and made it easier to read and to relate as a student. Another student
said I understood all of the student scenarios, and it was very useful to me because I
could visualize me in each of the scenarios, which would make writing my paper a lot
easier. Finally, a third student said, Yes, because they were like real life scenarios
which made me not feel so alone. I also understood them because some of the scenarios
were things I went through before so I knew how they would end up (Beerline, 2015).
Clearly, the student scenarios helped the students to identify with and relate to the
fictitious students and their real-life writing issues, while also supporting the
interpersonal and intrapersonal intelligences.
Another appeal to the intrapersonal intelligence is the independent nature of the
site itself. Gallagher (2003) states that self-paced presentations of information support
the intrapersonal intelligence area (p. 16). The long-term journalling technique should
also appeal to those with a strong intrapersonal intelligence because of journallings focus
on the exploration of the self. Finally, writing is a process that is very introspective, so
engaging in many of the techniques should engage the intrapersonal intelligence on many
levels.
According to Gallagher (2003), the logical mathematical intelligence includes
problem-solving abilities and experimenting (p. 2). The experimental nature of the
site should appeal to those with a strong logical-mathematical intelligence. Students are
encouraged to experiment with and explore the techniques to figure out what works for
them, and the overall idea is to solve the problem of generating and organizing topic
ideas for various writing and speaking projects.

WEB DESIGN PRINCIPLES AND THEORY

The visual spatial intelligence is also supported throughout the site. The
MindMeister Cluster, the Cube, the Outline, and the Journalists Questions ThingLink
graphic should all appeal to those who think in pictures or have a strong spatial
intelligence. Indeed, one of my students wrote, I really liked clustering and cubing page
[sic]. I couldnt pick out of the two. I liked it because I can relate to it, I am a very visual
learner. And another student said, I liked clustering the most. I like the idea of putting
all that information together and have some sort of diagram to start your paper on. It is a
good way to put your ideas on one page so you can get a picture of just how you want
your paper to go (Beerline, 2015).
The kinesthetic intelligence is one that can be a bit harder to appeal to through
web and multimedia design, but the two ThingLinks, the MindMeister, and the
Journalists Questions grid are all physically interactive features that the student user can
use their mouse to hover over, click on, and manipulate. Also, students are encouraged to
actually practice the techniques that the site introduces. So, for example, on the
Freewriting page, students click on an embedded Timer application, and then are directed
to write continuously for five minutes. Similarly, the Journaling page provides direction
on how to write in a journal at home or on the websites blog. All of these physically
interactive features should appeal to the kinesthetic intelligence.
Cognitive Theory of Multimedia Learning and Cognitive Load Theory
The Cognitive Theory of Multimedia Learning is grounded in at least two basic
assumptions. The first assumption is the Dual Channel assumption, which suggests that
humans process visual and auditory information in separate channels. This information is
then constructed in the working memory. According to Richard Mayer, People learn

WEB DESIGN PRINCIPLES AND THEORY

better from words and graphics than from just words alone (ODonaghue, 2011). The
Limited Capacity Assumption states that if the working memory is overtaxed, however,
then the cognitive load for processing becomes too much for the limitations of the
working memory, and learning and retention are diminished as a result. So a delicate
balance needs to be achieved between feeding both channels but not overwhelming those
channels.
Cognitive load theory is the theory that learning happens best under conditions
that are aligned with human cognitive architecture (Sweller, 1988). And human
cognitive architecture is composed of schemas, or structures that help humans to organize
and retain the information in a way that makes sense of it. A primary assumption of
cognitive load theory is that humans use a working memory to process new information.
For schema acquisition to occur, this working memory must not be overtaxed. This, of
course, has important implications for web and multimedia design.
Since, according to Mayer (2003), learning is more effective when words and
picture are paired versus just through words alone, ideally, multimedia should appeal to
both the visual and the oral channels. This is also consistent with cognitive load theory.
Several of my multimedia support these principles. For example, the Jing videos of the
research and outlining process are short clips that show my computer screen, while I
narrate in the background. Similarly, the cubing graphic connects words to a cube image,
and the Mindmeister shows the visual relationship between words and ideas. Finally, the
brainstorming video should appeal to both channels as well. These multimedia also
support the temporal contiguity principle because the audio and video are displayed
closely together (Mayer, 2003).

WEB DESIGN PRINCIPLES AND THEORY

Other multimedia learning principles are also supported as well. For example,
both the spatial contiguity principle (Mayer & Moreno, 2011) and cognitive load theory
(Sweller, 1988) suggest that words and pictures should be in close proximity. The
Journalists Questions ThingLink, the Cube graphic, and the Outline Jing image all place
text directly on the image in one way or another. And while text and images are placed
closely together throughout the site, no unnecessary details are included in any of the
multimedia, which is an illustration of the coherence principle (Mayer, 2003). Indeed,
both the Jing videos are, by necessity, less than five minutes long. The Jing videos also
illustrate the modality principle, the redundancy principle, and the personalization
principle (Mayer, 2003). This is because my narration is not duplicated with onscreen
text, which is also consistent with cognitive load theory (Sweller, 1988), and my
narration is delivered in a conversational tone.
In addition, the multimedia in the site are consistent with the interactivity,
signaling, and segregation principles (Mayer, 2003). Interactivity is supported through the
students ability to assert agency over both the site and the multimedia and progress
through the lessons at her own pace. Student users can start, pause, and replay the videos
at will and scroll through and click on the various multimedia as needed. The signaling
principle is addressed through the consistent use of the phrase Next Steps at the bottom
of almost every page in the site. Within the pages there are also textual clues that direct
students to click or view the multimedia as needed. Finally, the segregation principle,
which states that information should be broken down into chunks, is supported, again,
through the use of short Jing videos and the use of visual markers on pages to indicate
natural separations.

WEB DESIGN PRINCIPLES AND THEORY

Additionally, the use of worked examples (Seller, 1988) is another way to reduce
cognitive load. This principle is demonstrated throughout the site with the Journalists
Questions example, the Jing Outline video and Jing Outline image, and the blog, which
illustrates how students may answer questions and/or perform the prewriting exercises
themselves. In addition to reducing cognitive load, it is my hope that these examples will
also reduce the intimidation factor for students in terms of attempting the prewriting
techniques.
Web Design Principles
As I stated in my website organization outline, my intent from the outset was to
apply the web design principles of Dont make users think, Make use of effective
writing and Test early, test often (Friedman, 2008). The first principle of dont make
users think, or, at least, dont make them think too hard, is one that should be selfevident. In other words, if the website is designed to deliver a good or service, the goal is
to facilitate the delivery of that good or service. The goal is not to make users scratch
their heads and wonder how to find and/or purchase that good or service. If navigating
the website is viewed as a learning experience, Csikszentmihalyis suggestion to promote
intrinsic motivation and flow make good sense here. According to Csikszentmihalyi,
flow is when a person is completely involved in what he or she is doing, when the
concentration is very high, when the person knows moment by moment what the next
steps should be (as cited in Gallagher, 2003, p. 5). Having to guess what the next step is
going to be will necessarily disrupt flow, and therefore decrease intrinsic motivation.
To make the purpose and flow self-evident, I used a very simple menu structure
that grouped prewriting techniques loosely by type. This menu was one of the things that

WEB DESIGN PRINCIPLES AND THEORY

the students I surveyed commented favorably on. In response to the questions Did the
site navigation make sense to you? Or was it difficult for you to figure out how to move
around? What, if anything, was confusing?, one student said, I thought it was very
simple. It was very clear where to find everything. I liked there was only 4 tabs and they
were right at the top so it was very easy (Beerline, 2015). Another student replied All
the tabs are at the top of the page. I like it like that, makes it easy to find everything and
easy access. I did [not] have any problems with the set up and design. Finally, another
student answered The Homepage is easy to navigate through, and if you are looking for
a certain subject, the website makes it easy to find (Beerline, 2015.)
Relatedly, communicating with a visible language (Friedman, 2008) should
help users to easily navigate the website. According to Friedman, visible language is
the overall language of a web space, and includes everything from the layout to the icons
to the font. The idea here is to keep the organization consistent from page to page, and to
keep the language simple by, for example, not using more than three different font sizes.
My website demonstrates this principle with the use of a consistent font and color scheme
and consistent textual signals throughout. Page titles are centered at the top of each page
in a large and readable font. The first word of each paragraph is larger than the rest of the
paragraph for easy scanning. In addition, the color scheme is bright, but not
overpowering, and is the same from page to page. The phrase Next Steps is at the
bottom of each page to provide a clear direction to the user on what to do next.
Friedman (2008) makes the point that effective writing for web design is not
necessarily the same as effective writing for other communication situations. This is
because people tend to skim web pages and scout for the words or phrases that they are

WEB DESIGN PRINCIPLES AND THEORY

10

looking for. For this reason, effective writing for web design needs to be concise, clear,
and easily scannable. While the font scheme that was already discussed lends itself to
effective writing, breaking the text up into easily digestible chunks helps as well. To this
end, paragraphs are separated with spaces and, in some cases, dashed lines to indicate
separation. Numbered points are also used. Another component of effective writing for
the web or any medium should be awareness of ones audience. Therefore, I attempted to
write with my students in mind by keeping language simple, but not talking down to
them. I think this was accomplished to some degree because I solicited some feedback
from some colleagues and one of them, a creative writing instructor, said I also like that
the student responses do seem genuine. Granted, most of the students may not write so
thoroughly, but the voice is right, which is what matters because the students will write
more thoroughly if the examples are thorough (J. King, personal communication,
November 30, 2015).
The final principle of test early, test often is a behind-the-scenes design
principle that is made manifest on those pages where every link works, navigation is
intuitive, and exploring is a pleasure. One advantage of testing early and testing often is
that diverse groups of users can be tested. Is the website interactive enough for those with
kinesthetic intelligence? Does it make logical sense to the mathematical mind? Is there
enough white space to prevent cognitive overload for all types of users? These questions
and many more can be addressed by frequently testing web design. As has been alluded
to throughout, I tested my website on two groups of users. The first was a group of three
colleagues who understand the student population that I am trying to reach. The second
was a group of students who were offered extra credit in return for their feedback. My

WEB DESIGN PRINCIPLES AND THEORY

11

colleagues gave me some good critical feedback on the site. For example, an earlier form
of the Topic Exploration page did not include the exploration through research
component. One of my colleagues suggested that there should be more of a research
emphasis on that page, which is why I added the Jing research video (J. Fallon, personal
communication, November 29, 2015). Another colleague suggested that there should be a
list or link to a list of journal topics on the Journalling page, which I then added (J. King,
personal communication, November 30, 2015). The student feedback was less critical and
more generally positive. My biggest take-away from there feedback was that the site was
fairly easy to navigate and that they seemed to enjoy the Clustering, Cubing, and Blog
pages the most. All of the feedback helped me to revise and refine the site in ways that
better suited the needs of my users.
Universal usability is the idea that websites should be designed in ways that
accommodate and promote diversity in terms of needs, abilities, and access. Because the
web is a more flexible environment than the material world, universal usability is a
feasible goal. In addition, universal usability results in hidden benefits for users who may
not need a certain design feature, but benefit from it nonetheless. Also, universal
usability benefits the website designers and owners themselves, as it makes their websites
accessible to a broader group of users. Finally, universal usability contributes to a cleaner,
simpler, and more thoughtful web design overall.
Interestingly enough, one of my colleagues who tested the site is also visually
impaired. The only difficulty that he mentioned in using the site was that it took him a
while to figure out that a user needed to scroll both horizontally and vertically to see all

WEB DESIGN PRINCIPLES AND THEORY

12

of the Outlining video, so I added a note to that effect to help other users pick up on that
issue more quickly (J. King, personal communication, November 30, 2015).
Next Steps
As I truly intend to use this site in my online classes beginning next semester, I
recognize that the website will continue to be a work in progress. Some of the users that I
tested suggested changes that I have not yet been able to implement. For example, one of
my colleagues and one of my students both were critical of the Brainstorming video as
not being perfectly relevant to students (J. Fallon, personal communication, November
29, 2015) (Beerline, 2015). I have searched extensively for another video, but have not
yet been able to find one that I think will fit better. I may ultimately make another video
where I film two students participating in a mock brainstorming session. Also, I have not
tested the website since I made the changes to the Topic Exploration page, so I will be
interested to see if students grasp the concept of exploring through online research. As I
continue to refine and revise the site, however, it is my hope that it accomplishes its
purpose of helping students to have fun with writing. One of my students stated, I
thought you did a very good job bringing excitement to a pretty dull subject (Beerline,
2015). Hopefully, this site helps more students to change their opinion of writing to
something that is a little more engaging than dull.

WEB DESIGN PRINCIPLES AND THEORY

13

References
Beerline, N. (2015). Prewriting website feedback.
Davis, K., Christodoulou, J., Seider, S., Gardner, H. (2009). The theory of multiple
intelligences. 1-37.
Friedman, V. (2008). 10 principles of effective web design. Smashing Magazine.
Retrieved from http://www.smashingmagazine.com/2008/01/10-principles-ofeffective-web-design/.
Gallagher, B. J. (2003). Multiple intelligences and online instructional design. 1-24.
Mayer, R. E. (2003). Cognitive theory and the design of multimedia instruction: An
example of the two-way street between cognition and instruction. New Directions
for Teaching and Learning, 89. 55-71.
Mayer, R. E. and Moreno, R. (2011). A cognitive theory of multimedia learning:
Implications for design principles. Retrieved from
www.unm.edu/~moreno/PDFS/chi.pdf.
O'Donoghue, M., (2011, November). On the Role of Design of Video for Learning.
Retrieved from ws:start:WikiTextUrlRule:258:http://youtu.be/S3fYg6OuTIA
http://youtu.be/S3fYg6OuTIA
Sweller, J. (1988). Cognitive load during problem solving: Effects on learning. Cognitive
Science, 12, 257-285.

WEB DESIGN PRINCIPLES AND THEORY

14

Appendix A
Prewriting Website Feedback
For 20 extra credit points, check out my Prewriting Website
(Links to an external site.) and answer the following questions.
The site is large, so I am only asking you to review three pages, plus the Home page. To
get the extra credit, though, you must thoroughly answer all of the questions!
1. Tell me what you thought about the Home page. Did it make sense to you? If you
were looking for help with Prewriting, would this make you want to explore the
2.
3.
4.
5.
6.

rest of the site? Why or why not?

List the three pages that you reviewed besides the Home page.
Which of those three pages did you like best? Why?
Which did you like least? Why?
Did you understand the student scenarios? Why or why not?
Were the prewriting techniques adequately explained so that you could understand

them? What worked? What didn't work?

7. Did the site navigation make sense to you? Or was it difficult for you to figure out
how to move around? What, if anything, was confusing?
8. What did you think about the overall appearance of the site? Colors? Images?
Font?
Please share any other thoughts or comments that you have about the site.