Thursday, December 20, 2007

Spin off Blog - "Tales from Redesignland"

In order to keep the serious stuff from the cartoons, I'm creating a new cartoon blog called "Tales from Redesignland" to chronicle the lives of us poor web developers... particularly those in higher education.

Y'all come visit us, y'hear?

Tuesday, December 18, 2007

Thoughts on the Redesign Process - The Cartoon Version

No, I'm not bored, I've just wrapped up all of my projects for the semester.

I saw this page and thought it was a very cute way to visually describe the design process. I don't have any Lego men, so I adapted some free icons to do the job.

1. Get the right high-level decision-making organization in place
Their role is thinking about big picture issues, not micromanaging the process or the design.


2. Assemble the Redesign Team
This team may consist of people from several different departments. The team as shown, is made up of roles; one person may play more than one role. Though boundaries may not really exist, I've divided the team into four groups: technical, design, content, and quality.


3. Define High-level Redesign Goals
Ideally, this should be a conversation between the high-level stakeholders and the team leads (project lead, graphic designer, information architect, usability designer, communications specialist, and technical lead). The stakeholders need to communicate the goals and direction for the new Web presence and the team leads need to ask questions and provide feedback from their specific perspectives.


The conversation needs to be focused on eliciting clear direction from the stakeholders while educating them as to best practices and standards on the Web.

The trap at this stage is to begin to micromanage the process before it even starts. Talk should be in general terms, rather than discussing specific design, content or technology issues.

Wrong: "I think that going with an Aqua-style design, but in green, would be best."
Right:
"How do you envision the redesign affecting our branding?"

Wrong: "We should have more dropdown menus!"
Right: "One of our top goals is to simplify the interface of the home page and reduce the clutter of links."

4.
Establish Scope, Timeline and Budget
Scope creep will kill you. Avoid it.


5. Establish Standards
Assemble the full redesign team to discuss and establish standards for coding, design, labeling, content, security, accessibility, etc.

6. Do your Homework
Everyone should be involved at some level in this step, but it is most important for the graphic designer, information architect and usability designer to do as much research on trends and best practices as possible.


7. Profile Site Users
Profiling is good. Get your 'user experience' group together (graphic designer, communications specialist, information architect and usability designer) and construct several personas and some scenarios to go with them. This step should start out as a series of 'blue sky' sessions, just exploring the possibilities, but should evolve into a prioritized lists of tasks.


8. Develop & Test Information Architecture(s)
Building off your work with personas and scenarios, begin building out structures and organization...


... and testing them on users using card sorts and wireframes.


9. Develop & Test Visual Designs
Hopefully, you'll have gotten some general design direction from the stakeholders to give you a start.


Show designs to stakeholders and focus groups of users. Refine and repeat until you have final approval.


10. Create and Test a "Protosite"
Probably the smartest thing you'll ever do.



11. Create and Implement Real Site
After fixing all of your mistakes on the protosite, time to build out and test the real thing.

12. Finish Documentation

13. Go Live
14. Plan for Maintenance


I had fun making this. I hope you had fun reading it. I'm sure that there will be more of the motley crew to come.

Thoughts on the Redesign Process

A look the redesign process for the CSU, Chico home page.

The key to success for any large-scale Web site redesign is a process that works.

Four years ago, I put together a PowerPoint presentation on the Web design process for the Chico State home page. No one ever looked at it, but it's almost as useful today as it was then. With the benefit of four more years of experience, here's a revised version.

The Short Version (for the attention-impaired)
  1. Get the right high-level decision-making organization in place
  2. Assemble the Redesign Team
  3. Define High-level Redesign Goals
  4. Establish Scope, Timeline and Budget
  5. Establish Standards
  6. Do Your Homework
  7. Profile Site Users
  8. Develop & Test Information Architecture(s)
  9. Develop & Test Visual Designs
  10. Create and Test a "Protosite"
  11. Create and Implement Real Site
  12. Finish Documentation
  13. Go Live
  14. Plan for Maintenance
The Long Version (for the terminally bored)

1. Get the right high-level decision-making organization in place
Before you can even begin considering doing a redesign of your home page, you need to have functional, authoritative structures in place for making decisions, and determining and enforcing standards. This should involve people at the highest level possible in order to ensure buy-in as the redesign progresses.

The role of high-level administration should strategic, not tactical, in nature. Their role should be in setting priorities, overall goals, and high-level messaging instead of micromanaging the design, information architecture, labeling, etc.

At Chico State, we have a brand new Web Governance committee, consisting of the CIO and vice presidents.

2. Assemble the Redesign Team
You can't actually conduct a redesign without competent people in responsible positions. Nor can you respond to questions posed by administration concerning the redesign without qualified people on staff.

A large scale redesign like a university Web site requires a number of roles (one person may fill several roles):
  • Project Lead
  • Technical Lead
  • Graphic/Visual Designer
  • Information Architect
  • Interaction/Usability Designer
  • HTML Coder
  • Programmer
  • Web Server Administrator
  • Multimedia Developer
  • Photographer
  • Accessibility Designer
  • Writer
  • Content Manager/Editor
  • Communications Specialist
  • Quality Assurance
Skimping on any of these areas can cause you major grief down the line. Your best bet for success is a cooperative interdisciplinary team that may span several organizations on campus (most notably Information Technology and University Advancement).

At Chico State, we have the design/technical/IA/usability people under two closely related roofs, but lack a close relationship with the Advancement folks.

3. Define High-level Redesign Goals
This step really needs to be a conversation between the administration and the redesign team. The administrators bring an awareness of the university's top priorities, goals, concerns and issues to the table, while the design team brings knowledge of technologies, standards, best practices, other university Web sites, as well as a lot of experience with the Web redesign process that administrators may lack.

A strictly top down approach is likely to result in a site neither well organized, well designed or usable. A bottom up approach is likely to result in a site that lacks focus and fails to meet the top priority needs of the campus.

Example goals might include:
  • Create new, fresher, more “hip” look
  • Implement strategic goals for university web presence
  • Improve navigation/site structure
  • Make site easier to use
  • Address accessibility issues
  • Attract more new students
  • Fulfill university core objectives
  • Improve site performance
  • Make site easier to maintain/change
  • Enhance university image/branding
  • Increase design consistency across entire site
  • Implement new technologies (e.g., WCMS)
4. Establish Scope, Timeline and Budget
The biggest danger in undertaking a project like redesigning a campus Web site is scope creep. Scope creep will kill any project and can permanently damage working relationships on campus. It must be avoided at all costs.
  • Establish a clear list of what will and will not be done
  • Clearly define personnel to be involved (including timebase and responsibilities)
  • Establish clear milestones
  • Plan for content lag
  • Write a detailed production plan outlining major goals, strategy, resources & timeline
5. Establish Standards
One thing that has saved Web Services from endless trouble and heartache over the years is the fact that we invested a lot of time early on in developing standards (everything from design standards to file naming standards to accessibility standards to labeling standards).

Before you get into do a redesign, you need to develop a comprehensive standards document and make sure that everyone sticks to it. Some standards to consider:
  • Coding (XHTML, CSS, file naming, etc.)
  • Accessibility
  • Security
  • Graphic design
  • Communications (branding, brand usage)
  • Labeling
  • Content (writing guidelines, etc.)
6. Do your Homework
You can't fix a problem if you don't know that there is a problem, and you still can't fix a problem you've identified if you don't know what your options are. So this step is two-fold:
  1. Analyze and test your existing site
  2. Educate yourself as to what other sites are doing
This entire blog is dedicated to this step, and I can't stress the importance of this step enough. You skip it at your own risk.

To better understand your existing site, you should:
  • Examine log files for usage and patterns (Google Analytics is great for this)
  • Do a page structure analysis
  • Create a visual site map to better understand the site’s existing structure
  • Conduct usability testing of existing site (to identify specific problems)
  • Audit existing content
To educate yourself as to what others are doing, you could read this blog or search for university redesign blogs.

7. Profile Site Users
Real Web designers profile their site users; the rest of us are just posers. Profiling (in this case profiling is good) allows you to role play in a sense; to get inside the heads of your users and see your site from their perspective. This is vital for administrators and designers who have a radically different view of the campus Web site than a 17 year-old high school student looking for a place to go to college.

Some steps in profiling:
  • Categorize users (currents students, faculty staff, alumni, etc.)
  • What are their characteristics?
    • Demographics
    • Browser versions used
    • Internet access (broadband/modem)
  • Develop personas for testing/designing purposes
    • 6-8 should be sufficient
  • Why personas?
    • They personalize the users you are designing for
    • Helps you visualize how each persona might approach the site
    • Used in testing scenarios (how would Davin the art student use this feature?)
8. Develop & Test Information Architecture(s)
Now we start to get to the meat of the process.
  • Examine what other universities have done
  • Develop taxonomies
  • Do card sorting tests
  • Conduct task analysis for common tasks that have poor task modeling on current site
  • Develop site maps
  • Develop and test wireframes
  • Conduct user scenarios to keep IA on track
  • Get feedback from administration on IA finalists
9. Develop & Test Visual Designs
To most people, this phase is the only phase of a redesign. Certainly, it is the most visible.
  • Develop design concepts
  • Refine into designs (must follow wireframes)
  • Insure that designs stick to the architecture
  • Get feedback (e.g., focus groups)
  • Get approval (powers that be must sign off on the design)
10. Create and Test a "Protosite"
The purpose of testing a protosite is to give people a chance to use the site before it goes live. This allows you to work out a lot of bugs in design, IA and usability before subjecting it to the entire campus. Some universities do a public "beta" with the protosite in order to get a wider range of feedback. Protosites are easy to set up if you have a WCMS.
  • Create skeleton site (ising proposed visual design, navigation & site structure)
  • Multiple alternate designs can be tested
  • Conduct usability testing with real users
  • Refine design and structure based on results
11. Create and Implement Real Site
This is the final dress rehearsal before going live and the last chance to tweak designs, templates and content. This is where the QA and testing really kicks in to find bugs and problems, make sure that all pages are accessible, make sure that all pages work with supported browsers, etc.

You might consider making this site available to users as well for testing and feedback. Using a tool like Google Analytics, you can get valuable information about how people are using the new site even before it officially goes live.

12. Finish Documentation
Haha! Documentation is never finished. Documentation should have started no later than step 4 (Establish Standards). We use a wiki for all of our documentation and I can't recommend that approach highly enough.
  • Style Guide (fonts, colors, page dimensions, banners, etc.)
  • Production Standards Guide (file naming conventions, code standards, CSS, etc.)
  • Page Templates (can be in WCMS)
13. Go Live
Finally. Couldn't we have just hired a student to do a new home page and left it at that?
  • Freeze all design and content
  • Complete QA testing
  • Plan announcement strategy (vitally important! - people HATE surprises)
  • Consider phased, or soft, launch
  • Have a “What’s Changed” page
  • Transfer to live server
  • Party!
14. Plan for Maintenance
Actually, this should be done long before the site goes live. If you have a WCMS, maintenance will be part of that project's implementation plan.
  • Get post-launch feedback from users
  • Fix bugs, serious problems
  • Determine who is responsible for maintaining what
  • Train departmental editors (make them familiar with standards, and with maintaining site integrity)
Web Design Process Resources

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.

Monday, November 26, 2007

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!"

Tuesday, November 20, 2007

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.

Wednesday, November 14, 2007

The Future of the University Web Site

Focusing the university home page to act as a portal to audience-specific "sub-sites", instead of a catch all everything-to-everyone page.


Users' expectations of Web sites has evolved rapidly over the past few years - and continues to evolve. The concept that a "single" Web site can meet the needs of the wide variety of audiences that come to a university Web site is no longer valid. Users expect a tailored experience, designed specifically to meet their needs, address their concerns, and to fit their mental model of the site. No one "all purpose" university Web site can hope to do this - except to do it poorly.

In fact, a university's Web site is not a single site, but instead a collection of a wide variety of sites, each serving specific audiences and specific needs, and each providing a different facet of what the University is. Accounting Operations, the College of Business, and University Housing are each part of the university and the university's Web presence, but each serves a different purpose, addresses a different audience, and meets a different need.

The top level pages in the university Web site (including, of course, the home page) are no different, and should no longer be viewed as a monolithic set of "one size fits all" pages attempting to meet the needs of all users. Instead, the focus should be to provide audience-focused experiences, custom-designed to meet the needs of the main user groups that are likely to visit a university's site. These include the usual suspects of prospective students, current students, faculty, staff, alumni, family, and community members, as well as other groups.

There is no reason that we cannot provide a tailored experience for each of these groups, at least at the top level of pages within the site. And there is every reason why we should this level of experience if the university is to compete for students in the coming years.

How do we do this? By providing a home page designed to allow users to quickly self-identify and self-select themselves. Once a user identifies themselves (by clicking on "Prospective Students" or by clicking on the "Admissions" link, for example), they are taken to a sub-site specifically designed to meet their needs. Of course, it's impossible to fully guess the needs of all users, but prospective students have a very similar set of needs when visiting a university site that can be met by designing a section of the university's Web site to focus specifically on prospective students and de-emphasizes content and links irrelevant to those users.

And I'm not talking about the "clearinghouse" pages that so many universities use where each of the audience pages is simply a list of links. That's the short, easy, thoughtless and bad way out. By doing that, you're not providing each audience with a custom-designed experience; you're telling them that their experience isn't important enough for you to waste time trying to design it. "Here's a bunch of links. Knock yourself out," is about all you're saying.

Users' expectations of the level of experience they should have has increased dramatically over the past few years, and to attract those users to our campus, and to retain them, we have no choice but to meet their expectations.

In the end, we will end up with not one university site at the top level, but a series of sub-sites, each designed for a specific audience with specific common needs and perceptions.

Who is doing this? I'm sure there are a large number of universities (other than Chico State) doing this out there, but I'm just going to list the few I can find that are really investing the effort:

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




Wednesday, October 24, 2007

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.

Monday, October 15, 2007

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.

Thursday, July 19, 2007

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.

Tuesday, June 12, 2007

Search vs. Browse - Let the Argument Continue!

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

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

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

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

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

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

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

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

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

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

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

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

Bottom line: On different sites I use a different approach based on my needs and goals and on the capabilities of the site itself.
  • On sites I'm very familiar with and use the same information over and over, I tend to browse.
  • On commercial sites where I want to browse the wares, I tend to use a hybrid search/browse approach.
  • On informational sites, I tend to search for what I'm looking for.
Where would university sites fit in this spectrum? My guess is they would tend toward the informational, and I would probably tend to use search over browse.

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.

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

Tuesday, May 22, 2007

What I think of Our Own Home Page

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

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

So here it is:

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

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

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

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

That's a little more like it.

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.