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.

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.

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

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.

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
    

University of Tennessee, Knoxville

The University of Tennessee at Knoxville has a very nice home page. At least, I think so.


What makes it successful to me?

1. Very clean, up-to-the-moment design, with good use of white space to chunk the page.
2. Prominent navigation area. Main navigation components are not spread around the page.
   
3. Relatively unobtrusive use of Flash that provides a level of interactivity.
4. Nice, relatively engaging people photos in prominent location. Not too big, but eye-catching. Unfortunately, they seem a bit generic to me. I can see pohotos of college students anywhere. Show me something unique about your school.
5. Clearly deliniated audience-oriented navigation. It's part of the main navigation but effectively set apart by the orange background. Smart and effective.
6. Effective use of news and events. I like the RSS feeds and even (gasp!) the icons they use on the home page.
   
7. The design and layout are all CSS and web standards-based. Very clean.
8. Nice use of access keys. A very accessible page.
9. All of the top level pages stick to the home page template. Maybe a bit too slavishly for my taste, but much better than the usual alternative of total design chaos.
   

What don't I like? Not too much.

1. The Top 40 University and Apply Now! sections don't stand out sufficiently. I'd suggest getting rid of Apply Now! and increase the size and prominence of the Top 40 University section. Use colors or a callout to make this section stand out more.
2. I like the idea of a "Future" section on the home page. We've had that discussion here, and I think showing the direction that the university is headed in the future is a great idea. Oh, wait, that isn't what this is. This is only a bunch of links to the UT system. Pffft. We're wasting space on the home page for this?
   

You could do a lot worse than this as a home page.

This redesign was implemented in February 2007 and had five goals (thanks for a. - having goals, and b. - sharing them with us!):

1. To bring the site into conformity with the recommendations of the W3C, making the site more accessible
2. To better leverage dynamic content through the use of RSS feeds and an events calendar
3. To improve navigation based upon data collected by tracking actual use of the site
4. To better represent, visually, the vitality of life on the UT Knoxville campus
5. To build a clear and compelling brand identity for the University of Tennessee

Interesting mix of user-oriented and marketing-related goals. Good job folks!

Virtual Tours

A review of "virtual tours" - good and bad - on various university websites.

Boy, there are some lame virtual tours out there. A lot of campuses seem to think that a page with links to a few QuickTime VRs constitutes a virtual tour.

To be fair, whether or not a virtual tour is a "good" virtual tour depends on what the goal of the tour is. Is the "tour" supposed to be a real tour - that is, a guided exploration of important places and things on campus? Is it intended to be used to market the beauty of the campus? Is it intended to simply orient prospective visitors to the layout of campus?

Before embarking on creating a "virtual tour", I think you really need to answer the question of what the tour is supposed to accomplish. Only then can you say if it's a "good" tour or not.

That said, I looked at a lot of virtual tours, and picked out a few that I thought were well done.

UC Merced
I liked their's mostly because it was simple and clean. Menu - picture - text. Can't get any easier than that. On the other hand, I didn't think the tour really told me that much about the campus or region. Maybe it was too simple.

UC Davis
A lot of effort obviously went into the UC Davis tour, and it's obviously directed at prospective students. It provides a fair amount of information about Davis and the campus in a nicely designed format.

A couple of quibbles:
If you need to spell out "click photos >>" then you've got a usability problem - people don't recognize the little photos as navigation. Put left and right arrows next to the main photo.

Also, I'm starting to get a bit tired of generic "college life" photos. The guy in the cafeteria with a plate of food could be anywhere. Instead of the generic, try to focus on the different, the special and the unique. Prospective students will look at dozens of campus sites. They'll see lots of generic photos of campus life. You want to stand out, so you need to focus on what makes your campus different, special and unique.

University of Oregon
What I liked about this tour is that it was set up as an actual tour, with a starting points, sights along the way, and an ending point. However, inside the tour, the order didn't seem to make any difference. I liked the photos and the videos, but I wish the site had been more responsive.

University of Florida
Oh how the mighty have fallen. I loved their Google-based campus map, but this tour is both lame and annoying. The sound effects are terrible. I do like the interactive map, but I don't like how only some parts are clickable and I don't like that it has to load a new page to show info on the place you clicked on.

Yale University
Yale's tour is actually a number of different things. It has an "atlas", which is like an overview map (not too dissimilar from Humboldt's). But it also has a season-based photo slide show, a page on the numbers of international students (why that goes here, I don't know), QuickTime VR panoramas, notable graduates, a comic, and an almost endless list of other stuff.

I like the idea of the tour being more than one piece, but this isn't a "tour", it's a "hodgepodge". Some things obviously belong, but others generate a bit of a "huh?" factor. Also, the endless scrolling menu must be put to death.

Lewis University
Like a more focused version of the Yale "tour" Lewis University has combined a "virtual campus" and a "guided tour" into a single presentation. Very cool 3D campus map. Other than that, it could be a lot more effective where you are in the guided tour and why you should care.

Fresno Pacific University
Oddly, far and away the best tour was by this small Christian university that I'd never heard of before. I really liked the choice of tour guides with their different approaches and personalities. These guides were videos of different students talking about each place/activity on campus. They even had Spanish and Russian versions.

I loved the layout of the tour, broken into four components: a very nice and detailed zoomable map, a QuickTime VR of your location, a brief text description, and a 30-60 video of your tour guide talking about the location.

Extremely informative and well done. My only gripes are that there are dozens of hot spots on the map which are invisible by default (you can change that), and that the map doesn't highlight your current location. When you start the tour, you have no idea where you are on the map.

Of course, creating something like this would be a major effort, from creating the maps to scripting and shooting the videos of the tour guides. Kudos for expending the effort!

What I like in a Virtual Tour

• A responsive tour. I hate slow tours that take forever to load.
• An interactive tour. I like to control my browsing experience, not have it fed to me with no choices.
  
• An integrated approach. A tour should be more than just some QuickTime VRs. Text, maps, VRs, photos, videos - all can be effective parts of a tour.
  
• An organized approach. Provide a real guided tour, don't just drop people on campus.
• Free exploration. Drop me on campus and let me explore. So, yes, I want both options in a virtual tour: guide me when I want to be guided, and let me explore when I want to go off on my own.
• Always having a map visible
• Relevant and interesting information
  
• A focus on what makes the campus/region different, special and unique ("DSU")
• VR panoramas. OK, I admit, I like these when they're well done. Nothing else gives you that 360 degree "you are there" view of a location.

Campus Maps

A review of good and bad campus maps on various university websites.

As part of the redesign we're doing for the College of Business, we're developing a virtual tour, something similar to the "Explore" page on the new Humboldt State.

So, we're in the market for interactive maps. Rather than reinventing the wheel, I always prefer to steal from others, so I took a look at several dozen campus maps to see what I liked and what I didn't like. Though this project isn't going to be a campus map per se, I thought I'd start there to see how campuses are handling them in useful ways.

Humboldt State University
Their map was the inspiration for what we're doing, so obviously we like it. I like the scalability of the map and the fact that it highlights things of interest. It also has a smooth functionality. I don't like the way it zooms in very much (it moves the center of the map) and I feel that the campus map doesn't really provide much detail or useful information - but then, that's not it's purpose. However, great execution and very nice to look at.

Ohio State University
The only things I really like about this is that the map is very nice looking and I like the photos.

UCLA
UCLA has done an interesting map. I like the rollover interactivity, the photos and the graphic design of the map, but otherwise it doesn't really stand out.

University of Florida
This is my favorite overall. I like the Google Maps implementation, mostly because the Google Maps interface is flexible and easy to use. I like the overlay map, the layers of placemarks, the search ability, etc. I also like that the map scales in detail as you zoom in and out. Personally, I think this is the easiest to use, most flexible and most informative campus map I encountered. The only thing I didn't like was that the panoramas and webcams opened in a separate window instead of the pop-up balloons on the map. I also thought that the UF overlay wasn't very attractive, but that could be fixed.

UC Riverside
I thought this map was ugly and clunky, but I did like how they implemented layers on the map (though the "OFF" buttons were not intuitive).

Kansas State University
I liked the rollover effect and the oblique view used. Otherwise, nothing special.

Santa Clara University
I liked the zoomable map and the photos that appear on the side, but I didn't like having to double-click. That wasn't intuitive.

Arizona State University
Another Google Maps implementation. Not as nice or as informative as the UF map, but still better than most.

What I Like in a Campus Map

• Quick response (many maps were slow or had to load a separate page when you zoomed in)
  
• Detailed zoom control with easy to use controller with feedback (e.g., Google Maps)
• "Grab and pan" control for panning map (like Google Maps)
  
• Switchable custom data layers to show/hide information
• Attractively designed maps (many maps were crude or used ugly colors)
  
• Clear to read and clearly labeled maps (many were difficult to read)
• Photos of buildings (seeing a square on a map doesn't help you recognize the building on the ground)

The UF map meets virtually all of these requirements.

Audience-Oriented Links - "Prospective Students"

Part 1 in a look at what's behind audience-oriented links.

In my Analysis of Navigational Links on Top 20 Home Pages, I discovered that 75% of the sites had a navigational menu devoted to audience groups (e.g., prospective students, current students, faculty, alumni, etc.) and 90% at least had a link for at least "Alumni".

Obviously, audience-oriented navigation is popular. But what is behind those links? What services and information are sites directing these audiences to?

This is the first in a series of posts exploring the links behind the audience-oriented menus.

Prospective Students

As I discovered in a previous post, "prospective students" is not a universal label. Of the 12 sites with a link to this audience group, 9 used the label "prospective students" and 3 used "future students". I personally like "future students" better, but mostly because it's shorter and would fit in a smaller space.

Methodology and Results

I clicked on the "Prospective Students" link and inventoried the links unique to that page, ignoring global navigation links that were also found on other pages. Here's the results (links that appeared on 3 or more sites):

Link	Total	Percent
Graduate Admissions	11	92%
Undergraduate Admissions	9	75%
Financial Aid	7	58%
International Students	7	58%
Visiting/Visitor Center	6	50%
Continuing Education	5	42%
Distance/Online Learning	5	42%
Transfer Students	5	42%
Academics	4	33%
Apply Online	4	33%
Campus Map	4	33%
Freshmen	4	33%
Summer Academic Programs	4	33%
Directions	3	25%
Housing	3	25%
Campuses	3	25%

Conclusions

Eh. Mostly pretty boring and typical stuff. Come on people! Do something engaging and interesting! This is the page where students who are shopping for a university go first. This page should really grab them and offer a persuasive argument why your university is THE ONE they want. After all, these students may be looking at dozens of other university sites. You have to do something that stands out.

And honestly, for the most part, none of the 12 sites that I looked at did. But a few are doing some vaguely interesting stuff.

Utah State has a link to campus webcams (though the image is lame).

University of Illinois at Urbana Champaign and the University of Colorado both had links to virtual tours. Unfortunately, UIUC's wasn't even an actual virtual tour. UC's was better, but used pop-up windows (annoying) and only featured a few locations. I'll do an entire post on virtual tours some time soon.

Today's prospective students are pretty technologically savvy and used to social networking applications like MySpace and Facebook, as well as self-publishing tools such as blogs, photo sharing sites, as well as video-sharing sites like Youtube. Today's universities need to be making good use of these technologies, particularly on the pages that prospective students are most likely to visit.

Recommendations: Stand out from the Crowd

So what things can you do to attract prospective students and stand out from the crowd?

• Use student blogs to personalize your school
  
• Use videos to communicate your people and your place (post them on YouTube as well)
  
  • Campus Tours
  • Student Life
  • Community Attractions
  • Lectures and seminars
  • Concerts and performances
• Used geotagged photos in Flickr or Panoramio to show the beauty of your campus or location
  
• Create virtual tours in Google Earth to familiarize people with your area (Here's an example - you'll need Google Earth installed. Choose "Tools", "Play Tour" to play the tour. You may have to adjust your tour settings to slow it down a bit. All place marks in the tour have photos attached.)
  • Campus Tours
  • Restaurants, Cultural Attractions
  • Local Landmarks
• Use podcasts like blogs and videos to personalize your school and to communicate the people and place
  
• Use Facebook groups and online forums to personalize your school and to reach out to prospective students
  
• Use IM to chat with prospective students live

Not all of these might be appropriate for your campus, but prospective students are going to be using these tools to learn about your campus. Even though you can no longer control the message, at least you can be part of it.