New Visions for Transforming Teaching (ERIC Record: EJ831437)

A Review of Systems Design Including Its Role in Planning for School-Community Relationships (.pdf)

Attention Deficit Hyperactivity Disorder and Adult Learning (.pdf)

Analysis and Design of Web-based Instruction: Production Considerations Advanced from Academia, Business, and the Multimedia Industry

Distance Learning in Virginia: Evaluating Efforts in the Commonwealth and at the University of Virginia

Is Video Used in Education Today Appropriate for Constructivist Environments? A New Video Model To Stimulate Constructive Thinking in the Classroom

• Designing For the World Wide Web
  
• Designing User Interfaces
  
• What is Javascript and DHTML?
  
• Web Site Management
  
• Producing Interactive Multimedia (CD-ROMs)
  
• Recommended Resources for Digital Designers

Technical capabilities, design issues, and communication considerations all surface when developing web sites. Elements do not reside in isolation; in fact, all these issues overlap and can affect any stage of a web site's production process. Some important things designers face when creating web sites include: considering available bandwidth and client capabilities including designing for targeted browsers, considering whether to use plug-ins to serve content, considering whether to use client or server-side scripts, and how or when to use database technologies in web sites. Many of these issues seem large but should be considered even when developing single HTML pages. Let’s look at each of these elements in more detail:

Bandwidth (or lack thereof) is one of the biggest issues facing individuals who design for the World Wide Web (WWW), affecting both the design of static pages as well as the design of entire sites. Although more and more people are connecting to the Internet via DSL, cable, and T1 lines, the majority of the user base is still “surfing” web sites over 28.8k or 56k dial-up connections. Consequently, short download times and minimum file sizes are critical features of a well-designed web site, unless of course a designer has the luxury of creating content that will only be delivered over a company’s LAN or Intranet! Everything placed on a web page including images, text, or multimedia must be manipulated and compressed for optimized delivery. Designers have to be aware that Internet traffic can affect how long it takes users to see their material as well! The “rule of thumb” states that meaningful content should download in a user’s browser in thirty seconds or less.

Netscape and Microsoft Internet Explorer are the two most popular browsers on the market today. Developments over the past 24 months have seen these two major players (somewhat grudgingly) incorporate technologies that attempt to standardize how material is presented in their browsers, but there are still major differences between the two, especially regarding how DHTML is incorporated. But the real problem designers face is that the majority of users do not have the most recent version of these browsers installed on their machines! Thus, designers must consider designing for backwards compatibility, sometimes referred to as “the lowest common denominator.” This can seriously affect what technologies (such as using frames or Javascript) can be used in a site and how material is organized and presented on every page. Designers should constantly test how their material looks and functions on various versions of both major browsers, preferably on both the Mac and PC platforms- and don’t forget about WebTV!

The greatest thing about the WWW is its universality. The Web is cross-platform and can be accessed by people regardless of whether they are working on a PC, Mac, or even a UNIX computer. However, designers have to consider that end users are probably not viewing their sites with computers that have accelerated graphics cards and 450 speed processors, and many end users probably don't have 27” 24-bit monitors on hand either! Thus, designers must consider indexing images and graphics on web sites using a 216 browser-safe 8-bit color palette, minimizing or avoiding multimedia content (video and sound), and designing pages to fit a 640x460 resolution. Once again, these design considerations apply to single pages as well as across entire web sites. Designers can consciously choose to design differently if they know their target population has the ability to see advanced material, but if designers want to reach the largest amount of the web population they must stay within these design parameters.

Plug-ins are applications end users may need to download and install on their machines and in their browsers to view certain content served on web sites, or to see content streamed from dedicated servers. Many plug-ins are free and are included in the latest versions of Netscape and Internet Explorer, but often designers must direct users who have older browsers to download and install the appropriate plug-in so end users can see the content on the web site. Some examples of plug-ins include Quicktime, the RealPlayer, Macromedia Shockwave (Flash Player), and Adobe Acrobat, just to name a few. The Real and Flash Player have recently been included in the latest versions of both major browsers. However, designers should be wary of requiring users to install plug-ins to view their web sites; many users do not want to do this, may not meet the appropriate requirements for download (re: WebTV does not support Quicktime), or may not have the technical expertise to install plug-ins to begin with.

Scripts are used to give web sites functionality. They can range from server-side CGI (Common Gateway Interface) scripts written in Perl, C or C++, client-side scripts written in Javascript or VB Script, or even small applets written in Java. Scripts are most often used to run small programs, create synchronous or asynchronous communication areas, or to run forms within a web site. They are an important technical element facing designers because they can be challenging and can perform slightly differently in browsers depending on what version a user has on his or her machine (see browser issues above). Server-side scripts can be slow, can increase the load on web servers, and are sometimes a security risk. Client-side scripts often perform the same types of functionality as server-side scripts but are browser and client dependent. Thus, a designer has to weigh the positives and negatives of using scripts in a web site or in a web page to create functionality, as well as whether to use a client or server-side script to achieve a particular interaction.

The use of database in a web site is another extremely important technical issue facing designers today. Databases create their own set of unique challenges and can vary in their complexity- from back-end functional products like Microsoft Access or FoxPro, to incredibly robust database architectures created by Oracle and SAP. Generally, back-end databases work hand in hand with middleware products like Microsoft’s ASP (Active Server Pages) or Allaire’s Cold Fusion to query information inputted by users as well as to serve dynamic content to templates placed in web sites. SQL (Structured Query Language) and ODBC (Open Database Connectivity) should be part of every web designer's vocabulary; designers must be familiar with how databases interface and interact with web sites, even if they are not the ones who will program the code or actually build the database for a large scale site. Designers must also be aware of the most recent standards in HTML and XML to make sure they are creating code that will be archival and will properly index in future search engines and directories.

A well designed user interface is a critical feature for any web sites. Designers must design interfaces that will allow people to access and use the site effectively- this is sometimes easier said than done! Interfaces must be simple, consistent, readable, and easily navigable. Ultimately it boils down to message design and good visual communication. There are both graphical and navigational issues for the designer to consider:

Robin Williams categorizes graphical design into four broad considerations- contrast, repetition, alignment, and proximity. Designers should make every attempt to follow these universal design “truths” when creating user interfaces. Contrast, repetition, alignment, and proximity bring a sense of visual balance and organization to visual material, whether the information is ultimately be presented on a web site, kiosk, CD-ROM, television screen, or a printed page.

Contrast can be achieved through bold color combinations in design elements like fonts, graphics, and backgrounds. For example, designers should always attempt to create a strong contrast between text color and background color. If a background is a light color the text should be dark and vice versa. Also, designers should attempt to create contrast with font sizes and font types, it is best not to use fonts that look fairly similar but are actually different. For example, use a serif font for readabletext and a sans-serif font for text that needs to be legible. This will increase contrast and help the user to identify key elements easily.

A designer should use repetition through a site to maintain consistency. A small graphical image like a company icon placed in the same place on every page is a predictable cue and will give the user a sense of location at all times. Sometimes designers use themes through a site to create consistency and aid in navigation. Icons should be placed consistently on every page, metaphors should be congruent, fonts should be repeated, pages should have the same stylistic elements to achieve a sense of uniformity and a consistent “look and feel,” the list for repetition can go on and on.

Web pages need to be laid out on grids to achieve alignment and proximity. Text should be right justified or left justified on strong horizontal or vertical lines (not necessarily both), rarely should designers just center text directly on a page. Proximity means to place “like elements” together- text, images, and symbols that are similar or refer to similar things should be grouped close to one another. Lay out and chunk information in multiple columns with sufficient white space in the gutters and in the margins to increase readibility. These axioms will ensure the page will be readable, clean, and balanced.

Navigational design starts with the information architecture- the web site must first be organized into a flowchart where levels and access routes (paths users takes through a site to access content) are represented. Information can be laid out in a hierarchical structure, a web structure, or a grid structure. The designer will have to create buttons, links, and/or controls that will help the user move through the site’s organizational structure. A designer should consider whether to include a site map, an image map(s), frames, or even metaphors in the navigational scheme. Navigational schemes might turn out to be linear (i.e. training web sites) or information/product driven (i.e. directories, e-commerce sites, etc.). Some users “surf” the web with images turned off in their browsers- designers should include ALT tags and text links to make sure the site will be navigable by the largest populations. It is also important to consider users who are physically impaired or handicapped when designing interfaces.

Javascript is indispensable as a web development tool and at the forefront of design for the WWW. Now that IE and Netscape have standardized how Javascript functions in their applications (close anyway!), web designers can begin to incorporate Javascript without fear of reprisal from the two most popular browsers on the market today.

Javascript is a client-side scripting language that provides functionality in web pages and across web sites. It is more efficient than server-side scripts because all of the calculations and programming is run on the client, reducing the load on servers and across network lines. Javascript should not be confused with the programming language Java; they are in fact two very different programming languages and have little in common except the word Java!

Javascript first ran in the Netscape 2.0 browser, was then supported in IE 3.0, and now has full functional support in the 4.0 browsers (and above). This does pose some overhead to designers who need to design for “backwards compatibility,” or for users who are still running early copies of IE, Netscape, or maybe early versions of AOL or Mosaic! The nice thing about Javascript is that you can hide it from early browsers- when an early browsers runs across Javascript it will just ignore the code. Most designers work around the early browser problem by creating alternative content or an alternative site for these nostalgic users!

Initially, early web designers who wanted to use Javascript in their sites had to either write the code themselves, copy and paste code from other sites, or find someone who could write the scripts for them. WYSIWYG HTML editors like Dreamweaver 2.0 can now generate Javascript for the designer. It is a quite a time saver to choose a desired Javascript function or behavior from a drop down menu and pop it into the web page- the designer can even direct Dreamweaver to choose Javascript that will be compatible with older browsers and run tests to make sure it works! Dreamweaver is great!

Javascript can perform a variety of functions to promote interactivity in web pages. Designers can use it for purely cosmetic scripts like rollovers, image swaps, and status bar reports. It can also be used to pre-load images, check browser compatibility, open pop-up windows, navigate through areas of a site, run tours, send and receive cookies, and even animate objects using a timeline (similar to Flash). Javascript can also be used to run forms and generate quizzes. These are just a few of the ways to use Javascript in web development. However, keep in mind that some of these scripts will only function in 4.0 browsers!

Dynamic HTML, or DHTML, holds great promise for web developers. DHTML is actually a term that loosely defines a number of technologies including Javascript, Cascading Style Sheets (CSS), layers, and Active-X technologies. Based on the DOM or Document Object Model, DHTML gives developers precise control over every object present in a web page (fonts, styles, colors, images, etc.). With HTML, developers have to resign themselves to knowing that users see their pages differently (however slight) across different browsers. This is no longer the case with DHTML (in theory). However, DHTML has yet to reach its full potential.

Netscape and IE both handle DHTML slightly differently- platform and browser support is currently the greatest drawback to the DHTML movement. Microsoft has led the charge with their highly functional Active-X controls (VB Script, COM, etc.), prompting the World Wide Web Consortium (W3C) to hold IE's Active-X technologies as the standard for all browsers’ dynamic capabilities. Designers who have targeted audiences that have the appropriate platform support (internal departments, etc.) can literally “go to town” with DHTML to unleash its full potential. Designers who must design for both Netscape and IE cannot commit fully to DHTML until the W3C determines standards that are fully adopted across the board. Both major browsers differ with how they handle layers, style sheets, and other elements- this holds back the proliferation of DHTML in the web development community.

Another interesting sideline with DHTML is how far the W3C will go to standardize it. Designers want full control over how pages are presented in people’s browsers, just as graphic designers have complete control over how printed material looks in magazines and books. In theory CSS would give the designer complete control of the font size, color, layout, etc. in web pages, but currently users can still override these features in browsers that support CSS (a good thing for end users who are visually impaired). The Web was originally conceived as a medium that would give total control to the user, it will be interesting to see if CSS will eventually deliver the precise control designers so desperately seek.

Many think after a web site has been designed and launched it’s time to kick back, relax and let the visitors “flock in!” In fact, nothing could be further from the truth! Much time and effort should be invested in maintaining a site after it is created- many times this aspect of the production process is poorly planned and executed by everyone involved, resulting in bad feelings between the client and the designer at the end of the project. Although it is the last stage of site development, maintainability should be considered and planned for initially by the designer.

Designers who pay close attention to documenting the “means to the end” will make the client’s life easier. It is a shame when much time and energy is initially invested into the design and development of a web site only to have this attention to detail fall off after the designer moves on. The designer must make sure the person who is left behind (the client or Webmaster) understands how to use site management software, set server permissions, understand existing directories, utilize traffic statistics, upload new content, and market the new site. These issues will ensure the client will get his or her money’s worth and that the site will continue to be productive well into the future.

The designer can help the Webmaster by paying close attention to detail throughout the production process. All organizational strategies should be documented during the site’s production and produced as a deliverable to the client at the end of the project. This document would detail and explain how to use any templates used to create the HTML pages in the site, how graphics were created and where they are stored, as well as any server directs (scripts used to make global updates) needed to update banners or other design elements present throughout the site. Intuitive and consistent directory structures created by the designer at the outset will make it easier for the client to support the site long after the designer has moved on. Standards should be set early on for directories that hold images, movies, sounds, and graphics. The designer should also show the client or Webmaster who will be maintaining the site how to FTP and set permissions (CHMODing) on directories (if the client does not know how to do this already).

Other training includes educating the client to use site management software like Adobe Pagemill to fix broken links, to use an HTML editing program like Macromedia Dreamweaver or Microsoft Frontpage to create content (these applications also have their own site management capabilities), and how to use traffic statistics provided by the host server to analyze and track the site’s usage. Depending on the situation or contract, the designer might also give the client all source files used to create the web site’s content (or store them in a specific directory) so the client is able to access and edit them as needed in the future. The designer should show the client how to market his or her new website including how to use META tags in new pages the client may need to create. Lastly, the designer should show the client how to register a domain name for the site, how to index the site with major search engines and directories, and how to use other forms of advertising (email, newsgroups, paper stationary, etc.) to get the “word out” and repeat visitors “flocking in!”

Users will not return to sites that are not continually updated with new and exciting content. Thus, maintainability and support are extremely important for the survival of any web site. The designer should document all organizational strategies used during the creation of the site and deliver these naming conventions and standards to the client in writing at the end of the project. The designer should also arrange for the client or Webmaster to be trained on site management and HTML editing software, file transfer protocol and server permissions, usage statistics, and marketing strategies. Paying close attention to these details at the outset will ensure the site remains functional long after the designer moves on.

Producing an interactive CD-ROM is a challenging, frustrating, and highly rewarding experience (sometimes all at the same time)! Usually CD-ROMs are created by a team of people including a project manager or producer, a graphic designer, a content writer or instructional designer, and programmer(s) or software engineer(s). Depending on the size of the project or shop there might be a creative director, executive producer, video producer, or technical lead on the team as well.

Each team member is responsible for specific things. The project manager is usually the person who is responsible for the project from start to finish. He or she has continuous contact with the client, runs team meetings, organizes the deliverables, sets deadlines, designates tasks, creates a project plan, oversees the budget, provides updates, and facilitates the overall communication among team members. The graphic designer is usually responsible for all the creation and manipulation of all artwork, images, graphics, and interface elements produced for the CD-ROM. The instructional designer or content writer usually conducts a needs assessment, sets goals, provides an information architecture, scripts and storyboards content, designs the interface (with input from the graphic designer or creative director), produces original content (working with a content expert or the client), prototypes, and is responsible for evaluation and revisions. Programmers/ engineers are responsible for the programming, the technical specs, any needed back-end database design, and debugging in a project. Many times these duties might cross over in small shops, where producers also write content or instructional designers do some of the graphical design work. Frequently responsibilities like content writing might be contracted out to outside proprietors, especially in shops where there isn't a full-time instructional designer on staff.

A multimedia product is developed in stages. It usually starts with some form of proposal, either as a response to an RFP from a client or an internal idea or need from within a company. After an initial idea is proposed, a creative brief might be created and the project will launch. There are four stages of production a team must complete when producing a CD-ROM- Analysis, Design, Development, and Delivery.

In the Analysis Stage a needs assessment should be conducted, target platforms and audiences should be defined, goals and the budget for the project should be established, timelines and deliverables should be scheduled, technical specs should be explored, and a release date should be set.

The second stage is usually referred to as the Design Stage. After analysis is complete the team can begin flowcharting, storyboarding, and scripting the content. Navigation, information, and presentation (graphics) are all “fleshed out” in the design stage. Content is written, organized, and revised. The user interface with all its navigational controls and elements should be created on paper and prototyped on a group of alpha testers. Sometimes a document with psuedo-code (English version of programming code) is created for the team’s programmers, while a document listing the functionality needed on each screen or page is critical for everyone involved.

After design comes the Development Stage. This is the stage where all the technical experts take all elements in the design and make them work together in an interactive program. Usually multimedia CD-ROMs are created with an authoring tool like Macromedia Director or Authorware. Programming languages like Lingo (Director), Visual Basic, C and C++ are also often used to create interactive applications. During the development stage digital graphics and images have to be scanned, created, and manipulated using adaptive palettes and imaging software. File permissions, naming conventions, and directory structures should be established and adhered to by all team members. Also, movie and sound files (audio and music) need to be recorded, captured, edited, compressed, and embedded. Usually the programming team will produce a beta or working version of the CD-ROM that they will test with quality assurance team on targeted platforms during this stage. Debugging is a frequent and necessary byproduct of beta testing, good programmers will document all revisions and scripting conventions used in the code and and delivered it to the client upon completion of the project.

After all bugs are fixed and the program is deemed ready for release can the Delivery Stage begin. The application is packaged and burned on a CD-ROM with all needed files and directories, plug-ins, and necessary documentation. Usually a cover is designed and created by either the graphic designer on the team or from an outside printing agency. Multiple masters are burned and sent to a company for mass duplication, wrapping, and distribution. All documentation and deliverables are turned over to the client at this stage including the source code and master files. Hopefully everything went relatively smoothly and the target audience loved the product!

There are issues to consider when creating materials that will also be disseminated via a CD-ROM. As mentioned, the great thing about the WWW is that it is platform independent and that information disseminated on it can be updated easily and frequently. Information that is distributed on CD-ROM is not as flexible- you cannot revise content once it has been burned on the disk. A mistake caught on a CD-ROM after it has been burned, duplicated, and delivered is quite costly! Sometimes training departments use a combination of the Web and CD-ROMs to delivery training modules to end users. Known as hybrid CD-ROMs, movies and 3-D animation are delivered on the CD-ROM while information and dynamic content is served from the web site. This solution strikes a happy medium by giving designers the flexibility of updating with the bonus of high-end multimedia. Designers have to also remember to set up the parameters during the burning of the CD-ROM so it can be accessed on both the Mac and PC platforms (assuming the content was authored accordingly).

Producing a CD-ROM takes a great deal of time and effort. Usually a team is responsible for creating a CD-ROM; the producer or project manager is responsible for the project from start to finish; the graphic designer is responsible for all images and graphics created for the interface; the instructional designer or content writer analyzes the audience, sets goals, storyboards and writes the content, and revises; the programmers script and debug the program. Production in generally divided into four distinct phases including an analysis, design, development, and delivery stage. Once material is burned on a CD-ROM is cannot be revised, it is extremely important to make sure all information is correct and all bugs have been fixed before duplicating and distributing the final product.

  Dick, W. & Carey, L. (1996). The systematic design of instruction (4th ed.). New York, NY: HarperCollins College Publishers.

  Fleming, M. & Levie, W.H. (1989). Instructional message design. New Jersey: Educational Technology Publications, Inc.

  Hall, B. (1997). Web-based training cookbook: Everything you need to know for online training. New York, et al.: Wiley Computing Publishing.     

  Lopuck, L. (1996). Designing multimedia. Berkley, CA: Addison-Wesley Publishing Company.

  Lynch, P.J. & Horton, S. (1999). Web style guide: Basic design principles for creating web sites. New Haven & London: Yale University Press. [Online]. Available:
http://info.med.yale.edu/caim/manual.

  Norman, D.A. (1988). The design of everyday things. New York, NY: Currency Doubleday.

  Kristof, R. & Satran, A. (1995). Interactivity by design: Creating and communicating with new media. Mountain View, CA: Adobe Press.

  Siegel, D. (1997). Secrets of successful web sites: Project management on the world wide web. Indianopolis, IN: Hayden Books. [Online]. Available:
http://www.secretsites.com.

  Weinman, L. (1999). Designing web graphics (3). Indianopolis, IN: New Riders Publishing.

  Williams, R. & Tollett, J. (1998). The non-designer’s web book. Berkely, CA: Peachpit Press.