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
Navigation
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.
Animations
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.
Conclusion
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.
 Back
to Top
Return
to Guest Lectures
|
