5376: Blog for Week 4

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:

  1. they want the information they need,
  2. 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):

From PhD.umpingGround

to a second “bookshelf” image idea:

From PhD.umpingGround

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!


7 thoughts on “5376: Blog for Week 4

  1. Chris, Thanks for slogging through many “academic” web sites and reporting back. I thought about making such a trek, but it doesn’t look like there is much fruit out there to harvest in that realm. So maybe some other time. … It seems better to me to incorporate ideas from people who are really into this kind of thing, like rock bands, such as the Gorillaz. Was that interface custom built, do you think? I’m also curious about the build of the O’Malley page. I like that sepia-toned look and incorporation of strange old photos. But I don’t have any idea why O’Malley built that site. It looks good, but it also looks abandoned and unfinished. What potential, though! … I’m inspired by that site to look for old stock photos at the Library of Congress, where at least one of O’Malley’s photos came from. I’m curious to see what sort of use is allowed for those kinds of images. That could be a treasure trove of artwork to adopt and tweak. Your mention of the RSS feed at the end made me realize I hadn’t added that gadget to my blog yet. Doh! And I think your list of basic desires for a web page is solid: easily identifiable information (desirable info, by the way), an easily navigable site and aesthetically appealing interactivity, which is rare indeed. What about audience? Who are you creating your page for? That’s something I struggle visualizing. There’s the fantasy, of course, that everyone in the world might just stop by. But in reality, there is so much noise out there, I think focus on an audience (and marketing to that audience) are critical components to a successful site (if success is measured by traffic and use).- Brett

  2. Thanks for the comments, Brett. I’m pretty sure that O’Malley’s site is for a special-topics history course; it offers an opportunity to explore a lot of different aspects and artifacts from the turn of the nineteenth century. There are movies, documents, photographs, etcetera, that I think are intended to let the viewer experience the late 1800s.My audience (this is buried somewhere in the middle of my post) has three basic constituencies: colleagues, students, and employers (either current or potential, as a kind of web-portfolio). They are the basis for my audience needs-analysis in this case. (I’ll go back and give some emphasis on that-it gets lost in a sadly wandering paragraph.) Like you, I fall victim to the fantasy of worldwide viewership, but I know exactly who/where the primary and secondary audiences are.

  3. Thanks, a lot, Chris. Now I can’t include photos of my cats on my website. Sheesh! You know, cats have feelings, too! :-)On a more serious note, I ran into similar examples in looking at many academic home pages. The bad examples remind me a lot of some of the beginning design that comes out of a class I teach. My students will typically rationalize their very centered, very symmetrical, very boring designs with the comments of “I just want it to be clean and simple.” I struggle all semester with convincing them that things can be clean (meaning sophisticated, well organized, non cluttered design) without being boring. The two terms are not synonymous.

  4. I am relieved that your search was as challenging and dull as was mine. I want to create an exciting course website for my students, but the examples I’ve found… zzzzzz.Thank you for the great examples. I love the first one and will have to visit hers again to investigate further, even if it is a table, whcih surprised me when I looked at her code. (Gotta love that she’s an English prof!)

  5. I know all about cats’ feelings–my neurotic japanese calico tells me about them every night about 30 minutes after I go to sleep! 🙂 @Monica–I often teach writing in a similar mode. The students are all the same, no? I have them try to strip rough sections (hell, even the whole thing sometimes) all the way down to the basics and then build stylistic materials back onto it. The problem is similar to what you point out–they think that the stripped-down effective version is good enough. Style is hard to teach in writing, and apparently hard to consider in web design, too!@Carie–I hadn’t noticed the tables, actually–I’m glad you pointed that out to me. I haven’t pulled apart the code enough yet (or looked at her colleagues’ pages enough) to see if that’s part of her template or her own design decision. The optimist in me hopes for the former.

  6. Depressing? You relate some strategies here for making work a little more interactive and engaging. Today’s web audience demands it. Good points about avoiding the centered headshot, the use of tables as effective, etc. Thorough examples here of what you might do in your own development work this semester. Great examples. Great blog post.

  7. Please, please, please post some more BAD academic pages. Those are HYSTERICAL. I love the Glamor Shots side turn in the first one. You know his head is resting on his fist but he’s cropped that part out cause it’d be “tacky.”I love the tables, too. Tables, tables, tables.Dang, I love my personal site even more know… (although I know 0 code and I used a page builder site.)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s