On Design: Design Principles

From Ugly and Bad to A-ha!

Is reading online different from reading text in printed form? Is learning from a textbook different from learning online? 

If you are like most people, you will probably have answered yes to both of these questions. When an instructional designer sets about to create an online lesson, it isn’t as simple as pasting text into an online page. If you have taken online courses, you may have experienced the good, the bad and the ugly. The good would include text with illustrations and interactivity that enhances comprehension. The bad would include massive amounts of text on pages and pages of text with no headings, no focus, no sequence, no classification and no interaction. The ugly would include excessive use of colour on colour without reason, pictures for the sake of pictures rather than illustration, music with no relevance, and information every which way all jammed into one chaotic page. (See samples of the bad and ugly at end of essay)

The Goal of Good Design Principles

In many respects good design principles that promote comprehension in print are transferable to multimedia, but multimedia presents more complications and there is even more need for simplicity and clarity. According to Richard E. Mayer in Learning and Instruction, learners impose structure on lessons. One learner may be advanced and another weak, so it is important that authors of textbooks or lessons impose a structure on their writing. Writing should guide readers to select key ideas, organize these into concepts and integrate new information with their current knowledge or experience. The goal is not just memorization but transferability of ideas, problem-solving and critical thinking. 

Structure and Transfer of Learning

In “Teaching by Guiding Cognitive Processes During Learning” (Chapter 10) of Learning and Instruction, Mayer talks about methods to impose structure and aid in transfer of learning. Specifically, he talks about adjunct questions, signaling and advance organizers. Adjunct questions direct the reader’s attention to important material; while signally uses outlines, headings, signal words to aid the creation and organization of a learner’s conceptual framework. Advance organizers may include things like models or diagrams that activate prior knowledge and aid in the understanding and transfer of new concepts. It would be safe to say that all of these concepts apply to the online environment, but one would have to look further to understand multimedia. 

Cognitive Theory of Multimedia Learning

Since the advent of the online environment many researchers have studied and developed models that relate cognitive theory to multimedia. Drawing on his own work in meaningful learning and the work of others on cognitive load theory, Mayer proposes his Cognitive Theory of Multimedia Learning (1997). According to the theory learners possess two separate processing systems where auditory messages go to a verbal processing system and animation goes to visual system. His theory includes the following principles:

1. Multiple Representation Principle: An explanation in words and pictures is better than words alone.

2. Contiguity Principle: A multimedia explanation with words and pictures should present corresponding words and pictures contiguously rather than separately

3. Split-Attention Principle: A multimedia explanation with auditory narration and pictures should not also show the words as text which causes cognitive overload

4. Individual Differences Principle: The above principles are more important for low knowledge than high-knowledge learners, and for high-spatial rather than low-spatial learners.

5. Coherence Principle: A multimedia explanation with fewer relevant words and pictures is better than one with too many. A short summary allows a student to select information and organize and interpret using their own framework. 

Design Features: Navigation

Others who have studied multimedia and cognition are Thuring, Hannemann & Hake. In their 1995 paper “Hypermedia and Cognition: Designing for Comprehension,” they point out that websites should enable viewers to clearly identify their current position with respect to the overall site, easily retrace their steps, and easily find different options to continue. With multimedia, it is not so simple as turning the next page. Many of us have seen this happen: we are at an important site and we follow a link and then another and then have trouble getting back to where we started or perhaps go off never to return again.

Design Features: Line Length and White Space Online

Should a line of text in the online environment be the same length as that in print material? 

Do readers prefer certain length of lines online? Do shorter lines aid in comprehension? 

 What effect does white space have? 

Several researchers have studied the above questions with mixed results. A 2005 study by A. Dawn Shaikh looked at online news reading speed, comprehension and line length preference. Students read passages that were 35, 55,75 and 95 characters wide and then were tested for speed, comprehension and preference. Although the 95-character line was read faster, it did not translate to better comprehension. Some users preferred the short lines and some the longer lines. Researchers McMullin, Varnhagen, Heng & Apedoe in 2002, found that line length had no significant effect on comprehension but white space did. Participants had better comprehension when there was more whitespace. They also found that irrelevant information inserted into a page decreased comprehension. In 2003 Bernard, Fernandez, Hull, and Chaparro found differences in preferences between adults and children (Shaikh, 2005). Adults preferred medium line length 76 characters per line and children preferred shorter 45 characters when compared to 132 characters per line. Maybe the answer lies with the audience’s preference, but certainly layout plays a factor.

Gestalt Theory

 

Those who study graphic design often refer to the principles of Gestalt theory when designing meaningful messages. A phrase to explain Gestalt theory is, “The whole is greater than the sum of its parts.” What this means is that we tend to take in an overall view of images and text, before we begin to dissect it into pieces. Because one of the courses I teach is Visual Communications and because Gestalt theory also relates to comprehension, I have chosen two websites on Gestalt principles to compare and contrast readability, usability and comprehension with respect to the previously mentioned criteria.

Both sites have been online for quite awhile, and I have found both sites effective in different ways. One is mostly textual and the other is interactive.

Site One: Spokane Falls Community College’s page: The Gestalt Principles http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm#similarity

 

The Gestalt Principles page opens into a basic white page with black text and black and white illustrations page. The page is aligned left and each line is approximately 50 characters long. There is a lot of white space in the page. The page opens with a brief definition of Gestalt and then goes on to explain and illustrate the principles of similarity, continuation, closure, proximity and figure/ground. Each topic has a clear identifying heading and either one or two simple examples of the concept. The author also bolds key words throughout the brief explanations. The top navigation allows the user to jump to the specific concept within the same page. The one link out is to a PDF file that is an exercise for students to test their knowledge and to further explain their answers. 

This webpage is simple and to the point. It clearly guides the reader to select key points, signals an overall framework and allows readers the opportunity to integrate the understanding into their own framework. The exercise allows learners to self-test thereby ensuring transfer of knowledge. Although the site is black and white and not very interactive, it does what it sets out to do in a way that is clear and coherent. The line length is neither long nor short, so it would appeal to most readers in the target group. The whitespace certainly creates an easy flow of information. Of course the true test is this-- After reading the page, do you have a good understanding of the basic Gestalt design concepts? How can you use these concepts to better design a page for your learners?

Site Two: Mike Cuenta’s Gestalt & Typography Presentation http://seekpeace.com/gestalt/Gestalt.html

 

This page was created in 2000. The page discusses the two Gestalt concepts similarity and proximity specifically as they pertain to type and online layout. Compared to site one, the topic is narrower and illustrates type and image placement; whereas, site one’s emphasis was more focused on Gestalt and images, which may relate to logo design. Site two uses the application Shockwave, so some learners will have to download Shockwave to their computers to view it. This could present a slight obstacle for some users.

Like the previous example the page opens aligned left. The whole size of the page is small so that it would be viewable on multiple screen sizes. The start page has simple colour and design with the logo and a start button. Navigation-wise, pressing start is the only option. The narration starts with a definition of Gestalt and then talks over visual representations that illustrate the concepts. It follows exactly Mayer’s principles Multiple Representation, Contiguity, Coherence and does not violate Split-Attention. It presents the material using two methods at the same time on different channels without causing cognitive overload. The navigation is simple. You can end at any minute but you cannot pause and rewind a bit to replay; you would need to start again from the beginning. There is no activity to check transfer like site one, but that could be provided elsewhere if one were to use this. This multimedia explanation appeals to the particular learners involved. Graphic design students tend to be visual learners, but it also appeals to the other learning styles as well. The visuals are simple; the text is simple; the movement throughout illustrates the changing concepts so it does an excellent job of bringing to life a concept that is hard to explain in simple text and pictures. But again the true test is: What did you learn and how can you apply it to your own learning environment?

The two samples although older still represent good opportunities for learning and consolidating Gestalt design concepts. In most respects they follow Mayer’s and other’s principles. 

What have we learned?

If we understand our audience, start with a solid plan, follow proven strategies and design principles, and provide opportunity for interaction through questions and self-evaluation, we will most certainly create more meaningful instruction. 

As promised:

Example of the bad in web page design here http://www.gatesnfences.com/

Example of the Ugly in web page design here
http://www.lingscars.com/

---

References

Cuenta, Mike. (2000). Gestalt & typography: An interactive design tutorial. Retrieved from http://seekpeace.com/gestalt/Gestalt.html February 12, 2010.

Graham, Lisa. (2008). Gestalt theory in interactive media design. Scientific Journals, 2(1), Retrieved from http://www.scientificjournals.org/journals2008/articles/1288.pdf February12, 2010.

Mayer, Richard.E . (2008). Learning and instruction. Upper Saddle River, New Jersey: Pearson Education.

Mayer, R.E., & Moreno, R. (1998). A Cognitive theory of multimedia learning:Implications for design principles. Retrieved from http://www.unm.edu/~moreno/PDFS/chi.pdf February 12, 2010.

Mayer, Richard E. (1997). The Cambridge handbook of multimedia learning. Cambridge University Press. Retrieved from http://books.google.ca/books?id=SSLdo1MLIywC&pg=PA45&dq=mayer+1997&client=firefox-a&cd=1#v=onepage&q=mayer%201997&f=false February 14, 2010.

McMullin, J., Varnhagen, C.K., Heng,P. & Apedoe, X. (2002) Effects of surrounding information and line length on text comprehension. Canadian Journal of Learning and Technology, 28(1), Retrieved from http://www.cjlt.ca/index.php/cjlt/article/viewArticle/65/62 February 13, 2010.

Shaikh, A.D., (2005).The Effects of line length on reading online news. Usability News, (7)2. Retrieved from http://www.surl.org/usabilitynews/72/LineLength.asp February 12, 2010.

Spokane Falls Community College, Initials. The Gestalt Principles. Retrieved from http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm#similarity February 10, 2010.

Thuring, M., Hannemannn, J., & Haake, J.M. (1995). Hypermedia and cognition: Designing for comprehension. Communications of the ACM, 38(8), Retrieved from http://citeseerx.ist.psu.edu/viewdoc/download;jsessionid=9F74F8D42E2B84068F1B1E63B1D51507?doi=10.1.1.106.9138&rep=rep1&type=pdf February 12, 2010.

Wilkinson, M.J. (2009, May 20). The Line length misconception, The Viget Advance. Retrieved from http://www.viget.com/advance/the-line-length-misconception February 14, 2010.