Subtitle: “Well, That Was Depressing”
Okay. The faculty/academic homepage. What a dismal, sad, and drudgery-filled genre. I know that most faculty/academics are interested in more things than learning how to design and code an interesting and interactive homepage (or at least a mildly nice-looking one!), but this is beyond bad.
Most academic homepages fall victim to a university homepage template; that I can forgive. But the rest? These tend to fall into two basic categories (please note that I’m only discussing the standard homepage here, not the academic blog):
- Category One: Bad Headshot, Centered, and Times New Roman Forever, Baby! Example.
- You can occasionally find examples of the genre that are at least slightly better-looking. On this one the author played around with header styles and a few other things, but otherwise it’s standard. Better, but standard. (Mildly Interesting Sidenote: this guy kind of looks like Duff’s partner on Ace of Cakes.)
- Category Two: Oh, How I Love Tables. Example.
In general, when searching for good academic homepages, you can expect to sift through variations on these two central themes for hours on end. Some mix them horribly (I’ll spare the example) and others just commit the sin of being plain and boring (Example. Sorry, Ed White-I like your body of work, but your homepage is a snoozer). And you can almost always expect to hear about the individual’s favorite kind of music/the band they were in before entering academia. That’s the standard “look, I really am an interesting/nice/hip person, despite my boring/brusque/badly dressed exterior” section. Sometimes this section contains pictures of one or more cats if they are too embarrassed to share their devotion to Neil Diamond with the world.
We can see from my examples that it’s not really a generational issue–I’m not picking on old folks here–or a disciplinary issue–computer scientists, literature faculty, and poli-sciers all design equally bad pages–it’s an issue of audience. Students (at any level), colleagues, prospective employers, and so on don’t particularly care what the page looks like or how cool it is. They want the information they need, and they don’t want to have to work too hard to find it. Looks & Interactivity are a bonus. Most of these pages, in the end, do a sub-fair job at that very basic, stripped-down level of effective, efficient communication (as I refer to it in my FYC classes). These pages are all very much designed with that audience and a utilitarian purpose in mind. That level is fine, as far as it goes. But there’s not much navigation going on there–you move back and forth from the main page to sub-pages (and usually at only those two levels; we are drawn in no further) by sterilely clicking the back button or a “back to top” anchor (that has an ugly .gif spinning next to it, of course), and that’s about it.
So, let me go back to the audience’s two basic requirements:
- they want the information they need,
- they don’t want to have to work too hard to find it,
From this, a very simple design is obvious: information must be easily identifiable (typically via an obvious heading system, graphics are good too), it must be easily navigable (persistent or top-level navigation seems to be an obvious choice), and it must actually be the kind of information that the audience needs/wants to have (good content–duh). To these, I’d like to add interactivity and aesthetics, although they all are inherent parts of interactivity, as I’ll get to later.
Quite a lot of this makes up a large part of the last half of Meadows’ second chapter–especially the steps of interaction and image conventions.
Examples of Good Academic Homepage Design
I like the persistent navigation on these two sites. (Wanner; Olson) Both are very similar, and make good use of a simple color scheme and a big menu on the left side of the window. (I like the sleeker, more contemporary first example better, but have the second one to show that it doesn’t have to be sans-serif to be good).
This site (Ochschorn) also uses persistent navigation, this time at the top of the screen, and making mildly effective use of pictures. Also worth noting: few of his pages go much beyond a single screen in length. You don’t spend all day scrolling down to find what you want. I’d definitely like to keep mine this way, but if not, I’ll make a good system of anchors & top-level links. Wanner uses anchors a little bit on her teaching page, but not as effectively as she could.
Honorable mention for sheer content that retains navigability (Campbell).
I didn’t really think I’d get this lucky, but I struck gold here, folks (O’Malley). This find was completely an accident–the one working link in a long list of dead ones to course/syllabus pages that claimed interactivity. This is practically textbook interactivity–you do stuff, and the site does stuff back to you. I need to play with it more, but it’s the best find of the (long) night! I’ll throw in the Gorillaz homepage on this as well–navigation is through a first-person gamelike interface, and I was hooked after about five seconds. Leave it to the Gorillaz to do it right.
In the end, while I don’t really want to do anything elaborate as O’Malley and the Gorillaz, I’d like to take the best parts of the other designs and combine them with more effective use of image and interactivity.
Closing Comments On Meadows and My Homepage:
Once again, Meadows effectively breaks down principles of good design, leading me to breakthroughs in understanding my design.
Immediately helpful were the factors he lists that affect the functionality of graphic design: Legibility, Contrast, Color, Movement (111). I’ve moved from my initial desktop image concept(before reading this section, actually, but this is pushing me farther forward):
to a second “bookshelf” image idea:
I dropped the first not because I disliked the concept, but because the image broke just about every rule in the book (literally and figuratively) for good image use–it has bad contrast, no real color (all the books blend into the background), and isn’t logical in terms of line-of-sight and visual entry (Meadows 119). The highly symbolic idea that I’d drawn out in an earlier blog is nice, but this picture definitely isn’t.
The second picture, while an improvement, is illegible–it’s far too blurry to be useful (blame shaky hands and an elderly digital camera) and less than functional in terms of contrast and color as well. If I want to have an image-based navigation, it’ll need to be a bit more streamlined and of higher quality. Perhaps not trying to “stage” everything into one picture would be smarter, using something a little closer to Ochschorn’s approach (although a little tighter and more unified, I think).
At this point, I’ve worked my page into three macro-categories: Teaching, Projects, and Personal sections. These will lead to assorted subdivisions, ideally with explorable submenus, perhaps merely by using anchors–I haven’t decided yet, and don’t know what skill-level this will call for. I’d still like the major navigation to remain highly symbolic, with fairly minimal text until “destinations” (like course descriptions, CV, vid/podcasts, etcetera) are reached. All with perpetual navigation.
@Sharba–your blog just popped up in Google Reader, and I’m totally glad it did–the URL you’ve provided looks like something worth exploring (so I’m putting it here); thanks!