To Florida Gulf Coast Home Page
Principles of Online Design
Principles of Online Design
 

Home

Introduction

Instructional Design

Interaction & Feedback

Instructional Media

Course Management

Support Services

Instructional Media

Instructional learning goals should drive media selection, application, and the course development process. Characteristics of the distance learner and the impact of technology are also important considerations in instructional media selection and course development.

Interface design should be consistent and aesthetically pleasing to orient the learner and gain their attention. Disorientation is a common complaint when learners browse the web. "Where am I in this web site?" and "how do I get where I want to go?" Again, many design "guides" rely on generalities - "be sensible, clear, and clutter free (Everhart, 1997). However, there are specific techniques shown by research to be effective for information retrieval and processing on the web.

NOTE: The use of Course Management Systems, such as ANGEL the system used at FGCU, has made delivery of web content much easier to manage. Therefore, some of the information in this and following screens is not as applicable as when these guidelines were first written. However, much of the information is still very relevant when designing web pages to run within the system.

Information Presentation | Interface Design | Multimedia Elements

3.1 Information Presentation

Principle:
3.1.1 The information on a course web page should be organized in a way that facilitates information processing and reading.

Practices:

A. Organize the information on the web page clearly and in a logical flow.

Examples:

The purpose of educational web design is not to just present information, but to assist students in learning the information presented.

Printed text has an advantage over electronic text because the information is presented in a linear way and can be broken into easily recognizable "chunks." The students can control the pace at which they learn these chunks. In a textbook, chapters, pages, sections, headings, even paragraphs all "chunk" information in ways to help students comprehend and learn.

Web sites should emulate this "chunking" strategy.


B. Place adequate amount of information on a screen.

Studies indicate that scrolling should be minimized (Shotsberger, 1996). People will scroll for a known purpose, such as coming to the end of a clearly defined section. However, a single screen of endlessly scrolling data, even if broken into headings, creates a navigational and comprehension barrier. Without "chunking," students become overloaded with information and comprehension drops.

This page is an example of vertical scrolling. Generally, horizontal scrolling is more objectionable than vertical scrolling.


C. Use shorter lines of text if the web page is intended to be read on-screen.


Text dependent online newspapers and magazines use a single column of text taking up no more than 50% of the screen (40 to 60 characters per line.) For example: http://www.cnn.com

In addition to the 50% column "rule," text segments should be broken into smaller blocks. There should be less text than in print counterparts. Studies show reading information from a computer screen can be as much as 30% slower than from a printed page (Debra, 1996; Wright & Lickorish, 1983). "Chunked" layout delays fatigue and increases comprehension (Debra, 1996).

This site, from a Fall, 1998 course, is a good example of bad design. Even though the page contained images, every student in class reported using the option of downloading and printing the document. It was just too hard to comprehend by reading it on screen.


D. Place the important information at the top of the web page.


Follow the journalism model of the "inverted pyramid", placing important information at the top of the page.

 

E. Appropriately use white space to increase the page's visual appeal.
The print world calls this "creative use of white space." If only 50% of the screen is taken up by text (See 3.1.1. C), what fills the rest? The balance of the space is filled with navigational elements, appropriate graphics, and "nothing" (white space). White space helps to divide the "chunked" portions of the screen so that they are more easily read.

F. Choose the right screen size to design the course web pages.

There is no agreement on appropriate screen size, however most of today's users use a resolution of 1024 x 768, so it is probably most prudent to design for that size. When using tables, designate a width using percentage rather than pixels, (EX: width=80% instead of width=540 pixels) so that the table will resize according to the actual screen width.

Students can test both their computer screen settings and also a variety of other browser features.

Principle:
3.1.2 The course content should be clearly organized and the course web pages should be logically linked to facilitate information retrieval.

Practices:

A. For novice and naïve web users, it is better to structure the course web site in a simple and linear structure.

B. For advanced and experienced users, use more complex and nonlinear structure.
Examples:

There are four main organizational strategies for web sites:
Sequence - a linear narrative
Grids - a good way to correlate variables
Hierarchy - one of the best ways to organize complex bodies of information.
Web - which mimics associative thought and free flow of ideas.

The specific strategy used will depend on both the purposes of the site and the specific content. The Yale Style Manual
provides a useful information on incorporating these four strategies.

Principle:
3.1.3 When preparing content for the course web site, bear in mind that the course content delivered on the web must be provided in a format accessible to persons with disabilities if requested.

Practice:

A. The "Design Standards for FGCU World Wide Web Resources" clearly states the FGCU policy on web accessibility for persons with disabilities. "In order to support the information and educational needs of persons with disabilities, all FGCU information delivered through the WWW must be made available in a format that makes a reasonable accommodation for persons with disabilities."
 
Examples:
This may be accomplished by making the web-based materials also available as a text-only viewing option, or it may require an alternative method of information delivery for those students who need it. One or the other is required." Review the FGCU Web Resources Design Standards.

This does not say that all web-based information must be completely accessible to students with disabilities. In fact, techniques that would enhance accessibility to visually impaired students might decrease accessibility to hearing-impaired students due to differences in learning styles. Each student with a disability must be uniquely accommodated in relation to his or her specific disability. For assistance in providing accommodation, contact the Office of Multi-Access Services at 239-590-7925.

Web pages may be measured for accessibility in accordance with standards developed by the Center for Applied Special Technology. This website allows you to test web pages for various accessibility issues.

Top of Page

FGCU 2006. This is an official FGCU Web page.
Florida Gulf Coast University is an equal opportunity/affirmative action institution.
10501 FGCU Blvd. South, Fort Myers, FL 33965-6565