Top 10 Improvements to the Washington University Homepage

Uni­versity websites are quickly becom­ing the prima­ry means of communication to external au­di­ences and prospective community members, so it is important to make a good first im­pres­sion. Sounds easy? Think again. The main website has one chance to cater to a large va­ri­ety of groups; in the case of Wash­ington Uni­versity, this includes graduates and under­graduates, prospective students and par­ents, research­ers and med­ical pro­fes­sion­als, and many more. Unfortunately, uni­versity websites are known for the dis­par­ity be­tween what users want and what they can find. One of the biggest crit­icisms I received when I at­tended web advi­sory committee meetings was that my com­ments catered too much to the under­graduate community. Despite Paul Graham’s dis­taste for Lists of N Things, I have been meaning to make this list for a while and would like to kick of my first post with the fol­lowing 10 rec­ommendations that should cater to all of Wash­ington Uni­versity’s au­di­ences.

Ten

10: Remove the Bosses

In the spring of 2008, a major Web Advisory Committee goal was to prevent users from scrolling to see the entire page, or to have no content “below the fold”.  Despite the concern for making the best use of screen real estate, 5% of the main content area is occupied by unlabeled rotating images of oddly cropped (and borderline eerie) stone sculptures.  If you are somehow overcome with enough curiosity to click on one of these pictures, you will find a page outlining the history and locations of these gargoyles on campus.  While having this page somewhere on the site might be useful, I doubt that it is important enough to occupy 5% of the homepage.

Nine

09: Use Social Networking Icons

Tucked away at the bottom-right edge of the page (below the footer) is a list of “top social networks:” Facebook, Twitter, YouTube, and Wikipedia. Users of these sites can recognize and differentiate icons much faster than they can do the same with plain text.  Two of these sites are not even social networks (some would even argue that Twitter is not very social), so showing icons removes the need to determine an appropriate title for these links. Social media links from Taming the Wolf and AgencyNet, discovered through WDL’s 55 Examples of Beautifully Integrated Social Media Links in Web Design

Eight

08: Bring Page below the Fold

As I mentioned in improvement 10, having the entire page visible in the majority of browsers without scrolling is one of the main reasons for the current homepage design. The problem is that the majority of screens have vertical resolutions of less than 900 pixels. Subtract 150 pixels for the title bar, tabs, and Windows taskbar, and you’re left with about 750 pixels. The current homepage is 806 pixels high, excluding the social network links at the bottom.  Having such a small portion of the page below the page just looks like a design mistake. On the other hand, showing a page that short on larger screens makes it look like Washington University doesn’t have enough content to fill out the screen. The concept of keeping all content “above the fold” is an old one that has somehow still lingered on; let’s face it – you’re currently reading below the fold.  Sure, 80% of users’ attention is devoted to content above the fold, but that does not mean we should not capture the remaining 20%.

Seven

07: Widen the Window, 960 Grid

Since less than 3% of users have screen resolutions of less than 1024 pixels wide, let’s widen the viewport to about 960 pixels and apply a grid. Why a grid? To provide solid visual and structural balance. Why 960 pixels? It is a width that fits most modern monitors and is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480, making it a highly flexible base number to work with. If we keep the current site height of 806 pixels, increasing the width to 960 pixels gives us 20% more area to work with.

Six

06: Bring Menu next to Picture

“A Picture is Worth a Thousand Words.” This age-old adage may be true, but that’s no reason that the main photo slideshow needs to take up 40% of the entire homepage. When I first proposed improvements to the homepage in 2008, this area was occupied not by a slideshow of the student/teacher community but rather by a static photo of Brookings Hall with no perspective or depth. Now that the photos are much more interesting, have animate subjects, and have depth of focus, they can still be noticeable without taking up as much screen space. By bringing the menu next to the feature slideshow, you leave room to expand and develop the other sections of the front page. Image is a from a mockup I designed for EP310 as junior at Washington University

Five

05: Improve JavaScript

Nobody likes hover menus.  Windows did away with the hover-based application selection process on the Start Menu two releases ago. Even though a similar change won’t necessarily translate well over to web navigation, we can make it as tolerable as possible. One of the main problems with hover menus is the mouse precision required to make your selection. If at any point your mouse moves too far in any direction, the submenu disappears and you have to start over.  This may seem inconsequential, but it is a small problem that leads to lots of user frustration. To counter this problem, the site should use plugins like HoverIntent that try and guess users’ intentions when it comes to mouse movement – the Student Union website is currently using this on the top main menu. Instead of immediately hiding the submenu when the mouse leaves, it waits for the mouse to slow down.
Another minor JavaScript improvement includes making sure the primary menu item remains highlighted when hovering over the submenu.

Four

04: More JavaScript Improvements

Considering that the homepage is one of the University’s most important pages (if not the most important page), it is very inefficient – a lot of it comes from poor JavaScript handling. First, external JavaScript files should be placed at the bottom of the page. Second, the scripts should be minified to decrease file size and download time. Third, the slideshow images should be loaded asynchronously rather than with the rest of the page. Finally, there is no reason that there should be two JavaScript libraries (jQuery and Mootools) on any page, let alone a simple one such as the homepage.  These improvements should shave off about 695KB of the original 840KB from the initial page load (down to 17.2% of its original size)!

Three

03: Develop the Footer

Whether or not we are trying to fit the homepage content within a certain height, the footer should not be included in that restriction.  Footers typically include addresses, contact information, and more recently, site maps.  Because visitors know to look to the footer for this type of information, there is no reason to keep it small or conservative.  Format the address. Add the main telephone number. Include the full site map with links to each school and department. It’s the footer – there is no need to worry about pushing other content further down. Image of footer from the Wake Forest Univrsity homepage

Two

02: Improve Events/Announcements

It is hard to imagine an “events” section without dates. In fact, it is hard to imagine an “events” section without any events at all, but that is what we ended up with on the homepage. Granted, there are announcements and the section is called “Events and Announcements,” but it just looks like there is nothing happening on campus. Either separate the announcements into its own section or add the announcements into the news section. As for the events – adding more events, adding dates, and adding links to the group/organization/department responsible for putting on the event will help make the campus look much more dynamic. Image of events from the Nebraska Wesleyan University homepage

One

01: Make News More Engaging

This section has the biggest room for development. One of the things that makes the news section so uninteresting is the lack of relevance. Visitors have no idea how recently articles were posted – stories might be one day or three weeks old.  Adding post dates will help, as will adding teasers to further engage visitors and entice them into reading more.  Finally, using larger (and multiple) feature pictures with more descriptive captions will liven up the news section and the entire front page. Image of news from the College of Wooster homepage

Postscript

I am not trying to completely re­design the home­page. In fact, I am sure that Matt Klawitter and his WUSTL Dig­ital team have four if not forty new site mockups – they have already done a great job stress­ing that a strong web pres­ence is a comple­ment to the Uni­versity’s aca­dem­ic achieve­ments, not an optional supple­ment. As we saw with Dustin Curtis and American Air­lines, it is hard to make appropriate suggestions for some­thing seem­ingly as simple as a site re­design with­out a sol­id under­standing of the orga­ni­zation’s goals or internal struc­ture. I am making these rec­ommendations as a for­mer student and member of the web advi­sory committee, as some­one who has man­aged websites for var­ious uni­versity orga­ni­zations and student groups, and as some­one who is extremely inter­ested in making his Alma Mater look as best as pos­sible. Hopefully it will not take much longer before a page is re­leased that our community can be proud of.

Further Reading: Smashing Magazine’s showcase of academic and higher education websites
Follow me on Twitter