When I first read Jakob Nielsen's book "Designing Web Usability" a couple years ago, I realized that the design principles he recommends are extremely important for those of us designing websites in a University environment. While his suggestions make sense for all websites, I felt that they made particular sense for the types of websites that we create. We are primarily in the business of providing information to our clients/users, and the web is increasingly becoming a popular way to get that information to our audience.

In this essay, I want to bring up some of the most common usability problems and techniques and discuss how these apply to our clients in particular. The other essays you will be reading go over some of the more general aspects of usability and usability testing, but I want to concentrate on how you apply these principles when creating your class websites.

The three problems areas I will talk about:

· Navigation
· Page width and printing
· Animations


The single biggest problem that all web users face is the inability to find the information they need. Only about half of the searches done on the web lead to a successful conclusion. (Nielsen, 2000) Failure to provide consistent, easy-to-use navigation tools is often the culprit. (Discussions of search engines and their shortcomings is too large a topic to be covered in this class, but it also contributes to the problem.)

Having all of your class assignments only available from the home page of your site may seem logical to you, but what if a student wants to progress from one assignment to the other without having to click back to the home page? Or maybe you want your students to progress linearly through the assignments, and to do one assignment a week. But just because that's how you want your students to work doesn't necessarily mean that's how the students will progress. What if the student has done Lessons 3 and 4, but for some reason wants to go back and do Lesson 2 and then skip to Lesson 5? What if they're in the class chat room or message board, and someone makes a comment that gives them insight into one of the class problems, and they want to go directly to that problem immediately? Are there supplemental course materials online that the student would find helpful while doing the assignments? Perhaps cross-linking between the reading material and assignments would be helpful, so students can immediately go to the assignment after finishing the reading, and can link back to the reading as a reference while doing the assignment.

Because you can't predict how students will use online course material, you need to consider how to make it easier for them to get to the content they need. You need to put yourself in their place and try to think of all the different possibilities for accessing the content, and then try and design a navigation scheme that will meet as many of those needs as possible. However, you also have to be careful not to provide too many links and confuse the student. It's a fine line to balance, and you will probably have to tweak your navigation scheme more than once before hitting on the best combination for your class.

Be aware, also, that what works for one online course may not work for yours, so don't assume that all online courses should look the same. An English course will (and should) be constructed very differently than a Physics course. The former might have multiple reading assignments, links to critical essays, and supplemental reading material, with heavy emphasis on discussing the literary work being studied. Quizzes are likely to be essay or short answer in nature. The Physics course will be more technical, with lots of formula references and mathematical concepts. Assignments will be fairly specific, and discussion groups might be more structured. Generally questions in homework and quizzes may only have one "right" answer, although short answer questions requiring some input of the theory behind the answer might also be used.

One more thing to remember, and this is very important: make sure that all of your pages have some way to get back to the rest of your site. There is nothing more frustrating than visiting a page, and finding no way to get back. Do not assume that your users know how to use the "back" button. While it might seem a simple task, you would be surprised how many people don't really know how to use their browsers. Also, there are times when the back button may be disabled by coding in the page, so don't count on it. At a minimum, provide a link back to your site's home page. Links are what make the web useful - don't be stingy in cross-linking sections if it makes sense to do so.

Page width and printing

For years, people have been discussing the "paperless revolution" and how computers would make paper obsolete. By now, of course, we all know that this is not true, and that easy access to computers and the information they contain has often led to increased paper use. This is going to be very true for online courses, as well. While we might hope that students will read all their assignments online, do all their homework on their computer, and email the results to their instructor, reality is much different. We can't assume that students have 24-hour access to our online content, and many people find reading on a computer monitor difficult. Therefore, there is a strong possibility that they will print out the materials for viewing while they are away from the computer lab or their computer.

One of the single most annoying things that I find when I'm surfing the web are sites that use a single fixed width for their page sizes. In many instances, this fixed width is set to 800 pixels, which is the most common monitor resolution. Just because it is the most common, however, doesn't mean it's what the majority of users have. In fact, in this case, most common equals about 55%, which means the other 45% are using something else. So 45% of the users either can't see the whole page and have to scroll from side-to-side, or the whole page fits into a small subsection of the browser window, leaving tons of wasted white space. Not only does this present a problem when viewing the page on the screen, it presents additional problems for users who try to print the page for later reading.

Printers are highly individualistic. You can see this in any word processor program - when you compose the document, it can print very differently depending on the printer you send it to. The same thing happens with websites. In particular, most websites designed for an 800-pixel width will get the right side of the page chopped off when printed. This is a common problem, but thankfully it is also easily fixed.

While they were not originally intended for use in layout, tables have become a common way for web designers to position elements on a page. When creating tables, there are three options:

1) Set a fixed pixel width for the table and cells in the table,
2) Set a percentage value for the table and cells in the table, and
3) Let the browser determine how wide to make the window.

The first option is the one most commonly used, and is the one that causes the most trouble. The second and third options both work to make your page more flexible and useful to the end user. If you want the table to span the complete width of the page, set the table width to 100%. If you want the table to only take up the space it needs for the data in the cells, don't set a table width at all. For layout purposes, most designers will set the table width to 100%.

The advantage of this approach is that users will be able to see the entire width of the page no matter what monitor resolution they use, as the browser will shrink or enlarge the data to fit the size of the browser window. (It doesn't shrink/enlarge the text, but changes the line breaks to include more or less text on each line.) In addition, using this approach allows the printer to change the layout of the page to match what it can fit in 8.5 inches, (or whatever width the printed page is) even if what the user is viewing on his screen is different.

PDF files: For some faculty, they think PDFs are an easy way to provide content for their students, because it is a file format specifically designed for printing. The problem with using PDF files for your entire site content is that it is a format specifically designed for printing! While I just said above that a lot of users would want to print out your pages for later reading, there are a significant number of people who will read the material online. For these users, PDF files are not a very good choice - reading PDFs online if you are not completely familiar with the Adobe Acrobat reader can be a frustrating experience.

A combination of these two techniques would be to have a page designed for easy online use and printing, but also provide a link to a PDF file for people who want to download the file and print it. Giving your users more than one choice in how to get the information from your site is never a bad thing. We use this approach on several of our websites that have information sheets on various topics. The HTML document and the PDF document have the same information, but the PDF file has all the "web stuff" removed - the user doesn't really need to see the headers,s and navigation bars when they print out the PDF file.


This is another pet peeve of mine. One of the underlying goals of any website is to provide enough meaningful data to keep the user coming back to the site again and again. While designing a nifty animated graphic or Flash introduction to a site might seem to be a "cool" thing to do, from the point of view of the repeat user it quickly becomes annoying. Sure, the first time you see it you might think it clever, but on the 10th visit it becomes something to get rid of as quickly as possible. Since your students will be visiting your site many times over the semester, it is not really a good idea to have unnecessary animations cluttering your site, especially on your home page.

There are places where animations can be very useful. To take an example from one of the Crop Sciences pages, having an animation showing how a plant grows and develops, and how it reacts to various herbicides, can be very useful to a user looking for information on that particular plant/herbicide. However, having a cute animated graphic that follows your mouse around the screen is only fun for the first few seconds and then quickly becomes irritating.

Think very carefully before adding animation to your site. Does the animation really help the user learn the material being presented, or is it just something to "spiff up" the site? Does it really increase the usability of the site? If the answer is yes, then by all means use it. However, consider putting it on its own page, so that the user doesn't have to view it every time they visit your site.


My final advice to you if you are designing a class website is to solicit feedback from your students. Don't just ask them "yes" or "no" answers in a survey form. Really talk to them and find out what they liked and disliked about the online portion of the class. In particular, be sure to ask them what areas confused or frustrated them when they were trying to access the site. These are your problem areas. Perhaps you can put out a generic question in your class discussion group a couple weeks before the end of the course, and see what problems students come up with. Then incorporate solutions to those problems into your site for the next class. While it won't help for the current crop of students, it will help for the next. The one constant about web pages is that they are constantly changing. People expect you to update your site, and the more feedback you get from your actual users, the students who use the site, the better your site will become. Using the web for online courses is still in its infancy, and is sure to grow and improve with time. Don't expect your first effort to be perfect and be willing to listen to your students, and you will develop an excellent tool to help teach your class.

If you have any questions about usability, please feel free to email me: mjwmeyer@uiuc.edu.

learn moreBack to Top
learn more
Return to Guest Lectures


Home | MVCR Instructors | Virtual Guest Lecture Series

Home | Online Courses | Institutes & Presentations | Educational Resources | Initiatives | Institutional Partners | About ION

uiuc uic uis