Web Design Principles and Theory

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

1

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 Gardner’s 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.

Gardner’s claim is based on years of compiled empirical studies which indicate at least

2


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 Gardner’s 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

3


“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 journalling’s 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.

4


The visual spatial intelligence is also supported throughout the site. The

MindMeister Cluster, the Cube, the Outline, and the Journalist’s 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 couldn’t 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

Journalist’s 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 website’s 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

5


better from words and graphics than from just words alone” (O’Donaghue, 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).

6


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

Journalist’s 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 student’s 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.

7


Additionally, the use of worked examples (Seller, 1988) is another way to reduce

cognitive load. This principle is demonstrated throughout the site with the Journalist’s

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 “Don’t make users think,” “Make use of effective

writing” and “Test early, test often” (Friedman, 2008). The first principle of “don’t make

users think,” or, at least, don’t make them think too hard, is one that should be self-

evident. 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, Csikszentmihalyi’s 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

8


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

9


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 one’s 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

10


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

11


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.”

12


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-of-

effective-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.

13

http://youtu.be/S3fYg6OuTIA


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

rest of the site? Why or why not?

2. List the three pages that you reviewed besides the Home page.

3. Which of those three pages did you like best? Why?

4. Which did you like least? Why?

5. Did you understand the student scenarios? Why or why not?

6. 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.

14

http://norabeerline.wix.com/prewriting

http://norabeerline.wix.com/prewriting

Documents

Web Design Principles and Theory