Building Effective Course Sites: Some Thoughts on Design for Academic Work

While some faculty may still dismiss the internet as an annoying fad, they stand on the edge of what Thomas Kuhn famously called a “paradigm” shift. Like it or not, academics beginning in this decade will surely finish their careers in a digital age. Digital technology promises to reshape the way we do our research our writing and our publication, but its most notable impact to date has been on teaching.

Hundreds of courses in all fields now have syllabi posted on the web. But these syllabi typically make little use of the web’s potential. We might define four different models of online syllabi. Some syllabi include nothing more than what the professor hands out in class on the first day. These websites might be compared to bulletin boards. They simply post class material in a public place. Other websites might include primary source material. For historians like myself, this typically means historical documents – speeches, newspaper accounts, diary excerpts, the sort of material historians traditionally use. Students are asked to read them and treat them as they would printed sources. These sites are more like the reserve room in the library, except open twenty-four hours. More elaborate syllabi include links to other sites as reference material: “click here for more information.” These sites treat the web as a giant encyclopedia. Still more ambitious faculty have constructed assignments around some of those sites. We might call these hypertexts. While this last category of sites makes the best use of the web, sadly, most academic syllabi reflect the ways professionalism constricts the imagination.

This article constitutes a plea to use the web to rethink the ways we do our jobs, and the materials we use to do them. While we look at sites ranging from the conventional to the experimental, the consistent argument here is that the design of sites matters. Following a few simple guidelines will help greatly in making effective web assignments.

But first, why bother with the web at all? It would be foolish to rush into a new technology simply because of its novelty. And why add layers of complexity to our already complex jobs? Conventional teaching methods are conventional partly because they work – so why fix a working system? It may indeed turn out that over time the web will prove less useful that its proponents claim. All new technologies need a long period of “shaking out” before they arrive at their most useful form. But just as it would be foolish to embrace uncritically new technologies, it would be equally foolish to play no part in their evolution. A good scholar must know the books and journals in his or her chosen field: they are the tools the job requires. It would be professionally derelict to ignore the new teaching tools the internet has made available.

As the preceding paragraph suggests, there are many levels of ambition scholars bring to their work on the web. At the very least, these new tools can dramatically increase access to information. They can make assignments, readings and other materials available twenty-four hours a day. More ambitiously conceived sites can help students enter the world of their subject. They can break unconscious, unexamined patters of thought by offering new structures for learning. The more dynamic character of the web can help academic subjects break out of the boxes that contain them, and bring the life of the mind into the student’s daily practice of living – if the teacher is able to construct effective assignments. There are many challenges to this new work, but following a few simple guidelines will help greatly in making web assignments that add something new to the student’s experience.

The materials scholars use are heavily “designed.” They have a long history of refinement and trial in the marketplace – both the marketplace of ideas and that other marketplace we hear so much about, the commercial marketplace. We tend not to see them as designed, though, because we take them for granted and are accustomed to them. Consider, for example, that familiar status object, the book. Reportedly Bill Gates, Microsoft’s CEO, would hold up a book at meetings and ask his product designers “Can you top this?” It’s a good question. The book represents hundreds of years of design. Typographers labor for a lifetime on the minutiae of font design, modifying the tiniest curves of each serif, the finest points of spacing and ligature, for maximum impact and readability. The paper itself represents many years of technological innovation and competition to maximize cheapness, durability and consistency.

The book’s shape and size will conform to a set of customary standards worked out to fit the needs of retailers, shippers and readers. Its layout, including the size of the margins and the placement and style of the headers, is also a product of design. The parameters for books are well established – we rarely encounter books two feet tall, for example, outside of the medieval scriptorium. That’s because the forms of the book have been so well tested. Books “work” – they are convenient, attractive, and a pleasure to use – in large part because they are so well designed for the kind of reading we do.

The experience of reading itself has a history and is not the same in all places and times. To begin with, there are many kinds of reading. The desultory, half-fleeting glance at signs and advertisements is a kind of reading, but a very different kind of reading than the intense, careful reading we do in serious study. Reading a romance novel on the beach is similar to reading a legal document in many ways, but hardly the same act. Eating is always the same – tasting, chewing, swallowing – but also always different. We may linger over a meal in a good restaurant and hardly taste or chew a meal at McDonald’s.

There are many kinds of reading. A bear hunter reads signs on the forest floor, a farmer reads the sky for portents; a colonial American mother could read the surface of a loaf of baking bread and know when it was done, but she would most likely be wholly unable to read the profusion of signs and advertisements that fill any modern urban space. People often complain that they can’t read things on the screen. But this is just a different kind of reading. It is in some ways the same mechanical act as reading a book or even the forest floor for clues about that hunter’s bear. But it’s also a different kind of reading, not the same as curling up in bed with a novel or scrawling marginalia in some rival’s woefully misbegotten journal article. As a different kind of reading, it deserves some thought and care.

Few academics give any thought to the way things look. Indeed the whole profession tends to regard thinking about the way things look as vaguely suspect or superficial. It might be the first deadly step towards fun-having. The true flame of scholarly pursuit burns with a pure light, in dowdy clothes, not in fancy blinking neon, and because the tools we use have already been designed for us by someone else, we have the luxury of ignoring design altogether and even feeling superior to it. That’s why so many really bad academic websites plague the net. To be effective, a website has to be designed as a whole. It has to have consistency – not just consistency in spelling and grammar, but consistency in its look and feel. Indeed, the look and feel of a website, I would argue, are part of its ideology, part of its thesis or argument, and just as we would reject a paper with a jumbled and incoherent thesis, we should reject web materials with a jumbled or inconsistent design.

This means that making good web materials requires a great deal of extra effort, because there are still no clear standards for design on the web. And by design I mean not just the way documents or pages look, but their formal properties. How for example, should citation be done? Where should the footnotes go? We will begin by articulating some simple principles which will increase legibility and student satisfaction, and end with a look at some more radical re-visioning of the teaching process in light of the web’s untapped potential. Following this series of links below will help make this clear. A note: just a few years ago, making web pages was very difficult and time-consuming. But thanks to the many HTML editors now available, making good web pages is almost as simple as word processing.

Please take a look at this web page. Do you find this page annoying to read? It’s a generic web page, appearing the way the inventors of the web intended. The World Wide Web initially sprang from the brains of physicists and programmers, looking for a means of easy, universal communication. In good academic fashion, the web’s inventors gave no thought to how pages would look. The result is the generic gray page you still sometimes see in casual browsing. Gray is a perfectly decent color in many situations, but when was the last time you read something on gray paper? The text itself is not pleasant to read, for two main reasons. First, it has no margins. Have you ever read a book with no margins? The space surrounding text is as crucial to a pleasant reading experience as silence is to music. Second, the type is crudely spaced. Professional typographers can control every aspect of type spacing, from the distance between lines to the distance between words and between individual letters. When making web pages, you have very little control over the way words are spaced. But there are some workarounds.

Compare that last page to this one, and the difference in readability is striking. This second page has a white background, like paper, and a margin like a book or a report. Margins can be very easily faked by inserting a borderless table, with one row and one column, setting the width to seventy-five percent or so, centering the table, and then placing the text inside. While it’s nothing more than a bulletin board site, it’s at least easier on the eyes. And it has a bit of logic to its design. On the first page the link is blue – the “default” color for links on any web page. This makes little sense, because blue is a “cool” color. Red, on the other hand, denotes something “hot,” some action. You might consider making all your links in a hot color. It’s a small thing, but easy to do, and adds to the ease of navigation. The link on this second page is red, which also makes more sense in terms of the conventions of print. And as paper is never pure white, it might be even easier if it used a very slightly off-white background, as on this page you’re reading now. But here we see one of the problems of the web – unless your computer is capable of displaying more than 256 colors, you’ll see only a white background. Here as elsewhere, following the well-established conventions of print will yield a much more usable site. Many people use odd colors or patterns on their web pages. These are distracting, often illegible, and usually add little except increased download time to a page. Again, following the conventions of print, when was the last time you read a book with background pictures beneath the text? In general, white is the best bet, because it poses the least complications if students decide to print out the material.

The page you just looked at also includes no graphics. Graphics have made the web what it is today – frequently annoyingly slow and visually jarring. But they also constitute one of the web’s greatest potentials as a teaching tool. In general, approach graphics as you would text in an article or book – it’s always a good idea to cut what isn’t necessary. The graphics should function to strengthen the overall argument of a page. The page in question is the paper syllabus I handed out on the first day of that class. Now please take a look at the web version of the syllabus. This is a good version of a reserve room site.

The graphics are specific to the subject, and they convey the course’s focus on American popular culture. The site is also designed for ease of navigation. Novice users of the web frequently complain that they find it confusing. It lacks a clear hierarchy, or front door; it’s hard to tell where you are at any given point. The student’s experience with your course becomes much easier if all pages in the course site have the same basic “interface” or “look and feel.” The simplest way to do that is to always use the same font, the same colors, and the same margins on every page. The “header” makes a useful tool as well, one also borrowed from book design. All the pages for this course have the same “header,” a graphic drawn up in a graphics program and then pasted into each page.

That way students will always be able to tell where they are. If they click one of the links that takes them to a different site altogether – say, to the Library of Congress – they will instantly know they’ve left the course site. Again, this small detail dramatically improves ease of reading, the student’s comfort level and therefore the site’s usefulness.

It also seems reasonable to ask that a web site’s design harmonize with its content and with the message it tries to convey. This example, a site devoted to reminiscences by Vietnam vets, can serve as a model of how to integrate your intentions with your design. The site attempts to recall the experience of war by posting a large graphic of the Vietnam War ribbon. It’s a good project and reasonably well executed. But it could be much more effective. First, the over-large graphic shouts painfully, with its garish colors. The display font, showing the word “narratives,” is an old English style – why? Probably because the page’s designer had it on his computer. Are we talking about Vietnam, or is the page making some comparison of soldiers to knights in armor? It’s thematically inconsistent with the page’s subject matter, and so distracting. The page follows with a list of veterans who have contributed their stories, each preceded by a clip-art sphere graphic which only makes the page busy and crowded. The sphere graphics add a note of whimsy, or rather many notes of whimsy, again inconsistent with the subject matter. The background, while not too busy, appears to have nothing to do with the subject either, unless the Army was using parchment in Vietnam. The site has sent a very confused and inconsistent message, like a student paper with too many subjects.

Click on the story entitled “Medic.” [no longer available] Are we still at the same site, or is this a page maintained by the author of “medic”? The background has inexplicably changed to some sort of papery business, and the type has leaped into boldface. As a general rule, lots of text in bold makes the reader feel shouted at and understandably tired. If the story is good it speaks for itself. The page ends with a jumble of mismatched graphics which draw the eye, tired from all that shouting, away from the text, only to annoy it further with the fact that the graphics are not consistent with the site’s theme or tone and represent overkill. Is it really necessary, for example, to have a graphic that includes the words “send e-mail” and the words “click here to email” and a picture of a flying letter? Each new graphic also adds to the page’s download time, further annoying the reader, who may very well be a student seeking any excuse to dodge the assignment. While there is some attempt to maintain continuity and consistency in this site, a few simple principles can make the site much better.

The redesign tries to be consistent to the subject – the historical recollections of Vietnam vets – while staying faithful to the original. The battle ribbon is included, only this time faded, as if by age, and reduced in size so it’s less garish. The display font has been changed from old English to a typewriter-style font, since typewriters were in use at the time and the page’s subject is the documentary history of Vietnam. The text font has been changed from the default font (Arial) to Courier, another typewriter-style font, eliminating jarring changes of type. The pointless ball graphics are gone to clip-art hell, and the reduction in the number and size of graphics focuses attention where it should be – on the contributors’ words. To make the page easier to navigate, the links are now red. And the red links further recall the historical theme, since as many of us remember, typewriters often included a red ribbon for emphasis. Click on “Medic” and you can see a header, reminding readers that they haven’t left the site, and a simple page with a plain background. The story no longer has to shout down the background, and the jumble of graphics has been streamlined and cleaned up. This simple redesign makes no claims to great art. But it does make for a much better page. It adheres to a few simple rules, and attempts to build a congruence between the subject matter and the appearance of the site.

Another example appears here. The site for this course, on Jacksonian America, tries to recreate some of the design conventions of the historical period it treats. It has a consistent look and feel, a consistent header, and the colors – a strong red, white, and blue – were chosen to reflect the overheated nationalism of the era. But beyond this, the page was designed to convey the instructor’s approach and intent. The splash page, an altered reproduction of an antebellum handbill, deliberately encourages exploration. Rather than saying “click here” it tries to convey some of the philosophy of history informing the course. We focused on the lives of ordinary people and on popular culture as well as on the lives of the great, and spent a great deal of time on the emerging market culture of hype and false appearance. I hoped to merge the design of the site with the idea that historical insight comes from the mundane, from the unexpected, and from the thoughtful exercise of curiosity on mass media and popular subjects. Not merely decorative, the splash page sets a tone for the course.

Click on the word “syllabus,” and the course is organized into “places.” Click on “the factory,” then again on the image of the Lowell, Massachusetts mills, and you can see an attempt to use the web to teach students how to “read” a photograph. Similarly, click on the link for “five points” and then on the link for “Barnum’s Museum.” You can do a brief exploration of this famous attraction and some of the curiosities it contained. The course is neither original nor unique, nor is the website some sort of breakthrough in design or execution, But it is an attempt to make the design harmonize with the content. The course website, ideally, encouraged a less hierarchical organization of knowledge.

The Web’s theorists imagined lack of hierarchy as one of its greatest features. The Web would, they thought, break down old barriers to communication and knowledge. But as professors we are in the hierarchy business – having trained ourselves to scale the academic hierarchy, we now man (or woman) its gates. Most of the typical academic websites – the bulletin board sites, the reserve room sites, or the encyclopedia sites – maintain traditional hierarchies of knowledge. The best, or at least most novel, designs for academic web sites try to make use of this non-hierarchical character, and integrate it.

” Magic Illusion and Detection at the Turn of the Century” focuses almost entirely on an elaborate website. The course centers on a contradictory tendency in American life. On the one hand, Americans believe that “anyone can be whatever they want” – that we’re all free to remake ourselves in the marketplace. But at the same time, Americans were strongly drawn to subjects and practices, like criminology, psychiatry, handwriting analysis, or racial theory that promised to show who someone “really was.” The detective story is a perfect example, and serves as the central idea of the course. Detective stories – think of Sherlock Holmes – generally involve a hero or heroine who can pass as someone else in order to sort out who other people really are.

The website takes the form of an immersive simulation, a virtual world. Organized into four “sites” – a newsstand, a saloon, a movie theater, and a police station – it tries to convey a sense of mystery, and to encourage students to replicate the detective process. The interface is almost always black, dark, and even a little creepy. The graphics are generally scanned archival photographs, digitally altered to convey this sense of mystery. Some historians might argue that this represents an unacceptable alteration of historical fact, but I would argue that the alteration constitutes an interpretation. Just as, in an article or book, we take an artifact out of its context and place it in one of our own making, in this course the graphics are placed in the thematic context the course explores. In that sense the graphics have become an integral part of the course’s overall argument and content.

The enigmatic quality of the site forces students into a more free-form mode of inquiry, and presents them with multiple paths to explore, while conveying the sense that history can be like detective work. It contains a large number of primary historical sources, including movies, and in that sense it replicates the bulletin board model. But it also includes a game-like problem for the final paper assignment. In that assignment, students were asked to find a “confidence man,” a character who would make them a proposition. They would then have to assess the character’s reliability, using the resources available at the time. Eventually, they will find the character in a book of “mug shots” in the police station. The site encourages playful exploration rather than navigation through a hierarchy of knowledge, and it does it by integrating design, theme, and the technical capacities of the web.

Predictably, and understandably, more adventurous and self-motivated students loved the course, while others found the course’s willful obscurity frustrating. But on the whole the papers for this class were the best I have ever received. The vast majority of the students opted to take on a fictional persona, and write the final paper “in character.” I stressed in class that they absolutely had to adhere to the conventions of historical writing in terms of thesis and evidence, and most of the students responded with enthusiasm. They worked very hard to frame the people they encountered in the context of the times – to understand them in their own terms, rather than imposing the present on their subjects. Even better, they were clearly grasping how historians construct a plausible narrative of events out of what fragmentary clues the evidence presents. Teacher evaluations for this course were among the highest I’ve ever received.

This course represents an extreme in many ways, not the least of which was the amount of time it took to make the website. The site evolved over two years of part-time work, approximately five hours a week, initially from a modest collection of materials and no photographic images. A $3000 grant from George Mason University’s College of Arts and Sciences brought a course reduction and a graduate assistant who helped with some of the scanning. I would estimate that the site took an additional two months of full-time work in the summer, with eighty hours of time from the GRA. Some of this time was spent learning how to do basic coding tasks, but new software made this process dramatically simpler. While it makes good use of the web’s capacities, it is hardly necessary, however, to go to such extremes to exploit the strengths of the web.

Most of the web material for this course, History 409, “Between the Wars,” consists of primary historical sources posted to the web – for example, this section on the dustbowl. It also includes some assignments which are designed to make better use of digital media’s potential. Historians frequently struggle with students’ “presentism.” Students have a hard time imagining that people ever thought any differently than they do now. But we often want to convey the idea that “the past is a foreign country, and they do things differently there.” The less-structured character of web inquiry can allow students a direct look at just how different the past can be. The short paper assignment for this course asks students to go to a collection of “life histories” of ordinary Americans compiled in the 1930s. The full text of the collection, now online at the Library of Congress’ “American Memory” site, is searchable by word or phrase. This facility was simply impossible before digital media. The assignment asks them to enter any subject that interests them into the “search” box. They quickly find that in the 1930s, phrases like “working out” carried very different meanings than they do today, or that Americans experienced “football” very differently from modern fans. They have to reconfigure their own thinking, and enter the mental world of the 1930s. This simple assignment begins taking students away from the model of the reserve room and towards a more thorough exploration of what digital media, and the web, can do.

Although the web has many novel features, you can choose to minimize that novelty by borrowing from the traditions of print. Simple is nearly always better, but the “default” form web pages take – no margins, gray backgrounds, and random link colors – go beyond simple and into crude. It’s terrible to work with. Adding margins, brightening the background, minimizing changes in font, and eliminating spurious graphics all add to the page’s legibility and the student’s comfort level. Your site should have a consistent look and feel, so the user always knows where he or she is. A header can accomplish this easily, and it’s a good idea to begin any new website with a template, a standard frame to which you can add text.

More importantly, because the forms of academic communication on the web remain unstandardized, we need to give special attention to design. Few academics have any training in design, and many have a Puritan suspicion that ornament is the first step towards pleasure. But an effective website must convey a unified thesis or theme. Just as a paper, speech or book must be focused, organized and must eliminate distractions, so a web site should have an ideological and visual coherence. All its elements should strengthen the message the course seeks to convey. We would not accept a paper lacking a clear and consistent thesis, sprawling with pointless digressions and substituting decorative flourishes for content. Neither should we accept (or create) websites with incoherent, inconsistent visual organization, pointless links and meaningless decorative doodles. Doing web assignments well requires thinking about things we normally have the luxury of enjoying without conscious thought, like the design and overall conception of a book. But it puts us in a position of potential creativity, in an exciting time when we have the chance to redefine how we do what we do.