Lou Rosenfeld on the Redesign Process

Great presentation by Lou Rosenfeld (of O'Reilly's Information Architecture fame) on the university Web site Redesign process, titled "Redesign Must Die".

Just a couple of nuggets:

• "Every time you redesign, God kills a kitten."
• "Ban the word 'Redesign' at your next meeting."
  

He even uses one of my Tales from Redesignland cartoons!

http://www.slideshare.net/lrosenfeld/redesign-must-die-381947/

Pop Up Menus

We had a recent discussion about using pop ups menus on our sites.

Should the top level menu items be links to a 'main' page or should they just be text to hover over to show the pop up menu? What about menus with combinations of simple links and pop up sub-menus? If there is a link to a 'main' page, what should be on that page?

Sounded like a job for ResearchMan!

Here are my informal results...

General Sites

For the most part, hover menus are not that popular. I looked at about 90 sites (Amazon, eBay, CNN, etc., etc.) and only about 20% used hover menus. That's not to say that they are a bad thing; they just aren't as common as we might think.

Menu Item is Link with Main Page

MSNBC uses hover menus that list major news categories. The first item in the menu is "[Category] Front Page". Clicking on the hover text takes you to the category front page. Time uses similar functioning drop down menus. Clicking on the menu item takes you to the main page for the news category.

A number of other sites follow a similar model, though these do not have the main page listed at the top of the pop up list.

• Science Daily
• Adobe
• Nolo
• ESPN
• Walmart
• WebAward
• Epicurious
• monster.com
• Target
• The Wall Street Journal
• Career Builder
• WebMD
  

Menu Item is Link with Visual Aid

Geek.com uses a visual aid (an arrow) to indicate which menu items are pop ups. There are actually a couple of sites that do this.

Menu Item is not Link

A few sites use a model where menu items with pop ups are not themselves links, but menu items without pop ups are links.

• Wired
• weather.com
• RapidShare

Higher Education

Pop up menus are about as common on university home pages as they are on commercial sites.

Menu Item is Link with Main Page

Of the 40 or so university sites I reviewed, this was the only kind of pop up that I found.

The contents of the 'main page' under a link varied, from 'Welcome' pages filled with happy talk, to links to other sites, to pages of links that essentially repeated the contents of the submenus. On some sites, all of these were present on different links. Some sites included single links as well as pop ups in the same menu, without distinguishing between them (e.g., FSU and Syracuse).

• Strayer University
• Yale
• Stanford
• University of Michigan
• University of Texas at Austin
• New York University
• Florida State University
• Syracuse University

Recommendations

It seems pretty clear that the clear majority of sites make the top level menu items links to some sort of main page. I think it almost approaches a 'standard' practice. I do like the idea of visually distinguishing between simple links and links that have pop up sub-menus.

The destination of the top level link varies. With news sites, it typically goes to something like the "US News" or "Sports" front page. With shopping sites, it might be to the "Electronics" main page.

For university sites, it's a bit less clear, and the destination of the link should probably be determined on a case-by-case basis. Ideally, it would link to a page with relevant information, but there are cases where there might not be much information to put under the main category (this might be particularly true with smaller departmental sites).

So, it might end up linking to a page that just repeats the list of items in the sub-menus. This is sub-optimal, however, and every effort should be made to make the 'main' page contentful (new word!) and relevant. One thing is clear, though... as Steve Krug says in Don't Make me Think, "happy talk must die"! No one reads "Welcome" pages or "Message from the Dean" pages. eliminate them! A list of links is more useful.

Page Titles - Best Practices

Title tags are vital from both usability and SEO perspectives. We use the following format for page title tags: Page Title - Department Name - University Name.

I just finished writing up these standards for our own Web site and realized that they are practices that all universities could benefit from.

Although technically optional, title tags are one of the most vital pieces of information that you can put on your Web pages.

Why? There are several reasons:

1. The Title tag is what appears at the top of your browser window, in the title bar and identifies the page users are viewing (see image, below).
2. The Title tag is what appears in the tabs in the browser window, and identifies the content of each tab (see image, below).
3. The Title tag is what appears in the user's Bookmarks or Favorites when they bookmark your page.
4. Search engines like Google place a lot of weight on Title tags when ranking search results.

Browser Title Bar:

Browser Tabs:

As a result of the importance of the Title tag, we at Chico State have developed a set of best practices to use when assigning Title tags to your page.

Page Title Standards

Use the following format for page title tags: Page Title - Department Name - University Name

Examples:

Faculty and Staff - Geography and Planning Department - CSU, Chico
Academic Services - Provost and Vice President of Academic Affairs - CSU, Chico
Current Students - College of Business - CSU, Chico

Reasons:

You want to include your department name and the university's name in all Title tags so that users searching for "geography faculty chico" will find your page. If you don't include your department name or the university name, you dramatically reduce the odds that your page will turn up in the search results.

Also, the order in which the elements appear is also important. Since browser tabs can only show the beginning of the page title, you want to have the most specific information (the current page's title) first, followed by the department and then the university. Pages titled like "CSU, Chico - Department Name - Page Title" will all appear as "CSU, Chico" in the browser tabs (see images, below).

Wrong: University Name - Department Name - Page Title

All the pages below are different, but you can't tell which is which by the page title, since they all start with "California State University, Chico".

Browser Tabs
Favorites

Right: Page Title - Department Name - University Name

Page titles with the specific page's title first:

Browser Tabs
Favorites

Home Page Titles

Home page titles should just be the department name and the university name: Department Name - University Name.

Examples:

Office of the President - CSU, Chico
Geography and Planning Department - CSU, Chico

Do not use "Home" or "Welcome" in your home page title. Nobody searches for "home" or "welcome" and they take up valuable space in the browser tabs (see images, below).

Wrong: Welcome/Home - University Name - Department Name

All these home pages are different, but we can't tell which is which.

Browser Tabs
Favorites

Right: Department Name - University Name

These home pages all use just the department name and the university name.

Browser Tabs
Favorites

Analyzing the Future - Part 5 - Page Structure

An examination of the organization of page content from a semantic perspective. Sounds scary, but it's mostly about clean, simple, accessible, and well organized HTML on your home page.

In previous posts in this series, I've looked at home page content from a number of different perspectives (navigation, page dimensions, page elements). This time, I wanted to look at the structure of content from a more semantic perspective.

HTML coders (the good ones, anyway) are obsessed with good semantic code; nice hierarchical structures, valid XHMTL, etc. But you can have a well-formed, semantically perfect page that is an incomprehensible, poorly organized and impossible to use site.

The goal is to have good semantics and good organization. If you do that, the odds are that you'll also have good accessibility as well.

Methodology

As usual for this series, I victimized my usual 18 standard sites.

For this analysis, I turned off all CSS and and replaced all images with ALT text using the Web Developer Toolbar in Firefox. This provided me with a semantic view of each page, stripped of the fancy graphics and colors designed to fool me into wanting to attend their school.

I ended up looking at pages like this:


Why would I look at pages like this? A couple of reasons. First, to be able to see the real organization of information on the page, and second (and more importantly) because disabled users using screen readers and users on cell phones often access your pages just like this.

Results

I saw a lot of variations in page organization, and a variety of good and bad practices.

Only two sites used table-based layouts. Yea!

Eight sites had some sort of "Skip to..." navigation at the top of the page, though NC State kind of went overboard with six different "Skip to..." links at the top of the page. "Skip to Content" was the most popular, with "Skip to Navigation" a close second.

A couple of sites put all their links at the bottom of the page. This might have been deliberate in order to focus on the content, but home pages tend to be portal pages, so navigation should be prominent and easily accessible.

Search boxes tended to be toward the top of the page, but not always. I think for disabled users, search boxes must be very difficult to find on most Web pages.

Semantically, sites were all over the map. Some sites, like UT Knoxville and Loyola Marymount, followed valid heading organization. Other sites, used a mix of only H4 and H5 tags, all H3 tags, etc., etc. Some used no headings at all.

There were also a few pages (e.g., University of St. Thomas) appeared to be all links and little content.

Recommendations and Best Practices

Based on my examination of the 18 home pages, I came up with a list of best practices to look for:

• Complete separation of content and presentation (via CSS-based design)
• This includes CSS-based layout instead of table-based layouts
• Semantic HTML
• Based on properly ordered and nested heading tags (H1, H2, etc.)
• Presence of descriptive ALT tags for all non-content free images
• Images that are just pretty pictures can have empty ALT tags
• Presence of navigational shortcuts at the top of each page
  
• e.g., "Skip to Content" links
• Reasonable mix of content and navigation
• Who wants a page that's nothing but links? It makes your home page look like a link farm.
• Prominent placement of search box
• Typically very near the top of the page, or the placement of a navigational shortcut to the search box at the top
• Prominent placement of the name of the institution
• This should be your H1 tag (ya think?)
  

What would the "perfect" page look like? Well, the actual content would depend on your site, but you can see a sample bare-bones page here, or look at the layout below.

Sample Page:

---

• Skip to Search
• Skip to Navigation
• Skip to Content

Hypothetical State University

Search HSU

Navigation

• Prospective Students
• Current Students
• Faculty & Staff
• Alumni
• Parents & Friends

• About HSU
• Academics
• Admission
• Athletics
• Bookstore
• Campus Life
• Catalog
• Library
• Giving

• Campus Map
• Directory
• Portal
• Contact Us
• Help

Content

News & Announcements

News Item 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam suscipit, tortor quis sollicitudin porttitor, diam metus aliquam ante, ut sodales felis purus ac quam. Mauris ut erat in ipsum laoreet lacinia. More...

News Item 2

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec varius tempus urna. Phasellus porta blandit lacus. Nunc nec arcu et metus sodales ullamcorper. Mauris vitae leo id sapien sagittis lacinia. More...

More News...

Events Calendar

February 14, 2008

Valentine's Day Massacre - Have a bang at the SMC Cartage Garage!

February 20, 2008

Integer mattis dolor vel felis. Aliquam viverra nunc eget leo. Pellentesque interdum urna non purus.

More Events...

Hypothetical State University
123 Main St.
Anytown, USA 12345
1-800-345-6789
info@hsu.edu
Copyright © 2008 HSU

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.

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...

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.

Search vs. Browse - Let the Argument Continue!

Which is "better"? Neither. Both. It depends.

There is research out there (you go find it - I'm too lazy) that suggests that different people have different strategies for finding information on websites. Some people tend to browse while others tend to go straight to the search box.

I thought about this and came to the realization that it's not as simple as that. Viewing my own behavior, I've discovered that I use different information finding behaviors on different websites.

The following are a few examples. What does this have to do with redesigning university home pages? Not much, but we seem to keep arguing about whether searching or browsing is "better", and I thought I'd toss this into the mix.

Digital Photography Review- Generally speaking, I browse this site, except for the forums, which I almost always search for specific topics. Partly I browse because the site lacks a comprehensive search feature, but also because the site is clearly and simply organized.

National Weather Service, Sacramento - I always browse and never use search, mostly because I know where the things I want are and the site is fairly simple.

Amazon.com - I nearly always search if I know what I'm looking for. However, if I don't know the exact thing I'm looking for I'll typically search to the category and then browse from there to the specific item. For example, if I want to see if there are any new wine books out, I'll search for "wine" and then browse the rest of the way.

Wine Library - Again, if I know exactly what I want, I'll search for it. But if I'm just looking for a nice Bordeaux, I'll browse through the listings.

Wikipedia - OK, I admit, I'm one of those people who use Wikipedia and actually believe what they read. In Wikipedia I search exclusively. I'm not even sure if there is a browse feature.

IMDB - Again, exclusively search. Is there any other way in IMDB?

Anthony Dunn Photography - This is my own website. Clients often call and ask what photos I have of this or that and I use my website to see what I have. Depending on what people are looking for, I may browse through the stock photo section of the site or just do a search. I'd say that 70% of the time I use the search box.

CSU, Chico - I had to add this one, but it's not really fair include it. For the most part, I know the URLs of the sites I'm working on, so typically I just type in the URL. I've bookmarked a number of other pages. I pretty much only use the search box for testing and only browse to see if something is findable that way.

Bottom line: On different sites I use a different approach based on my needs and goals and on the capabilities of the site itself.

• On sites I'm very familiar with and use the same information over and over, I tend to browse.
• On commercial sites where I want to browse the wares, I tend to use a hybrid search/browse approach.
• On informational sites, I tend to search for what I'm looking for.

Where would university sites fit in this spectrum? My guess is they would tend toward the informational, and I would probably tend to use search over browse.

The Purpose of the University Home Page

A very high level overview of the purposes of a university home page.

Why have a home page? I mean, really, who uses it? There's nothing important on it that can't be found elsewhere, and it's just a big political football. Why not just put up a nice 404 page and leave it at that?

OK, OK, I was just kidding (sort of). Your home page is more than just a huge political nightmare. It serves, in fact, a large number of audiences, a large number of purposes, and takes on a lot of different roles.

Let's start of easy with large-scale types of purposes. We can work down to more detail from there.

1. Branding
2. Marketing
3. Communication
4. Navigation

In his article on Home Page Goals, Derek Powazek echoes some of these four purposes in his four goals:

1. Answer the question, “What is this place?”
2. Don’t get in the repeat visitor’s way
3. Show what’s new
4. Provide consistent, reliable global navigation

Of course, these four purposes don't exist in a vacuum:

1. Branding for whom?
2. Marketing of what to whom?
3. Communication of what to whom to what end?
4. Navigation to where for whom?

You have to answer these questions before you should even think about having a home page.

If you have other gross-level purposes, I'd like to hear them.

University Web Services Infrastructures

A review of how some universities manage their web services organizations.

About three years ago I did a presentation at EduCause about the organization of Web Services and Web Development departments at a variety of universities. Though the examples in the PowerPoint from that presentation may be a bit dated (read: some of the links no longer work), the points and issues I raised in the presentation are still valid.

Here's a link to that original PowerPoint.

The top issues campuses are facing with regard to their web presence:

• Identity, Branding & Consistency
  
  • #1 issue at virtually every campus I spoke with
    
  • Greater even than content management
    
  • 87% said visual consistency very important
    
• Decentralized Web Presence
  
  • Even the best campus would rate “poor to hopeless” compared to the worst
    e-commerce site
    
  • SLO
    
    • Two-year redesign process only affected top two levels of pages
      
    • Can only “recommend” use of new template to departments
      
  • CSUDH uses “stick” approach
    
    • Buy-in from the very top
      
    • “Conform with new template by Dec 15th or have your link pulled from
      the site”
      
• Content Management & Other Systems
  • The most consistent campus sites all use an enterprise-level CMS

Based on what I saw being done at other universities, I developed a basic infrastructure outline that could be implemented at most universities, including CSU, Chico:

• Permanent advisory/planning committee
  
  • Advises on priorities, future direction, messages and policies
    
  • More strategic in focus than day-to-day
    
  • Typically no specific design authority; may set university branding standards
    
• Administration
  
  • Coordinates between departments
    
  • Runs servers
    
  • Often enforces standards, sets technical standards
    
  • Provides staffing & expertise
    
• Implementation team
  
  • Designs and implements websites and services
    
  • Provides technical expertise
  • Enforces standards on sites it implements
    
  • Designers, programmers, developers, information architects, project managers
    
• “Web Users” group
  • A way for departmental webmasters to keep up with standards
    
  • Provides an avenue of communication between editors and Implementation Team, Administration and Advisory Committee
    
  • Support group for web editors
    
  • Provide training, troubleshooting
    

What I think of Our Own Home Page

OK, now that I've published my home page rubric, how does the Chico State home page measure up to it?

First let me start by saying that I didn't design this page and I'm not responsible for this page.

So here it is:

Standards: 1
Accessibility: 2
Design: 2
Organization: 2
Identity and Branding: 2
Message and Purpose: 1.5
Total Score: 10.5

Considering that these should all be threes, not so good, but not as bad as I imagined.

How about the University of Tennessee at Knoxville home page, which I recently discussed...

Standards: 3
Accessibility: 3
Design: 3
Organization: 3
Identity and Branding: 3
Message and Purpose: 3
Total Score: 18

That's a little more like it.

A Home Page Rubric

An example rubric for evaluating university home pages.

OK, I admit, I work in an environment where I'm surrounded by instructional designers. I live with a teacher. And I have a Master's degree in Instructional Technology.

And I hate the word "rubric". But teachers and instructional designers love rubrics. They have rubrics for everything. They even have rubrics for evaluating breakfast:

Category	4	3	2	1
Eggs	Soft and moist without being runny.	Not over or under cooked. May be lacking slightly in flavor.	Somewhat dry or runny.	Completely dried out or barely cooked. No flavor at all.
Bacon	Nice and crispy, but not burnt. Incredible flavor.	Good flavor, not overcooked, but perhaps slightly soft.	Somewhat dry and overcooked or too soft and chewy.	Burnt or nearly raw. Poor flavor.
Toast	A nice goldern brown, with a generous layer of melted butter.	Slightly over- or under-cooked.	Toast too dark or too light. Too little butter.	Burnt to a crisp.

Truth to be told, rubrics are very useful, and I'm working on a rubric that I use to informally evaluate university home pages. It uses the following criteria (in no particular order).

Category	3	2	1
Standards	Complies with web standards (CSS layout, XHTML, etc.)	Mostly complies with standards (may have some validation errors)	Does not comply with standards (table-based layouts, etc.)
Accessiblity	Page is designed for accessibility and includes accessibility shortcuts like accesskey and skip to content links	Page meets basic accessibility standards but does not display awareness of real accessibility	Page does not meet basic accessibility requirements
Design	Design is professional and clean and current-looking (Fresno State)	Design is professional, but looks dated or static (San Francisco State)	Page does not look professionally designed (Duke University)
Organization	Page is organized into clear areas, excellent use of white space, callouts, sidebars, etc. to delineate different areas of the page (Virginia Tech)	Page is somewhat well organized. May be somewhat clutteredor empty-looking.	Page is poorly organized, and probably extremely cluttered. May have multiple poorly delineated navigation areas. Page is muddled and 'organized' without clear rhyme or reason.
Identity & Branding	Page communicates a clear and consistent identity and branding of the institution that carries through to other pages.	Identity and branding are present, but may not be consistent through the site or even top level pages.	Branding and identity are not clear or not present on the site. There is little to distinguish the institution from others.
Message and Purpose	Page communicates a clear focus of message and purpose. Content and links relate clearly and directly to that focus. Extraneaous content that does not fit within the purpose of the page (often motivated by politics) is not present.	Page communicates some focus of purpose and message but may contain extraneous or politically motivated content.	Page is a hodge-podge of content with no clear purpose or message. User comes away not knowing what the site is trying to say or who it is directed to.

Please feel free to write be with your ideas or comments. I think there are probably a few things that could be added to this rubric, or at least some refinements. I'd like your input.