Showing posts with label home pages. Show all posts
Showing posts with label home pages. Show all posts

Tuesday, February 12, 2008

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:


Hypothetical State University

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

Tuesday, February 5, 2008

What is the Purpose of a University Web Site?

Yesterday our CIO was going over the new Web governance structure being implemented at our campus. According to him, one of the missions of this new Web governance structure is to "determine the purpose of the university's Web site."* It seems like a reasonable question.

Now, I've taken a small poke at that issue in a previous post, but I got afraid and ran away from it because it seemed big and scary.

But it's a real issue... or is it?

If you put it in the terms of, "does our university Web site have a purpose?", you better hope the answer is "hell yes!" instead of "not that I'm aware of", but trying to define that purpose is not so easy.

Of course, you're all saying, "the Web site doesn't have a single purpose." And let's face it; it's not even one Web site; it's many Web sites, under the control of many different people, and serving many different audiences and needs.

As a result, I'm not personally convinced that we can come up with a "definitive" answer to this question. I believe that we have to take a more molecular view of the site. That is, I think that we can say, "OK, we need to do this. And we need to have that. And there has to be this component", without having to have a complete "big picture" view.

Not that I don't believe in the "big picture" approach, or even agree with it; I do. I just feel that the Web as an environment, as a tool, and as a platform is too complex and evolving too rapidly for definitive, big picture answers.

Of course, that doesn't change the political reality that the CIO expects the Web governance suckas (er... committee members) to determine the purpose of the university's Web site.

Personally, I plan to be sick that year.

I'm sure some of you have encountered this issue. How have you approached it? Dealt with it? Defused it? Succumbed to it?

*(for the sake of simplicity, I'm assuming here that he was referring to the campus's public Web site, www.csuchico.edu, and not all the other Web-based applications, such as the portal or the LMS).

Monday, December 17, 2007

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

Thursday, December 13, 2007

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.

Wednesday, December 12, 2007

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

Wednesday, October 31, 2007

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




Tuesday, May 29, 2007

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.

Monday, May 21, 2007

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
EggsSoft 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.
BaconNice 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.
ToastA 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
StandardsComplies 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.)

AccessiblityPage is designed for accessibility and includes accessibility shortcuts like accesskey and skip to content linksPage meets basic accessibility standards but does not display awareness of real accessibility Page does not meet basic accessibility requirements
DesignDesign 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)
OrganizationPage 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 & BrandingPage 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 PurposePage 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.

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!

Thursday, May 17, 2007

University Home Page Audiences

In this post, Georgina Hibberd states that the first step to an effective university home page is to "identify your audiences and place them in a hierarchy of importance."

OK, I'll buy that. So who are your potential audiences? I'll start a list, and then the three people who read this blog can pick it apart. Most of these audience groups are obvious, but it's always good to put them out there.

  1. Prospective students
  2. Current students
  3. Former students (mostly alumni)
  4. International Students (important for some campuses)
  5. Faculty
  6. Staff and Administration
  7. Faculty, staff and administrators from other universities
  8. Job seekers (both faculty and staff)
  9. Parents (of current and prospective students)
  10. Community members (town residents, local businesses, governmental, etc.)
  11. Prospective community members (people thinking of moving to the area)
  12. Partners (business partners, granting organizations, etc.)
  13. Media (you don't think that Virginia Tech's home page wasn't pounded by the media?)
  14. Donors
  15. "Friends" and "Visitors" (whatever that means) - from this post
  16. Web developers from other universities looking for inspiration for their own home page redesign
These aren't in any specific order, though they generally get less significant as you go down the list. Different people on campus will definitely rank these groups differently in importance. Personally, I don't think that it's important to fight over whether community members are more important that business partners, but I do think that it's important to rank the top 4 or 5 audience groups and state specifically why they are so important to you.

Got any significant audience groups to add? Let me know. But I think I've covered the main bases.

University Home Pages: A Thankless Task?

I enjoyed this blog about what makes a good university home page and what to look at in designing it: University Home Pages: a thankless task?

To summarize:

What makes a good university homepage?

  1. Clear pathways to further information
  2. An uncluttered interface that serves only the users, not the wishes of every group on campus with a website that wants a link.
  3. Clear and consistent branding
  4. Pleasing graphic design that appeals to the largest target audience group of the page without alienating other groups completely

How to design a homepage:

  1. Identify your audiences and place them in a hierarchy of importance
  2. Develop a clear idea as to why these audiences are coming to the site and prioritise their tasks
  3. Reflect the strategic goals of the university while illustrating an image of the University
  4. Wrap it all in a graphic design which appeals to your largest user base, while not alienating other small user groups

Wednesday, January 17, 2007

Perfect Home Page Photos - Part 2

An excruciating examination of each of the photos I chose for my mock up site.

In Perfect Home Page Photos - Part 1, I discussed tips to effective home page photos and provided a link to a mock up home page where you could view a variety of different photos.

Please view the Hypothetical State University mockup to see the photos in action.

In this post, I'm going to discuss the choice of photos in a bit more detail. First, I'd like to break down the photos into several categories:
  • Scenic Photos
    • Campus Buildings & Environment
    • Campus - Past & Future
    • Local Natural Environment
  • People-oriented Photos
    • Local Community & Activities
    • Academic Programs
    • Faculty Accomplishments
    • Student Accomplishments
    • Sports
    • Students Engaged in Activities
    • Diversity
I was able to find effective, high quality examples of most of these types of photos.

Scenic Photos

Campus Buildings & Environment
Effective photos of campus buildings and the natural environment of the campus serve the purpose of highlighting the beauty of the campus setting and the uniqueness of its buildings. Many campuses have outstanding old buildings in park-like settings, and this can be exploited to communicate a beautiful and secluded academic environment.

Text associated with such photos should stress the outstanding characteristics of the campus plant, such as the number of acres the campus comprises, the age of the buildings, the age of the plantings, any awards or recognition the campus or its buildings have received, notable architects, unique buildings or building characteristics, etc.

Examples
This photo shows off the nice architectural detail of the campus. Coming up with a story to link to might be difficult, but a page of photos of the building wouldn't be inappropriate.

This photo shows off the beauty of the campus's natural environment. Linking to a story about Big Hypo Creek would be appropriate.

This photo gives a wider view of a campus building. This isn't my favorite photo, but it was the best I had. Linking to a story on the history of the campus wouldn't be completely inappropriate.

Campus - Past and Future
Past and future images of the campus can serve to place it in context. Older campuses in particular can benefit from highlighting their illustrious past. Photos of original buildings, the first graduating class, etc., can be effective. However, students tend to be less interested in the past and more interested in the future. Computer-generated images of planned buildings, if of high quality, can be effective in communicating how future-oriented the campus is.

Text associated with photos of the past should focus on generalities like how long the campus has been in existence rather than on specific past events (which may be of little interest to anyone).

Examples
I'm not very fond of this photo, but it was one of the few that I could find that would fit into the photo space. A link to a history of the campus would be appropriate.

This high quality 3D CGI works well on the home page and shows the future direction of the campus. Linking to a story about the new building or to a web cam showing the construction of the building would be appropriate.

Local Natural Environment
Almost all students are interested in the local natural environment of their potential new home. Images of state and national parks, unique natural features, rivers, mountains, forests, etc., can give them an idea of the beauty of the area.

Text associated with the photos should focus on the outstanding characteristics of the local natural environment, such as national parks, acres of public forest and recreation facilities, outdoor activities, etc.

Examples
This photo shows off the natural beauty of the region. Linking to an article about the preserve would be appropriate.

Another photo highlighting the natural beauty of the region. Linking to an article on the National Park would be appropriate.

Yet another photo. Linking to a photo essay on local wildflowers would be appropriate.

People-Oriented Photos

Local Community and Activities
As with the local natural environment, students are very interested in the local community where their prospective school is located. Photos of local events and locales such as art galleries, arts performances, farmers markets, city scenes, nightlife, etc. can be effective tools for communicating a lively and involved community offering lots of activities to students. Rural campuses may need to stress more outdoor activities instead of nightlife and arts.

Text associated with the photos should stress the number of activities available in the community and any unique activities that may exist.

Example
This photo shows a scene of a community activity. Linking to an article on the farmer's market would be appropriate.

Academic Programs
It's perfectly acceptable to try to stress the outstanding nature of a university's academic programs, but unfortunately, it's a subject that does not lend itself easily to dramatic or interesting photos. Most photos will tend to be rather generic images of faculty teaching or students looking on intently.

As a result, most of the interest will have to be generated by the text. Focusing on specific programs that have received some sort of recognition, or that have some unique characteristic is probably the best approach. Generic references to a university's program will garner little interest from students (e.g., "HSU's outstanding academic programs are known throughout the country."), instead focus on specific, quantifiable measurements of academic quality (e.g., "Forty-seven percent of HSU graduates go on to pursue post-graduate degrees.").

Examples
Though this photo doesn't include people, it does have the potential to generate interest, partly by being so unusual for a university home page. A link to a story about the program would be appropriate.

This photo generates interest primarily because the people in the photo are attractive, smiling young women, looking directly at the camera. The story is mostly an excuse to include "smiling women" type photos. Obviously, a link to a story about the post-graduate educational habits of students would be appropriate.

Faculty Accomplishments
Highlighting faculty accomplishments, research, awards, and publications can be an effective tool for highlighting academic excellence on campus. Of course, research universities are more likely to have a lot of faculty accomplishments to focus on. Internal awards, such as "Faculty of the Year" should be avoided. Students are comparing your school against others, and as a result, internal awards become meaningless.

As with academic programs, the photos themselves may tend to be rather bland - photos of faculty staring at the camera or engaged in their research. Again, most of the interest will have to be generated by the text. Text should focus on specific accomplishments (e.g., "Professor Tom Jones received a $5.5 million grant from the Centers for Disease Control to study the spread of West Nile virus", not general statements like "Professor Tom Jones is one of the most published faculty on campus".

Examples
I had a difficult time finding faculty photos that were interesting and that would fit in the space. This is a location photo, showing the faculty member in class, is probably more interesting than a straight studio shot. A link to the American Studies program or a link to a story about the program would be appropriate.

This photo, though a studio shot, is interesting because of the pose and the fact that the person is looking directly at the camera. A link to an article on the faculty member would be appropriate.

Student Accomplishments
Student accomplishments are plentiful at virtually every university, but too often go overlooked. Everything from academic achievements (prestigious scholarships) to competitions are good subjects for photos. Of course, action-oriented subject like solar car races are preferable, but that isn't always possible.

So again, the text may have to generate the interest in the topic. And, as usual, the subject should focus on specific, quantifiable accomplishments like "Student newspaper received Best of Show award at the 2006 National College Media Convention".

Examples
Another smiling coed shot. Smiling students are always a plus, as long as you can tie the photo to something specific. In this case, a story about the sorority and its award would be appropriate.

A somewhat nice studio shot - oops! - cut someone out of the photo. Oh well. I would prefer a different kind of photo than this, but once again, smiling students looking at the camera are effective. A link to a story about the "Weekly Potato Bug" staff and their award would be appropriate.

This was the only photo I actually stole from the Internet. I like this one because the abstract is so dynamic, high tech-looking and attention-getting. And it fits well with the story. Dynamic, interesting photos like this are the key to getting people's attention. And, yes a story about the solar car would be appropriate.

Sports
For some universities sports provides a fertile ground for showcases the campus's accomplishments. As with other areas, sports photos should focus on specific, measurable accomplishments, such as winning a regional or national championship, breaking specific records, etc.

Example
I didn't have access to many good sports photos, but this one is dynamic and effective. Sports are popular, but shouldn't be over done.

Students Engaged in Activities
These could be anything, from on-campus life to off-campus recreation (hiking, rafting, etc.). The point is that these should be action-oriented photos of active students.

I didn't have any good photos of students engaged in activities, but you can find several on the Humboldt State University home page.

Diversity
Racial and cultural diversity are important issues at many universities, and some make sure to display that diversity on their home page.

I didn't have access to any good photos showing racial or cultural diversity.

Tuesday, January 9, 2007

Perfect Home Page Photos - Part 1

Some tips on making the best use of photos on your site's home page.

In one of my last posts, I talked about what I liked in the way of photos on a university home page. Not just what kinds of photos, but their quality, usage, purpose, what they communicate, whether or not they tell a story, link to a story or say something unique about the campus.

In that spirit, I've decided to put together a list of characteristics of the perfect home page photo implementation.
  1. All photos will be of uniformly superior quality, and taken by professional photographers
  2. The photo space will be large enough to catch and hold the viewer's attention
  3. The photo space will have an interesting and/or dynamic shape, and it will be integrated with the home page's graphic design
  4. All photos will have captions that describe the image and provide context
  5. All photos must communicate something unique about the university. Generic photos of students studying, faculty pointing to a white board, etc., say nothing about the unique nature or character of the institution if left without a context. Play to your strengths; pick out things that make your university unique, like:
    • The natural setting, local community and regional environment
    • The physical plant (building, facilities, labs)
    • Notable faculty (Nobel Prize winners, award winning authors, etc.)
    • Unique research
    • Student accomplishments (sports, academic achievement, other honors and competitions)
  6. Photos should focus on the specific, not the general. For student and faculty accomplishments, the captions/stories should focus on specific, quantifiable accomplishments.
  7. Photos should provide a mix of subject matter; approximately 50% scenic (campus buildings, local environment) and 50% people oriented (faculty, students, research).
  8. Photos should link to stories providing further information on the subject of the photo.
  9. Photos should randomly change with each visit to the home page, or
  10. If an animation is used, viewers should have complete control to stop, go to the next photo or go to the previous photo (see the FSU site).
  11. There should be a sufficient number of different photos to catch the viewer's interest and provide variety.

The perfect home page photo might look something like this (design stolen wholesale from the University of Michigan Web site):


Go to this page and refresh to see different photos. Note that I worked with the photos I had; many other potentially better possibilities exist.

In my next post, I'll talk in more detail about the photos I selected and why.

Home Page Photos: Some Sites That I Like

A few sites that are using photography effectively on their home pages.

In my life outside of Chico State I'm a professional photographer. My work focuses on landscapes and some architecture, so obviously I have a bias toward scenics. But my work as a web developer and information architect forces me to look a little beyond that at not only the quality of the photography, but also at how well it is used and how appropriately it communicates.

In a previous post, I looked at the types of photography used on campus home pages. In this post, I'm just going to talk about what I like as both a photographer and as an information architect.

Humboldt State University
Humblodt State has done a great job on their home page photos, and I like them for several reasons.
  1. The photos are all of professional quality and very clean
  2. Many photos feature people in the environment and focus on the environment - a big draw at Humboldt
  3. All photos have captions/teasers that are designed more to pique the interest than to provide information
  4. All photos link to short stories building on the photo's teaser
  5. Each story has a link to display all photos and stories
What I don't like:
  1. No photos of the campus. I have no idea if the humboldt campus is great or a dump
  2. Some photos feel a bit generic since most photos aren't about specific people
University of Wisconsin
I like the University of Wisconsin home page for a number of reasons.
  1. The quality of the photos is superior
  2. The photo space is large enough to catch and hold the attention
  3. The photos are captioned, so you know what you're looking at
  4. The photos provide a good mix of environment, people and academics
  5. The photos give a great feel for the environment of the UWisc campus
  6. Most of the photos are unique and relevant, telling a bit of the story of the campus through the environment and the people
What I don't like:
  1. The photos don't link to stories about the photos
  2. Some of the photos (e.g., dorm life and graduating students) are too generic and could be from any university
University of Michigan
I like the University of Michigan for somewhat different reasons.
  1. The panoramic photo space almost becomes a graphic design element
  2. Quality of the photos is excellent
  3. The abstract quality of the images provides a strange sense of intimacy, like looking at the campus through a peephole.
  4. Most of the photos manage to convey a sense of uniqueness in the environment
What I don't like:
  1. Not enough photos
  2. No links to stories or links to a greater view
  3. No people in the environment
  4. No captions describing what we are looking at
Utah State University
I also like Utah State University, though at the time of this writing they've replaced their rotating photos with a single photo congratulating Fall graduates.
  1. Interesting photos on a variety of topics, from research (Cool! The space shuttle!), to students to the campus environment.
  2. Photos have captions/teasers and link to stories
  3. the photo space is large and prominent
  4. Most photos convey something unique about USU or its environment
What I don't like
  1. Photo quality varies
  2. Not enough different photos
University of Connecticut
The University of Connecticut has some great photos.
  1. Superior photo quality
  2. Photos have captions
  3. Most photos show something unique or tell a story about the school
  4. Nice mix of campus, and people photos
Things I don't like:
  1. Users have no control over the animation to stop, speed up or go back
  2. Photos aren't linked to stories
Here a few that are OK, but have specific things I don't like.
  • University of Montana: Incredible location, some great photos, but photo quality varies widely, photo space is a boring square that has not been integrated into the graphic design.
  • Washington State University: Good photos with captions, but too small; photos clash with bright colors in the design.
  • University of Wyoming: OK photo quality, good captions, but too small.
  • Vanderbilt University: Generic photos, indifferent photo quality, awkward boxy photo space.
  • New York University: Too many photos, mostly generic, no context or story with any photos.
  • Duke University: Boxy, generic photos of indifferent quality, and you don't know that there are actually captions until you click on them.
  • Cornell University: Superior quality photos, plenty big; the only problem is that clicking on any of them takes you to the university mission statement. Huh?