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

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.