Analyzing the Future - Part 4 - Home Page Elements

An analysis of the placement of page elements on 18 newly redesigned college/university home pages.

This post is in essence a repeat of the research I did a year ago on the top 20 university Web sites. You can read that post here. The difference here is that the sites I'm looking at are completely different and they've all been redesigned within the past year.

I've changed a few bits this time around, so I went back and redid the numbers from last time to properly correspond.

Most Common Page Elements

No major changes here except that features and events have become more popular, and "quick links" have become much less popular.

Element	Sites 2006	Sites 2007
Photos	100%	100%
Primary Navigation	100%	100%
Search Box	100%	94%
News	85%	83%
Top Banner	90%	78%
Secondary Navigation	70%	78%
Feature/Spotlight	55%	78%
Events	30%	67%
Quick Links	45%	22%

Page Element Placement

I've placed the results from 2006 on the left and from this year on the right. Overall, there were few earthshaking changes, but there were a few trends:

• Identity/logo branding is more consistently placed in the upper left-hand corner
• Search box placement in the upper right-hand corner has become almost universal
• Primary navigation is less concentrated on the left side of the page, and is becoming more common on the top or upper right
• Secondary photos have become more common and tend to be concentrated below and to the right of the main photo
• Feature item area is increasing in size
• News and events continue to be concentrated on the lower left-hand and right-hand portions of the page (respectively)

Top Banner

Identity/Logo
Search Box

Primary Navigation
Secondary Navigation
Main Photo

Other Photos

Feature Item
News
Events/Calendar
Quick Links

Analyzing the Future - Part 3 - Navigation

A look at at links and navigational structures used on newly redesigned college/university home pages. Topical organizations (About, Admissions, Academics, etc.) are most popular in the most prominent navigational areas, while audience-oriented links are most common in secondary navigational areas. The usual crud (Contact, Directory, Site Map) is most common in tertiary navigation areas.

Navigation (which links, what they're called, where they're placed, how they're grouped and organized) is probably the single most fascinating topic for me in reviewing Web sites.

There are a lot of potential approaches, but interestingly enough there are actually a number of standout trends in the 18 sites I reviewed.

Methodology

Gawddamn methodology again. What is this, some ivory tower university? Oh, yeah.

I've done other examinations of home page navigation (here and here), and I will revisit those. But for this analysis, I wanted a slightly different approach.

Home pages are complex entities, serving many purposes. As a result, most have more than a single navigational area (by navigational area, I mean a clearly defined area with a cluster of links and no other content).

For the purposes of this analysis, I've broken these navigational areas into:

• Primary navigation (usually the largest and most prominent navigational area)
• Secondary navigation (usually not as prominent, but still easily identifiable, often providing a contrasting navigational scheme to the primary; e.g., audience vs. topical)
• Tertiary navigation (the fine print links typically clustered at the top and/or bottom of the page)

Here's a good example:


Results

Primary and Secondary Navigation

Virtually every home page examined had navigational areas that could be interpreted as primary, secondary and tertiary, though there could easily be disagreements as to which was primary and which secondary. I made my best guess.

Far and away the most common navigational setup among these sites was to split the primary and secondary navigations between topical and audience-oriented organizations. Most common was to use the primary navigation for topical links and the secondary navigation for audience-oriented links, but a significant minority reversed this approach.

	Primary	Secondary
Topic	12	5
Audience	4	10

The most common topical links in the primary and secondary nav areas were:

Link	# of Sites
About (university)	16
Academics	13
Athletics	12
Admissions	12
Campus Life/Student Life	11
Research	9

Interestingly, "Programs" and "Colleges & Departments" (and equivalent terms), which I expected to be prominent, were not common at all. Programs appeared in the primary or secondary navigation only 4 times, and Colleges & Departments only twice.

The most common audience-oriented links in the primary and secondary nav areas were:

Link	# of Sites
Alumni	16
Current Students	14
Faculty/Staff	13
Prospective/Future Students	10
Parents	8

Tertiary Navigation

Tertiary navigation areas consist mostly of small links across the top or bottom of the page. The most common links in these areas were:

Link	# of Sites
Contact Us	12
Employment/Jobs	9
Directory/A-Z Index	7
Maps	7
Site Map	7
Giving	6
Portal	6

Number of Links

The average number of links in each of the three navigational areas was between 5 and 6, though there was a higher variation in the tertiary links because they were scattered around the page. The primary nav tended to have more links than the secondary nav, which was more concentrated at 5 or 6 links long.

Analyzing the Future - Part 2 - Page Dimensions

Looking at page dimensions of newly redesigned college/university home pages.

In my last post, I selected 18 newly redesigned college or university home pages to analyze, looking for trends, best practices, etc.

So what first?

Well, one of my pet peeves are pages that are too wide to fit on my 640x480 monitor.

OK, OK, I have two 1280x1024 monitors on my desk, but in general, I find that a browser window width of about 900-960 is the most comfortable for me. I HATE having to blow my browser up to full screen to see a whole page. Other people on campus have different, less correct, opinions on the matter. But hey, that's just my personal opinion.

So, the first thing I looked at were page sizes, both minimum width (the point at which horizontal scroll bars appear) and total height.

Site	Min Width	Height
Rocky Mt. College of Art+Design	795	1619
Skidmore College	805	1105
IUPUI	825	1022
Our Lady of Holy Cross College	825	920
University of St. Thomas	829	812
Biola University	839	1309
Imperial College	875	766
Rice University	925	1084
North Carolina State University	927	1103
Loyola Marymount	950	1052
Portland State University	984	798
Notre Dame University	985	1075
University of Tennessee - Knoxville	985	1085
Cornell College	1006	905
Saxion Universities	1015	950
Denver Seminary	1015	1050
Ball State University	1025	846
Carnegie Mellon University	1029	981
Average	924.4	1026.8

This chart shows things a bit more visually:

Given an average of 20 pixels of horizontal chrome and 120 vertical pixels of browser chrome, effective viewport sizes are about 1000x650 (for 1024x768) and 1260x900 (for 1280x1024).

You can see that there are two width clusters, one around 800 pixels wide, and another around 1000 pixels. You would think that this reflects people designing pages for 800 pixel and 1024 pixel monitors, but all but one of the pages in the ~800 pixel width group are actually more than 800 pixels wide. So, something besides monitor size is driving that width decision.

Also note that with two exceptions, page heights are clustered between 750 and 1100 pixels, which, with browser chrome, is generally more than a screen tall on a 1280x1024 monitor.

At Chico State, Google Analytics show over 40% of users are using monitors of 1024 or fewer pixels width.

Analyzing the Future - Part 1

Selecting 18 newly redesigned college home pages to analyze for trends in design, navigation, structure, content and technologies.

Today, we finally got 'official' word that the redesign of the Chico State home page is a priority project. That means that within three years we'll have a new home page!

Well-placed sarcasm aside, it's a good time to begin taking a fresh look at what other colleges and universities are doing with their redesigns. Not that we will necessarily want to copy them, but in order to be able to say (with authority), "these are the trends", "this is a common practice", "70% of the sites reviewed are taking this approach".

As some wise person said, "When decisions are based on opinions, he who yells loudest wins." And the point here - as it has been from day one of this blog - is to elevate the discussion above opinions to actual facts based on research (sloppy, biased and subjective research, yes, but still research).

Methodology

I went to the eduStyle.net site and selected redesigned sites to review based on the following criteria:

1. Site must have been redesigned within the past year
2. Site must have at least three positive votes ("My style") as of 12/12/07
   
3. Site must have more positive votes than negative votes as of 12/12/07
4. Site must be college or university main home page
   

I used these criteria because I wanted relatively new home pages that have received a positive response from the eduStyle community. While it's true that many of those people are designers (as opposed to information architects, etc.), I feel that overall, it's a legitimate barometer... and it has the added benefit of removing my personal biases from the selection process.

I ended up with 18 sites that met my criteria:

• Saxion Universities of Applied Sciences
• Rice University
• Denver Seminary
• Indiana University - Purdue University Indianapolis
• Cornell College
• Imperial College London
  
• Loyola Marymount University
• Ball State University
• Carnegie Mellon University
• Notre Dame University
• Portland State University
• Biola University
• University of Tennessee - Knoxville
• Rocky Mt. College of Art+Design
• North Carolina State University
• University of St. Thomas
• Our Lady of Holy Cross College
• Skidmore College

Over the next week or so, I'll be looking at these home pages from structural, organizational, navigational, design, content, and technological perspectives, looking for trends, best practices, and things that we can out right steal for the new Chico State home page.

Multi-variate Browsing for Booze

How multivariate "smart browsing" can dramatically enhance the user experience.

I've commented in a previous post about the conceptual tug of war between search and browse on the Web.

Obviously, they both have their place. What I've been noticing lately is that differences in how a site lets you browse through information can have a dramatic impact on the user experience.

Let's take a couple of sites as an example.

Corporate Wines

wine.com

Yes, it's true that these aren't university Web sites, and at Chico State, booze is a sensitive subject. But in my other life, I'm a wine columnist, so I spend a lot of time shopping for (but not necessarily buying) wine.

Let's say that you had a bottle of 2002 Rodney Strong Symmetry and want to buy another. On both sites, you can get to it pretty quickly using the search box (though admittedly, the search function at wine.com is much, much better).

But what if you're looking for a 90+ point Napa Cabernet Sauvignon for under $40?

That sort of multi-variate search can be very difficult to handle via a search box. It's very easy to end up with more noise than signal in the search results. A high functioning browse structure ("smart browsing") can be a better way to go. Let's see how the sites handle it...

First of all, the Corporate Wine site doesn't show wine ratings, so right off the bat you're at a disadvantage. Second, the only thing they let you browse by is region - "California". Once there, you have to slog through 889 wines. At this point, I've already given up.

On the other hand, the wine.com site lets you refine your browsing criteria on the fly by price, type, region and rating. And the type and region filters have multiple levels, so once you select California, you can further refine your browse to only Napa Valley.

In just six clicks, I've narrowed my browse down to Napa Valley Cabs between $20-$40, and sorted them with top rated wines at the top.

I really like the ability to refine my browsing criteria on the fly, and I think wine.com does just about the best job of this of any wine Web site (though Vinfolio is just as good - and has better wines). I only wish that they had a decent wine selection to make it worth visiting their site. They should also add vintage to the list of variables that you can use to refine your browse.

OK, so how does this apply to university Web sites? I'm really not sure. This approach obviously has serious advantages when doing a multi-variate browse (e.g., price, type, region, rating, vintage), but probably has little, if any, advantage on a single-variate browse.

It might have some value where students are trying to browse through program listings. Let's say you're looking for Master's programs in the College of Engineering... in that case, maybe it would be helpful, but I'm not sure that students would be randomly looking for Master's programs.

Regardless, it's worth giving consideration to exactly how browsing your site works, and its worth realizing that browsing can depend on more than just your information architecture. For me, I'm going to stick this in the back of my mind, so that when a situation that would benefit from this approach appears, I'll be able to go, "Ah ha!"

The Carousel of Mystery - Information Visibility on the University of Notre Dame Home Page

Disturbing trends in information visibility and why I don't like the Flash carousel on the Notre Dame home page.

The University of Notre Dame home page was redesigned last August and was featured last month on the eduStyle Web site.

Notre Dame Home Page

A lot of people like this design, particularly the Flash "carousel" of news. Though overall I think the design is fine, the Flash carousel is exactly the thing about the page I don't like.

It's not that it's particularly badly designed, but it demonstrates a continuing and growing trend in Web development and design toward lower and lower information visibility. In some ways, this is inevitable, as more and more content and links are crammed onto pages, but my personal opinion is that whenever you hide something, you hurt yourself.

So what's my beef with the carousel?

• How many features are there?
• How do I navigate them?
• Are there any that are interesting to me?
  
• Is there any way to know without going through them all?
• I'm busy, I don't have time to poke through all these to find something interesting. Why are you making me do this?
• In fact, I'm not going to do this. I'm going to ignore it and look for the link I want.

My concern here is that I don't know what information is hidden in the carousel, and I'm not really given sufficient motivation to take the time to explore. I'm not sure that anything is served by this form of presentation. Saving space? Maybe. Enhancing the user experience? Probably not.

You could argue that it's an improvement over the random static feature used on a lot of sites, by providing a number of partially visible features, but I wonder if user testing would show to be much of an improvement.

Better, I think, to have one feature prominent, but have all the other features visible, something like the way Ohio State does it.


That way, I can see all of the features. If the most prominent one doesn't interest me, maybe one of the others will. They certainly won't if I can't see them.

The bottom line to me is: If you hide information, it might as well not exist.

The Future of the University Web Site

Focusing the university home page to act as a portal to audience-specific "sub-sites", instead of a catch all everything-to-everyone page.

Users' expectations of Web sites has evolved rapidly over the past few years - and continues to evolve. The concept that a "single" Web site can meet the needs of the wide variety of audiences that come to a university Web site is no longer valid. Users expect a tailored experience, designed specifically to meet their needs, address their concerns, and to fit their mental model of the site. No one "all purpose" university Web site can hope to do this - except to do it poorly.

In fact, a university's Web site is not a single site, but instead a collection of a wide variety of sites, each serving specific audiences and specific needs, and each providing a different facet of what the University is. Accounting Operations, the College of Business, and University Housing are each part of the university and the university's Web presence, but each serves a different purpose, addresses a different audience, and meets a different need.

The top level pages in the university Web site (including, of course, the home page) are no different, and should no longer be viewed as a monolithic set of "one size fits all" pages attempting to meet the needs of all users. Instead, the focus should be to provide audience-focused experiences, custom-designed to meet the needs of the main user groups that are likely to visit a university's site. These include the usual suspects of prospective students, current students, faculty, staff, alumni, family, and community members, as well as other groups.

There is no reason that we cannot provide a tailored experience for each of these groups, at least at the top level of pages within the site. And there is every reason why we should this level of experience if the university is to compete for students in the coming years.

How do we do this? By providing a home page designed to allow users to quickly self-identify and self-select themselves. Once a user identifies themselves (by clicking on "Prospective Students" or by clicking on the "Admissions" link, for example), they are taken to a sub-site specifically designed to meet their needs. Of course, it's impossible to fully guess the needs of all users, but prospective students have a very similar set of needs when visiting a university site that can be met by designing a section of the university's Web site to focus specifically on prospective students and de-emphasizes content and links irrelevant to those users.

And I'm not talking about the "clearinghouse" pages that so many universities use where each of the audience pages is simply a list of links. That's the short, easy, thoughtless and bad way out. By doing that, you're not providing each audience with a custom-designed experience; you're telling them that their experience isn't important enough for you to waste time trying to design it. "Here's a bunch of links. Knock yourself out," is about all you're saying.

Users' expectations of the level of experience they should have has increased dramatically over the past few years, and to attract those users to our campus, and to retain them, we have no choice but to meet their expectations.

In the end, we will end up with not one university site at the top level, but a series of sub-sites, each designed for a specific audience with specific common needs and perceptions.

Who is doing this? I'm sure there are a large number of universities (other than Chico State) doing this out there, but I'm just going to list the few I can find that are really investing the effort:

• University of Virginia - different main pages for each audience

A couple of interesting posts

These are a couple of years old, but still worth looking at.

Best University Admissions Web Sites

Best University Web Sites

Michigan State Home Page Photos

Though I don't really like the MSU home page, I do like what they've done with the photos. By tying people and place in each photo, they connect directly with the viewer and tell a story. And it's nice that actually use some text to link the photos to the story. And, of course, clicking on the photo takes you to the full story.

This is personally how I think home page photos should be done. There is an effective triad of:

• People
• Place (or context)
• Story

that needs to be part of every main home page photo.

I wish we were doing that. Hopefully, as things change and evolve here, we'll start implementing some of these best practices.

A few of the photos I shamelessly stole off their home page...

HighEdWebDev - A Few Thoughts - Part 1

I just got back from the HighEdWebDev conference in Rochester, NY.

Here are some of my thoughts on some bigger picture issues....

Buzzword of the conference: Social Networking

I wasn't too impressed with social networking as something that we need to get into the middle of. Yes, I think that it's important for university's to be aware of the social networks growing up related to campus, simply to be cognizant of what students and others are saying. However, I don't think there's any reason for Web Services, or any other organization on campus, to get too involved in managing or providing or integrating social networks.

Content Management

Content management remains a big issue. The ad hoc round table that Pat and I hosted was the most well attended of the round tables at the conference.

My main take away was that, because we've had experience with a WCMS before, we have developed a very strong process for evaluating a WCMS. This is something that most of the campuses we talked with have NOT done. They are (as we were) basically stumbling in the dark. They know they need a WCMS, but they don't exactly know how they will use it.

In our round table, we emphasized two things from our experience that we felt we vital in selecting a product that would actually work:

1. Understand you business processes, no matter how undocumented or dysfunctional they may be.
   
• You have to select a product that is going to work with your existing cultural, organizational structure and business processes.
  
• You dramatically increase the chance of failure if you are forced to change your organization or radically alter your business processes in order to make a WCMS "work".
  
2. Never, ever buy anything that you haven't taken the time and effort to learn yourself.
• We required vendors to provide us with a sandbox, and we took the time to actually implement templates and content elements in order to build a real live site using our templates and business processes. We then offered a training/demo of the products to the campus community.
• From that process, we learned things that no vendor demo or series of vendor demos could teach us.

More thoughts to come on issues such a identity management and using your web presence to compete for new students.

HighEdWebDev - Session Summaries

Here's a summary of the sessions I attended at the HighEdWebDev conference in Rochester, NY last week. More detailed impressions to come later.

Monday Sessions

These Kids Today:
Usability testing with parents of new students and new students. Parents are slower, read more, but detect BS text faster. Students are fast fast fast, read with their fingers. Even split between searchers and browse-then-search-ers. Don't wait until the end to do usability studies.

The Accessible Video Interface
Great Flash tools for making video interface with captions. Captioning is a lot of work, and the "video better be worth the effort". Like that.

Supporting Web Presence with IT Comm Partnership
Cornell created virtual organization with IT staff dedicated to working on main campus site underneath the Director of Web Communications. They sold the idea of the partnership from bottom up, but obviously, the two directors work well together and have true collaborative relationship. Not sure such a virtual organization would work as well here, but it's possible.

Adding Google Maps
Mostly basic, but showed Geo-coding (based on addresses), and ways to tie into a database. Alumni locations based on Zip code locations and DB of alumni addresses. Way to do a campus map is to store data in DB and generate client-side JS code from that. Easier to maintain and update.

Lessons learned from Redesign and CMS
Used consultants to redesign site for political reasons.

1. Everything is political
1. move project buy in as high as possible
2. Go where the money is
1. Use the mission statement to cough up money
2. Recruit money from all benefiting depts and units
3. Develop your principles before you start
   1. scope
   2. goals
   3. target audience
   4. cost
   5. timeline
4. Think of campus and site strategic direction
5. Think of your infrastructure
   1. Do you have the people to support/implement project?
   2. Better to out source?
6. Bus. processes are your problem too
   1. bad processes will bite you at every step
7. Use Web Standards and ADA to your advantage
8. Develop clear expectations
9. Get campus on board (fac senate, etc.)
10. Get Exec committee to sign off on visual design
11. Conduct usability studies

10 Signs its time to Redesign
Pretty standard stuff
-site's ugly
-content's out of date
-audience has changed, etc.

Tuesday Sessions

Higher Ed Web Development Gets Flattened, or How I Learned to Stop Worrying and Love the New World Order
Mark Greenfield is at it again with thought provoking ideas about how our jobs will change in the next five years. I wasn't really impressed though. Focus on crowdsourcing, outsourcing, contracting, etc. Interesting tho, the idea that menial stuff will be outsourced so that IT staff can focus on bigger issues. Maybe.

Building a Cohesive Website through a Collaborative Process
U Nebraska at Lincoln
Typical success story - they had buy in from the very top. Pres decided that they needed a unified look and feel and put someone in charge but let them determine what the structure, process and organization would be.

Put together lose network of web "developers" (mostly content editors). Came up with design standard. Developed time line for enforced implementation of standard. A few stragglers, but backed by Pres.

Monitoring Your Web Identity - Jay Collier
Interesting talk about all the different places information about your campus appears on the Web. From news sites to YouTube to blogs, social networking sites, Twitter, etc., etc. And how to use Google Alerts, RSS feeds and other tools to keep track of all of this chatter. Interesting stuff, but time consuming.

The Illusionist: Pulling Web Content out of Thin Air
How to write content for a client Web site when the client gives you no content. Very sad that some people are reduced to this. Pretty basic stuff. Pull stuff out of the catalog. Get print copies of the viewbook. Link to the campus directory. Pathetic that some people have to resort to this.

Google Analytics and Higher Education Web Development
Off the cuff presentation of the basics of Google Analytics. Nothing new here.

Content Management System Round Table
Pat and I hosted this. Interesting to hear other people's experiences. Not too favorable impressions of Collage and Ingeniux from campuses using them. Higher level of success from the few campuses that went to round two and had a better understanding of their needs and processes. Jay Collier expounded on their "one stop" open source solution (name??) that included, wiki, blogs, and all sorts of other tools as well as WCMS. Not the way we want to go. Good reports on Hannon Hill from the people who are using it.

Lost in the Golden Triangle

A look at a heat map of the CSU, Chico home page and how it measures up.

A couple of years ago, some companies got together and did some research on how users viewed a Google results page using eye tracking heat maps. The results showed a "golden triangle" where users spent the most time looking on the page.

Last year, usability guru Jakob Nielson conducted similar research that indicated that most pages generated an F-shaped heat map.

In reality, the 'golden triangle' and the 'F-shaped' pattern are really the same thing. To a degree, they reflect the organization of textual content on content pages, but they also reflect our "training" to look in the upper left-hand corner of web pages as a starting place because we expect:

• To read (or scan) from left to right and top to bottom
  
• To find the most relevant content at the top
• To find navigational options at the top and/or left

Of course, usability experts understand this behavior and design pages to take advantage of it, and in the process they reinforce and reward that behavior.

Well, I'm proud to say that we at Chico State are bucking that trend. No Golden Triangles for us!

Our Web Development guys got a free Crazy Egg account and tracked user clicks on several pages, including our home page. Though the free account only gave us a half a day's information, what information it did provide was revealing.

Link	Clicks	Percent
Portal Login	623	31%
Search Chico State	351	17%
WildcatMail	254	13%
MS Exchange Email	181	9%
Class Schedule	73	4%
CSU, Chico Catalog	70	3%
Directory	60	3%

70% of all clicks were on the top four items. The Portal Login alone accounted for nearly 1/3rd of all clicks.

Of course, these top links were all placed in the upper left-hand portion of the page, right? In fact, none of the most commonly clicked on areas were in the golden triangle - or even near it.

Here's a heatmap of our home page from the test:


Even better, here's the heat map without the site overlay:


As you can see, just about the least clicked part of the page is the golden triangle.

The Portal (lower right), search (top right) and email (far right) links are all in non-prime real estate areas of the page.

Nice.

Hopefully, we'll be able to purchase at least a full month's usage of Crazy Egg in order to gather some real data that will further help guide us to better redesign the new home page...whenever that may or may not happen.