ED 722 – Interface Design – Discussions

Unit One

Action Assignment 1.1 Your audience

u1a1

Essential to any design project is an understanding of your audience; the end user, the public, the learners that will use your web site. The main user of this site (and its series of pages) is you, the designer, but the audience should be either your co-workers or your students who will use the site is a reference to help understand interface design.
Define the audience for your Web site. Remember that the audience and their goals are the primary determiner of the design of Web page interface as well as its content. Write a description of your audience and post description to the courseRoom. Also, convert your posting to a web page and save that for inclusion on your web site.

The audience for this particular project is the voting public and those in schools preparing to become voting members of a democracy (in this case, the United States of America). Richard

Brad's comment to my u1a1:

Again, like a couple of others in the class, I need to bring you back to the straight and narrow. The project needs to deal with the subject of interface design, and should demonstrate the best practices in that field.
For an audience, I'd suggest you either use your colleagues or students; who needs to understand interface among your associates? Lacking a specific, the best audience would be your peers in this class, starting with you as audience representative, with the site as an ongoing resource.
I would suggest that you also concentrate on the inter-cultural aspects of the topic as well, with your fellow English teachers applying web design in a variety of countries; how would a Taiwan oriented site differ from a Prague oriented site?
(This is tough because there are many interesting areas in your other topic to examine; the interface of voting machines, etc.)

My reply:

I plan on having the members of this class function as the initial audience, who are also voting members of a democratic system, to my idea for a democracy website but eventually the audience would be all voters. If this were to be an international project then there could be links to the various languages of each country -- but that is way down the road.

Also, as I mentioned my major in school was art, in particular drawing and painting, (initially my major was architecture), I hope to put a great deal of emphasis on the design and function of the website interface.

Thank you for your comments, Richard

Action Assignment 1.2 Goals

u1a2

Consider the purpose and goals of your project Web site. What is the purpose of your site beyond fulfilling course requirements and your own use as an interface design resource? How will your audience as defined by your other response) use this resource? What should your audience, i.e. co-workers or students, know about interface design?

Post your answer in the course room and save a copy as a web page to include in your course web site.

During this course, I might do more than one website or homepage, but for the purposes of this course the one I plan on developing is called Democracy 2020 which is approximately the year that this long-term project would be realized. The concept concerns direct democracy (voters voting directly on issues) in collaboration with representative democracy (where the electorate votes for representatives who, after being elected, can vote any way they choose). All of this will be explained within the context of the website.

Another website might be a personal website displaying some of my artwork and ongoing projects.

The goal is to create effective and communicative website designs. All of the users should know about clicking on links to advance to another page (but every user of the Internet should already know that) in addition to knowing the English language. Richard

Action Assignment 1.3 Learning Dreamweaver
You will be building your project Web site using Macromedia Dreamweaver. This software is a powerful tool for publishing content on the Web, and that power comes with a price: complexity. It is important for you to begin to get acquainted with Dreamweaver, to become familiar with its interface and the capabilities of its many control panels and windows. You will have plenty of opportunities to work with the various components of Dreamweaver to create the elements of your Web site, but your initial goal is to become familiar with the software and experiment with the basics.
Work through Chapter 1 of the Dreamweaver Hands On Training and begin to get acquainted with Dreamweaver. It's a great book; I used an earlier version to start learning DW myself.
Note that linked off my course web page is a PDF tutorial for Dreamweaver for those of you who would prefer more directed learning. It's at: http://www.lc.capellauniversity.edu/~bhokanson/ED722/DreamweaverWorkshop.pdf
Post any Dreamweaver questions in the CourseRoom

U1D1: What does "interface" mean to you?
(first post: 7/8/04 comments: 7/11/04)

You have undoubtedly heard the word "interface" many times. But what does it mean? How do you define an interface? When you look at a Web site or an interactive learning application, what elements on the screen comprise the interface? Compare your personal definition of interface before and after you read the information assignments for this unit.
Please post your initial response by Thursday midnight; that way we'll have time to put forward a good set of responses as well as have two weekends to work on each unit. (And yeah, we'll be shorter of time on the first week, but after that, it works great.)

Even though the term interface probably refers to the interaction and functionality of the entire website with all of its links and connected pages, I tend to think of interface -- especially since the term contains the word "face" which implies a surface or covering or the most expressive element -- as primarily the home page or the intial index page that all of the other pages branch off of. The elements that comprise the interface are the overall design, concept, information, style, color, and composition; the text, the graphics; and, importantly, the links to other pages or websites.

Merriam-Webster Dictionary (2004):

1 : a surface forming a common boundary of two bodies, spaces, or phases.
2 a : the place at which independent and often unrelated systems meet and act on or communicate with each other b : the means by which or communication is achieved at an interface.

The book, Web Style Guide (2001), states that the interface is all of the interactivity and design involved in a website so the term "interface", concerning websites, could also be referred to as the "functioning and design system" of a website.

Reference:

Lynch, P. & Horton, S. (2001). Web Style Guide: Basic Design Principles for Creating Web Sites. London: Yale University Press.

U1D2: A finding nugget from Lynch and Horton
(first post: 7/8/04 comments: 7/11/04)

u1d2 Interface design

Reflect on your readings and action assignments for this unit. Share one nugget of information that you found especially surprising or useful in Chapter 2 of Lynch & Horton. Discuss how you plan to apply this nugget to your course project.

The Lynch and Horton book mentions the importance of the interface design to answer the questions: who, what, when, where (and, I would add, why and how). The book mentions that the web page designer should avoid dead-end documents and pages so that there is a link on every page to return to the homepage. Also essential information should be on every page (such as contact and copyright information).

An effective website has a simplified design that is natural to navigate and does not confuse the reader with complexities and follows the advice of Henry David Thoreau, who, in Walden Pond (1854), said "Simplify, simplify, simplify".

The book mentioned the Chicago Manual of Style (which I had never heard of) which is a good reference manual and demonstrates that certain forms are timeless in that the organizational content of web pages is similar to that of printed books. However, with web pages there is more non-sequential browsing -- where the readers jump from one page to another -- whereas in printed books the readers tends to read the book chronologically beginning with page one and progressing to the end of the book and this should be kept in mind when designing websites and I hope to include these concepts in the website that I will design for the course project. Richard

Reference:

Lynch, P. & Horton, S. (2001). Web Style Guide: Basic Design Principles for Creating Web Sites. London: Yale University Press.

U1d2 comment to Kevin

I think the success of a creative design might depend on who the intended target audience is. If the audience is the general public then they might prefer the most standard and familiar design formats but if the target audiences are, for example, artists or web designers then they might respond more positively to more innovative and creative approaches to web design. Richard

U1d1 comment to Faith

I think the list of the 10 essential elements to a successful website design in the user interface rating form are helpful. Although all necessary, I think aesthetics, functionality, and of course informational content are the most essential. Richard

Unit 1 + 2 General Discussion
(including DW questions)
I usually set aside a section for general questions that come up during the course of a unit; here it is. Post your questions and ocmments that don't relate to the discussion questions here, and we'll all be able to address them.
I'll continue to have this "open" section in future units, so after the end of the unit, it won't be checked that much...just post in the most recent one.

U2 Action Assignment
Work through Chapters 2 and 3 of the Dreamweaver Quickstart Guide by Towers: "Setting Up a Local Site" and "Basic Web Pages." These chapters will get you started with your site. You will set up a local site on your own computer, and then you will be ready to start building pages and adding content in Dreamweaver. Create the home page for your project Web site. Be sure to include the following elements on the home page:
Title of the Web site.
Statement of purpose.
Author's identification.
Date of creation or revision.
Menu of topics (not functional at this time; eventually the menu will provide navigation to the major sections).

U2D1 "Don't make me think" as a concept
(1st post 7/15/05 comments 7/18/04)
Krug's First Law of Usability is "Don't make me think." Why is this a powerful concept? How can interface designers and instructional designers use this concept to increase the usability of their sites?
Again, please post your first response by Thursday midnight; that way we'll have more time to respond and two weekends to examine the questions throughout the term.

u2d1

The website designer should create a site so that people react in an almost instinctual, non-
thinking way when using the website so that the interaction within the website forms a natural, flowing, and attractive interface. Though people sometimes enjoy a challenge, generally speaking, if something is difficult to do then people tend not to do -- it especially if there is an easier and more efficient way of doing it. Given the choice, people generally opt for a simpler, streamlined method over a complicated and ornate system so an effective website employs these principles thus increasing the usability aspect of the website. Every design element should have a functional and aesthetic purpose. As formulated in the Bauhaus philosophy: form follows function.

Reference:

Krug, Steve. (2000). Don't Make Me Think: A Common Sense Approach to Web Usability. Indianapolis: New Riders Publishing.

U2D2: Krug's facts of [Web] life
(1st post 7/15/05 comments 7/18/04)

In Chapter 2 of Don't Make Me Think, Steve Krug presents three "facts of life" about how we really use the Web:
Fact of Life #1: We don't read pages. We scan them.

Newspapers and advertisements are written with this concept in mind. With newspapers, first there is the bold face name at the top of the page then each article's title is written with a few descriptive words and in bold type with the most important articles written in the boldest and largest type on the page. The first "paragraph" in a newspaper is usually only one sentence and expresses the conceptual essence of the article. Each following paragraph is written so that the essentials of the story are presented. A reader can scan only the titles of the newspaper articles and get a general idea of what occurred that day that the newspaper's editors considered newsworthy.
Fact of Life #2: We don't make optimal choices. We satisfice.

We tend to try to make the best of a given situation and this sometimes involves sacrificing complete satisfaction and instead compromising our intentions -- often because we are in a hurry or trying to meet a deadline, etc. Steve Krug has created the portmanteau term "satisfice" to describe that condition and this is the method most people use while exploring the Internet or often reading in general.
Fact of Life #3: We don't figure out how things work. We muddle through.
Reflect on your own use of the Web and, for each fact, discuss whether it describes how you use the Web. Use specific examples wherever possible. Discuss how you will apply these three facts to the design of your Web pages.

Rather than analytically solving problems, most people go through many tasks, in this case surfing the net or researching on the Internet, in a random, hit or miss fashion to determine what works best or where something is and obtain much of their information through a system of trial and error or reading about the results obtained though the trial and effort of others.

Scanning is a fact of life because, realistically speaking, people do not have the time to read every word ever written so they must scan for the essentials and then read word for word when an area of interest is located and when in depth knowledge or information about a subject is needed.

I intend to design web pages with these concepts in mind.
Again, please post your first response by Thursday midnight; that way we'll have more time to respond and two weekends to examine the questions throughout the term.

Reference:

Krug, Steve. (2000). Don't Make Me Think: A Common Sense Approach to Web Usability. Indianapolis: New Riders Publishing.

Unit 2 Information Assignments
Here's the regular reading and research for this section; make sure you check with the Schedule/syllabus on this and subsequent chapters to complete all the preparation for the course.
2.1: Read the introduction and Chapters 1-3 and 8 of Don't Make Me Think.
2.2: Read pages 53-60 and 61-86 of The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques (XanEdu Coursepack).
2.3: Read the wikipedia on Usability. [go to http://en.wikipedia.org/wiki/usability]
2.4: Read Chapters 2 and 3 of the Dreamweaver Visual QuickStart Guide OR Chapters 1-3 in Dreamweaver MX 2004 HOT.

U3A1 Krug's "trunk test" (1st post 7/22 comments 7/26)
In Chapter 6 of Don't Make Me Think, Steve Krug introduces the "trunk test" ? his acid test of good navigation. Review the process of performing a trunk test and then perform the trunk test on any three sites from the list provided in the MediaCenter. Write your findings for the three sites in a format similar to the way Steve Krug reports his findings on pages 93-95 under "What's wrong with this picture?" Be sure to include the URLs of the sites you evaluated.
Let's NOT include our trunk tests as attachments in our posts; please write or copy the information in your posting and include a link to the website. See my reasoning in the follow up post.
[A HREF="https://courses2.capella.edu/lspace/ed722/04052004/2/mcenter.nsf/d3971504aece57c
a8525653f0059e11b/86256e590073044786256e53006fb28b/$FILE/Web%20Sites%20for%2
0Unit%203%20Trunk%20Test.htm">]Here's the website and here;s the direct links as well:
About
http://www.about.com
The Art Institute of Chicago
http://www.artic.edu
CNET
http://www.cnet.com
Disney
http://www.disney.com
Drugstore
http://www.drugstore.com
Explore Minnesota
http://www.exploreminnesota.com
Federal Highway Administration
http://www.fhwa.dot.gov
FedEx
http://www.fedex.com/us
Ford Motor Company
http://www.ford.com
The George Washington University
http://www.gwu.edu
Microsoft
http://www.microsoft.com
MotherNature.com
http://www.mothernature.com
MTV
http://www.mtv.com
New Scientist
http://www.newscientist.com
News Now
http://www.newsnow.co.uk
PBS
http://www.pbs.org
RedHerring
http://www.redherring.com
Slusser's Green Thumb
http://www.slussers.com

U3A2 Links and uploading Dreamweaver activities

Work through Chapter 6 of the Dreamweaver Quickstart Guide by Towers: "Working with Links." This chapter will introduce you to various techniques for creating hyperlinks. Experiment with linking your home page to other pages of your Web site. Be sure to provide a way to return to the home page. Test it and upload it to the Capella Web server. Test it via a Web browser. Post any Dreamweaver questions in the CourseRoom.
[I'm assuming that you all have web sites already or from previous classes with Capella; please contact me immediately if you don't.]

U3A3 Planning your site and posting a map on your server space. (7/22)
Before you create the individual pages that will become part of your site, it is important to have an idea of the overall organization of the site and how the various parts are interrelated. A site map is a visual plan for the connections among the pages of your site.
Create a site map of your Web site. Keep it rough. This is just a preliminary idea of what sections you plan for the site and how they will be organized. Draw paths to show which pages will be linked to which other pages. Your site map will evolve as you work on the site, so do not invest a lot of time making the diagram pretty. It should be rough and sketchy. Please put your scanned image on your server space and provide a link to the image from a posting in the courseroom. DO NOT attach your image to a posting; i think that's an extremely poor, convoluted, and inefficient way to show images to anyone, and is contrary to much of the work of interface design.
TIP: Start your site map using Post-It® notes; you will be able to move things around and make changes easily. You will find a good example of a preliminary site map in Williams & Tollett, p. 127.

U3A4: Summarizing usability
Review the readings for this unit. Encapsulate the key ideas and guidelines for usability, and build one or more pages summarizing the essential knowledge about usability. The information you include should cover the fundamental rules. Link them to your home page.
[A link here would be good as well to the specific pages.]

Usability in a website means meeting users' needs

Information is divided into logical units

A hierarchy of importance between units is established.

The hierarchy is used to structure the relations among units.

A site is built that follows the informational structure.

The site is aesthetically and functionally successful.

There is a clear design and site structure within the site.

The site design themes are effective and appropriate.

The site elements are interrelated.

The menus and subsites are well-defined.

The site guides are helpful.

All links are clear, current, and connectable.

The user uses the site in a natural, automatic way. Richard

References:

Krug, Steve. (2000). Don't Make Me Think: A Common Sense Approach to Web Usability. Indianapolis: New Riders Publishing.

Lynch, P. & Horton, S. (2001). Web Style Guide: Basic Design Principles for Creating Web Sites. London: Yale University Press.

U3D1 Summing up actions and readings (1st post 7/22 response 7/25)
Reflect on your readings and action assignments for this unit. Share one nugget of information on good navigation design that you found especially useful from your readings for this unit. Discuss how you plan to apply this nugget to the navigation of your project Web site.

U3d1 comment to Rose

As you mentioned, clear navigation is key to an effective website and it is necessary for the website reader to always be able to return to the homepage in order for orientation and organization. Richard

Scheduling a live discussion for next Saturday 7/17

I think all of the elements of trunk test are essential in determining the effectiveness of a web site.

The questions in the trunk test are:

What site is this?

What page is this?

What are the major sections?

What are the options at each level?

Does the reader know where he is within the scheme of the website?

How can the reader of the website perform a search? Richard

http://www.artic.edu

The site is divided into two main sections: the museum and the art school of the Art Institute of Chicago. Both are well presented and the viewer can spend hours viewing and reading about the paintings in the Art Institute.

http://www.disney.com

As one might expect, the Disney Company strives to get the best animators to create their site and it shows in this website. Though the homepage is a little busy, all of the searched for information about the Disney organization can be found by exploring this site. There are some great Flash animations and there are plenty of nice touches such as in the Walt Disney World site within the Destinations area of the home page where the cursor indicator becomes a magic wand that showers stars as it moves across the computer screen.

http://www.mtv.com

MTV knows how to please its audience market also with plenty of animation, color, and movement and information about all of the bands and background that visitors to this site would be interested in.

Richard

I plan on participating in the discussion (the time will be 11PM Saturday night from Taiwan)
Richard

U3D2

TABS, how to make them, from Carol:

U3D2 Response to Richard - maybe more than you wanted to know

The tabs are just graphics I created in Fireworks (Paint would work just as well). They are just graphics. If you don't feel comfortable making your own, plenty of sites have graphics you can download for free (some will even let you pay for them, if you want). :)
I use frames for the index page. The tab graphics are in a table, but DW will set that up for you. Click on Insert > Image Objects > Navigation Bar. At the Insert Navigation dialog box, you can name your objects, specify the order you want them to appear on the page, specify the graphics you want to use for various events (i.e. clicked and not clicked), enter alternate text, specify the URL to which clicking will take the user, indicate whether you want the graphics to preload, determine which object (if any) you want to appear as selected on first load, choose whether you want the navigation to horizontal or verticle, and choose whether or not you want to use a table to house your graphics. As you can see, this is a pretty powerful yet easy to use feature. Have fun!

FROM FIREWORKS HELP:

Creating navigation bars

A navigation bar, or nav bar, is a group of buttons that provide links to different areas of a website. It generally remains consistent throughout the site, providing a constant method of navigation, no matter where the user is within the site. The nav bar looks the same from web page to web page, but in some cases, the links may be specific to the function of each page.

In Fireworks, you make a nav bar by creating a button symbol in the Button Editor and then placing instances of that symbol in the workspace.

To create a basic nav bar:

1.
Create a button symbol. For more information, see Creating button symbols.

2.
Drag an instance (copy) of the symbol from the Library panel to the workspace.

3.
Do one of the following to make a copy of the button instance:

o
Select the button instance and choose Edit > Clone.

o
Alt-drag (Windows) or Option-drag (Macintosh) the button instance.

4.
Shift-drag a button to align it horizontally or vertically. For more precise control, use the arrow keys to move the instance.

5.
Repeat steps 3 and 4 to create additional button instances.

6.
Select each instance and assign it unique text, a URL, and other properties using the Property inspector.

Creating button symbols

Buttons are navigation elements for a web page. Buttons created in the Button Editor have the following characteristics:

You can make almost any graphic or text object into a button.

You can create a button from scratch, convert an existing object into a button, or import already created buttons.

A button is a special type of symbol. You can drag instances of it from the symbol library into your document.

This allows you to change the graphical appearance of a single button and automatically update the appearance of all button instances in a nav bar. For more information on symbols, see Using symbols.

You can edit the text, URL, and target for one button instance without affecting other instances of the same button, and without breaking the symbol-instance relationship.

A button instance is encapsulated. When you drag the button instance in the document, Fireworks moves all the components and states associated with it, so there is no need for multiframe editing.

A button is easy to edit. Double-click the instance on the canvas, and you can change it in the Button Editor or the Property inspector.

Like other symbols, buttons have a registration point. The registration point is a center point that helps you align text and the different button states while in the Button Editor.

Creating pop-up menus

Pop-up menus are displayed in a browser when the user moves a pointer over or clicks a triggering web object, such as a slice or hotspot. You can attach URL links to pop-up menu items for navigation. For example, you can use pop-up menus to organize several navigation options that are related to a button in a nav bar. You can create as many submenu levels as you like in pop-up menus.

Each pop-up menu item appears as an HTML or image cell, which has an Up state, an Over state, and text in both states. To preview a pop-up menu, press F12 to preview it in a browser. The previews in the Fireworks workspace do not display pop-up menus.

Custom-naming slice files

You can assign names to slices so that you can easily identify slice files in your website file structure. For example, if you have a button on a navigation bar that returns to the home page, you could name the slice Home.

To enter a custom slice name, do one of the following:

Select the slice on the canvas, enter a name in the Object Name box in the Property inspector, and press Enter.

Double-click the name of the slice in the Web Layer, enter a new name, and press Enter.

Do not add a file extension to the base name. Fireworks automatically adds file extensions to slice files upon export.

Exporting from Fireworks

Exporting from Fireworks is a two-step process. First you must prepare your graphic or document for export by optimizing it. After your graphic or document has been optimized, you can export it (or save it, depending on its originating file type). For more information on optimizing, see About optimizing. For more information on saving, see Saving documents in other formats.

You can export Fireworks graphics in a number of ways. You can export (or in some cases, save) a document as a single image in GIF, JPEG, or another graphic file format. Or you can export the entire document as an HTML file and associated image files. Or you can choose to export selected slices only. You can also export only a specified area of your document. In addition, you can export Fireworks frames and layers as separate image files.

The default location to which Fireworks exports files is determined by the following, in this order:

1.
The document's current export preference, which is defined if you've ever exported the document and then saved the PNG

2.
The current export/save location, which is defined anytime you browse away from the default location presented in a Save, Save As, Save a Copy, or Export dialog box

3.
The current file's location

4.
The default location where new documents or images are saved on your operating system

In contrast, the default location where Fireworks saves a document is determined by a different set of criteria. For more information, see Saving Fireworks files.

ALSO FROM CAROL: HOW TO MAKE A DROP DOWN MENU:

In DW, Click on Insert > Form > List/Menu. When you click on the inserted box, the properties section includes a List Values... button that allows you to input the items you want in your list.

U4A1 Roughing out your website (7/29)
Based on the site map you created in Unit 3, create a bare bones navigation scheme for your Web site that includes links to major sections of the site and a link on every page to return to the home page. The destination screens can be placeholder screens with minimal content, such as a title and a short description of the page contents.
[Ok, restated; come up with an idea as to how your website is organized, and start making that site. Put all the pages in even if they are just labeled and they say something like "Typography information here"]

U4A2 Screen design activity (7/29)
Create one or more pages that capture the essential knowledge on screen design and layout. Illustrate the main principles with good and bad examples. Upload your revised project Web site to the Capella Web server. Check the URL on the profiles page to be sure it is accurate.
This should be based on the principles in the reading for this week

U4D1 Applying the ideas from the Yale Style Guide
(First post, 7/29 response 8/1)
Now that you know how to recognize good and bad design, take another look at three Web sites you use frequently. Evaluate them in terms of their screen design and layout and provide a critique of each site according to the four basic principles of Williams and Tollett: contrast, repetition, alignment, and proximity. Your discussion should include the URL of the site you are evaluating, what the site designers did right, and what they did wrong.
Then go to at least two other sites reviewed by your classmates and perform your own evaluation. Respond to their posts and indicate whether you agree or disagree with their reviews, and why.

Contrast makes something readable in the same way that positive and negative space are necessary to make something seen.

Repetition breeds familiarity and lends to a consistency of style.

Alignment gives visual order – as opposed to confusion and chaos – and provides aesthetic appeal related to symmetry.

Proximity involves logical groupings and employ Gestalt principles of grouping objects for better perception and places similar objects together giving a birds-of-a-feather-flock-together feel to the design of a website.

The three sites I use often and examined for the purposes of this exercise are Yahoo.com, Capella.edu, and Amazon.com.

I think each takes these concepts into consideration while designing their websites. Yahoo has grouped categories that are easy to decipher though some of the categories are clumped together putting sometimes dissimilar subjects together. Capella begins with an introduction page and each page branches off logically from the home page. Amazon. Com makes good use of tab design though the browse column on the left could have a clearer organizational structure. Richard

Reference:

Tolbert, J. & Williams, R. (2000). The Non-Designer's Web Book. Berkeley, CA: Peachpitt Press.

U4aa1-2

To show various design concepts, below is a url for a previous class of mine using Flash and Dreamweaver.

http://vle1.capella.edu/125836/index10.htm
Richard

These pages are being designed and will be sent in and uploaded soon when my Internet service is connected

Saturday July 17, 2004 chat (class participants were all over the world, I was in Taiwan):

amartin37: Hello

amartin37: yes i am here had some trouble with the computer

amartin37: ? should i be able to see conversations from others in the area?

bhokanson: Adrienne, can you hear me? I get to do a microphone check with you...

amartin37: no i can not

bhokanson: Can't tell if my mike is out or what; it seemed to work earlier today laptop to laptop; well, we'll see if it's you or he mike.

amartin37: should i be able to use a mic to spe

amartin37: great i heard you say testing

amartin37: can you hear me

amartin37: i could hear you but it was not clear

bhokanson: Hi Nan; welcome; we've got a couple of people that are drifting in and out. Probably our oganization will be loose.

Nan Thornton: Good morning, Brad.

bhokanson: Adrienne: I can't hear you

amartin37: yes

amartin37: yes

bhokanson: I should keep my hands off the microphone....

amartin37: no it is clear

Nan Thornton: Coming through clearly to me, too.

Nan Thornton: Brad, are we able to talk to you through our microphones?

bhokanson: Great; ah, I think everything's ready to go so we could cool our jets for a while here; Adrienne; Nan is my boss at Capella and I've invited her to watch.

amartin37: great

Nan Thornton: Each time I've pressed the talk button, a green light briefly appears next to my name, and then immediately diasppears.

bhokanson: I'm listening....but not getting anything. Maybe the sound from you guys is turned off...try again.

amartin37: i could hear you extremely well and i have my setting on auto talk

bhokanson: Auto talk is set to input from the microphone at a certain audio level; I'm getting something from Nan it seems; her light is on occasionally.

jrivoire: Hello

bhokanson: Hi John, I heard your audio well.

amartin37: has any one been able to hear me

jrivoire: I cannot hear anyone

bhokanson: Hi, is that you Rose?

bhokanson:

rhasenmiller: Hello

rhasenmiller: Apparently my speakers aren't working on this computer

amartin37: yes

bhokanson: Can anyone else here John?

bhokanson:

rhasenmiller: No

amartin37: i just said good morning to john could you hear me

bhokanson: That could be limitation of the software setup; originally I had asked for something to have "office hours" ; Adrienne, I heard nothing.

bhokanson:

amartin37: yes

bhokanson: Hey, great!

amartin37: Adrienne

amartin37: could you hear my answer and yes

amartin37: your voice is extremely clear

amartin37: i am sorry no one can hear me

amartin37: your sound is great

Michelle DiGiovanni: Hello

bhokanson: Hi michelle

Michelle DiGiovanni: I can't talk but I am listening, and writing

rhasenmiller: Hi Michelle--I can't talk either but I will be writing

Michelle DiGiovanni: Hi rhasenmiller!

bhokanson: We have talked about a DW course as a prerequisite; it seems like there are a lot of problems learning that.

bhokanson: What do you all think about requireing experience in DW prior to this course?

bhokanson:

amartin37: yes

amartin37: the course should be a must

glawsoncohen: yes I believe we should have a dreamweaver prequisite

Michelle DiGiovanni: Having absolutely no experience with DW, I feel lost and out of my element. Maybe not necessarily having a prereq but starting slower

rhasenmiller: I think that having a prerequist would be a great idea--I have taken a couple of workshops and that has been helpful

KR0255: Hello

amartin37: hi

KR0255: the Dreamweaver thing is the only thing preventing me from feeling this course of useful. Almost as if I have a powerful tool to harness, but cannot implement it.

rhasenmiller: I noticed that Golda and Faith have added their Capella site to their profile-Nice work and a great idea

Jim Doran: Hello, I just hear Brad speaking. I think I'm fully in.

KR0255: Workshops, prerequisite ... yes.

glawsoncohen: thanks

KR0255: I heard him as well

glawsoncohen: the code is <br>

Kenyetta: Hello

KR0255: Hello, Kenyetta

bhokanson: Hi, Kenyetta

Kenyetta: I hear some one talking. Who is that?

Richard: Hello

KR0255: Don't know. Haven't figured it out as to why the screen is saying on thing, and people another.

bhokanson: I'm typing and it's separate from the text materials.

bhokanson: BradOn Mac is me on my other machine.

Kenyetta: So I just speak in to my mike and press talk?

Jim Doran: Hi this is Jim from Boston!

bhokanson: Oh, Yeah, please introduce yourself to the course room.

bhokanson:

KR0255: Hi, it's Krista. Greetings from PA. Don't have much time this morning..a meeting soon.

bhokanson: We'll be done soon.

bhokanson:

glawsoncohen: Hi this is Golda from Southeastern PA

KR0255: Not a problem

rhasenmiller: Hi, this is Rose from Iowa

Michelle DiGiovanni: Hi, I don't know what I am doing in this class -- I am trying to hang on -- I am at your mercy, Brad

amartin37: hello Adrienne

Kenyetta: Were yo able to hear that?

jrivoire: OOps it's John from LA

glawsoncohen: no

bhokanson: Have you ever participated in a chat before? Does my use of the microphone help your understanding? Should all participants use a mike?

Jim Doran: Jim, I have no mike but I could get one. It helps to hear Brad actually speak

KR0255: Not necessarily helpful unless we all have th same equipment. I too, could get a microphone.

Kenyetta: No. I have never used the microphone before. I have one but it may not be functional.

Michelle DiGiovanni: I have participated in a chat before, however without sound. I think mics get confusing except for the instructor

bhokanson: Faith, we're doing some questions in some sort of order...

glawsoncohen: I have conducted and have been a part of such chats and I like the microphone

jrivoire: Facilitator-YES Participants, OK

amartin37: yes i have a mic but having problems being heard

fdurden: Should I be hearing sound?

fdurden: Yes, I received your voice.

Richard: Hello. I'm not quite sure how this microphone is used.

bhokanson: How could this be used in other classes? (Have you done this elsewhere? What would be a good application for this method?Would this work on small group projects?)

Jim Doran: Works for small group work IF you are nearby time zones. Otherwise, no go

Richard: What is the difference between people in the room and people logged in?

amartin37: great for small group discussions

bhokanson: Richard, you're the furthest away...

bhokanson:

Kenyetta: I think this would be helpful for dyad or triad work. It would have helped me last quarter, but there was a six hour time difference.

Michelle DiGiovanni: In my PhD program, we are constantly involved in group projects and chat is quicker than sending emails back and forth. It does decrease the flexibility of the online course, however.

KR0255: No, I haven't done this in other classes. I think it would be a great tool for team projects

glawsoncohen: for project managment courses or discussing the begining of a project to determine where to start and to keep communication open

Richard: Where are the others calling from?

amartin37: i agree team projects this would be great

fdurden: Calling from Western NY

bhokanson: Mostly continental US

KR0255: Communincation is any mode is good when communication is necesarry. Adjustments, time-wise and others, must alwys be made for the good of the project.

jrivoire: In my societal change courrse we worked in dyads. We attempted video/audio sessions but bandwidth problems were significant. This platform seems consistant and top notch! I am in Louisiana!

fdurden: I too agree that small group projects can benefit from this. Utilizing email only for group work is ineffective in my opinion.

KR0255: Hearing saves time instead of typing all our words. More effective in one capacity.

fdurden: I like the more personal nature of this mode. It's great to hear your voices.

Richard: I think large group communication is difficult to coordinate. Perhaps they could be divided into smaller groups somehow.

bhokanson: Capella is very careful to keep most of the course work assynchronous, i.e. not necessarily happening at the same time. This application (basically a chat area) is synchronous; would you be willing to try this instead of a regular threaded discussion question? (Just one question, not the entire unit..)

amartin37: yes

Jim Doran: Chat is a synchronous tool. Not good for async but useful experience for ID knowledge

fdurden: I think this is a great idea. Of course, time zones will be a factor, so the opportunities will need to be offered more than once.

glawsoncohen: yes, espcially in the beginning of a course when expectations are unclear

bhokanson: that's a good idea.

bhokanson:

Kenyetta: I would be willing to try it, on the weekend as we are doing now. It is very exciting to participate.

Michelle DiGiovanni: I think it is more interesting, and lively. It would be a great idea with enough notice so students could get their time scheduled. I agree in the beginning of a class would be great!

Richard: Maybe we could have preconsidered questions to prepare for.

rhasenmiller: that's a good idea

amartin37: great idea

bhokanson: that does help...

KR0255: No, with my schedule it's just too difficult. With regular posts I can read and respond accordingly. It may be midnight or 6:00 AM, but I can do it when I can do it, which is a large reason why I'm doing online learning. I do like the idea of implenting live chats at the beginning of a semeter for purposes of clarification.

jrivoire: YES- Could the session be recorded for streaming for the soul who could not make it on occassion? He/She could listen and then write a response based on the recorded chat.

bhokanson: that's good as well.

bhokanson:

glawsoncohen: that is a great idea, if the techology is available

amartin37: i like that

KR0255: That WOULD be ideal--respond to recorded data from an existing discussion.

glawsoncohen: considering that schedules change from week to week

KR0255: However, isn't that like a regular thread then?

bhokanson: THAT's really interesting.

bhokanson: Ok, to close, lets go around one more time; do you have any other comments about the process, or, sigh, the interface? Does the audio become part of the interface?

jrivoire: We would still need MOST everybody present for a great discussion however. Just recorded for the occassional straggler! Also shows growth.

Jim Doran: Brad, what is the product we are using here?

bhokanson: This is a Flash Communications Server, with a really small flash fileon my office machine.

bhokanson:

KR0255: How to build our sites from the beginning. For movices like me who have no prior experience, how can this situation be remedied in an expedient manner?

bhokanson: I'll send out the file, inactivated if you wish.

bhokanson:

fdurden: I have been attending Capella for over two years, and It's exciting to see the university staring to consider some other options other than text/asynchrous only.

bhokanson: Krista, that's a real good point as well.

bhokanson:

Richard: speaking of interface, it would be great to be able to click on the person's photo or name to respond to.

Michelle DiGiovanni: I believe the interface is directed by the instructor -- with a good instructor, the understanding of the responses and interactions of the students becomes fluid and manageable.

Kenyetta: I would think that sound does become part of the interface doesn't it.

bhokanson: Yeah, if it works for all.

bhokanson:

KR0255: Audio in interface is good. Sort of wakes the user up and takes notices of waht is going on in your site.

glawsoncohen: but it should be an option not automatically when you enter the site

amartin37: Yes i like the audio interface as well

rhasenmiller: The more active everyone is in the learning process--the better. the audio is good interface

KR0255: Brad, point well taken. Designers should consider the effect of no audio. How would it change the overall quality of the site, and would it change the degree of functionality.

glawsoncohen: when do we get to ask questions about course content or is that another time

bhokanson: Now's good; I"ve finished all my questions...

bhokanson:

bhokanson: The individual pages will all fit together in the end.

Michelle DiGiovanni: I haven't begun my first page yet. (sorry) I am afraid. What is the first step for me to get me going.

Michelle DiGiovanni: Thank you, I will do that.

bhokanson: Make sure the software's installed, and start with one simple page. Oh, great, you heard me.

bhokanson:

bhokanson: Ok, I'm going to log off now; I'll post this discussion in the course room, although I've found the best of the chat is when it's actually happening. Thanks to you all for participating. I will do it again.

KR0255: I need to run, meeting is starting soon.

fdurden: I'm getting everyone's voice, but no one seems to hear me. I conducted a microphone check earlier this morning, and it worked, but right now it seems no one can hear me here.

Michelle DiGiovanni: Thank you, Brad! You're great! I feel better now!

KR0255: Check to see if it's muted.

Michelle DiGiovanni: Have a great day everyone!

KR0255: Bye

bhokanson: See you all soon

bhokanson:

rhasenmiller: bye

Kenyetta: I will contact you as well, because I am having some trouble with Dream Weaver also. I did get one page done, although incorrectly I might add.

bhokanson: Sounds good.

bhokanson:

Nan Thornton: The issue related to the "back" button is a feature of WebCT. We'll have to use the navigation within the page reather than using the back button.

Nan Thornton: I understand that the chat feature of WebCT won't be implemented initally when Capella's School of Ed transfers to the new platform. But -- I think it will be available eventually.

bhokanson: Just have to use the side door....it seems worthwhile.

amartin37: good by

Jim Doran: Good bye Very useful Thanks

jrivoire: Bye, THanks for th c help!

Kenyetta: good bye thanks

glawsoncohen: thanks for everything

bhokanson: bye now, have a good rest of the weekend; I'm going to go and try and digest everything I heard.

Richard: bye and thanks.

bhokanson: kathy are you there?

bhokanson:

Kathy Cairns: Yes, but I don't hear anything

bhokanson: did you hear that?

bhokanson:

Kathy Cairns: no

bhokanson: Well, it seems like we have a loss of connection to some extent.

bhokanson:

Hello Brad,

This is to let you know that I will be returning to the USA soon. My Internet connection will be off here in Taiwan beginning July 20 and when I return I will get a new connection hopefully around the 26th or 27th though I should be able to send and receive emails during that time at Internet Cafes, etc.

I'll keep you posted as events occur concerning this.

Enjoyed the July 17th Saturday classroom chat with everyone, Richard

--

Carol,

Your page design and particularly the organization of the elements of your site are well done. Can you tell me briefly how, in DreamWeaver, you make the tabs on your home page?

Any thoughts about that would be appreciated. Richard

Carol,

Thanks for answering my question: that's what I wanted to know! Richard

U2d1 reply to Faith

People and designers do tend to think that people read and think about what the designers or authors have read, said, or created less than the creators think they do. Richard

That's admirable that you are in the 15% minority that reads the instructions before plunging into a task. Most people race into their endeavors to speedily accomplish their goals and hope for the results to turn out in their favor. I think it is probably a variation of the concept of instant gratification. Richard

I think all of the elements of trunk test are essential in determining the effectiveness of a web site.

The questions in the trunk test are:

What site is this?

What page is this?

What are the major sections?

What are the options at each level?

Does the reader know where he is within the scheme of the website?

How can the reader of the website perform a search? Richard

I am now in a Kinko's and I am still waiting for my Internet connection in the house where I am staying. I have been reading all of the texts and have read all of the courseroom comments and have responded to some. I am designing an index page which has links to the ED722 interface which will have links to the exercises and discussions. Additionally, I will have links to some other homepages that I will design during the course.

Moving back to the USA from Taiwan has been exhausting: finding a dwelling, getting a car, continuing with the Capella coursework. Also, I have a visitor from Taiwan, who showed me all around Taiwan and who I am playing host to here, so that involves time too. I considered while in Taiwan taking the summer off but I thought I would continue with the design completion plan which is why I wrote to you to inform you of my move back to the USA which is really a life transition. I had wanted to move back at the first of July but the first available flight to the USA (when I called in June) was July 22. I plan on continuing the course exercises during this time but I will devote full time to the completion of the course when my guest returns to Taiwan, in two weeks, in the middle of August.

Thank you for your comments and input during the course. Richard

U4d1reply to Kathy

These concepts came mostly from the Non-Designer's Web Book with some of my own thoughts added. Richard

U4aa2 reply to John:

This site was only for demonstration purposes so the content was secondary to the design aspect. The info button was only to show the use of CGI dynamic text. The moving, looping type was just to give some visual energy to the site.

Thank you for your thoughts, Richard

U4 response to Rose

Rose,

Thanks for this site. It's full of good ideas and shows some interesting experimental designs.
Richard

U5 D1 Your learning experience (1st post 8/5 concludes 8/8)

What has been your most significant learning experience in this course to date?
How would you evaluate your course experience overall?

U5d1 Significant Learning Experience

What has been your most significant learning experience in this course to date? The interaction with the other students and the instructor as well as reading how to and then designing websites has been the most significant learning experience(s) in this course thus far.

How would you evaluate your course experience overall? I think I am learning a great deal by reading the texts and the course participants' thoughts and especially by doing, that is, actually beginning to design and create websites.

U5 D2 Your courseroom experience (1st post 8/5 concludes 8/8)

How actively have you been engaged in the CourseRoom thus far?
What plans do you have for the rest of the course to assure continued engagement with the course content and other learners?

U5D2 CourseRoom Engagement

How actively have you been engaged in the CourseRoom thus far? I have been reading all of the assigned texts and I read all of the CourseRoom participants' responses and have responded to several. After completing my teaching there, moving from Taiwan back to the USA beginning July 22 has made the engagement more difficult to do (settling into a new place, arranging for transportation, etc.) and the ability to participate during that time has been challenging.

What plans do you have for the rest of the course to assure continued engagement with the course content and other learners? I plan on continuing the coursework and beginning in the middle of August, when my guest from Taiwan returns to Taiwan, I will begin spending from 10 to 14 hours a day (on most days) on my 2 courses since my time will be devoted primarily to the Capella program until January.

U5D2 reply to Carol

I thought that statement (that many hours per day) might raise a few eyebrows but what I meant by that is that I will devote most of my waking hours to completing the courses (in addition to all of the other errands and activities – such as eating and communicating with significant others -- that need to be attended to) since I have completed the teaching jobs that I had previously referred to. Richard

U5D1 Comment to Dusty

I think your comments and knowledge of webpage design is useful to us other learners. Since you are in the field as a teacher of website design, I'm sure we could all learn a lot from you. I might ask you how you achieve some of your designs along the way during this course if that is OK with you. Richard

U5D2 Comment to Bethany

Cascading Style Sheets is one area I want to delve into to really gain an understanding of what it is all about since it seems to be so important. It seems to be about linking to an external file that can change all of the other files within a site to create a uniform design. Richard

U5 D3 Instructor assistance (8/5, 8/8)

What could the instructor do to help you be more successful in this course?
What questions do you have at this point?

U5D3

What could the instructor do to help you be more successful in this course? I think the instructor is understanding of my transitional situation and has answered the questions that I and other learners have had and additionally has pointed to several useful resources.

What questions do you have at this point? One question I have at this point is: What is the last day that we can submit the final design for the course?

U5D4

Dreamweaver forum: Use this open forum to share any questions, ideas, resources, and insights about Dreamweaver.

Dreamweaver is complicated but once someone learns and understands its intricacies and idiosyncrasies then many of the functional skills are repetitive. The main problem associated with website design is the variety of computers that pages are designed for: there are different browsers that display different designs, colors, and typestyles. Additionally, there are computers that operate at different speeds: some slow and some fast.

--

U6 Action Assignment 1

Post this to your website, please provide a link from here, the courseroom.
Review the readings for this unit. Encapsulate the key ideas and guidelines for text and typography, and build one or more pages summarizing the essential knowledge about text and typography. The information you include should clearly present the fundamental rules. Illustrate the main principles with good and bad examples. Modify the existing pages in your site to conform to the best practices for text and typography. Upload the revised version of your site.

U6 Action Assignment 2

Post this information to your website; please respond below and include a link to your page.
Browse some of the Web sites that you use frequently, and evaluate their use of text. Identify two Web sites that illustrate effective use of text as defined by the principles and guidelines in the reading for this unit. Provide the URL of the site along with a brief explanation of the characteristics that make the site a good example.

Good: http://www.yahoo.com/

Yahoo has links in logical groupings and the right amount of graphics and white space. The categories are well organized and Yahoo offers a great search engine to find any subject the reader might be researching.

http://www.space.com

This site includes some animated graphics and clearly delineated links and clear concepts and subject headings. One aspect I noticed about this site is that the content is aligned to the left of the screen so there seems to be an unused area on the right side of the screen.

Then identify two Web sites that illustrate poor use of text as defined by the principles and guidelines in the reading for this unit. Provide the URL of the site along with a brief explanation of the characteristics that make the site a poor example.

Not so good :

http://www.summercore.com

The design is hodge-podgy and there is no clear heading to describe what this website is about. Someone would eventually find out the purpose of this site by clicking on many of the links. There is an inconsistency of typestyles scattered about the page.

http://www.pg-sales.com

This site has a random design and an unthought out eclectic approach to the design. The only interest in the website seems to be extracting money from the customer without any attention paid to aesthetic considerations. There are a variety of unrelated colors and typestyles spread around the scroll up page. Some of the type which appears to be links are not. Richard

U6 Action Assignment 3

Please post this on your web site, and provide a link from the couseroom.
Work through Towers Chapter 8: "Fonts and Characters." Experiment with various techniques for displaying and formatting text on your Web pages. Post a page to your web site that demonstates your experiments with typography.

U6 Discussion: Nuggets from Lynch & Horton

Reflect on your readings and action assignments for this unit. Share one nugget of information that you found especially surprising or useful in Chapters 6 and 7 of Lynch & Horton. Discuss how you plan to apply this nugget to your own work.

My U6D1 comment:

U6D1 Style and Graphics
Reflect on your readings and action assignments for this unit. Share one nugget of information that you found especially surprising or useful in Chapters 6 and 7 of Lynch & Horton. Discuss how you plan to apply this nugget to your course project.
One useful bit of information is that files should be saved before they are compressed since the original file is lost during compression.
For an effective editorial style for websites, the sylistic qualities to develop are being frugal, being focused, developing a consistent style, and thinking globally since the websites can be read from all over the world from various cultural contexts and languages.
Links should be created within the context of their purpose and should not be indicated with long sentences or with "click here".
In web graphics, 8 bits of memory can make 256 possible colors (2 to the power of 8). In order to achieve consistency across various browser and computer formats it is best to use browser safe colors. Jpeg images offer in general the most versatility in modify images and they can be opened by practically all contemporary computers.
In creating illustrations, it is best when possible to use vector programs such as Illustrator and Freehand, since vector images -- and not bitmap images -- can retain the same proportions and information without distortion when they are scaled up or down.
I plan to use this information by using primarily vector images and making clearly understood hyperlinks. Richard
Reference:
Lynch, P. & Horton, S. (2001). Web Style Guide: Basic Design Principles for Creating Web Sites. London: Yale University Press.

U6D1 Comment to Krista:

I'll send you an example later but the vector graphics maintain their clarity and crispness whereas the bitmap graphics become fuzzy, out-of-focus, and pixilated when scaled up or down or compressed. Richard

U6A1 Comment to Addrienne

I think your design is effective and the information in your page is useful as well as clear, simple, and to the point. Richard

U6 Comment to Jim

I think your point about Web pages never completely replacing printed pages is true. I think people will always require at times holding a book and turning pages as opposed to surfing the net or scanning and scrolling on a computer screen. Richard

U7 Action Assignment and readings

Read Chapters 7 and 8 in Web Style Guide: Basic Design Principles for Creating Web Sites.
Read or review Chapter 4 in Dreamweaver Hands On Training about images. Experiment with adding images and graphics to your Web site. Post any Dreamweaver questions in the CourseRoom.

U7 Action Assignment 2 building pages with images.

Review the readings for this unit. Encapsulate the key ideas and guidelines for images and multimedia, and build one or more pages summarizing the essential knowledge about images and multimedia. The information you include should cover the fundamental rules. Illustrate the main principles with good and bad examples. Modify the existing pages in your site to conform to the best practices for images and multimedia. Add images to other pages of your Web site where appropriate. Upload the revised version of your site

U7D1 Where do you find good images on the web?

U7D1 Share your favorite resources for license-free images on the Web. Provide the URLs and a brief description of the resources available there.

www.msfc.nasa.gov/news/photos/photogallery/chandra/chandra5.htm These are photos from the Chandra X-ray Observatory

http://www.space.com image galleries. This contains many photos and images of space related including some Hubble telescope photos which are also at www.http://hubblesite.org

Also there is a nice slideshow of Hubble photos at http://wires.news.com.au/special/mm/030811-hubble.htm some of which are for sale.

Going at the other end of the scale spectrum one can find photographs of microscopic subjects at http://www.kumc.edu/instruction/medicine/anatomy/histoweb/

http://www.backgroundphotos.com/signup.html has a collection of background photos.

I particularly like the site for clip art that Kenyetta mentioned which is http://www.clipart.co.uk. Richard

Images are used to express concepts that words can not or they can complement what words express.

Images can illustrate verbal concepts (and are indeed sometimes worth more than a thousand words).

Animation can be fun and entertaining and give motion and interest to a site.

Animation can also be used for educational purposes such as demonstrating cellular mitosis or meiosis as is found at http://www.pbs.org/wgbh/nova/baby/divi_flash.html.

Or in illustrating the theory of plate tectonics which is found at http://www.pbs.org/wgbh/aso/tryit/tectonics/shockwave.html (requires Shockwave).

Or in illustrating the motions of the planets as is found at http://planetquest.jpl.nasa.gov/gallery/gallery_index.html.

Here's the beginning of a page using animation: http://www.lc.capellauniversity.edu/~125836/DancerBirdsBallBounce.htm Richard
Some of the clip used was imported from http://www.clipart.co.uk.

U7d1 comment to carol:

Carol, These are really good clip art sources – I've added the addresses to my address list. Thank you, Richard

U7D2 Using pictures: guidelines and your application

From the readings, list your key ideas and guidelines for th use of images and multimedia in a course room posting. Include in that posting an address for a page you have designed for your own site.

U7D2 Comment to Carol

I like your ideas that the site should remain simple and streamlined. It reminds me of the Henry David Thoreau (1817-1862) quote from Walden: "Simplify, Simplify, Simplify."

I think your site is looking very good and is covering all of the issues addressed.

I meant to write to you before after you had mentioned how to create a navigation panel in Dreamweaver (Insert>Image Objects>Navigation Bar). I have been able to use buttons for navigational purposes but I was wondering how you were able to make the tabs that look like file folder tabs that open each file page when selected with all of the other tabs remaining in place. I assume it is done with some sort of external file such as a CSS external file.

I'd appreciate any thoughts you have about this.

Richard

U7D2 Reply to Carol

It's true that content should be relevant, however, relevance is a relative term and sometimes people confuse relevance with familiarity. People often only want is familiar. Or in other words, people expect, and are comforted by, the expected. So sometimes there is a fine line between irrelevance and getting someone's attention which is a concept that is used often, particularly in advertising. The Benetton clothing company is known for that: using surprising, sometimes shocking, images that have nothing to do with clothing just to get the public interested or talking about a particular advertisement and thereby putting their company in the public's consciousness.

Also, it is also true that no viewer wants to sit through a long download time but some large files are loaded incrementally with preloaders so that the viewer starts watching the movie during the download procedure.

Richard

U7D2 Comment to Dusty

Your website is well designed, creative, and informative. I am learning a lot just by reading your postings. I think your knowledge of computer design is beneficial to us all.

Richard

From Faith's U7D2

Graphics and Multimedia
Create the following button for the home page - Graphics/Multimedia
Buttons for the Graphics/Multimedia page:
Displaying Graphics (Button)
Display monitor and bandwidth capacity greatly infludence the manner in which your web audience will access graphics. Because many web users access the Internet by modem, it is critical to impose limits on the size of files and number of colors that are included in Web graphics.
Terminology:
bit ? smallest unit of information that a computer understands (one electronic pulse).
pixels ? Your computer screen is divided into tiny pixels or picture elements. These pixels turn on or off, depending on the bits of information that are sent to them.
Monitor Resolution. How ?resolved? an image appears on the screen is a combination of the bit depth of the image and the settings of the monitor. You can change the number of pixels and the number of colors your monitor displays.
Colors. ? How good a graphic looks on the screen depends on the number of colors that can be displayed on your monitor. If your monitor can only display 16 colors, then all of the prahics will appear to be lower resolution even if you have millions of pixels on your screen. Even if the graphics are 24-bit, the graphics will appear to be in lower resolution because your pixels can?t display that color depth and your monitor has to fake it.
Browser Safe Colors ? The color management system currently used by Web browser software is based on an 8-bit , 216, (not 256) palette. This color palette is a standardized solution to solve the problem of displaying graphics in a similar way on many kinds of display screens running under different operating systems. To be sure to reach all of your potential Web audience, it is wise to stick with this ratio.
(Try this exercise to experiment with the color and pixel settings on your computer) (Pg 165 of non-designer guide)
Dithering - The process of reducing the color range of images down to the 256 (or fewer) colors seen in 8-bit GIF images by juxtaposing the pixels of two colors to create the illusion that a third color is present.
File Formats(Button)
The two most commonly formats for displaying graphics on the Web are:
GIF ? Graphic Interchange Format popularized by CompuServe
JPEG ? Joint Photographic Experts Group.
Here?s two important things about GIF and JPEG image formats:
They are crossplatform, meaning any kind of computer can view them.
They are compressed, making the file smaller, allowing it to be transferred quickly.
Advantages of GIFs
Transparency ? It?s what lets the background color of a page show through part of an image. You can choose one color in your image to be transparent.
Interlacing ? Graphics appear in layers, each layer adding more clarity to the image.
Animations ? You can create interactive images in GIF format
Limitation of GIF ? limited to a maximum of 256 colors
When to choose GIF: Best used for images with large areas of solid, flat color, such as simple illustrations, web buttons, logos, text as graphics, cartoons, etc..
Advantages of JPEG
JPEG files images can contain 16.7 million colors (24-bit).
When to choose JPEG ? Best for photographs, watercolor images, pencil or charcoal drawings, and other such images where there are subtle transitions between colors.
(Here?s where I will show a example of a photo in GIF and JPEG)
Images on Screen(Button)
Images and multimedia place high demands on the network, the computer, and the user. The challenge for Website designers is in preparing files that are small enough to be accessible to your audience and any other potential users, and to ensure you maintain sufficient quality.
Accessibility- Text is the main medium for presenting information online and the most adaptable for different users and assistive technologies. At the same time, the web is a visual tool and access to images an other nontext materials is one of the reasons why the web is utilized as such a huge information source. Designers must be aware of and incorporate methods to establish images and other multimedia, but not exclude disabled users. If your site uses navigational buttons, graphics and images, it is important to use text alternatives to these images. ALT-text attributes allow you to supply an alternate text description with any images you place on your page.
Audio Facts
Digital audio data is the actual representation of a sound, stored in the form of thousands of individual samples that represent the amplitude (loudness) of a sound at a discrete point in time.
Auido Facts:
Three sampling frequencies most often used in multimedia are:
CD quality = 44.1kHz, 22.05 kHz, and 11.025 kHz.
Digital audio is not device dependent, and sounds the same every time it is played. For this reason digital audio is used far more frequently than MIDI data for multimedia sound tracks.
You can digitize sounds from any source, live or prerecorded.
Sample sizes are either 8 bits or 16 bits.
Streaming audio files begin playing when part of the file has been buffered into the computer?s memory and are dependent upon connection speed.
Considerations:
Because sound is time based, you many need to consider what happens to sounds that are playing in your site when the user goes to a different location
Disk Space, bandwidth as well as the abilities of the authoring system to use various file formats and compression.
Regularly test the sound and image synchronization of your project
Evaluate your sound?s RAM requirements as well as user?s playback setup
Be sure you understand the implications of using coprighted material.
You can purchase and use digitized clip sounds with an unlimited-use royalty-free license.
Video Facts
Video places the highest performance demand on any computer system
Digital has replaced analog as the method of choice for making video for multimedia
Digital video eliminates the image-degrading analog-to-digital conversion
Always import video and sound at the highest resolution and with the least amount of compression
Reduce the resolution and compress the footage later according to your needs
Shoot using a steady shooting platofrm
Analog is rapidly being replaced by digital recording standards for video
Considerations:
Codecs are digital video compression schemes that compress a video for delivery and then decode it during playback.
Streaming video and audio starts playback as soon as enough data has transferred to the user?s computer to sustain playback
MPEG standards provide good media encoding abilities.
CD-ROMs provide an excellent distribution medium for computer-based video
Delivery
Delivery of networked media consists of three main components: the server, the network, and the client machine. These three components must work together in order to deliver good web multimedia to the desktop. So, even if you have a high-end video server and network, if your users are runing low-end desktop machines that cannot handle the demands of playback, you will no doubt be unsuccessful at reaching your audience. Two multimedia delivery methods discussed here are streaming and downloading
Streaming technology
Downloading

U8 Action Assignments (8/26, 8/29)
(here's where we start talking about user testing)

According to Wikipedia, usability testing is a way for designers to measure how well people can actually use something they have created for its intended purpose. "The aim is for them to observe a real user use their product in as realistic a situation as possible, so as to discover errors and possible areas of improvement."
Once you have built your Web site, created an appealing visual interface, provided an intuitive navigation scheme, and integrated all of the content you want on the site, why should you bother worrying about usability? Because it is not enough to design something that you think is wonderful and intuitive. What's more important is what the users experience when they use it.
In this unit, you will create a plan for the usability testing of your site. In Unit 9, you will carry out the plan for testing the usability, report the results, and make recommendations for changes. Finally, in Unit 11, you will submit your final Web site, including the changes recommended by the results of your usability testing.
Read Chapters 9, 10, and 11 in Don't Make Me Think: A Common Sense Approach to Web Usability.
Action Assignment 8.1:
Create a plan for testing the usability of your Web site that includes the following elements:
a) A list of people you plan to recruit for the usability test. You should have three or four people in your test group and they should be representative of the target audience of your site.

People primarily in the offices of Florence Enterprises in addition to fellow learners in ED722.

b) A set of scenarios that your testers will follow during testing.

The testers will each be in their own offices on their own computers.

Some might perform their usability tests from their home computers.

The testers in Florence Enterprises will be observed by me, the others will be interviewed by me concerning their responses to the issues addressed.

The participants in the ED722 class will be corresponded to via email.
c) A script that you will follow with each tester during testing. Use the sample on page 158 of Don't Make Me Think as a template. (This document is also available for download from Advanced Common Sense.)

Introductory conversation and explanation of the purpose of the usability test. Encourage them to think out loud and ask questions and to respond naturally. However, in such a usability test, the questions should not be answered as to how to use the sight since that is what is being tested.
d) A form that your testers will complete that collects feedback about their experience using your site. The form can contain any combination of Likert-type statements and open-ended questions.

What is your impression of this site?

Is the site clearly labeled?

What is the purpose of the site?

Do you like the graphics?

Do you like the sounds?

Is the site easy to understand?

Is the site easy to navigate?

Is the site interesting?

Would voluntarily return to this site?

What general comments do you have concerning the site?
e) An observation protocol that you will complete with each tester in person.

What is their first question or comment?

What is the first link they click on?

How easy is the sight for them to navigate?

Do all of the links work?

What is the loading speed for the various pages?

Are all of the labels, buttons and links clearly marked and understood?

Are the graphics clear and easy to see and understand?

What is the amount of time spent scanning or reading?
Submit your plan in the CourseRoom as part of a posting; the form for evaluation should be either included within the posting or as an attachment.

U8AA Response to Krista:

I think your introduction of explaining the purpose and procedures of your usability test would put the examiners at ease and I also think your test form questions are all on target.

Richard

From Rose:

U8AA1
Action Assignment 8.1:
Create a plan for testing the usability of your Web site that includes the following elements:
a) A list of people you plan to recruit for the usability test. You should have three or four people in your test group and they should be representative of the target audience of your site. [However the nugget that Krug points out is that one user is 100 percent better than testing none].

Using the guideline provided by Badrul Khan (2001), my "Usability Team" would include:

Target trainees (clients) someone who is representative of the group to be trained [Mary Cain a student from the junior class]

Instructional designers: the person (s) responsible for the integrity of the instruction. [Ted Stephens]

Web developers/programmers: the person responsible for the technical delivery of the instruction. [Person from the Center for Instructional Design TBD]

Training/development managers: those responsible for the design and development resources and schedules. [Deb Duley]

Risk manager: the person whose success depends on the clients being trained. [Jill Jacobson]

b) A set of scenarios that your testers will follow during testing.

The usability test has a user perform a set of tasks in a controlled environment where the user's actions and comments can be observed. I will use direct observation of this process in the computer lab in Hayes Hall.

c) A script that you will follow with each tester during testing. Use the sample on page 158 of Don't Make Me Think as a template. (This document was downloaded and modified from Advanced Common Sense.)

Hello team-

My name is Rose Hasenmiller, and I'm going to be walking you through this session.

You probably already know, but let me explain why we've asked you to come here today: We're testing a web site that we're working on to see what it's like for actual people to use it. I want to make it clear right away that we're testing the site, not you. You can't do anything wrong here. In fact, this is probably the one place today where you don't have to worry about making mistakes. We want to hear exactly what you think, so please don't worry that you're going to hurt our feelings. We want to improve it, so we need to know honestly what you think.

As we go along, I'm going to ask you to think out loud, to tell me what's going through your mind. This will help us. If you have questions, just ask. I may not be able to answer them right away, since we're interested in how people do when they don't have someone sitting next to them, but I will try to answer any questions you still have when we're done. We have a lot to do, and I'm going to try to keep us moving, but we'll try to make sure that it's fun, too.

I will be observing you and with your permission I will be making notes. My observations will help us figure out how to improve the site, and it won't be seen by anyone except the people working on the project.

If you would, I'm going to ask you to sign something for us. It simply says that we have your permission to make notes, but the notes will only be shared with the people working on the project. It also says that you won't talk to anybody about what we're showing you today, since it hasn't been made public yet.

Do you have any questions before we begin?

Before we look at the site, I'd like to ask you just a few quick questions. First, what's your occupation? _________________________________________

Now, roughly how many hours a week would you say you spend using the Internet, including email? ______________________________ __________

How do you spend that time? In a typical day, for instance, tell me what you do, at work and at home. ____________________________________________

Do you have any favorite Web sites? ________________________________

Thank you-We're done with the questions, and we can start looking at things.

From Faith:

Usability Testing Considerations:

1.	List of People to recruit for the usability test:

District Technology Coordinator

Spouse

2 teenagers

1 teacher

I plan to recruit the Williamsville School District Technology coordinator to participate in the testing because they are the potential customer, however I also intend to recruit two of my teenage, computer literate children because I feel they will be able to give me an honest assessment from a very outside perspective.

1.	Set of Scenarios:

Navigation – How well do you users understand getting around your site?

c. Hi, ________. My name is Faith Durden. Thank you for participating in this usability test, it will assist me a great deal in ensuring that the usability of my site is the best it can be. As I walk you through this session, don't hesitate to ask questions if you aren't sure about something.

As you know, the purpose of this session is to determine if my web site is working well and to identify potential user problems while working within the site.

I want to make it clear right away that we're testing the site, not you. You can't do anything wrong here. In fact, I'm asking you to help me identify if I did anything wrong in the construction of the site.

I want to hear exactly what you think, so please be frank about your opinions without worrying about hurting any feelings. I am interested in improving the site if at all possible, so I need to know honestly what you think.

As we go along, I'm going to ask you to think out loud, to tell me what's going through your mind. This will help me identify potential navagational glitches.

If you have questions, just ask. I may not be able to answer them right away, since I am interested in how people do when they don't have someone sitting next to them, but I will try to answer any questions you still have when we're done.

I will be taking notes throughout our session, and with your permission, I may mention user testing names and contact information in my final report. This is just in case I may want to contact you in the future. Your information will not be provided to any third parties, and your privacy will be protected. This information will not be seen by anyone except myself and any other people working on the project with me.

I ask that you don't talk to anybody about my project after you go through this testing as it has not been made public yet.

Again, thank you for assisting me in this task.

Do you have any questions before we begin?

Before we look at the site, I'd like to ask you just a few quick questions. First, what's your occupation?

________

Good. Now, roughly how many hours a week would you say you spend using the Internet, including email?

________

How do you spend that time? In a typical day, for instance, tell me what you do, at work and at home.

_______

Do you have any favorite Web sites?

________

Now, finally, have you bought anything on the Internet? How do you feel about buying things on the Internet?

________

And what have you bought?

________

OK, great. We're done with the questions, and we can start looking at things.

________

First, I'm just going to ask you to look at this page and tell me what you think it is, what strikes you about it, and what you think you would click on first.

And again, as much as possible, it will help us if you can try to think out loud so we know what you're thinking about.

d. User Testing Questionnaire

Please fill out this Likert Scale by scoring each question on a scale of 1-5 with 5 being the highest and 1 being the lowest.

It was easy to locate information on the site through proper organization of topics.

1 2 3 4 5

All links were relevant and working properly.

1 2 3 4 5

Moving around within the site was easily identified.

1 2 3 4 5

The home Page made it obvious what the subject of the site is.

1 2 3 4 5

The images, fonts, and other graphics on the site were relevant and helpful and added to understanding the site.

1 2 3 4 5

The site is attractive overall in color, contrast, text, and layout.

1 2 3 4 5

Did you find anything missing on the site that you feel would aide in a better understanding the topic? If so, please explain

________________________________________________________

What Suggestions do you have for improving the site?

__________________________________________________

1.	Observation Protocol:

I did consider video taping the sessions, but I decided not to do so. I think there is value to this, but quite frankly, I would rather directly observe and take notes. I just don't see myself going back and reviewing all the coverage. I also think that everything can be adequately captured through observation and the feedback form from the participants. If I were creating a larger site with a much larger corporation or audience, I would certainly consider videotaping.

U8D1 Usability resources
(first post 8/26, comments 8/29

Browse some of the Web resources related to usability. These resources are listed in the Overview section.

All of the usability sites should themselves be very usable (if they are worth their salt) and http://www.pixelmedia.com satisfies that requirement but it did not have a home page link on each of its pages but one can find the home page by clicking on the upper left logo. Also, some of its drop down menus obscured some of the other type on the page and I think that practice should be avoided. The tones used in the site are muted which is easy on the eyes.

http://www.truematter.com has a much more clear and appealing approach to its design and all of the labels are clearly marked and its pages are informative but some of the links when clicked made the pages jump around unintentionally.

Steve Krug's site http://www.sensible.com/index.html was OK but a little on the ordinary side, or perhaps bare bones, for him to have written the text book about usability. And the king of usability Jakob Nielsen's site, http://www.useit.com, seemed a little bland and disorganized also did not have a home page button on each page. Virginia Tech's site, http://www.edtech.vt.edu/index.html, is well constructed and follows the principles of usability. Usable web, http://usableweb.com/, is full of usable links but I think it could use some graphics or visuals.

(a) Reflect on your readings and action assignments for this unit. Share one nugget of information that you found especially useful from these resources. Discuss how you plan to apply this nugget to your course project.

Usability testing should be done as the website is being developed and not when it is completed and ready to be published on the Internet.

(b) Share one guideline from these resources that you disagree with. Discuss how your design departs from this guideline, and provide your rationale.

I think a successful usability test need not cost a great deal to be effective. Probably the greatest cost in performing them would be hiring professions to execute them but I think testing the determining the usability of a site (but not necessarily the content) could be done by nonprofessionals to determine how the general public responds to the tasks involved in navigating a website.

References:

Krug, Steve. (2000). Don't Make Me Think: A Common Sense Approach to Web Usability. Indianapolis: New Riders Publishing.

Lynch, P. & Horton, S. (2001). Web Style Guide: Basic Design Principles for Creating Web Sites. London: Yale University Press.

Web ResourcesOver the length of your course, you may find the following suggested sites useful for your research, to expand your understanding of a particular topic or to stay current in your field.

Web Style Guide (Web site accompaniment to the Lynch and Horton text).
Advanced Common Sense (online home of Steve Krug).
Jacob Nielsen's Web site on usability.
Ten Usability Heuristics.
Ask Tog: First Principles of Interaction Design.
SIGCHI Special Interest Group on Computer-Human Interaction.
Web interface design.
Alertbox: Jakob Nielsen's Column on Web Usability.
Usable Web: 1056 links about Web usability.
Usability testing.
Usability and accessibility.

U8D1 response to Carol.

I agree with you that using a camcorder might not give as accurate a picture as personal observation. It might have the effect of making the participants freeze up and act unnaturally and self-consciously to their usability testing environment. Richard

U8 Response to Brad

I just reviewed the Morae usability evaluation system and I think something like that would be a wise investment for people and organizations making such evaluations of websites and computer use. I think there is always room for expert advice in all areas including website design, particularly in the areas of technology, design, and informational content, but usability is determining how well the layman or general user of a site or a computer navigates so that is the reason that I did not think there should be great costs involved in those sorts of evaluations. Richard

Reference:

http://www.techsmith.com. Retrieved on August 29, 2004.

U9 General Discussion
current web addresses

Post general questions here; below are current web addresses.
These are what I have as of 8/15:
Brad Hokanson: http://www.lc.capellauniversity.edu/~bhokanson/ED722/
Bethany Bovard: http://reta.nmsu.edu/~bethany/
Richard Bloodworth: http://www.lc.capellauniversity.edu/~125836/
Dusty Crocker: http://www.lc.capellauniversity.edu/~138956/722index.html
Kathleen Cairns: http://www.lc.capellauniversity.edu/~124708/KCairns_Interface2.htm
Margie Cribb: http://www.lc.capellauniversity.edu/~
Michelle DiGiovanni: http://www.lc.capellauniversity.edu/~147827
Jim Doran: http://www.lc.capellauniversity.edu/~134089/
Faith Durden: http://www.lc.capellauniversity.edu/~fd8710/Webfolder/
Rose Hasenmiller: http://www.lc.capellauniversity.edu/~rh5071/
Golda Lawson-Cohen: http://www.lc.capellauniversity.edu/~gl7522/ed722/
Adrienne Martin: http://www.lc.capellauniversity.edu/~136190/
Kevin Pyatt: http://www.lc.capellauniversity.edu/~131082
John Rivoire: http://jrivoire.com/ED722
Krista Roehrig: http://www.lc.capellauniversity.edu/~008781/
Angelo Spears: http://www.lc.capellauniversity.edu/~140261/?N=D
Kenyatta Thigpen: http://www.lc.capellauniversity.edu/~125293/
Joy Thomas: http://ftp.lc.capellauniversity.edu/~135969/tutorial1/Interface_Design/index3.htm
Carol Trussell: http://www.lc.capellauniversity.edu/~150881/

U9 Action assignments:
Testing, results, and changes to your web site.
(First post 9/2, comments 9/5)

Action Assignment 9.1:
Implement your plan for usability testing. Collect data on how your testers perform in the various scenarios you have created. Be sure to include your own observations of the testers as well as their reports.
TIP: Consider tape-recording the sessions so that you have a complete record of the testers' reactions without having to take down every word. It will, however provide you with a massive amount of data. The best part of recording is that you are free to watch what's going on.
Action Assignment 9.2:
Report the results of your usability tests in the CourseRoom. Do not report the results of every individual test; instead, provide a summary of their reactions and ability to perform the scenario. Keep the format simple; use a narrative style like that of the example on page 173 of Don't Make Me Think.
Action Assignment 9.3:
Provide a list of changes to your Web site suggested by the results of your usability test. Provide a rationale for each change. (NOTE: You are not expected to make every change suggested by every individual who tested your site. Choose the changes that will (a) provide a remedy to the most significant or greatest number of issues identified by your testers, and (b) are within your ability and time constraints to complete.)
You will submit the final version of your Web site in Unit 11

U9D1 Nugget from user testing(9/2, 9/5)

Describe one discovery that you had during your usability testing -- something that made you say "aha!" Briefly describe the situation and what the user did to help you make this discovery.

I have the people at Florence Enterprises lined up for a Monday meeting since that is when they are available for this exercise and that is when I plan to conduct the usability test results. I will shortly thereafter post the result of my observation of their website usability experiences. Richard

U9D2 Your process of user testing (9/2, 9/5)

What challenges and unexpected issues did you encounter in your usability testing? How did you deal with them? What would you do differently next time?

As mentioned previously, I have arranged for the employees at Florence Enterprises to participate in the usability exercise on Monday. I also plan on emailing the website next week to several people and will contact them by telephone and email and I will post the cumulative results of that endeavor also. Richard

Here's the beginning of a page using animation: http://www.lc.capellauniversity.edu/~125836/DancerBirdsBallBounce.htm

My url address is http://www.lc.capellauniversity.edu/~125836. Richard
Carol, These are really good clip art sources – I've added the addresses to my address list. Thank you, Richard

I meant to write to you before after you had mentioned how to create a navigation panel in Dreamweaver (Insert>Image Objects>Navigation Bar). I have been able to use buttons for navigational purposes but I was wondering how you were able to make the tabs that look like file folder tabs that open each file page when selected with all of the other tabs remaining in place. I assume it is done with some sort of external file similar to a CSS external file.

I'd appreciate any thoughts you have about this. Richard

It's true that content should be relevant, however, relevance is a relative term and sometimes people confuse relevance with familiarity. People often only want to see what they have seen before. Or in other words, people expect, and are comforted by, the expected. Sometimes there is a fine line between irrelevance and getting someone's attention which is a concept that is used often, particularly in advertising. The Benetton clothing company is known for that: using surprising, sometimes shocking, images that have nothing to do with clothing just to get the public interested or talking about a particular advertisement and thereby putting their company in the public's consciousness.

Also, it is also true that no viewer wants to sit through a long download time but some large files are loaded incrementally with preloaders so that the viewer starts watching the movie during the download procedure.

--

Speaking of Don't Make Me Think, I just returned from Disney World (Magic Kingdom, EPCOT, MGM Studios and Animal Kingdom) and Universal Studios with my guest from Taiwan (who has since returned to Taiwan). The philosophy of those parks is just that: Don't Make the Customer Think. The park visitor just sits in the park rides and passively experiences the events. There was one ride, Mission Space, that had an interactive theme to it and I think it was the best ride of all. The problem with this method is that it is difficult to know how much information is retained so that in passive learning, for instance, probably not much information is retained as opposed to more interactive and traditional methods.

Web pages are a different art form. It is important to remember that a web is not, and never will be, a printed book. It is true that the pages can be printed out but then they are no longer web pages.

LETTER TO LABASSISTANTS:

I would like to make a drop-down menu (a jump menu?) similar to the ones in Capella's iGuide page where a menu drops down when the mouse/cursor moves over the main link.

Dreamweaver has Insert>Form>List/Menu or Jump Menu but these are not doing what I am trying to do. This action would happen as the cursor rolls over the menu buttons (About this, navigation, etc.) on my ED722 home page which is can be found at http://www.lc.capellauniversity.edu/~125836/ED722HomePage.htm.

Thank you,

Richard Bloodworth

RBloodworth99@yahoo.com

REPLY TO ABOVE LETTER:

Hi Richard,

These pull-down menus (if we're talking about the same thing), are typically made in Fireworks. In Fireworks, create a hot spot, then modify > pop-up menu > add pop-up menu. You can create your menu this way, then import it into Dreamweaver.

Hope this helps,

Kim

Another

Hello Kim,

Thank you for your response. I'll give that a try.

I would also like to achieve a horizontal pull down menu as is shown in http://vle1.capella.edu/124321/TS5514/finalProject.

I guess that would also be done with Fireworks as a variation of the same idea. Also I want each of the menu subheadings to function as links to other pages. So I guess that would be done after they are imported into Dreamweaver (right?).

Thank you,

Richard Bloodworth

RBloodworth99@yahoo.com

Letter to Dusty

dcrocker@aiudallas.com

Dusty,

I think your website is excellent and the information you include in it and in the discussions is very helpful -- I know you are a teacher in the computer design field and your knowledge and experience is evident in your submissions. Since our Capella websites end when the courses are through, I would like to save the information on my computer as reference as well as some of your other "how to" information within the courseroom. If you have a permanent website site where it is then I could refer to it that way or if you could send it as a file I could save (when it is all completed) that would be great -- I don't think I can save it from the Internet or the courseroom.

Thanks,

Richard

RBloodworth99@yahoo.com

Feedback and Utility form:

Feedback Form

Usability Test

Please give us your frank and honest reactions to the Web site.

Strongly
Strongly

Disagree
Agree
Agree

1
2
3
4
5

The Web site was easy to use.	1	2	3	4
5

I had no problems with navigation.
1
2
3
4
5

I always knew where I was in the site.
1
2
3
4
5

The information provided was clear.
1
2
3
4
5

The colors and design were not agreeable.
1
2
3
4
5

The information is useful to my work.
1
2
3
4
5

If I could change something about the Web site, I would change….

1. What first attracts your attention in the site?
2. What is the first thing you are compelled to click on?
3. What do you think the purpose of site is?
4. Do you feel like you have learned anything from the site?
5. How did you find the interface in terms of ease of use?
6. What could be changed to improve the site?

Text for ED 722 Website

Home

About this (Purpose, Audience, Bibliography, Webliography)

Navigation (Site map, Trunk test, Accessibility)

Design (Site system, Layout, Graphics, Elements of Design)

Typography (Font styles, Font sizes, Text, Examples)

Multimedia (animation and sound, Types of, Sources of)

Usability (Method of implementation, Testing plan, Response form)

Contact (Mail to:)

About this

This website is constructed solely for the purpose of illustrating principles and techniques learned during the course ED 722 Interface Design presented by Capella University and instructed by Brad Hokanson.

The texts used were

Don't Make Me Think: A Common Sense Approach to Web Usability (2000) by Steve Krug, published by New Riders Publishing (Indianapolis).

Macromedia Dreamweaver MX for Windows and Macintosh – Visual Quickstart Guide (2003) by J. Tarin Towers, published by Peachpit Press (Berkeley, CA).

Macromedia Dreamweaver MX 2004 Hands-On-Training (2003) by Garo Green with Lynda Weinman, published by Peachpit Press (Indianapolis).

The Non-Designer's Web Book (2000) by J. Tolbert & R. Williams, published by Peachpitt Press (Berkeley, CA).

Web Style Guide: Basic Design Principles for Creating Web Sites by P. Lynch & S. Horton, published by Yale University Press (London).

Also, sources were obtained from several Internet websites listed throughout the site.

The artwork is by the author of this site as well as some clip art provided by http://www.clipart.co.uk . Some sounds were provided by Techno Night 2000 – the Very Best of Asian Dance.

The course occurred during the summer of 2004.

I hope you enjoy exploring this site.

Sincerely,

Richard Bloodworth

U1,2 About this

TV screen

Purpose

The purpose of this website is to demonstrate principles of design as well as computer aided techniques -- primarily facilitated through the use of Dreamweaver MX 2004 and other graphics software -- learned during the Capella University course ED 722 Interface Design. The goal of the course is to design an aesthetically pleasing as well as functional website interface design. To determine the usability of the website, the functionality and navigational effectiveness are assessed by a group of testers who are presented the website without prior instruction as to the content and navigational methods used within the website.

----------The purpose of this website is to demonstrate principles of design as

well as computer aided techniques -- primarily facilitated through the use of

Dreamweaver MX 2004 and other graphics software -- learned during the

Capella University course ED 722 Interface Design. The goal of the course is to

design an aesthetically pleasing as well as functional website interface design.

To determine the usability of the website, the functionality and navigational

effectiveness are assessed by a group of testers who are presented the

website without prior instruction as to the content and navigational methods

used within the website.

Audience

Essential to any design project is an understanding of your audience; the end user, the public, the learners that will use your web site. The main user of this site (and its series of pages) is you, the designer, but the audience should be either your co-workers or your students who will use the site is a reference to help understand interface design.

Just as a company makes and distributes its products with a particular market group in mind, whether that market is a specialized focus group or the vast general public, a designer of a website also needs to keep in mind the audience that will be visiting the website. The intended website audience, and their goals and interests, are the main guiding forces that determine the formation of a website. So, in the creation of a website, an understanding by the end user of the site, the audience, is essential. In this project it is assumed that the users of this website have a basic understanding of the functionality of graphical interface computer technology that require the actions of clicking on hyperlinks to retrieve URLs (universal resource locaters), usually referred to as a web pages. Beyond that assumption, to be effective, the required procedures of the functionality of the website should be clearly labeled, communicated, and understood by the visitor to the website.

The audience for this particular product is firstly the site's author and the fellow participants in the Capella University course ED 722 Interface Design. The initial examiners of the usability and functionality of the website are the employees of Florence Enterprises, Incorporated in Athens, Georgia. Other examiners will be asked to determine the effectiveness of the interface design primarily through emailed communication. Eventually a wider public audience can have access to the website, thus making the general public, or in particular, people with an interest in designing websites, as potential future audiences.

Interface

What is an interface?

Even though the term interface refers to the interaction and functionality of the entire website with all of its links and connected pages, the uninitiated might think of interface -- especially since the term contains the word "face" which implies a surface or covering or the most expressive element -- as primarily the home page or the initial index page that all of the other pages branch off of. The elements that comprise the interface are the overall design, concept, information, style, color, and composition; the text, the graphics; and, importantly, the links to other pages or websites.

According to Merriam-Webster Dictionary (2004) the definition of interface is:

1 : a surface forming a common boundary of two bodies, spaces, or phases.
2 a : the place at which independent and often unrelated systems meet and act on or communicate with each other b : the means by which or communication is achieved at an interface.

The book, Web Style Guide (2001), states that the interface is all of the interactivity and design involved in a website so the term "interface", concerning websites, could also be referred to as the "functioning and design system" of a website.

Reference:

Lynch, P. & Horton, S. (2001). Web Style Guide: Basic Design Principles for Creating Web Sites. London: Yale University Press.

U1D2: A finding nugget from Lynch and Horton
(first post: 7/8/04 comments: 7/11/04)

u1d2 Interface design

Reflect on your readings and action assignments for this unit. Share one nugget of information that you found especially surprising or useful in Chapter 2 of Lynch & Horton. Discuss how you plan to apply this nugget to your course project.

The Lynch and Horton book mentions the importance of the interface design to answer the questions: who, what, when, where (and, I would add, why and how). The book mentions that the web page designer should avoid dead-end documents and pages so that there is a link on every page to return to the homepage. Also essential information should be on every page (such as contact and copyright information).

An effective website has a simplified design that is natural to navigate and does not confuse the reader with complexities and follows the advice of Henry David Thoreau, who, in Walden (1854), said "Simplify, simplify, simplify".

The book mentioned the Chicago Manual of Style (which I had never heard of) which is a good reference manual and demonstrates that certain forms are timeless in that the organizational content of web pages is similar to that of printed books. However, with web pages there is more non-sequential browsing -
- where the readers jump from one page to another -- whereas in printed books the readers tends to read the book chronologically beginning with page one and progressing to the end of the book and this should be kept in mind when designing websites and I hope to include these concepts in the website that I will design for the course project.

Reference:

Lynch, P. & Horton, S. (2001). Web Style Guide: Basic Design Principles for Creating Web Sites. London: Yale University Press.

U1d2 comment to Kevin

I think the success of a creative design might depend on who the intended target audience is. If the audience is the general public then they might prefer the most standard and familiar design formats but if the target audiences are, for example, artists or web designers then they might respond more positively to more innovative and creative approaches to web design.

Richard

U1d1 comment to Faith

I think the list of the 10 essential elements to a successful website design in the user interface rating form are helpful. Although all necessary, I think aesthetics, functionality, and of course informational content are the most essential.

Unit 1 + 2 General Discussion
(including DW questions)
I usually set aside a section for general questions that come up during the course of a unit; here it is. Post your questions and ocmments that don't relate to the discussion questions here, and we'll all be able to address them.
I'll continue to have this "open" section in future units, so after the end of the unit, it won't be checked that much...just post in the most recent one.

BIBLIOGRAPHY

Green, Garo with Weinman, Lynda. (2003). Macromedia Dreamweaver MX 2004 Hands-On-Training (2003). Indianapolis: Peachpit Press.

Krug, Steve. (2000). Don't Make Me Think: A Common Sense Approach to Web Usability. Indianapolis: New Riders Publishing.

Lynch, P. & Horton, S. (2001). Web Style Guide: Basic Design Principles for Creating Web Sites. London: Yale University Press.

Tolbert, J. & Williams, R. (2000). The Non-Designer's Web Book. Berkeley, CA: Peachpitt Press.

Towers, J. Tarin. (2003). Macromedia Dreamweaver MX for Windows and Macintosh – Visual Quickstart Guide (2003). Berkeley, CA: Peachpit Press

WEBLIOGRAPHY

http://www.about.com About
http://www.artic.edu The Art Institute of Chicago
http://www.cnet.com CNET
http://www.disney.com Disney
http://www.drugstore.com Drugstore
http://www.exploreminnesota.com Explore Minnesota
http://www.fhwa.dot.gov Federal Highway Administration
http://www.fedex.com/us FedEx
http://www.ford.com Ford Motor Company
http://www.gwu.edu The George Washington University
http://www.microsoft.com Microsoft
http://www.mothernature.com MotherNature.com
http://www.mtv.com MTV
http://www.newscientist.com New Scientist
http://www.newsnow.co.uk News Now
http://www.pbs.org PBS
http://www.redherring.com RedHerring
http://www.slussers.com Slusser's Green Thumb
http://www.yahoo.com Yahoo
http://www.capella.edu. Capella
http://www..Amazon.com Amazon
http://www.space.com
http://www.msfc.nasa.gov/news/photos/photogallery/chandra/chandra5.htm Chandra X-ray Observatory
http://www.hubblesite.org
http://wires.news.com.au/special/mm/030811-hubble.htm http://www.kumc.edu/instruction/medicine/anatomy/histoweb/ http://www.backgroundphotos.com/signup.html
http://www.clipart.co.uk.
http://www.pbs.org/wgbh/nova/baby/divi_flash.html.
http://www.pbs.org/wgbh/aso/tryit/tectonics/shockwave.html http://planetquest.jpl.nasa.gov/gallery/gallery_index.html.
http://www.pixelmedia.com
http://www.truematter.com
http://www.sensible.com/index.html
http://www.useit.com
http://www.edtech.vt.edu/index.html
http://usableweb.com/
http://www.lc.capellauniversity.edu/~bhokanson/ED722 /
http://160.94.18.249/hokanson/brad.html
http://www.ubergeek.tv
http://www.nathan.com
http://www.clipart.com
http://www.1clipart.com/
http://www.clipart.co.uk
http://www.fg-a.com/
http://www.fotoclipart.com/
http://www.coolhomepages.com
http://www.gettyimages.com

Web Style Guide (Lynch and Horton text).
Advanced Common Sense (Steve Krug).
Jacob Nielsen's Web site on usability.
Ten Usability Heuristics.
Ask Tog: First Principles of Interaction Design.
SIGCHI Special Interest Group on Computer-Human Interaction.
Web interface design.
Alertbox: Jakob Nielsen's Column on Web Usability.
Usable Web: 1056 links about Web usability.
Usability testing.
Usability and accessibility.

U8D1 response to Carol.

I agree with you that using a camcorder might not give as accurate a picture as personal observation. It might have the effect of making the participants freeze up and act unnaturally and self-consciously to their usability testing environment.

Richard

U8 Response to Brad

I just reviewed the Morae usability evaluation system and I think something like that would be a wise investment for people and organizations making such evaluations of websites and computer use. I think there is always room for expert advice in all areas including website design, particularly in the areas of technology, design, and informational content, but usability is determining how well the layman or general user of a site or a computer navigates so that is the reason that I did not think there should be great costs involved in those sorts of evaluations.

Richard

Reference:

http://www.techsmith.com.

U2 Action Assignment
Work through Chapters 2 and 3 of the Dreamweaver Quickstart Guide by Towers: "Setting Up a Local Site" and "Basic Web Pages." These chapters will get you started with your site. You will set up a local site on your own computer, and then you will be ready to start building pages and adding content in Dreamweaver. Create the home page for your project Web site. Be sure to include the following elements on the home page:
Title of the Web site.
Statement of purpose.
Author's identification.
Date of creation or revision.
Menu of topics (not functional at this time; eventually the menu will provide navigation to the major sections).

U2D1 "Don't make me think" as a concept

Navigation, in Internet terminology, is the maneuvering of the links and interface elements to arrive at one's desired URLs or web pages. It is essentially the method by which one travels through the Internet superhighway with all of its attending traffic signs, rules, requirements and regulations.

The website designer should create a site so that people react in an almost instinctual, non-thinking way when using the website so that the interaction within the website forms a natural, flowing, and attractive interface. Though people sometimes enjoy a challenge, generally speaking, if something is difficult to do then people tend not to do it -- especially if there is an easier and more efficient way of doing it. Given the choice, people generally opt for a simpler, streamlined method over a complicated system so an effective website employs these principles thus increasing the usability aspect of the website. Every design element should have a functional and aesthetic purpose. As formulated in the Bauhaus philosophy: form follows function.

Steve Krug's facts of [Web] life

In Chapter 2 of Don't Make Me Think, Steve Krug presents three "facts of life" about how we really use the Web:
Fact of Life #1: We don't read pages. We scan them.

Newspapers and advertisements are written with this concept in mind. With newspapers, first there is the bold face name at the top of the page then each article's title is written with a few descriptive words and in bold type with the most important articles written in the boldest and largest type on the page. The first "paragraph" in a newspaper is usually only one sentence and expresses the conceptual essence of the article. Each following paragraph is written so that the essentials of the story are presented. A reader can scan only the titles of the newspaper articles and get a general idea of what occurred that day that the newspaper's editors considered newsworthy.
Fact of Life #2: We don't make optimal choices. We satisfice.

We tend to try to make the best of a given situation and this sometimes involves sacrificing complete satisfaction and instead compromising our intentions -- often because we are in a hurry or trying to meet a deadline, etc. Steve Krug has created the portmanteau term "satisfice" to describe that condition and this is the method most people use while exploring the Internet or often reading in general.
Fact of Life #3: We don't figure out how things work. We muddle through.

Rather than analytically solving problems, most people go through many tasks, in this case surfing the net or researching on the Internet, in a random, hit or miss fashion to determine what works best or where something is and obtain much of their information through a system of trial and error or reading about the results obtained though the trial and effort of others.

Scanning is a fact of life because, realistically speaking, people do not have the time to read every word ever written so they must scan for the essentials and then read word for word when an area of interest is located and when in depth knowledge or information about a subject is needed.

These website pages are designed with these concepts in mind.
Reference:

Krug, Steve. (2000). Don't Make Me Think: A Common Sense Approach to Web Usability. Indianapolis: New Riders Publishing.

Unit 2 Information Assignments
Here's the regular reading and research for this section; make sure you check with the Schedule/syllabus on this and subsequent chapters to complete all the preparation for the course.
2.1: Read the introduction and Chapters 1-3 and 8 of Don't Make Me Think.
2.2: Read pages 53-60 and 61-86 of The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques (XanEdu Coursepack).
2.3: Read the wikipedia on Usability. [go to http://en.wikipedia.org/wiki/usability]
2.4: Read Chapters 2 and 3 of the Dreamweaver Visual QuickStart Guide OR Chapters 1-3 in Dreamweaver MX 2004 HOT.

U3 Navigation

Site map

U1,2 About this

TV screen

Purpose

Audience

Interface

U3 Navigation

Site map

Trunk test

Usability page

Navigational methods

U4 Design

Navigational scheme

Design and layout page

Contrast, repetition, alignment, proximity

U6 Typography

Styles, fonts, and characters

Text and typography

Good and bad examples

U7 Multimedia

Animation and sound

Types of multimedia

Sources of multimedia

U2,8,9 Usability

Usability test plan

List, scenario, script, form observational method

Bibliography

Webliography

Contact

Trunk test

U3A2 Links and uploading Dreamweaver activities

Work through Chapter 6 of the Dreamweaver Quickstart Guide by Towers: "Working with Links." This chapter will introduce you to various techniques for creating hyperlinks. Experiment with linking your home page to other pages of your Web site. Be sure to provide a way to return to the home page. Test it and upload it to the Capella Web server. Test it via a Web browser. Post any Dreamweaver questions in the CourseRoom.
[I'm assuming that you all have web sites already or from previous classes with Capella; please contact me immediately if you don't.]

U3A3 Planning your site and posting a map on your server space. (7/22)
Before you create the individual pages that will become part of your site, it is important to have an idea of the overall organization of the site and how the various parts are interrelated. A site map is a visual plan for the connections among the pages of your site.
Create a site map of your Web site. Keep it rough. This is just a preliminary idea of what sections you plan for the site and how they will be organized. Draw paths to show which pages will be linked to which other pages. Your site map will evolve as you work on the site, so do not invest a lot of time making the diagram pretty. It should be rough and sketchy. Please put your scanned image on your server space and provide a link to the image from a posting in the courseroom. DO NOT attach your image to a posting; i think that's an extremely poor, convoluted, and inefficient way to show images to anyone, and is contrary to much of the work of interface design.
TIP: Start your site map using Post-It® notes; you will be able to move things around and make changes easily. You will find a good example of a preliminary site map in Williams & Tollett, p. 127.

U3A4: Summarizing usability
Review the readings for this unit. Encapsulate the key ideas and guidelines for usability, and build one or more pages summarizing the essential knowledge about usability. The information you include should cover the fundamental rules. Link them to your home page.
[A link here would be good as well to the specific pages.]

Accessibility in general refers to an approachable website, one that can be navigated with ease. The term also refers to being attentive to users with disabilities, particularly hearing or sight disabilities such as color blindness.

Below are guidelines that should be met in order to have a navigationally accessible website:

Usability in a website means meeting users' needs

Information is divided into logical units

A hierarchy of importance between units is established.

The hierarchy is used to structure the relations among units.

A site is built that follows the informational structure.

The site is aesthetically and functionally successful.

There is a clear design and site structure within the site.

The site design themes are effective and appropriate.

The site elements are interrelated.

The menus and submenus are well-defined.

The site guides are helpful.

All links are clear, current, and connectable.

The user uses the site in a natural, automatic way.

Below are some websites that follow effective website navigational procedures:

http://www.artic.edu

The site is divided into two main sections: the museum and the art school of the Art Institute of Chicago. Both are well presented and the viewer can spend hours viewing and reading about the paintings in the Art Institute.

http://www.disney.com

As one might expect, the Disney Company strives to get the best animators to create their site and it shows in this website. Though the homepage is a little busy, all of the searched for information about the Disney organization can be found by exploring this site. There are some great Flash animations and there are plenty of nice touches such as in the Walt Disney World site within the Destinations area of the home page where the cursor indicator becomes a magic wand that showers stars as it moves across the computer screen.

http://www.mtv.com

MTV knows how to please its audience market also with plenty of animation, color, and movement and information about all of the bands and background that visitors to this site would be interested in.

U3D1 Summing up actions and readings (1st post 7/22 response 7/25)
Reflect on your readings and action assignments for this unit. Share one nugget of information on good navigation design that you found especially useful from your readings for this unit. Discuss how you plan to apply this nugget to the navigation of your project Web site.

U3d1 comment to Rose

As you mentioned, clear navigation is key to an effective website and it is necessary for the website reader to always be able to return to the homepage in order for orientation and organization.

I think all of the elements of trunk test are essential in determining the effectiveness of a web site.

The questions in the trunk test are:

The trunk test, in simplified terms, establishes that the website user should be able to answer each of these questions in relation to the website:

What site is this?

What page is this?

What are the major sections?

What are the options at each level?

Does the reader know where he is within the scheme of the website?

How can the reader of the website perform a search?

Additionally, the user should always be able to locate the home page of a website.

Reference:

Krug, Steve. (2000). Don't Make Me Think: A Common Sense Approach to Web Usability. Indianapolis: New Riders Publishing.

Below are some websites that follow effective website navigational procedures:

http://www.artic.edu

The site is divided into two main sections: the museum and the art school of the Art Institute of Chicago. Both are well presented and the viewer can spend hours viewing and reading about the paintings in the Art Institute.

http://www.disney.com

As one might expect, the Disney Company strives to get the best animators to create their site and it shows in this website. Though the homepage is a little busy, all of the searched for information about the Disney organization can be found by exploring this site. There are some great Flash animations and there are plenty of nice touches such as in the Walt Disney World site within the Destinations area of the home page where the cursor indicator becomes a magic wand that showers stars as it moves across the computer screen.

http://www.mtv.com

MTV knows how to please its audience market also with plenty of animation, color, and movement and information about all of the bands and background that visitors to this site would be interested in.

Usability page

Navigational methods

U4 Design

Navigational scheme

Design and layout page

Contrast, repetition, alignment, proximity

U4A1 Roughing out your website (7/29)
Based on the site map you created in Unit 3, create a bare bones navigation scheme for your Web site that includes links to major sections of the site and a link on every page to return to the home page. The destination screens can be placeholder screens with minimal content, such as a title and a short description of the page contents.
[Ok, restated; come up with an idea as to how your website is organized, and start making that site. Put all the pages in even if they are just labeled and they say something like "Typography information here"]

U4A2 Screen design activity (7/29)
Create one or more pages that capture the essential knowledge on screen design and layout. Illustrate the main principles with good and bad examples. Upload your revised project Web site to the Capella Web server. Check the URL on the profiles page to be sure it is accurate.
This should be based on the principles in the reading for this week

U4D1 Applying the ideas from the Yale Style Guide
(First post, 7/29 response 8/1)
Now that you know how to recognize good and bad design, take another look at three Web sites you use frequently. Evaluate them in terms of their screen design and layout and provide a critique of each site according to the four basic principles of Williams and Tollett: contrast, repetition, alignment, and proximity. Your discussion should include the URL of the site you are evaluating, what the site designers did right, and what they did wrong.
Then go to at least two other sites reviewed by your classmates and perform your own evaluation. Respond to their posts and indicate whether you agree or disagree with their reviews, and why.

Design, which is a reasoned purpose or project, is essential in the formation of a website as it determines the overall conceptual and visual plan of the site.

Below are listed some guiding principles that should be used in the development and execution of a website:

Design, which is a reasoned purpose or project, is essential in the formation of a website as it determines the overall conceptual and visual plan of the site.

Below are listed some guiding principles that should be used in the development and execution of a website:

Contrast makes something readable in the same way that positive and negative spaces are necessary to make something seen.

Repetition breeds familiarity and lends to a consistency of style.

Alignment gives visual order – as opposed to disorder and chaos – and provides aesthetic appeal related to symmetry.

Proximity involves logical groupings and employ Gestalt principles of grouping objects for better perception and places similar objects together giving a birds-of-a-feather-flock-together feel to the design of a website.

The three sites that utilize these principles effectively are Yahoo.com, Capella.edu, and Amazon.com.

I think each takes these concepts into consideration while designing their websites. Yahoo has grouped categories that are easy to decipher though some of the categories are clumped together putting sometimes dissimilar subjects together. Capella begins with an introduction page and each page branches off logically from the home page. Amazon. Com makes good use of tab design though the browse column on the left could have a clearer organizational structure.

Reference:

Tolbert, J. & Williams, R. (2000). The Non-Designer's Web Book. Berkeley, CA: Peachpitt Press.

Contrast makes something readable in the same way that positive and negative spaces are necessary to make something seen.

Repetition breeds familiarity and lends to a consistency of style.

Alignment gives visual order – as opposed to disorder and chaos – and provides aesthetic appeal related to symmetry.

Proximity involves logical groupings and employ Gestalt principles of grouping objects for better perception and places similar objects together giving a birds-of-a-feather-flock-together feel to the design of a website.

The three sites that utilize these principles effectively are Yahoo.com, Capella.edu, and Amazon.com.

I think each takes these concepts into consideration while designing their websites. Yahoo has grouped categories that are easy to decipher though some of the categories are clumped together putting sometimes dissimilar subjects together. Capella begins with an introduction page and each page branches off logically from the home page. Amazon. Com makes good use of tab design though the browse column on the left could have a clearer organizational structure.

Reference:

Tolbert, J. & Williams, R. (2000). The Non-Designer's Web Book. Berkeley, CA: Peachpitt Press.
U4aa1-2

To show various design concepts, below is a url for a previous class of mine using Flash and Dreamweaver.

http://vle1.capella.edu/125836/index10.htm

Dreamweaver is complicated but once someone learns and understands its intricacies and idiosyncrasies then many of the functional skills are repetitive. The main problem associated with website design is the variety of computers that pages are designed for: there are different browsers that display different designs, colors, and typestyles. Additionally, there are computers that operate at different speeds: some slow and some fast.

ONLINE WEBSTYLE DESIGN

There are five basic steps in organizing your information:

Divide your content into logical units

Establish a hierarchy of importance among the units

Use the hierarchy to structure relations among units

Build a site that closely follows your information structure

Analyze the functional and aesthetic success of your system

Chunking, or lumping information

Most information on the World Wide Web is gathered in short reference documents that are intended to be read nonsequentially. This is particularly true of sites whose contents are mostly technical or administrative documents. Long before the Web was invented, technical writers discovered that readers appreciate short "chunks" of information that can be located and scanned quickly. This method for presenting information translates well to the Web for several reasons:

Few Web users spend time reading long passages of text on-screen. Most users either save long documents to disk or print them for more comfortable reading.

Discrete chunks of information lend themselves to Web links. The user of a Web link usually expects to find a specific unit of relevant information, not a book's worth of general content. But don't overly subdivide your information or you will frustrate your readers. One to two pages (as printed) of information is about the maximum size for a discrete chunk of information on the Web.

Chunking can help organize and present information in a uniform format. This allows users not only to apply past experience with a site to future searches and explorations but also to predict how an unfamiliar section of a Web site will be organized.

Concise chunks of information are better suited to the computer screen, which provides a limited view of long documents. Long Web pages tend to disorient readers; they require users to scroll long distances and to remember what is off-screen.

Hierarchy of importance

Relations

Most menu structural schemes follow an inverted tree form as depicted in Web Style Guide:

Summary

The most important step in planning your site is to organize your information. Thinking carefully about what you want to say and how you want to say it requires that you become intimately acquainted with your site content. Create outlines, chunk your information into sections and subsections, think about how the sections relate to one another, and create a table of contents. This exercise will help immensely when it comes time to build the individual pages of your site and may determine the eventual success of your Web site.

U6 Typography

Styles, fonts, and characters

Text and typography

Good and bad examples

U6 Action Assignment 1

Review the readings for this unit. Encapsulate the key ideas and guidelines for text and typography, and build one or more pages summarizing the essential knowledge about text and typography. The information you include should clearly present the fundamental rules. Illustrate the main principles with good and bad examples. Modify the existing pages in your site to conform to the best practices for text and typography. Upload the revised version of your site.

U6 Action Assignment 2

Post this information to your website; please respond below and include a link to your page.
Browse some of the Web sites that you use frequently, and evaluate their use of text. Identify two Web sites that illustrate effective use of text as defined by the principles and guidelines in the reading for this unit. Provide the URL of the site along with a brief explanation of the characteristics that make the site a good example.

Good:

http://www.yahoo.com/

Yahoo has links in logical groupings and the right amount of graphics and white space. The categories are well organized and Yahoo offers a great search engine to find any subject the reader might be researching.

http://www.space.com

This site includes some animated graphics and clearly delineated links and clear concepts and subject headings. One aspect I noticed about this site is that the content is aligned to the left of the screen so there seems to be an unused area on the right side of the screen.

Then identify two Web sites that illustrate poor use of text as defined by the principles and guidelines in the reading for this unit. Provide the URL of the site along with a brief explanation of the characteristics that make the site a poor example.

Not so good :

http://www.summercore.com

The design is hodge-podgy and there is no clear heading to describe what this website is about. Someone would eventually find out the purpose of this site by clicking on many of the links. There is an inconsistency of typestyles scattered about the page.

http://www.pg-sales.com

This site has a random design and an unthought out eclectic approach to the design. The only interest in the website seems to be extracting money from the customer without any attention paid to aesthetic considerations. There are a variety of unrelated colors and typestyles spread around the scroll up page. Some of the type which appears to be links are not.

U6 Action Assignment 3

Work through Towers Chapter 8: "Fonts and Characters." Experiment with various techniques for displaying and formatting text on your Web pages. Post a page to your web site that demonstates your experiments with typography.

U6 Discussion: Nuggets from Lynch & Horton

Reflect on your readings and action assignments for this unit. Share one nugget of information that you found especially surprising or useful in Chapters 6 and 7 of Lynch & Horton. Discuss how you plan to apply this nugget to your own work.

My U6D1 comment:

U6D1 Style and Graphics
Reflect on your readings and action assignments for this unit. Share one nugget of information that you found especially surprising or useful in Chapters 6 and 7 of Lynch & Horton. Discuss how you plan to apply this nugget to your course project.
One useful bit of information is that files should be saved before they are compressed since the original file is lost during compression.
For an effective editorial style for websites, the sylistic qualities to develop are being frugal, being focused, developing a consistent style, and thinking globally since the websites can be read from all over the world from various cultural contexts and languages.
Links should be created within the context of their purpose and should not be indicated with long sentences or with "click here".
In web graphics, 8 bits of memory can make 256 possible colors (2 to the power of 8). In order to achieve consistency across various browser and computer formats it is best to use browser safe colors. Jpeg images offer in general the most versatility in modify images and they can be opened by practically all contemporary computers.
In creating illustrations, it is best when possible to use vector programs such as Illustrator and Freehand, since vector images -- and not bitmap images -- can retain the same proportions and information without distortion when they are scaled up or down.
I plan to use this information by using primarily vector images and making clearly understood hyperlinks.
Richard
Reference:
Lynch, P. & Horton, S. (2001). Web Style Guide: Basic Design Principles for Creating Web Sites. London: Yale University Press.

U6D1 Comment to Krista:

I'll send you an example later but the vector graphics maintain their clarity and crispness whereas the bitmap graphics become fuzzy, out-of-focus, and pixilated when scaled up or down or compressed.

U6A1 Comment to Addrienne

I think your design is effective and the information in your page is useful as well as clear, simple, and to the point.

U6 Comment to Jim

I think your point about Web pages never completely replacing printed pages is true. I think people will always require at times holding a book and turning pages as opposed to surfing the net or scanning and scrolling on a computer screen.

U7 Multimedia

Animation and sound

Types of multimedia

Sources of multimedia

Sources can be from printed sources or other forms of mass media such as video or audio recordings. Sources can also be obtained from personal art, photographs, videos and recordings. Another good source of multimedia images and sounds is the Internet. Below are a few sites from which multimedia content can be obtained:

U7 Action Assignment and readings

Read Chapters 7 and 8 in Web Style Guide: Basic Design Principles for Creating Web Sites.
Read or review Chapter 4 in Dreamweaver Hands On Training about images. Experiment with adding images and graphics to your Web site. Post any Dreamweaver questions in the CourseRoom.

U7 Action Assignment 2 building pages with images.

Review the readings for this unit. Encapsulate the key ideas and guidelines for images and multimedia, and build one or more pages summarizing the essential knowledge about images and multimedia. The information you include should cover the fundamental rules. Illustrate the main principles with good and bad examples. Modify the existing pages in your site to conform to the best practices for images and multimedia. Add images to other pages of your Web site where appropriate. Upload the revised version of your site

U7D1 Where do you find good images on the web?

U7D1 Share your favorite resources for license-free images on the Web. Provide the URLs and a brief description of the resources available there.

www.msfc.nasa.gov/news/photos/photogallery/chandra/chandra5.htm These are photos from the Chandra X-ray Observatory

http://www.space.com image galleries. This contains many photos and images of space related including some Hubble telescope photos which are also at www.http://hubblesite.org

Also there is a nice slideshow of Hubble photos at http://wires.news.com.au/special/mm/030811-hubble.htm some of which are for sale.

Going at the other end of the scale spectrum one can find photographs of microscopic subjects at http://www.kumc.edu/instruction/medicine/anatomy/histoweb/

http://www.backgroundphotos.com/signup.html has a collection of background photos.

I particularly like the site for clip art that Kenyetta mentioned which is http://www.clipart.co.uk.

Images are used to express concepts that words can not or they can complement what words express.

Images can illustrate verbal concepts (and are indeed sometimes worth more than a thousand words).

Animation can be fun and entertaining and give motion and interest to a site.

Animation can also be used for educational purposes such as demonstrating cellular mitosis or meiosis as is found at http://www.pbs.org/wgbh/nova/baby/divi_flash.html.

Or in illustrating the theory of plate tectonics which is found at http://www.pbs.org/wgbh/aso/tryit/tectonics/shockwave.html (requires Shockwave).

Or in illustrating the motions of the planets as is found at http://planetquest.jpl.nasa.gov/gallery/gallery_index.html.

Here's the beginning of a page using animation: http://www.lc.capellauniversity.edu/~125836/DancerBirdsBallBounce.htm

Some of the clip used was imported from http://www.clipart.co.uk.

U7D2 Using pictures: guidelines and your application

From the readings, list your key ideas and guidelines for th use of images and multimedia in a course room posting. Include in that posting an address for a page you have designed for your own site.

U7D2 Comment to Carol

I like your ideas that the site should remain simple and streamlined. It reminds me of the Henry David Thoreau (1817-1862) quote from Walden: "Simplify, Simplify, Simplify."

I think your site is looking very good and is covering all of the issues addressed.

I meant to write to you before after you had mentioned how to create a navigation panel in Dreamweaver (Insert>Image Objects>Navigation Bar). I have been able to use buttons for navigational purposes but I was wondering how you were able to make the tabs that look like file folder tabs that open each file page when selected with all of the other tabs remaining in place. I assume it is done with some sort of external file such as a CSS external file.

I'd appreciate any thoughts you have about this.

U7D2 Reply to Carol

It's true that content should be relevant, however, relevance is a relative term and sometimes people confuse relevance with familiarity. People often only want is familiar. Or in other words, people expect, and are comforted by, the expected. So sometimes there is a fine line between irrelevance and getting someone's attention which is a concept that is used often, particularly in advertising. The Benetton clothing company is known for that: using surprising, sometimes shocking, images that have nothing to do with clothing just to get the public interested or talking about a particular advertisement and thereby putting their company in the public's consciousness.

Also, it is also true that no viewer wants to sit through a long download time but some large files are loaded incrementally with preloaders so that the viewer starts watching the movie during the download procedure.

U7D2 Comment to Dusty

Your website is well designed, creative, and informative. I am learning a lot just by reading your postings. I think your knowledge of computer design is beneficial to us all.

From Faith's U7D2

Graphics and Multimedia
Create the following button for the home page - Graphics/Multimedia
Buttons for the Graphics/Multimedia page:
Displaying Graphics (Button)
Display monitor and bandwidth capacity greatly infludence the manner in which your web audience will access graphics. Because many web users access the Internet by modem, it is critical to impose limits on the size of files and number of colors that are included in Web graphics.
Terminology:
bit ? smallest unit of information that a computer understands (one electronic pulse).
pixels ? Your computer screen is divided into tiny pixels or picture elements. These pixels turn on or off, depending on the bits of information that are sent to them.
Monitor Resolution. How ?resolved? an image appears on the screen is a combination of the bit depth of the image and the settings of the monitor. You can change the number of pixels and the number of colors your monitor displays.
Colors. ? How good a graphic looks on the screen depends on the number of colors that can be displayed on your monitor. If your monitor can only display 16 colors, then all of the prahics will appear to be lower resolution even if you have millions of pixels on your screen. Even if the graphics are 24-bit, the graphics will appear to be in lower resolution because your pixels can?t display that color depth and your monitor has to fake it.
Browser Safe Colors ? The color management system currently used by Web browser software is based on an 8-bit , 216, (not 256) palette. This color palette is a standardized solution to solve the problem of displaying graphics in a similar way on many kinds of display screens running under different operating systems. To be sure to reach all of your potential Web audience, it is wise to stick with this ratio.
(Try this exercise to experiment with the color and pixel settings on your computer) (Pg 165 of non-designer guide)
Dithering - The process of reducing the color range of images down to the 256 (or fewer) colors seen in 8-bit GIF images by juxtaposing the pixels of two colors to create the illusion that a third color is present.
File Formats(Button)
The two most commonly formats for displaying graphics on the Web are:
GIF ? Graphic Interchange Format popularized by CompuServe
JPEG ? Joint Photographic Experts Group.
Here?s two important things about GIF and JPEG image formats:
They are crossplatform, meaning any kind of computer can view them.
They are compressed, making the file smaller, allowing it to be transferred quickly.
Advantages of GIFs
Transparency ? It?s what lets the background color of a page show through part of an image. You can choose one color in your image to be transparent.
Interlacing ? Graphics appear in layers, each layer adding more clarity to the image.
Animations ? You can create interactive images in GIF format
Limitation of GIF ? limited to a maximum of 256 colors
When to choose GIF: Best used for images with large areas of solid, flat color, such as simple illustrations, web buttons, logos, text as graphics, cartoons, etc..
Advantages of JPEG
JPEG files images can contain 16.7 million colors (24-bit).
When to choose JPEG ? Best for photographs, watercolor images, pencil or charcoal drawings, and other such images where there are subtle transitions between colors.
(Here?s where I will show a example of a photo in GIF and JPEG)
Images on Screen(Button)
Images and multimedia place high demands on the network, the computer, and the user. The challenge for Website designers is in preparing files that are small enough to be accessible to your audience and any other potential users, and to ensure you maintain sufficient quality.
Accessibility- Text is the main medium for presenting information online and the most adaptable for different users and assistive technologies. At the same time, the web is a visual tool and access to images an other nontext materials is one of the reasons why the web is utilized as such a huge information source. Designers must be aware of and incorporate methods to establish images and other multimedia, but not exclude disabled users. If your site uses navigational buttons, graphics and images, it is important to use text alternatives to these images. ALT-text attributes allow you to supply an alternate text description with any images you place on your page.
Audio Facts
Digital audio data is the actual representation of a sound, stored in the form of thousands of individual samples that represent the amplitude (loudness) of a sound at a discrete point in time.
Auido Facts:
Three sampling frequencies most often used in multimedia are:
CD quality = 44.1kHz, 22.05 kHz, and 11.025 kHz.
Digital audio is not device dependent, and sounds the same every time it is played. For this reason digital audio is used far more frequently than MIDI data for multimedia sound tracks.
You can digitize sounds from any source, live or prerecorded.
Sample sizes are either 8 bits or 16 bits.
Streaming audio files begin playing when part of the file has been buffered into the computer?s memory and are dependent upon connection speed.
Considerations:
Because sound is time based, you many need to consider what happens to sounds that are playing in your site when the user goes to a different location
Disk Space, bandwidth as well as the abilities of the authoring system to use various file formats and compression.
Regularly test the sound and image synchronization of your project
Evaluate your sound?s RAM requirements as well as user?s playback setup
Be sure you understand the implications of using coprighted material.
You can purchase and use digitized clip sounds with an unlimited-use royalty-free license.
Video Facts
Video places the highest performance demand on any computer system
Digital has replaced analog as the method of choice for making video for multimedia
Digital video eliminates the image-degrading analog-to-digital conversion
Always import video and sound at the highest resolution and with the least amount of compression
Reduce the resolution and compress the footage later according to your needs
Shoot using a steady shooting platofrm
Analog is rapidly being replaced by digital recording standards for video
Considerations:
Codecs are digital video compression schemes that compress a video for delivery and then decode it during playback.
Streaming video and audio starts playback as soon as enough data has transferred to the user?s computer to sustain playback
MPEG standards provide good media encoding abilities.
CD-ROMs provide an excellent distribution medium for computer-based video
Delivery
Delivery of networked media consists of three main components: the server, the network, and the client machine. These three components must work together in order to deliver good web multimedia to the desktop. So, even if you have a high-end video server and network, if your users are runing low-end desktop machines that cannot handle the demands of playback, you will no doubt be unsuccessful at reaching your audience. Two multimedia delivery methods discussed here are streaming and downloading
Streaming technology
Downloading

U2,8,9 Usability

Usability test plan

List, scenario, script, form observational method

U8 Action Assignments (8/26, 8/29)
(here's where we start talking about user testing)

According to Wikipedia, usability testing is a way for designers to measure how well people can actually use something they have created for its intended purpose. "The aim is for them to observe a real user use their product in as realistic a situation as possible, so as to discover errors and possible areas of improvement."
Once you have built your Web site, created an appealing visual interface, provided an intuitive navigation scheme, and integrated all of the content you want on the site, why should you bother worrying about usability? Because it is not enough to design something that you think is wonderful and intuitive. What's more important is what the users experience when they use it.
In this unit, you will create a plan for the usability testing of your site. In Unit 9, you will carry out the plan for testing the usability, report the results, and make recommendations for changes. Finally, in Unit 11, you will submit your final Web site, including the changes recommended by the results of your usability testing.
Read Chapters 9, 10, and 11 in Don't Make Me Think: A Common Sense Approach to Web Usability.
Action Assignment 8.1:
Create a plan for testing the usability of your Web site that includes the following elements:
a) A list of people you plan to recruit for the usability test. You should have three or four people in your test group and they should be representative of the target audience of your site.

People primarily in the offices of Florence Enterprises in addition to fellow learners in ED722.

b) A set of scenarios that your testers will follow during testing.

The testers will each be in their own offices on their own computers.

Some might perform their usability tests from their home computers.

The testers in Florence Enterprises will be observed by me, the others will be interviewed by me concerning their responses to the issues addressed.

The participants in the ED722 class will be corresponded to via email.
c) A script that you will follow with each tester during testing. Use the sample on page 158 of Don't Make Me Think as a template. (This document is also available for download from Advanced Common Sense.)

Introductory conversation and explanation of the purpose of the usability test. Encourage them to think out loud and ask questions and to respond naturally. However, in such a usability test, the questions should not be answered as to how to use the sight since that is what is being tested.
d) A form that your testers will complete that collects feedback about their experience using your site. The form can contain any combination of Likert-type statements and open-ended questions.

What is your impression of this site?

Is the site clearly labeled?

What is the purpose of the site?

Do you like the graphics?

Do you like the sounds?

Is the site easy to understand?

Is the site easy to navigate?

Is the site interesting?

Would voluntarily return to this site?

What general comments do you have concerning the site?
e) An observation protocol that you will complete with each tester in person.

What is their first question or comment?

What is the first link they click on?

How easy is the sight for them to navigate?

Do all of the links work?

What is the loading speed for the various pages?

Are all of the labels, buttons and links clearly marked and understood?

Are the graphics clear and easy to see and understand?

What is the amount of time spent scanning or reading?
Submit your plan in the CourseRoom as part of a posting; the form for evaluation should be either included within the posting or as an attachment.

U8AA Response to Krista:

I think your introduction of explaining the purpose and procedures of your usability test would put the examiners at ease and I also think your test form questions are all on target.

From Rose:

U8AA1
Action Assignment 8.1:
Create a plan for testing the usability of your Web site that includes the following elements:
a) A list of people you plan to recruit for the usability test. You should have three or four people in your test group and they should be representative of the target audience of your site. [However the nugget that Krug points out is that one user is 100 percent better than testing none].

Using the guideline provided by Badrul Khan (2001), my "Usability Team" would include:

1.
Target trainees (clients) someone who is representative of the group to be trained [Mary Cain a student from the junior class]

2.
Instructional designers: the person (s) responsible for the integrity of the instruction. [Ted Stephens]

3.
Web developers/programmers: the person responsible for the technical delivery of the instruction. [Person from the Center for Instructional Design TBD]

4.
Training/development managers: those responsible for the design and development resources and schedules. [Deb Duley]

5.
Risk manager: the person whose success depends on the clients being trained. [Jill Jacobson]

b) A set of scenarios that your testers will follow during testing.

The usability test has a user perform a set of tasks in a controlled environment where the user's actions and comments can be observed. I will use direct observation of this process in the computer lab in Hayes Hall.

c) A script that you will follow with each tester during testing. Use the sample on page 158 of Don't Make Me Think as a template. (This document was downloaded and modified from Advanced Common Sense.)

Hello team-

My name is Rose Hasenmiller, and I'm going to be walking you through this session.

You probably already know, but let me explain why we've asked you to come here today: We're testing a web site that we're working on to see what it's like for actual people to use it. I want to make it clear right away that we're testing the site, not you. You can't do anything wrong here. In fact, this is probably the one place today where you don't have to worry about making mistakes. We want to hear exactly what you think, so please don't worry that you're going to hurt our feelings. We want to improve it, so we need to know honestly what you think.

As we go along, I'm going to ask you to think out loud, to tell me what's going through your mind. This will help us. If you have questions, just ask. I may not be able to answer them right away, since we're interested in how people do when they don't have someone sitting next to them, but I will try to answer any questions you still have when we're done. We have a lot to do, and I'm going to try to keep us moving, but we'll try to make sure that it's fun, too.

I will be observing you and with your permission I will be making notes. My observations will help us figure out how to improve the site, and it won't be seen by anyone except the people working on the project.

If you would, I'm going to ask you to sign something for us. It simply says that we have your permission to make notes, but the notes will only be shared with the people working on the project. It also says that you won't talk to anybody about what we're showing you today, since it hasn't been made public yet.

Do you have any questions before we begin?

Before we look at the site, I'd like to ask you just a few quick questions. First, what's your occupation? _________________________________________

Now, roughly how many hours a week would you say you spend using the Internet, including email? ______________________________ __________

How do you spend that time? In a typical day, for instance, tell me what you do, at work and at home. ____________________________________________

Do you have any favorite Web sites? ________________________________

Thank you-We're done with the questions, and we can start looking at things.

First, I'm just going to ask you to look at this page and tell me what you think it is, what strikes you about it, and what you think you would click on first. And again, as much as possible, it will help us if you can try to think out loud so we know what you're thinking about.
d) A form that your testers will complete that collects feedback about their experience using your site. The form can contain any combination of Likert-type statements and open-ended questions.

Questionnaire

From Faith:

Usability Testing Considerations:

List of People to recruit for the usability test:

1.
District Technology Coordinator

2.
Spouse

3.
2 teenagers

4.
1 teacher

I plan to recruit the Williamsville School District Technology coordinator to participate in the testing because they are the potential customer, however I also intend to recruit two of my teenage, computer literate children because I feel they will be able to give me an honest assessment from a very outside perspective.

Set of Scenarios:

6.
Navigation – How well do you users understand getting around your site?

c. Hi, ________. My name is Faith Durden. Thank you for participating in this usability test, it will assist me a great deal in ensuring that the usability of my site is the best it can be. As I walk you through this session, don't hesitate to ask questions if you aren't sure about something.

As you know, the purpose of this session is to determine if my web site is working well and to identify potential user problems while working within the site.

I want to make it clear right away that we're testing the site, not you. You can't do anything wrong here. In fact, I'm asking you to help me identify if I did anything wrong in the construction of the site.

I want to hear exactly what you think, so please be frank about your opinions without worrying about hurting any feelings. I am interested in improving the site if at all possible, so I need to know honestly what you think.

As we go along, I'm going to ask you to think out loud, to tell me what's going through your mind. This will help me identify potential navagational glitches.

If you have questions, just ask. I may not be able to answer them right away, since I am interested in how people do when they don't have someone sitting next to them, but I will try to answer any questions you still have when we're done.

I will be taking notes throughout our session, and with your permission, I may mention user testing names and contact information in my final report. This is just in case I may want to contact you in the future. Your information will not be provided to any third parties, and your privacy will be protected. This information will not be seen by anyone except myself and any other people working on the project with me.

I ask that you don't talk to anybody about my project after you go through this testing as it has not been made public yet.

Again, thank you for assisting me in this task.

Do you have any questions before we begin?

Before we look at the site, I'd like to ask you just a few quick questions. First, what's your occupation?

________

Good. Now, roughly how many hours a week would you say you spend using the Internet, including email?

________

How do you spend that time? In a typical day, for instance, tell me what you do, at work and at home.

________

Do you have any favorite Web sites?

________

Now, finally, have you bought anything on the Internet? How do you feel about buying things on the Internet?

________

And what have you bought?

________

OK, great. We're done with the questions, and we can start looking at things.

________

First, I'm just going to ask you to look at this page and tell me what you think it is, what strikes you about it, and what you think you would click on first.

And again, as much as possible, it will help us if you can try to think out loud so we know what you're thinking about.

d. User Testing Questionnaire

Please fill out this Likert Scale by scoring each question on a scale of 1-5 with 5 being the highest and 1 being the lowest.

It was easy to locate information on the site through proper organization of topics.

1 2 3 4 5

All links were relevant and working properly.

1 2 3 4 5

Moving around within the site was easily identified.

1 2 3 4 5

The home Page made it obvious what the subject of the site is.

1 2 3 4 5

The images, fonts, and other graphics on the site were relevant and helpful and added to understanding the site.

1 2 3 4 5

The site is attractive overall in color, contrast, text, and layout.

1 2 3 4 5

Did you find anything missing on the site that you feel would aide in a better understanding the topic? If so, please explain

________________________________________________________

What Suggestions do you have for improving the site?

__________________________________________________

Observation Protocol:

I did consider video taping the sessions, but I decided not to do so. I think there is value to this, but quite frankly, I would rather directly observe and take notes. I just don't see myself going back and reviewing all the coverage. I also think that everything can be adequately captured through observation and the feedback form from the participants. If I were creating a larger site with a much larger corporation or audience, I would certainly consider videotaping.

U8D1 Usability resources

Browse some of the Web resources related to usability. These resources are listed in the Overview section.

All of the usability sites should themselves be very usable (if they are worth their salt) and http://www.pixelmedia.com satisfies that requirement but it did not have a home page link on each of its pages but one can find the home page by clicking on the upper left logo. Also, some of its drop down menus obscured some of the other type on the page and I think that practice should be avoided. The tones used in the site are muted which is easy on the eyes.

http://www.truematter.com has a much more clear and appealing approach to its design and all of the labels are clearly marked and its pages are informative but some of the links when clicked made the pages jump around unintentionally.

Steve Krug's site http://www.sensible.com/index.html was OK but a little on the ordinary side, or perhaps bare bones, for him to have written the text book about usability. And the king of usability Jakob Nielsen's site, http://www.useit.com, seemed a little bland and disorganized also did not have a home page button on each page. Virginia Tech's site, http://www.edtech.vt.edu/index.html, is well constructed and follows the principles of usability. Usable web, http://usableweb.com/, is full of usable links but I think it could use some graphics or visuals.

(a) Reflect on your readings and action assignments for this unit. Share one nugget of information that you found especially useful from these resources. Discuss how you plan to apply this nugget to your course project.

Usability testing should be done as the website is being developed and not when it is completed and ready to be published on the Internet.

(b) Share one guideline from these resources that you disagree with. Discuss how your design departs from this guideline, and provide your rationale.

I think a successful usability test need not cost a great deal to be effective. Probably the greatest cost in performing them would be hiring professions to execute them but I think testing the determining the usability of a site (but not necessarily the content) could be done by nonprofessionals to determine how the general public responds to the tasks involved in navigating a website.

References:

Krug, Steve. (2000). Don't Make Me Think: A Common Sense Approach to Web Usability. Indianapolis: New Riders Publishing.

Lynch, P. & Horton, S. (2001). Web Style Guide: Basic Design Principles for Creating Web Sites. London: Yale University Press.

Web ResourcesOver the length of your course, you may find the following suggested sites useful for your research, to expand your understanding of a particular topic or to stay current in your field.

Web Style Guide (Web site accompaniment to the Lynch and Horton text).
Advanced Common Sense (online home of Steve Krug).
Jacob Nielsen's Web site on usability.
Ten Usability Heuristics.
Ask Tog: First Principles of Interaction Design.
SIGCHI Special Interest Group on Computer-Human Interaction.
Web interface design.
Alertbox: Jakob Nielsen's Column on Web Usability.
Usable Web: 1056 links about Web usability.
Usability testing.
Usability and accessibility.

U8D1 response to Carol.

I agree with you that using a camcorder might not give as accurate a picture as personal observation. It might have the effect of making the participants freeze up and act unnaturally and self-consciously to their usability testing environment.

U8 Response to Brad

I just reviewed the Morae usability evaluation system and I think something like that would be a wise investment for people and organizations making such evaluations of websites and computer use. I think there is always room for expert advice in all areas including website design, particularly in the areas of technology, design, and informational content, but usability is determining how well the layman or general user of a site or a computer navigates so that is the reason that I did not think there should be great costs involved in those sorts of evaluations.

Reference:

http://www.techsmith.com. Retrieved on August 29, 2004.

U9 General Discussion
current web addresses

Post general questions here; below are current web addresses.
These are what I have as of 8/15:
Brad Hokanson: http://www.lc.capellauniversity.edu/~bhokanson/ED722/
Bethany Bovard: http://reta.nmsu.edu/~bethany/
Richard Bloodworth: http://www.lc.capellauniversity.edu/~125836/
Dusty Crocker: http://www.lc.capellauniversity.edu/~138956/722index.html
Kathleen Cairns: http://www.lc.capellauniversity.edu/~124708/KCairns_Interface2.htm
Margie Cribb: http://www.lc.capellauniversity.edu/~
Michelle DiGiovanni: http://www.lc.capellauniversity.edu/~147827
Jim Doran: http://www.lc.capellauniversity.edu/~134089/
Faith Durden: http://www.lc.capellauniversity.edu/~fd8710/Webfolder/
Rose Hasenmiller: http://www.lc.capellauniversity.edu/~rh5071/
Golda Lawson-Cohen: http://www.lc.capellauniversity.edu/~gl7522/ed722/
Adrienne Martin: http://www.lc.capellauniversity.edu/~136190/
Kevin Pyatt: http://www.lc.capellauniversity.edu/~131082
John Rivoire: http://jrivoire.com/ED722
Krista Roehrig: http://www.lc.capellauniversity.edu/~008781/
Angelo Spears: http://www.lc.capellauniversity.edu/~140261/?N=D
Kenyatta Thigpen: http://www.lc.capellauniversity.edu/~125293/
Joy Thomas: http://ftp.lc.capellauniversity.edu/~135969/tutorial1/Interface_Design/
index3.htm
Carol Trussell: http://www.lc.capellauniversity.edu/~150881/

U9 Action assignments:
Testing, results, and changes to your web site.

Action Assignment 9.1:
Implement your plan for usability testing. Collect data on how your testers perform in the various scenarios you have created. Be sure to include your own observations of the testers as well as their reports.
TIP: Consider tape-recording the sessions so that you have a complete record of the testers' reactions without having to take down every word. It will, however provide you with a massive amount of data. The best part of recording is that you are free to watch what's going on.
Action Assignment 9.2:
Report the results of your usability tests in the CourseRoom. Do not report the results of every individual test; instead, provide a summary of their reactions and ability to perform the scenario. Keep the format simple; use a narrative style like that of the example on page 173 of Don't Make Me Think.
Action Assignment 9.3:
Provide a list of changes to your Web site suggested by the results of your usability test. Provide a rationale for each change. (NOTE: You are not expected to make every change suggested by every individual who tested your site. Choose the changes that will (a) provide a remedy to the most significant or greatest number of issues identified by your testers, and (b) are within your ability and time constraints to complete.)
You will submit the final version of your Web site in Unit 11

U9D1 Nugget from user testing(9/2, 9/5)

Describe one discovery that you had during your usability testing -- something that made you say "aha!" Briefly describe the situation and what the user did to help you make this discovery.

U9D2 Your process of user testing (9/2, 9/5)

What challenges and unexpected issues did you encounter in your usability testing? How did you deal with them? What would you do differently next time?

Here's the beginning of a page using animation: http://www.lc.capellauniversity.edu/~125836/DancerBirdsBallBounce.htm

My url address is http://www.lc.capellauniversity.edu/~125836.

Carol, These are really good clip art sources – I've added the addresses to my address list. Thank you, Richard

I meant to write to you before after you had mentioned how to create a navigation panel in Dreamweaver (Insert>Image Objects>Navigation Bar). I have been able to use buttons for navigational purposes but I was wondering how you were able to make the tabs that look like file folder tabs that open each file page when selected with all of the other tabs remaining in place. I assume it is done with some sort of external file similar to a CSS external file.

I'd appreciate any thoughts you have about this.

It's true that content should be relevant, however, relevance is a relative term and sometimes people confuse relevance with familiarity. People often only want to see what they have seen before. Or in other words, people expect, and are comforted by, the expected. Sometimes there is a fine line between irrelevance and getting someone's attention which is a concept that is used often, particularly in advertising. The Benetton clothing company is known for that: using surprising, sometimes shocking, images that have nothing to do with clothing just to get the public interested or talking about a particular advertisement and thereby putting their company in the public's consciousness.

Also, it is also true that no viewer wants to sit through a long download time but some large files are loaded incrementally with preloaders so that the viewer starts watching the movie during the download procedure.

Bibliography

Green, Garo with Weinman, Lynda. (2003). Macromedia Dreamweaver MX 2004 Hands-On-Training (2003). Indianapolis: Peachpit Press.

Krug, Steve. (2000). Don't Make Me Think: A Common Sense Approach to Web Usability. Indianapolis: New Riders Publishing.

Lynch, P. & Horton, S. (2001). Web Style Guide: Basic Design Principles for Creating Web Sites. London: Yale University Press.

Tolbert, J. & Williams, R. (2000). The Non-Designer's Web Book. Berkeley, CA: Peachpitt Press.

Towers, J. Tarin. (2003). Macromedia Dreamweaver MX for Windows and Macintosh – Visual Quickstart Guide (2003). Berkeley, CA: Peachpit Press.

Green, Garo with Weinman, Lynda. (2003). Macromedia Dreamweaver MX 2004 Hands-On-Training (2003). Indianapolis: Peachpit Press.

We've now moved into phase of the course where we're finishing the project and discussing what we've learned. (All of a sudden it's just about done.) Please post your answers to the following:
What has been your most significant learning experience in this course to date?
How would you evaluate your course experience overall?

How actively have you been engaged in the CourseRoom thus far?
What plans do you have for the rest of the course to assure continued engagement with the course content and other learners?

As you have recently heard, the School of Education will move to Capella?s new Courseroom on October 4, 2004. To help you prepare to use the new Courseroom, Capella has created a Courseroom Orientation page which includes numerous resources such as a Courseroom tour, a readiness checklist to guide you through the preparation process, tutorials on using various features in the new Courseroom, and information about the technical requirements for the new Courseroom.
This week, please watch the Courseroom Tour for an overview of the new Courseroom and its features. Next week, please return to the Courseroom Orientation to review additional resources, including the ?LearningSpace vs. new Courseroom? presentation and the Tutorial on Courseroom features.
The Courseroom Orientation is continually being expanded and updated, so we encourage you to bookmark it and return every week. Fully utilizing its resources will make it much easier to adjust to the new Courseroom in October.
You can find the Courseroom Orientation page here:
http://www.capella.edu/PORTAL/LEARNER/SCONTENT/CENTERS/LEA
RNER/orientation/courseroom.asp

Post questions and discussion issues here; below (soon) are the current web addresses.
These are what I have as of 8/15:
Brad Hokanson: http://www.lc.capellauniversity.edu/~bhokanson/ED722/
Bethany Bovard: http://reta.nmsu.edu/~bethany/
Richard Bloodworth: http://www.lc.capellauniversity.edu/~125836/
Dusty Crocker: http://www.lc.capellauniversity.edu/~138956/722index.html
Kathleen Cairns: http://www.lc.capellauniversity.edu/~124708/
Margie Cribb: http://www.lc.capellauniversity.edu/~
Michelle DiGiovanni: http://www.lc.capellauniversity.edu/~147827
Jim Doran: http://www.lc.capellauniversity.edu/~134089/
Faith Durden: http://www.lc.capellauniversity.edu/~fd8710/
Rose Hasenmiller: http://www.lc.capellauniversity.edu/~rh5071/
Golda Lawson-Cohen: http://www.lc.capellauniversity.edu/~gl7522/ed722/
Adrienne Martin: http://www.lc.capellauniversity.edu/~136190/revised%20images/index.htm
Kevin Pyatt: http://www.lc.capellauniversity.edu/~131082
John Rivoire: http://jrivoire.com/ED722
Krista Roehrig: http://www.lc.capellauniversity.edu/~008781/
Angelo Spears: http://www.lc.capellauniversity.edu/~140261/?N=D
Kenyatta Thigpen: http://www.lc.capellauniversity.edu/~125293/
Joy Thomas: http://ftp.lc.capellauniversity.edu/~135969/tutorial1/Interface_Design/index3.
htm
Carol Trussell: http://www.lc.capellauniversity.edu/~150881/

Action Assignment 11.1: Complete all changes to your Web site that you recommended in your usability testing report. Upload your final version. Introduction and Objectives: In this unit, you will post your course project and have the opportunity for peer and instructor feedback. If you want feedback on specific aspects of your course project, state what these are when you post in the CourseRoom. The only assignments in this unit are to post your final project and provide feedback to your classmates on their projects. I've listed the project needing to be up by June 17; this will allow your peers to review and comment on your work. Be sure to make any changes to your course project before the due date. Attachments: Error! Hyperlink reference not valid.

To enable the threaded view, edit your Profile and select "Yes" for "Show threads in CourseRoom posts."

Evaluate the Web sites of two other learners and provide feedback to them regarding usability and design.

Webliography

http://www.lc.capellauniversity.edu/~bhokanson/ED722/

http://160.94.18.249/hokanson/brad.html his home page

www.ubergeek.tv http://www.nathan.com

Course participants' url web addresses: for art: www.clipart.com http://www.1clipart.com/ http://www.clipart.co.uk http://www.fg-a.com/ http://www.fotoclipart.com/ coolhomepages.com gettyimages.com

FOLDER TAB STYLE FORMATS at http://labs.silverorange.com/archives/2003/september/simplecsstabs

http://www.about.com
The Art Institute of Chicago
http://www.artic.edu
CNET
http://www.cnet.com
Disney
http://www.disney.com
Drugstore
http://www.drugstore.com
Explore Minnesota
http://www.exploreminnesota.com
Federal Highway Administration
http://www.fhwa.dot.gov
FedEx
http://www.fedex.com/us
Ford Motor Company
http://www.ford.com
The George Washington University
http://www.gwu.edu
Microsoft
http://www.microsoft.com
MotherNature.com
http://www.mothernature.com
MTV
http://www.mtv.com
New Scientist
http://www.newscientist.com
News Now
http://www.newsnow.co.uk
PBS
http://www.pbs.org
RedHerring
http://www.redherring.com
Slusser's Green Thumb
http://www.slussers.com

Notes used in the ED722 Course:

FROM BETHANY'S WEBSITE:

Absolute Basics

The concepts of contrast, repetition, alignment, and proximity apply to just about every aspect of web design. Follow them in your web design to give your site a more professional look.

Contrast

Text should contrast nicely with backgrounds, links should contrast with regular text, etc.

Repetition

Layouts, navigation elements, colors, and other things can be repeated throughout your site in order to make navigating and using your site more easy.

Alignment

Stick with one alignment scheme. Don't left align some text and then right align other text.

Proximity

Things that belong together (heading and paragraph, image and caption, etc.) need to be visually closer to each other than to other things.

Contrast

Contrast helps you create visual appeal on your web pages. It also helps you emphasize the important elements of your page by creating a visual hierarchy.

Create contrast in your pages by introducing different colors, different fonts, images, and even different textures. For example, headings help organize the content of your site, so they should contrast with the body text. And, links presumably are important (else why are they there?) so they should contrast with body text.

But, too much contrast creates visual clutter, making your pages hard to read. Don't use too many colors, fonts, or images because you will detract from the message of your site.

Alignment

These two examples demonstrate the concept of alignment. In HTML, you can align text and images left, center, right, or fully justified. When all the elements on a page are aligned the same way, the visual hierarchy of the page is enhanced so the page is easier to read.

Proximity

These two examples demonstrate the concept of proximity. To create a sense of proximity, you should group items that belong together and use white space to empasize those groups.

Planning

The design of a web site is determined by the purpose and goals of the site, the needs and characteristics of the potential audience of the site, the content of the site, and the technology available to both the site's developer and the site's audience. A good plan, taking all these factors into consideration, will help ensure that you design a good site.

This section on planning contains the following subsections:

Goals

The purpose and intent of your site, and the length of time you want to spend creating and maintaining your site are just a few of the things discussed in this subsection on goals.

Audience

Technical skills, content knowledge, and reasons for visiting your site are all audience characteristics that will be discussed in this subsection.

Content

Gathering and creating content for your site will be discussed in this subsection on content.

Technology

The impact of technological skills of the designer (you) and your audience and how they impact site design will be discussed in this subsection.

Goals

You should make a list of your site purpose and goals during the planning stage because they will impact what content you include in the site, how you organize the site, what type of navigation scheme you will use, and what type of technology you will use.

Some questions you should consider:

1.	Why are you creating the site?
A site created to sell something looks and feels a lot different than a reference site.

2.	Who is your audience?
Structure, organization, and content of a site for people new to the Internet will be different than a site for people who are Internet savvy. A site for adults will be different than a site for children.

3.	What type of technology can you/will you use?
Your technology skills and the technology skills of your intended audience impact your design choices. You won't want to use Flash, for example, if your audience won't know how to download and install the player.

4.	How much time can you devote to designing and maintaining the site?
In general, the more technology-laden and content-heavy the site, the more up-front design time you will need. Also, will your content need constant updating or is it fairly static?

5.	How will you evaluate the effectiveness of your site?
If you want to track site visitors or get feedback from visitors, you will need to have some type of site tracking software or database to collect data that you can analyze for

Audience

[who is using site, impact on content, navigation, page layout, design, writing style]

Content

[gathering, creating, and organizing content based on goals, audience]

Technology

[skill of developer, technology available, impact of audience/goals/content on technology choices]

Navigation

Your navigation scheme should do three things for users. Briefly, your navigation should:

tell them how to get from one place to another in your site,

tell them where they are in your site, and

give them a good overview of what is contained in your site.

Before you can create a navigation scheme, you should know what content will be included on your site and you should organize that content in a way that will make sense to the users based on why they are using the site. Then, you can pick a navigation style and set your global (site) and local (page) navigation.

Styles

There are many different styles of navigation, from menu trees and tab navigation bars to drop down menus and iconic menus. This subsection will introduce you them and provide examples of each.

Global

The navigation between pages of your site, or global navigation, is based on and reinforces the organization of content in your site. You will learn more about global navigation in this subsection.

Local

Once your user gets to a particular page in your site, he or she will have to be able to navigate within that page easily. This subsection will detail various means of local navigation.

Styles

If you have spent any time surfing the Internet, you've probably seen a variety of navigation styles. Some are probably more intuitive to you, while others may be less so. However, there is no "best" navigation style, only styles that fit the purpose of the site and styles that don't. As you review some of these styles, think about how they may or may not work for your site.

Tab menu

This style of navigation is based on the metaphor of an index filing system and most people recognize it as a navigation element right away. One good example of a tab menu is found at Amazon. As you look at Amazon's tab menu, notice that the navigation included both primary (major sections) and secondary (subsections) navigation and that color is used to indicate which tab you are currently viewing. Also, notice that a tab is selected (the welcome tab) when you first enter the site. This makes it more obvious that the tabs are for navigation.

Tab menus are typically done with images in a table structure or, recently, with CSS programming. They can be fairly complex to create.

Index menu

In index menus, all the information is structured within a table of contents. This style of navigation is also fairly easy to use and recognized by most people; however, depending upon the size of your site, they can be overwhelming. Web Style Guide provides a good example of an index menu (and its also an excellent resource for web designers).

Index menus can be fairly simple to implement if you use text links, or they can be complex affairs using XML, javascript, or CSS.

Pull-down menu

This style of menu can successfully organize large amounts of content, especially if you have a site that has several layers of navigation. There are some successful examples, such as the one found at the ASCD, but they can be tricky to use, especially for users who have difficulty using a mouse.

Pull-down menus are usually created using javascript or DHTML, putting them in the realm of advanced web design.

Graphic menu

Graphic menus, like this one for Virtual School can be quite visually appealing; however, they often take some time to download and some people may be confused by what is clickable.

Graphic menus require a decent understanding of a image editing program and html, so they fall under the intermediate web developer category.

Icon menu

This style of menu relies upon using small images, or icons, to represent ideas. Typically, the icons are also labeled for clarity. A good example of an icon menu is located at Virtual Body(click on either the English or Spanish version to see icon menu).

Icon style menus can be simple or complex to create, depending on whether you want to create your own icons (difficult) or find some on the web.

Other menus

There are other types of menus, such as button menus, as well as sites that use a combination of menu styles. The next time you surf the Internet, pay attention to the navigation style and what it is used for. In that way, you will be able to make a more informed decision about the type of navigation style you want to use for you own site.

Global

Global navigation refers to the navigation used to move between sections and pages of your site. Aside from the navigation styles listed in the Styles subsection, other forms of global navigation include site maps, indexes, and site searches.

Assuming that you have already planned the organization of your site content, the first thing you need to decide is where you are going to place your navigation elements. Will you put them at the top of the page, on the left or right side, or a combination?

Some studies suggest that most users prefer navigation on the left side of the screen, while others state that users prefer navigation at the top. Each has it advantages and disadvantages, but your decision should depend primarily on your audience.

Once you have decided where, you need to decide how. Will you use text links? Buttons? Icons? Drop-down menus? In part, this decision will be based on your web development skills. However, you will also have to decide based on your audience. For example, if you audience mostly connects via modem, then text link navigation might be better because a graphic-intense site may not be appropriate due to long download times.

more coming...

Local

By local navigation, I mean navigation within a specific page. Local navigation elements include anchors (links from one part of a page to another part of the same page), multimedia control (stop, pause, and play in a Flash animation, for instance), and even layout structures (bold headings, visible table elements, etc.) that help the user visually navigate through the contents of your page.

Anchors are particularly useful when you have a lot of content on one page. A list of text links at the top of the page that link users to segments of your page not only help the user navigate, but also tell them at a glance the kind of content they will find on the page. If you use anchors, put a "top" link at the end of each section so the user will not have to scroll so much.

If you include multimedia elements, such as movies, audio clips, or animations, it is a good idea to provide multimedia controls (stop, pause, rewind, etc.) on those elements so users can view or listen to them at their own pace.

Finally, a good page layout can be the ultimate navigation element. The eye is attracted to contrasting elements (bold headings above paragraphs, for example) and the contrast helps break up the page visually into component parts, making the page much easier to scan and navigate.

Text

When it comes to text on web pages, there are three basics you should keep in mind:

Your choice of typefaces, fonts, layout, and even writing style will significantly impact the overall design, readability, and legibility of your site.

You have little control over how text appears on the user's monitor: operating systems, browser settings, and monitor resolutions all play a part in how text is rendered on the user's screen.

You will have to compromise between readability (ease of reading long passages of text) and legibility (ease of reading short passages of text) when considering accessibility.

Typically, when you read about text on web sites, it will be refered to as typography. Typography can be defined as the creative arrangement of letters on a page to serve both aethetic and functional purposes. In this section, you will read about type and layout (the two aspects of typography) and writing style.

Type

Serif versus sans serif typefaces, screen versus print fonts, Mac versus PC fonts, and leading and kerning are all addressed in the subsection labeled type.

Layout

Headings, paragraphs, ordered (numbered) and unordered (bulleted) lists, line length, scanability, and other text layout issues are addressed in the subsection labeled layout.

Writing style

Audience, site purpose, and content all affect your writing style. These ideas and more will be covered in the subsection labeled writing style

Type

Basic terms

Font - a complete set of characters in a particular style and size of type. Arial, Arial Bold, and Arial Italic are three examples of fonts in the typeface Arial.

Typeface - a coordinated set of letter designs that make a complete alphabet. Times New Roman, Arial, and Comic Sans are typefaces. Typefaces are categorized as either serif, sans-serif, or decorative.

Serif - a typeface that has extenders on the letters like

Sans-serif - a typeface with no extenders like

Legibility - the ease of reading short bursts of text

Readability - the ease of reading long passages of text

Basic concepts

System fonts - each operating system has a basic set of fonts installed. Some fonts are installed only on Windows operating systems, some are installed only on Mac operating systems, and some are installed on both and are considered cross-platform fonts.

Cross-platform fonts - the fonts of typefaces Arial, Comic Sans, Courier New, Georgia, Impact, Times New Roman, Trebuchet, and Verdana have been installed on most Windows and Mac operating systems for the past several years.

Bitmapped fonts - fonts that look better when viewed on a computer screen because they fit neatly into the pixels of a monitor. Good examples of bitmapped sans-serif fonts are Arial and Geneva; good examples of bitmapped serif fonts are Times New Roman and New York.

Resolution - Mac screens typically display at 72 pixels per inch, while Windows screens usually display at 96 pixels per inch. The result is that a 12 point font looks more like a 10 point font on a Mac screen.

Basic guidelines

1.	Use bitmapped fonts for text that will most likely be read on screen.

2.	Don't use text that is too large (greater than 14 points) or too small (less than 10 points).

3.	Don't italicize or bold large chunks of text.

4.	Give your users as much control as possible over font and font size to make your pages more accessible.

Layout

In the section on Basics, you were introduced to the principles of contrast, repetition, alignment, and proximity. Those principles apply to everything on your web page, including text, and are very relevant to how you layout your text on the page.

When you lay out your text on a page, you want to use those principles to create a visual hierarchy of content. A strong visual hierarchy not only looks better, but makes your pages easier to read and understand. The example below illustrates layouts with and without a strong visual hierarchy.

Multimedia

Adding multimedia elements to your web site can make your site more interesting. Additionally, from a learning standpoint, multimedia can help you address the various learning styles of your audience, providing a richer learning experience for all.

On the other hand, multimedia elements frequently take longer to download and create accessibility and usability issues for some of your users.

If you decide to use multimedia elements in your site, this section can help you.

Images

Image formats, transparency, aliasing and anti-aliasing, resolution, and compression are covered in this subsection on images.

Audio

Audio formats, compression, and plug-ins are covered in this subsection.

Video

Video formats, compression, video size, and plug-ins are covered in this subsection.

Animations

Flash and animated gifs as well as plug-ins are covered in this subsection.

Images

There are many occassions when you might choose to add images to your site: Perhaps you want to use a special font for your banner (similar to what I did on this site), or maybe you want to illustrate a lot of data using a chart, or you might even want to put your photo on your site so your students know who you are. In each case mentioned, you would have to make different choices regarding image format.

Image formats

Unless you expect your users to download special software, there are only three image formats you should use on your site. The two most widely used image formats are .gif and .jpg. Another format that can also be used is .png. All three formats have their uses

GIFs - excellent for images with few (less than 256) colors or flat (no fine gradients of color) color like logos, icons, charts, and line drawings. GIFs use lossless compression techniques, which means no data is lost when they are compressed. So you can open GIF images, retouch them, and resave them without degrading the image.

JPEGs (.jpg) - excellent for photographs because they can support more than 16.7 million colors. JPGs use lossy compression techniques, which means some data is lossed when they are saved. So, retouching and resaving the image degrades it.

PNGs - are similar to GIFs but they support 24 bit color. Older browsers don't support the PNG format, so don't use it unless you know your audience has newer browsers.

Image examples

Since a picture is worth a thousand words, and since this is about images, a few examples are in order. And, as these examples will show, you may not be able to perceive a great deal of difference between the formats for some images, but the size will vary greatly. Images on the web are always about compromizing between size and quality.

Audio

Audio in your web site can be used for many purposes, such as presentation narrations, background music, and even feedback sounds. Additionally, you could use it for teaching purposes. For example, audio clips of native speakers of a language or snippets of bird song would be useful in language classes or birding classes, respectively.

For users to listen to audio on your site, they will need a plug-in that handles audio files. Fortunately, most computers now come standard with either Windows Media Player (Windows) or Quicktime Player (Mac), which are the plug-ins necessary to playback digital audio on the web. However, it is good practice to provide links to the free downloads of those plug-ins in case your user does not have them.

There are a variety of audio file formats for the web, including .ai, .aiff, .au, .mp2, .mp3, .ra, .snd, and .wav. Each has its own strengths and weaknesses. For example, .au and .snd files are fairly universal, but tend to require long download times (they are large files).

The size and quality of audio files are determined by the sampling rates. Typical sampling rates are:

1.	11,000 times / sec - telephone quality, small file size

2.	22,000 times / sec - CD quality, medium file size

3.	44,000 times / sec - FM radio quality, large file size

Audio files can be linked or embedded in your web page. A linked file has to be clicked on to be heard. An embedded file plays in the background.

Usability

Usability is impacted by all aspects of your site, from the consistency of your site design throughout all its pages and the way you organize your content to your writing style and organization of the content on individual pages.
If you want your students to get the most of your classroom web sites, then you must make your site as usable as possible. Otherwise, they will spend more time trying to figure out your site and less time actually learning the content.

From Dusty:

Typography

Perhaps the most important part of interface design is the use of typography. This section will teach you how to maximize the legibility and readability of your body copy, headlines, and subheads in your Web site.

Two Web sites which demonstrate an excellent use of typography are Adobe and Apple. Below is a link critiquing the type on these sites and links to the actual sites. Each link opens in its own window. Just close the window to return to this page.

Read Typography Critique

Adobe.com

Apple.com

The type you choose has a big effect on two characteristics of your Web design: Legibility and Readability. Legibility refers to how easy it is to recognize short bursts of text. Readability refers to how easy it is to read a lot of text. Basically, sans serif type, like you see here is best for legibility and serif type is best for readability.

Since most Web sites are dependent on short bursts of copy, sans serif is generally the best choice.

In addition to serif and sans serif type, there are novelty and script typefaces like you see below:

Be careful when using script and novelty typefaces. If the user doesn't have these faces installed on their computer, they will not be able to see them in your site. Even though they you may be able to add the type as images (as I did above), the readability of novelty and script typefaces is not always what you want. Generally, you will use these typefaces sparingly, when you are trying to achieve a certain visual appeal

Emphasis tells your audience which type should receive more of their attention. In this way, emphasis creates a heirarchy on the page which guides the reader through the information in a logical way. Emphasis also breaks up the page so it doesn't become monotonous.

Emphasis can be created in a variety of ways, but not all of them should be used. For example...

ALL CAPS

This creates emphasis but has proven to be difficult to read. It is also the equivalent of raising the volume of your voice or shouting. All caps can be used, but do so with care.

In Web sites, underlined type usually means there is a link present in the type. Even in print, underlining is ugly and amatuerish. There are better ways to create emphasis.

Better ways to create emphasis include using...

Bold Face

Italics

The best way to create emphasis is to create contrast between the emphasized type and the body copy. Read more about contrast on the contrast page.

Contrast refers to the difference between two pieces of type. Contrast can be used to create emphasis or to provide a more aesthetic, visual appeal to your site. Notice the headline above. Not only is it larger and bolder than the body copy, it is actually a graphic image of the word set in Helvetica Neue Bold Condensed. Because it is an image, it will always contrast with most default body copy defaults.

As discussed on the Emphasis page, making the type bold or italic creates contrast and, therefore emphasis. You can also create emphasis by changing the color of the type...

or by changing the size...

But one of the best techniques is to add contrast to two different pieces of type by using two very different fonts. Typically, this is used to create graphic appeal, but it also adds emphasis. Below are some examples:

The following are a few experiments using HTML type:

Default Times New Roman or Serif #4

Default Verdana, Arial, Helvetica, Sans Serif #1

Following is body copy set to justify...

We the people of the United States, in order to form a more perfect union, establish justice, ensure domestic tranquility, provide for the common defense, promote the general welfare and ensure the blesnd establish this Constitution of the United States of America.

Copy below uses the Text Indent feature in Dreamweaver:

We the people of the United States, in order to form a more perfect union, establish justice, ensure domestic tranquility, provide for the common defense, promote the general welfare and ensure the blessings of liberty for ourselves and our prosperity, do ordain and establish this Constitution of the United States of America.

2.	This copy is set using an ordered list.

4.	Hitting return automatically puts in a new number. If you type longer than one line, it automatically indents.

Unorderd lists can be created with bullet points in the same manner.

Here's the second line.

There's not a lot of control in the way lists are ordered. But there is even less control when you try to work type and images together.

Below is my attempt to do a text wrap around a photo:

Color Correction

Photoshop is an essential tool for creating color correct images for the Web. The first step in managing images is to open them in Photoshop and correct the color of the images. Follow the steps below to correct photos:

1. After opening the image, go to the menu bar and choose Image>Adjustments>Levels. The illustration below shows an image which requires a levels adjustment and the Levels dialog box:

2. There are three sliders at the bottom of the "Histogram" (the solid black image which maps the photo across 256 levels of tone). Move the black slider on the far left to the edge of the histogram. Move the white slider on the far right to the edge of the histogram. And finally move the gray slider in the middle to where the majority of the black resides in the histogram. Note the change on the image below:

Although there are other, more sophisticated color correction techniques, this one will work for the majority of your photos.

Optimizing Images

Photoshop can be used to prepare any image for the Web. There are three simple steps to follow to optimize correctly.

1. The image must be in RGB color mode to show up on the Web. This includes images that black and white. To convert an image to RGB go to the menu bar Images>Mode>RGB.

2.The image must be changed to the correct dimensions and resolution before importing them into your Web authoring software. Attempting to resize an image once it is imported into Dreamweaver or GoLive will create problems. To adujst the size go to the menu bar Images>Image Size. In the dialog box change the pixel height and/or width to fit your design and change the resolution to 72 ppi. 72 ppi is the most you will need for a Web site:

3. The next step is to save the image for the Web either as a GIF or a JPEG. You may also save the file as a PNG if you are going to export the image to Flash. To optimize the file go to the menu bar File>Save for Web to pull up the optimizer. The most crucial decision to make is whether to use GIF or JPEG for your file. Generally, photographs look better as JPEGs and images with flat color and smooth shapes such as type or line art look better as GIFs. To view some good and bad optimized art, click the links below:

To make animated GIFs

Adding motion to your site can create the type of attention-getting dynamic which makes your site very special. One method for creating animated GIFs is to use Imageready which comes bundled with Photoshop. The animation below was created in this way.

To create this type of animation, build a file in Photoshop and then switch to Imageready by going to the menu bar File>Edit in Imageready. Once the image has opened in Imageready, open the Animation palette by going to the menu bar Window>Animation. In the Animation palette one frame will appear. Basically, it is whatever is visible in the main image window. When you change an image in the main window, it will change in the animation palette as well.

To create an animation, click the tiny page at the bottom of the animation palette to create a new frame.

Flash Animation

Macromedia Flash allows you to create much more dynamic and interesting animation than can be created in Adobe Imageready. Complete interactivity can be programmed into a Flash animation using a programming language called ActionScript. The animation below was created this way. Click the buttons to view the interactive capabilities of the animation.

Flash is a bit more complicated to learn than Imageready and it requires that the user have the Flash Plugin on their browser in order for them to see the animation. But, as you can see, the power you get from Flash is well worth it!

Color Correction

Photoshop is an essential tool for creating color correct images for the Web. The first step in managing images is to open them in Photoshop and correct the color of the images. Follow the steps below to correct photos:

1. After opening the image, go to the menu bar and choose Image>Adjustments>Levels. The illustration below shows an image which requires a levels adjustment and the Levels dialog box:

2. There are three sliders at the bottom of the "Histogram" (the solid black image which maps the photo across 256 levels of tone). Move the black slider on the far left to the edge of the histogram. Move the white slider on the far right to the edge of the histogram. And finally move the gray slider in the middle to where the majority of the black resides in the histogram. Note the change on the image below:

Although there are other, more sophisticated color correction techniques, this one will work for the majority of your photos.

Optimizing Images

Photoshop can be used to prepare any image for the Web. There are three simple steps to follow to optimize correctly.

1. The image must be in RGB color mode to show up on the Web. This includes images that black and white. To convert an image to RGB go to the menu bar Images>Mode>RGB.

2.The image must be changed to the correct dimensions and resolution before importing them into your Web authoring software. Attempting to resize an image once it is imported into Dreamweaver or GoLive will create problems. To adujst the size go to the menu bar Images>Image Size. In the dialog box change the pixel height and/or width to fit your design and change the resolution to 72 ppi. 72 ppi is the most you will need for a Web site:

3. The next step is to save the image for the Web either as a GIF or a JPEG. You may also save the file as a PNG if you are going to export the image to Flash. To optimize the file go to the menu bar File>Save for Web to pull up the optimizer.

The most crucial decision to make is whether to use GIF or JPEG for your file. Generally, photographs look better as JPEGs and images with flat color and smooth shapes such as type or line art look better as GIFs. To view some good and bad optimized art, click the links below:

Animated GIFs

Adding motion to your site can create the type of attention-getting dynamic which makes your site very special. One method for creating animated GIFs is to use Imageready which comes bundled with Photoshop. The animation below was created in this way.

To create this type of animation, build a file in Photoshop and then switch to Imageready by going to the menu bar File>Edit in Imageready. Once the image has opened in Imageready, open the Animation palette by going to the menu bar Window>Animation. In the Animation palette one frame will appear. Basically, it is whatever is visible in the main image window. When you change an image in the main window, it will change in the animation palette as well.

To create an animation, click the tiny page at the bottom of the animation palette to create a new frame.

Next, make changes in the main image window like changing the opacity or position of an image. The second frame in the animation palette will change, but the first frame will remain the way it was when the file first opened. You now have two frames with two different looks. Click the "tween" button at the bottom of the animation palette to insert the "between" frames which creates the animation. Insert the number of frames you would like to use. A good rule is to consider 12 frames as one second of animation. Notice you can tween position, opacity and effects.

At the bottom of the animation palette you can program the number of times you want your animation to play in the Web site before it stops. Having it play continuously is often distracting to the viewer. The animation on this page is set to play 8 times before stopping. If you want to see the animation again, hit your refresh button, or the Return to Top button on the left.

Flash Animation

Macromedia Flash allows you to create much more dynamic and interesting animation than can be created in Adobe Imageready. Complete interactivity can be programmed into a Flash animation using a programming language called ActionScript. The animation below was created this way. Click the buttons to view the interactive capabilities of the animation.

Flash is a bit more complicated to learn than Imageready and it requires that the user have the Flash Plugin on their browser in order for them to see the animation. But, as you can see, the power you get from Flash is well worth it!