Multimedia Design Basics
Dr. Wes Leggett
The focus of this reading on multimedia design basics is instructional, visual, and usability design. I have strong beliefs as to what constitutes good design, so to that end, I'll use my own website as a model and explain the thinking and reasoning I used in its creation and development.
The elements of instructional design include:
The first step in any instructional design model and process is to analyze your learners. In the case of my website, the question was, "Who is my audience?" This was an easy question to answer as one of the main purposes of my website is to serve learners in the various courses I teach. Another primary purpose was to serve relatives and friends by providing photo galleries so they could keep up with our family activities and growing children. A secondary purpose was self-serving by posting my favorite links so they would be available from any computer I might be using that had Internet access (so me, myself, and I were an audience). As founder and moderator of a RV Forum several years ago, a final audience are those RVers or wannabe RVers who have an interest in my RVing knowledge and experiences. So, now that I had identified my audience, I could then start making decisions about the age appropriateness and content appropriateness of my website.
To be age appropriate, I needed to make sure my website was geared for adults. This meant I would use vocabulary and structure appropriate for people aged eighteen (18) and above. I would not limit my word usage, except to choose the best ones for clarity in communication. I would, however, limit the structure to a more conservative and simplistic approach as compared to a website designed for elementary students in which I would be much more elaborate, creative, and splashy.
To be content appropriate, I needed to make sure that what I was presenting on my website was not only developmentally appropriate for the age level of my audience, but also appropriate for presenting in the web environment. These are the two critical things you must keep in mind when you create instructional materials. Is your content appropriate for your audience and your method (i.e., lecture, demonstration, video, multimedia, web-based)?
In determining the organization of my website, I used a process of identifying what I wanted to include with determining the best sequencing - alphabetical, relational, hierarchal, sequential, or chronological - in putting together an outline on paper before ever starting on the computer. I identified the main categories of information I wanted to present and those became the original (now former) main pages of Advising, Announcements, Courses, Examples, Resources, Links, and Family (notice that I chose to group these alphabetically within relational sequencing). Within the main pages, I grouped items by alphabetical, relational, sequential, and chronological sequencing in an attempt to identify and use the most efficient and effective organization of materials as possible. I always plan things out on paper, outlining and storyboarding, before I begin development. Although I always make changes and additions or deletions along the way, I know I save time and have a better product in the long run by having prepared a battle plan. When I downsized my website in August of 2003, I decided on the main pages of: Courses, Links, Family, and RV, and that's what you see today.
Pedagogy is one of those big education words that professors enjoy using whenever we can because it's a really impressive word! Along with being impressive, it does have an important role in describing the learning context - the learner, the methods, the strategies, and the environment. In the case of my website, I'm focusing on two particular elements. First, are appropriate methods and strategies being used for the audience/learner? Second, are these being provided as individual, small-group, or whole-group interactions? I believe I've used effective methods and strategies for adult learners. As for number two, while all the materials I've provided on my website are for individual interaction, there's no reason a small-group couldn't gather around the computer screen and go through the information.
Since learning strategies and instructional methods tend to go hand-in-hand, I generally run them together in one big instructional pot. I do define learning strategies as resource, drill & practice, simulation, tutorial, and game. As for my website, I've provided resources and tutorial links that enhance and extend the written lecture and guided instruction materials I've created. I can evaluate the effectiveness of these strategies when I review assignments that are submitted. On a more general level, learning strategies can be reflected in how I (and you) organize and present information. I've already mentioned alphabetical, relational, hierarchal, sequential, and chronological sequencing, but an even more fundamental level of organization relates to human behavior - the sequence of left to right and top to bottom. In our culture, we learn to read going left to right starting at the top and working our way to the bottom. This learned behavior can be used as an instructional strategy when material is presented for the audience/learner. Put things that are important or should be done first at the top and/or left corner/edge of your web page. Never stick something important in the bottom right corner of your web page!
Not just web, but ALL multimedia based instruction need to address these instructional design elements.
The elements of visual design include:
For my website, my marble background sets the theme. Think of the impression that marble gives: majestic, stately, classic, and solid. I want all these qualities to be felt when viewing my web pages. What would you think of me if I used a bright lime green background? The reason I chose this particular marble is that it is light enough to still contrast with a variety of colored text, subtle enough to create interest and depth without screaming for attention, and creative enough to not seem like a tiled symmetrical blocky background. The colors I've selected represent a scheme of dark blue as the primary color and accent colors that are complementary.
I've made sure that there is enough contrast for the text to stand out against the marble background and the pictures against the dark blue background. This is so important in providing readability, identification, and decoding.
I have a pet peeve about how some web developers layout their websites. They create their websites looking at 21" monitors and forget that the majority of people have 17" and even 15" monitors. This causes screen pages to be too wide which demands that viewers use the left and right scroll bars or buttons in order to see full pages. I prefer to align everything to the left side and will even do forced line returns on the main pages so that text is always in view. On pages like this one, which appear in a new window, I leave the text in virtual wrap so that it conforms to whatever size window the viewer chooses to use. Another layout principle I use is in making graphics and images the same width. I believe this adds to the professional look and feel of the entire site when elements are aligned and in proportion. You can really see this in use on my family photo gallery pages! Other multimedia developers who have fixed-proportion screens (when authoring with PowerPoint, Flash, or HyperStudio, for example) have more end-user control of their layout than web developers.
I believe consistency is so important in any presentation, whether it be pages on a website, frames in a multimedia presentation, or slides in a slideshow. This involves utilizing the same font style that uses only a small selection of colors and sizes. You'll notice on my website that I use the default web page font of Times New Roman in black, red, and blue with larger sizes for headings and bolded and highlighted text for emphasis. I'm not changing font styles, colors, or sizes every paragraph. Every time I do change, it is for a specific reason or purpose. Again, since my audience is for adults, I minimize any extra effort in decoding (figuring out where stuff is and what it means) by using a conservative approach and being VERY consistent.
My consistency from one main page to the next in theme, layout, fonts, and colors creates continuity in my entire site. Everything looks like it belongs. The way I've organized and sequenced my site also fosters continuity by allowing information and user activity to flow as effortlessly and as naturally as possible. In other words, there are no surprises or radical jumps or changes when moving from page to page around the site. Continuity is critical in multimedia materials.
At this point, let's now take a look at text, graphic, and sound elements.
Text elements include:
Since these elements are pretty straight forward, I won't elaborate on them.
But I will point out two things you should never, NEVER do on your web pages. First,
never underline any text. Since underlined text is how links are
displayed on web pages, you will confuse and frustrate folks who will try to
click on words you underline. Second, never use italic text in the
standard display 12 point font (what you are currently viewing). On some
screen displays and monitors, this italicized text is virtually unreadable. Be
sure to use italicized text in larger point sizes. The absolute best way to emphasize key words
on web pages is to simply
use bold or color or
highlight or a
combination.
Brief tangent for PowerPoint presentations: Research has shown that the best
combination for readability for a projected image (which is 95% of what
PowerPoint is ultimately used for) is light
text on a dark background.
The preferred light text colors (in order) are: White, Yellow,
Light Blue, Pink, Beige, Light Orange, and Light Green. The preferred dark background colors
(in order) are: Dark Blue, Dark Purple, and Black. An absolute No-No is
Red text on a Black background.
Can you read this?
The reason white backgrounds
are not preferred is because of the
bright glare from the projection screen which can give some people headaches who
are light sensitive. And, depending on the quality of the projector you are
using and the size of the projection screen, text can look fuzzy or washed out
on a white background. If you want to use a light colored background, then use
pastel colors. Use Light Yellow, Light Blue, Pink, Light Orange, and Light Gray.
For text, use Dark Blue, Dark Purple, Black, Dark Green, and yes, even Red.
You can read this easily, right?
Of course, just because you choose a single dark background doesn't mean
you have the liberty to go hog wild and use all seven (7) preferred text colors
on the same screen. Try to always use at least two (2) text colors at a time for interest
and emphasis. Three (3) colors is a nice combination. However,
you need a good reason to use four (4) on the same screen. The fourth (4th)
color should only be used for a critical and unique impact. Since I'm always
providing examples for you, here's a PowerPoint presentation I created for a
college professors' conference that Dr. Debra Dirksen (a former colleague) and I
presented: CyberNag.pps (saved in
PowerPoint show format - you do need PowerPoint on your computer to view). For a
little more creative presentation that is designed for a younger audience:
OregonTrail.pps (you do need
PowerPoint to view). You'll notice that my belief in the function of PowerPoint
is to provide headlines and bullet points. It's there to emphasize the key ideas
and points you're trying to get across. It's not for your audience to sit there
and read paragraph after paragraph after paragraph. Use as few words as possible
to highlight and focus your message. If you want people to read, give them
handouts.
Graphic elements include:
Appeal means the visual interest, stimulation, and/or impact that a graphic adds to the multimedia screen or web page. Appeal includes the image's representation (photograph, illustration/drawing, stylized graphic, or abstract graphic - check out the Visual Learning and Literacy reading) and colors.
In the former, more expanded version of my website (back when I was a professor at Metro State), I used a series of graphics for my main pages: Announcements, Advising, Links, Courses, Examples, and Resources. You'll notice in the graphics I used (the six displayed below), I chose a cartoon looking style that used two sets of alternating color themes for visual interest.
| Announcements | Advising | Links | Courses | Examples | Resources |
|
|
|
|
|
|
|
In my current version, I only use two of the graphics above (think I should
go back to using all six?).
Relevance means how well the graphic communicates visually the idea, concept,
message, or item it is connected to. By just looking at the graphic, you (I)
should be able to know immediately or quickly figure out what is being
communicated. See how by just looking at the images above you can
immediately deduce what they represent.
Integration means how the graphic is incorporated into the page layout. Does it look like part of the whole or does it distract? Your goal is enhancement, not diversion or confusion.
All three elements (appeal, relevance, and integration) must be present. A graphic that has visual appeal and is integrated well, but is not relevant will actually hurt your design and detract from your message. Similarly, a graphic that is relevant and is integrated well, but not visually appealing will also hurt your design. I spent some time both locating and modifying (changing size and colors) the graphics above to ensure I was using the best possible.
Sound elements include:
Sound familiar? Essentially, you could just go back and re-read the graphic elements section and simply replace the word graphic with sound. But, I'll condense it here for you: Appeal means the auditory interest, stimulation, and/or impact that sound adds to the visual; Relevance means how well the sound creates a desired mood or is connected to the visual idea, concept, message, or item being displayed; Integration means how well sound is incorporated so it enhances, rather than distracts, diverts, or confuses. Just like graphics, all three elements (appeal, relevance, and integration) must be present when you use sound.
The elements of usability design include:
If you've done a good job at addressing the instructional design and visual design of your multimedia screens or web pages, you're already way down the path on the ease of use element. You can have a multimedia presentation or program, or a website, that is chock full of valuable information and has splashy graphics, but if it's not easy to use, your audience will leave and your learner will give up. Have you ever run across multimedia instruction or websites that fall into that category? Hopefully, yours never will!
Brief tangent for websites: One thing that web developers have begun incorporating is a site map. It's generally a page that is an outline or flowchart representation of all of the pages contained in the website. It gives the user the opportunity to quickly locate and go to the place or item they are looking for. I've taken this a step further by making my homepage a complete site map. Not only are there links to the main pages, but also links to all the main headings on the pages. Both first-time and seasoned users of my website have quick and easy access to just about anywhere and anything on my site.
Response to input has a lot to do with accessing and processing speed. Larger files take longer to load so you want to make sure your files are the smallest and most efficient possible.
Brief tangent for websites: Response to input can also be impacted by the speed of your website's web server and the connection speed of your viewer's computer. As just stated, larger files take longer to load so you want to make sure your files are the smallest possible. While there's not much you can do for the HTML text and code in your web pages (other than using a true web authoring software program vs. a program like Word), you can make sure your image files are the smallest possible. First of all, if you find yourself reducing the size of an image after you've inserted it into your page (by grabbing the handles), use an image manipulation program to resize the image to the exact size you need. I once helped a student resize a picture to the actual size they were using on their web page and the file size dropped from 60K to 10K, which means it loaded six (6) times faster! Another way to increase response time by reducing file size is to save a .jpg image as a .gif image, again by using an image manipulation program. Generally, .gif image files are smaller than .jpg files, but generally there is less picture quality in a .gif image. By comparing your images in both formats, you can make a decision as to the best format for display. If you're HTML savvy, you can see that all my graphics are .gif files. I've chosen this format because the graphics are simple with large areas of solid colors. This is where .gif excels. On the other hand, all my photographs are in .jpg format, because .jpg displays detailed images much better than .gif does.
Stability simply means, "It's not crashing every two seconds!" Corrupted files or media storage will definitely bring your instruction to an immediate halt. Large files or inefficient authoring can delay or freeze your instruction. Be vigilant and tenacious in addressing stability.
Brief tangent for websites: Unless you own your own web server, you are at the mercy of your web hosting provider. However, you can make sure that everything WORKS on your website. Periodically check your external links and remove those that aren't active any more. One thing I've done is to have what is called a mirrored site. I simply keep an identical copy of my website on another web server. If, at any time (and it has happened before), my primary web hosting provider is down or is accessing erratically or slowly, I can send a command to redirect folks who type in wesleggett.com to my backup site. I use an even different web server to try out major revisions or additions and get them working smoothly before uploading to my primary site and then my backup site.
Navigation is CRITICAL with multimedia instruction and especially websites. As I've already mentioned, my homepage is basically a sitemap for my entire website. This is a navigation aid. Another thing you've noticed is that I've provided links to each of the main web pages at the top and bottom of all of the main web pages. I also use bookmarks on each main page, as well as on pages like this one, to give users the option of immediately jumping to a particular section. My personal goal in creating websites is to never be more than two (2) or three (3) clicks away from anywhere in the website. How many of you have been on sites where you had to click, and click, and click, and click (you get the picture) to get somewhere? You may have noticed that any external web page or website link I've provided opens in a new window. I also use a new window with most of my internal pages. This allows users to view new screens without losing track of their original starting point. All of the things I have described add up to a website, or even a multimedia presentation, that is navigation-friendly.
Accessibility is a BIG pet peeve I have with web developers. In the rush to incorporate the latest applet, Javascript, or rollover effect, web designers can leave individuals who use screen aids and readers in the dark, literally! I stopped using frames and graphical text in order to make all of my web pages as accessible as possible. I also make sure that every graphic I use has what are called alt-tags, which are text descriptions of the graphics. I believe you don't have to use all the "bells and whistles" of the web in order to have an attractive and stimulating website. Multimedia developers can fall into the same trap. Be aware of and make appropriate decisions regarding accessibility.
Is your head swimming yet??? Good!!! You are on your way to being excellent multimedia and web designers. Remember the KISS principle, "Keep It Simple, Stupid!" or as I used to tell my television broadcasting middle school students, "Keep It Short & Simple!" I honestly believe the same is true for multimedia presentation/instruction and websites. Be simple. Be clear. Be concise. Be professional! :-)
Copyright © 2000-2004 Dr. Wes Leggett
Last updated 08.14.04