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

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.

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.

More Bad Interaction Design - University of Vermont

Part something in a continuing series about bad interaction design on university home pages.

OK, more nitpicking. Take a look at the University of Vermont home page. Mouse over the black and white photo. Kewl. It slides over to reveal a story. I don't really have a problem with that, though I wouldn't do it that way.

My problem is elsewhere. Look above the photo, just to the right of "University of Vermont". What does "✓FULL MEDIA" mean? Is it just a piece of system status information? Is it a link?


Ah! When you click on it, it changes to "✓ LOW MEDIA" and the Flash animation is replaced by a static image. Oh...so "Full Media" really meant "High Bandwidth" and "Low Media" meant "Low Bandwidth". Why didn't they say so?

But what's this? If I click on it again it changes to "✓ TEXT ONLY" and just text is displayed instead of the image.

Cool!!! Or is it?

Not really. Why? Because I really had no idea that it was a link at first. And clicking on it didn't really function as we would expect a checkbox to operate. There is a well-defined and consistent checkbox metaphor on most Operating Systems. Checkboxes are supposed to be checked or unchecked but the options aren't supposed to change. This checkbox violates that model by leaving the box always checked but changing the option. That's wrong. You shouldn't mess with metaphors that people understand.

In addition, I had no idea what the options were. Once I clicked on it, I figured that it was just a toggle between high and low bandwidth. I had no idea that there was a further option. That's poor communication on their part.

How to Fix It
They have a couple of options.

• Ditch the Flash animation. Stick with the static photos
• Don't use a checkbox metaphor unless people can see the options and the box is going to function according to the standard metaphor
  
• Show all the options. Perhaps moving it to the lower right-hand corner of the photo.
  
• Change the words to match familiar terms: "Full Media" to "High Bandwidth", etc.
  

Moral of the Story

• Don't use Flash animation unless it really adds something to the content.
• Don't mess with metaphors people understand. It confuses and frustrates them
• Don't hide options or people won't know what choices they have
• Use terminology that people are familiar with

Here's one relatively unobtrusive idea, but certainly not the only - or even best - one. Notice that it uses radio buttons instead of checkboxes to be consistent with standard OS interface widgets.

Where's the Branding?

A good example of bad site branding.

OK, you have five seconds to tell me what school this is. Go!

Come on, folks! You really need to hit people over the head with your branding. Prospective students are going to look at dozens, maybe hundreds of college and university sites. Yours needs to be clearly identified and memorable.

What school is this? You have five seconds to tell me! Oh...you didn't need even half a second, because the home page screams the school's name. Or at least, it screams the name of the state the school is in.

MECA is a tiny little school with no where near the name recognition that the University of Wisconsin has. They need to make a greater impression with their name and brand that UWisc does - by far! So why hide their name? Dare I suggest that an artist and not a Web designer designed the site? Perhaps that's unfair, but it wouldn't surprise me.

Home Page Flash I Don't Like - UCLA

A look at a flash implementation at UCLA that isn't bad, but doesn't give the user enough control.

I'm not feeling so good today, and that makes me hate every Web site I see, so today I'm going to complain about Flash on university home pages. I know, yesterday I was all peaches and cream about the FSU home page, and I still like what FSU has done, but today I feel like whining.

Let's start with UCLA's home page. Overall, I really like the look of the UCLA home page. It's very clean. And their use of Flash isn't totally gratuitous. But there are a few things. First of all, what's with the "'Tis the season to be mellow"?? What a waste of real estate! Sure, stress management is important... but not on the home page of a major university!

But my main issue is with the Flash-based "Happenings" on the right side of the page. First of all, there really isn't anything to indicate that these are changable. Yes, there are up and down arrows, but they don't really scream "interaction" to me.

And then, if you do try to click them, they don't act quite as you'd expect an arrow button to work. In fact, you can't click on them. Mousing over the button causes the happenings to scroll up or down at a constant rate.

Though this is OK, it takes control away from me the user. I'm impatient. I don't want to sit there and watch the thing scroll at it's snail's pace. I want to control the speed. How about making it so mousing over the arrows causes it to scroll, but clicking on the arrows causes it to skip ahead to the next screen of happenings? That gives control back to me. I control my experience, not the Flash developer.