Seton Hill University Redesigns Home Page

I’m glad to see the multimedia content does not get in the way of repeat visitors — people who are using the home page as a quick way to get to a site they already know
they want, and don’t need to  be entertained.

The slide-out widget for “A day in my life at SHU” is, to my mind, a bit of gee-whiz puffery that makes a good first impression, but ends up burying valuable content.

First of all, there’s already a flash movie window on the home page.. when the “Day in the Life” overlay slides out, the new window appears beneath the smaller window. Here, the guy in the blue shirt is from the flash window that’s already on the home page before the big faux monitor slides out.  A noticeable design flaw inappropriately draws the reader’s attention away from the content. (I’m sure there’s easy way to fix that problem by changing the depth of the layers in the stylesheet.)

Multimedia — a Text-Free Zone?

We all know that web sites work when you click on things.  When the main widget slides on, a sub-widget on the left slides out to reveal four photos of students. A line at the bottom of the main window instructs the visitor to “click on a student,” (which suggests that testers in an early phase of the project didn’t know what to do… more on that later).

Being a textual thinker, I clicked on the name of the student — you can see it to the right of each portrait, in blue text — the traditional color of hyperlinks.  But nothing happens when you click on the name; you have to click on the picture of the student. (It should be easy to make the student’s name into a hotspot, too.)

The main widget box has an X on the upper right corner, which is just where I expect it to be. But do we really have to watch the animation that slides the side widget back into the main box before the main box starts to move?  That reminds me of how infuriated I felt every time I dismissed Clippy, and I had to watch some silly animation before I could get on with my work.

While I like the fact all the links in the background remain active — you can bail out at any time by clicking something that strikes your fancy — I’d much rather all this stuff live on a separate page, with separate components introduced by a text preview (what I call a “blurb“).

While I recognize the millennial generation’s attraction to video, if there were a text version — not a whole transcript, but an appropriately scaled print version, with stills from the video — that text could be

• indexed by search engines (leading to more visits from the WWW)
• full of meaningful hotlinks to direct visitors to more specific information
• scanned by visitors who are hunting for specific information (perhaps while listening to the audio in the background)
• used by online authors who could copy and paste the text into blog entries or e-mails
• a direct destination for people following a link from other web pages (in its present form, I can’t easily direct a reader to the Marcus Thompson clip — I can only say “go to www.setonhill.edu, click on ‘A Day in My Life’ and then click the picture of Marcus Thompson,” which is far more cumbersome)

Usability: Follow Conventions or Risk Confusing Users

Now that I’ve played with the site a bit, I see some usability issues with the control buttons.

The symbol “|<<” is a standard marking for the “rewind” button, and it behaves as expected.

But I clicked that middle button several times, expecting that it would shuffle me ahead to the next video, before I looked more closely at it, and noticed that it’s actually a dual-purpose “stop” and “pause” button, which explains why it wasn’t behaving the way I expected it to.  The symbols “> ||” and “>>|” happen to look very similar.  If this were a physical object, it would make sense to give the same buttons two labels.  But since this is a Flash interface, it’s possible to change the button to indicate what will happen when you push it in the current context.

Of course, that leads to a different problem — the buttons don’t give feedback.  I like it on other sites when I push down the play button, and the button changes (lighting up, sinking into the panel, etc.), but there’s no such feedback on these buttons.  If the designer were to change that dual-use button to indicate “I’m playing now” AND also re-label the button to indicate “if you push me again you’ll pause the video,” the two interface conventions would conflict. But I’m not sure that retaining a design that offers no feedback is the best solution.

My quibbles continue. When the main video is playing, the button marked with the square (recognizable as the symbol for “stop”) doesn’t seem to do anything.  When the side videos are playing, pushing the button marked with the “stop” icon actually reloads the opening video.

So the button marked with a “stop” icon really functions as a “home” button, and it would be better if it were labeled as such.  Also, it shouldn’t over on the right, but rather it should be the first icon on the left (where most people expect to find the “home” button).

Now for the “MUTE” button.  When you push it, the sound goes off, and a red light turns on to indicate the audio has been silenced.  That’s just as one would expect. In fact, the red light echoes the LED readouts from the 70s, so the function is very familiar.  It would be consistent if a similar red light flashed briefly under the the “rewind” button to indicate the action was successful, and a red light could alternate between the “play” and “pause” side of the dual-use button to indicate which state is currently active.

Unfortunately, whenever the home video restarts, it always restarts with the sound active — even if the “MUTE” light is shining. Clicking the glowing “MUTE” button again will make the sound go off, as one would expect, but it will shut off the light — indicating that the code beneath the button is a simple toggle which doesn’t actually reflect the widget’s sound status.

While the videos are great and the interface is functional, what I see is an attempt to map the simple controls of a VCR onto a website, which results in some mixed messages.  Remapping VCR controls onto a web widget works only if you construct the purpose of the widget as “putting some snazzy videos online.”  That reminds me of how the writing centers I used to work for in the mid 90s initially thought of a website as a way to cut down on photocopying costs; the administrators saw students downloading handouts in the form of word processor files, and printing them out on their own.  But that method of thinking barely touches on what a website can do that a fancy catalog of stuff to download cannot do. (More on that later.)

Enough of what’s in the interface. What isn’t?  The conventions of online video delivery include a slider bar that lets viewers scan back and forth at their own pace; the bar also helps viewers gauge the length of the video (something the current SHU interface doesn’t provide).

Once a student profile ends and the main movie restarts, you can’t relaunch the same student profile by clicking on the same student portrait — nothing happens unless I click a different student portrait, which makes no sense from a usability perspective.

It looks like the minimalistic design of the slide-out widget, which resembles a TV rather than a computer interface, was designed to replicate the linear experience of watching a video (with minimal interactivity in the form of choosing which video to watch).  Letting a visitor choose which video to watch next is only one small part of what a media-rich website could deliver.

That flashing line of text beneath the video controls is a missed opportunity. Let’s look at it, and imagine what else it could do for us.

Think about the Blink

Long after I’ve figured out I’m supposed to click on a student to make the videos play, a flash of light and a blinking message reminds me — over and over — to “Click on a student to experience a day at Seton Hill University.”  Here’s a screen grab, showing a merry flash of pixie dust dancing across the screen.

After I manage to load as student profile, I thought at first that the “Click on a student…” message was replaced by a string of factoids about my chosen student, but it turns out that only a few factoids are in the rotation.

I found this frustrating.  Back in 1996, web designers were shocked — shocked! — to learn that  “<BLINK> is simply evil.”  But I’m not just being an HTML purist.  Once I noticed the first factoid, every time that flash swooped across my field of vision, I glanced down hoping to find a new factoid, its faerie wings glistening in the moonlight. Instead, at least 80% of the time I found only the same “Click on a student…” message.

Sorry doggy, but that bell you heard? There’s no food here… I was just ringing for the hell of it. Go slobber somewhere else.

Assuming that the flashing animation is necessary to get the user to notice the instructions, it would be a kindness to shut off the pixie dust sparklies once the visitor has successfully started a profile video. clicked on a student, and to use it thereafter only when displaying a new factoid. I wouldn’t mind the help message fading in and out in between factoids.

A Functional Main Window

But why are the sparkles here in the first place?

Maybe after the chosen video ends and we’re watching the opening video, the sparkles — if they are absolutely necessary — could come back.  If the site could provide more factoids in the form of clickable links keyed to the timeline in the video, that’s a step towards synchronizing two different kinds of content.

I wonder if the sparkles were added because test users watched the video, then tried to click on the final frame, saw that nothing happened, and didn’t know what to do next. The sparkling flash draws the viewer’s eyes away from the video, all the way down, past the video controls, to the instructions (and, now that the viewer’s concentration has been broken, why not continue down even further, to the Flash window that bleeds through from underneath?).

The last frame of the video is a slide of the text “A Day in the Life” with a lot of empty space above and below it. Wouldn’t it make sense, instead of working so hard to draw the viewer’s attention away from the window displaying the content they’ve presumably come here to watch, to make the video window clickable?

Put four semi-transparent portraits on the screen, with the student’s year and major visible (to avoid the mystery meat navigation phenomenon), and when the mouse hovers over the picture, it expands to reveal the student’s name and a few bits of info. Here’s a quick mock-up, in which I’ve grayed out the parts of the widget that would be unnecessary.
Replace those unnecessary parts with a frame thick enough for portraits of students and brief quotations to fade in and out on a black background, while the main video plays?

Conclusion: Play and Pause Buttons ≠ Interactive

As a former boss used to say whenever I presented a wild idea, “It’s important to have dreams.”   This content is an impressive collection of short videos, but each is linear and one-directional. That’s the nature of videos.  These videos are great, but when I seem them in the context of this website, and I begin to turn my attention towards the classes I’ll teach this fall, I can’t help but think of what else these videos could do for SHU.

Any online project — especially a something as complex as a university website — is a work in progress. Before I give anyone the impression that I think the home page is bad, or that any web page that doesn’t satisfy my textual fetishes is a failure, I should point out that I’m preparing to teach fall classes in Writing for the Internet and New Media Projects, so writing this review is is my way of slipping out from under the piles of academic research papers and iambic pentameter worksheets that had occupied my thoughts in the past semester.

If I had the time and resources, I’d love to see the videos played in a frame that features a side panel which stacks up with hotlinks keyed to the content of the video.

• For instance, when Hough mentions that his teacher Frank Klapak was SHU’s teacher of the year, the side panel could display a link to Dr. Klapak’s biograhy, and a list of courses he typically teaches.  (When the users mouses over the link, a message could say something like “Click to open in a new window, or press Ctrl-D to add this link to your bookmarks.”)
• That list of links, with appropriate commentary, should be available somewhere else on the website, as a static HTML page, so that search engines can index it and bloggers can link to it.
• Would it be possible to keep the video playing in a re-positionable, semi-transparent overlay, while the visitor explores the related websites?  When my wife wants me to watch a video with her, I’m often bored unless I’ve got my laptop nearby, so that I can look up where I’ve seen that actor before, or who’s that singing on the soundtrack.
• I’d love to see a way for visitors to post comments that are keyed to what’s happening in the video… thus, you could move a slider to a particular frame in the video, and annotate it — posting comments like, “How far are the dorms from campus?” or “How many students live in this room?”

There’s less glamor in maintaining content than dreaming it up, so it would take a long-term commitment in resources to make the conversion from a channel for delivering a professional message, into an active forum where visitors share the task of creating content.

• Last weekend was the first summer orientation day for the class of 2013.  An incoming freshman with the username Purpleboom500 blogged about the experience: writing, “Today was Setonian Day at Seton Hill University. I signed up for my classes and met with some professors and students.”
• A parent who attended the same event wrote, “It was a day of excitement and new adventure for my son. There will be highs and lows the next four years and it will make or break some of the new freshman class.. I found myself walking the halls of this 1837 institution with my son and the man who help bring him into the world eighteen years ago. Moments it was sureal and haunting being with him other times we laughed and cried…”
• SHU’s Admissions Office has restarted a blog that had been dormant for a while. That’s a great step, and I’d love to see more opportunities for the various formal and informal sources of information to interact.

Yes, kids today sure like their reality TV, but watching a reality show is a community experience. The devoted fans create tribute pages
for their favorite contestants, they debate the fairness of the latest contest or the motive behind the latest plot twist. They post their own
video spoofs, tributes, and remixes.

What do you think of the new home page?  If you had the time and skills, how would you create your own web presence?  What compromises are the most painful to make, when facing the fact we don’t all have access to professional design services?