1. Most obvious, is that there is no obvious way to report a problem when you’re in the maps area. It’s an outlier use case, I’ll grant you that, but still, it’s not carte blanche to hide it. The most logical place to go then is the help link.
2. The help article has a “how do I report a problem” toggle. Perfect! This is exactly what I need. Wel,, hangon a second. It mentions a “report a problem” link, but fail to actually provide the link. They instead choose to talk about it. Hello? This is the web, right?
3. Given the above oversight, I decide to open the “where can I find the report a problem link” toggle (which wouldn’t be necessary if they simple gave the link in question). It instructs to click “more” from the info window. What’s the window info, you ask? Who the hell knows? Figure it out for yourself.
4. As I ponder what they might mean by info window, I see a “more” link in the top black bar- maybe that’s what they mean by the info window? Doesn’t seem like an info window, but OK, I’ll try it. Nope. That only shows all the various Google product links, no “report a problem” to be found there.
5. OK, the info window must be within Google maps then. Ha! Silly me, of course! I should have looked in the maps area all along. User error, my bad. I go back to the problematic map and bingo, I spot the more link right there in the left sidebar, er… info window. Why is the left column called an info window? That’s not my definition of a window, nor anyone else’s I suspect, but hey, details. Why quibble now, I’m so close to successfully achieving my issue submittal.
6. I open the “more” pulldown menu, but alas, the report a problem link is greyed out. What gives? Why show functionality when you can’t actually use it? At this point, I’m thinking to myself “Holy crap! I have got to blog about this.”
7. My last ditch effort is to click on the offending liquor-store-in-the-middle-of-campus pop-up  to see if I can report the problem there (maybe that’s what they mean by an info window?). Indeed, the pop-up also has a more pulldown with a functioning report a problem link.
8. The problem report asks me some questions in order to route and solve the issue, but the last bit of information they ask for is to let them know the correct market placement for the liquor store. I was nice in my reply since I’d like the problem corrected, but seriously, they want help in placing the marker correctly? How about using the address they already have listed for the store which is in a different city altogether? It boggles the mind.

• Have a script or storyboard before you even show up to the shoot: figure out the flow of what you want to capture so you can scope out the right camera angles, get the necessary sequences filmed and ensure you don’t forget anything. For example, I didn’t film an intro sequence where our baker introduced herself to the world. I made up for it during editing with an overlay of her name and title, but it would have been better for her to introduce herself.
• On the heels of the above example, if you intend to create a series of videos, make an intro and credits sequence to bookend the entire production.
• Have note cards somewhere out of camera view, but available to the person in the shot to ensure they sticks to the script and don’t forget anything important.
• Don’t belabor anything for too long. Web video typically needs to be short and sweet. If there’s a ton of information to communicate, do it over a series of videos instead of one overly long one (how often do you sit through a 30 minute video? Hmmm?). Also, YouTube has time limits except under some instances like edu accounts, so time does need to be a concern. You can also include supplemental information as text based video notes that accompanying the piece.
• Learn from existing cooking shows and have all of the ingredients pre-measured and ready to go to simplify the shoot. This allows you to avoid lots of cuts which can be distracting and problematic when editing.
• Have enough ingredients on hand to do the shoot several times, just in case.
• If you have the resources, shoot with multiple cameras so that multiple angles can be captured at once. Efficiency is a good thing.
• Keep the counter area free of distractions: no stray bottle caps, unnecessary towels, bowls, etc. When you add an ingredient that’s measured out in a dish of some sort, set it out of camera view after you no longer use it. If you keep things clutter free, that’s half the battle.
• Again, if resources allow, use a mic in order to ensure a consistent audio level. I only used the mic that came with the camera. The camera placement was far enough away in some shots that our host sounded distant. I augmented it during editing, but why not get it right during shooting?
• And yet again with the resources theme, use good lights. If you’re relying on natural light, you’re at the mercy of clouds rolling by. If you’re relying on indoor lights, you’re at the mercy of odd shadows, odd color casts, and the weird spotlight effect that never looks good. Spotlights can also cause harsh reflections off of metal or plastic that’s no fun to deal with.

My bias is toward a balance between marketing and usability, but the bias gives more initial credence to usability than to marketing. Why? Because you can market the hell out of a site, a subsection or page, but if people don’t know it exists, then it doesn’t matter. That’s my main criticism of the DU homepage- It looks great (which is valuable in and of itself), but it comes at the expense of visitors (prospective students) getting their tasks completed slower and more inefficiently. The most powerful way to manage this tension is to 1) ensure your basic usability requirements are met and 2) make that basic usable framework as beautiful as possible.

If we look at the Apple and Google examples on this page (you can click them to access full size versions), you see this 1-2 approach put into practice. Google is a usable site. It gives visitors a short overview of the conference, easy to find/use links to additional information and a big button to join. But is it beautiful? Has it leveraged good marketing principles? Well, it does provide user generated content to breathe some life into the page, but I would argue that it’s not an engaging presence. It has leaned too far toward usability by disregarding the power good marketing would provide.

Apple’s page also provides basic information on the conference, links to additional information and a big button to join. The difference is that Apple takes that basic usable form and packages it with more marketing muscle. The page is beautiful. It’s engaging, active and makes me want to go in order to be a part of the energy depicted. This is a page that has found a good balance between marketing an usability.

Both conferences, being as high profile as they are, will undoubtedly sell out (Google’s already has as of this writing) so you could make a counter argument that Google’s lack of marketing didn’t hinder them. In fact, they likely saved money and time by avoiding the marketing point of view. True enough. But which conference do you want to be a part of?

Before we dive into the details, we need to define marketing and usability. By “marketing” I mean a perspective that exults the intangible- largely subjective areas like branding and visual aesthetics. By “usability” I mean a perspective that exults the tangible- things that are perceived to be objective through testing and measurement like navigation and functionality controls, categorization and flow of information. I realize you may disagree on my definitions, but for the sake of argument, I’m not here to say one is better than the other so feel free to change the definitions in your own mind. I support both as I’ve defined them. You should ensure that your visitors are represented through testing and measurement, but you also need to be a leader sometimes and do what you feel is necessary even if it’s contrary to user’s wishes. The two can work in tandem, but so often fail to do so. However, that is not a recipe for disaster in and of itself.

A higher ed site could go in either direction. DU’s homepage is squarely in the marketing corner while the task of finding degree information is squarely in the usability corner, yet neither truly works as intended for me, not to disrespect Nick’s conclusions. The homepage does indeed have impact and bucks the usual higher ed trend, but does it work? It does if you want to grab attention and differentiate yourself from the pack (I’ll assume a prospective undergrad student audience). But do students want different or do they want ease of use or a sense of what life at DU is like or something else? Is the leadership inherent in publishing such a bold homepage good or bad? I’d argue that the homepage misses the mark.

I don’t see any reason to be bold here when so much of our own research and those of DU’s consultants over the years points to the fact that people researching what college to attend are more interested in getting the four big questions answered as opposed to being “marketed” to:

1. Does the school offer the degree I’m interested in?
2. Am I qualified to attend this school?
3. Will I fit in socially/do I see myself being happy at this school?
4. Can I (and/or my folks) afford it?

How many of these does the DU homepage answer (or how many of these questions can you easily get to if you make your way to an internal page within the DU site)? To varying degrees, there are links and clues for each of them, but they’re overwhelmed by the gigantic photo and audience links. This page is more about DU than it is about DU’s customers.

UPDATE 4/29/2010: I decided to expand on this idea using a non-higher ed example.

Selling the general ideas about centralization is easy. Most people will see the utility and efficiency that a global site experience promises for both visitors and internal maintenance personnel. The problem comes when the idea is fully explored and all of its implications are brought to light. For some people or groups, the thought of sharing a single visitor experience with the rest of the university is a deal breaker. The art department doesn’t want to look like the business school, for instance. That’s a perfectly fine and logical way to feel, but it’s beside the point. Let’s explore why.

I argue that within a centralized system you must align the site’s organization and navigation based on audience type: prospective students, current students, employees, etc. This approach will force you to ask certain questions. For prospective students, one such question is “does an 18-year-old think in terms of department, school, college, and division names or in terms of subject matter?” Based on my research, the answer is subject matter (after all, high schools work this way). This suggests that the best method of navigation is therefore by subject matter, not individual unit names. And again, research shows this approach does indeed work well when tested. Given this exercise, the issue is not that the art department looks like the business school. That’s irrelevant because we’re not offering a navigation system that compares one department against another. Instead, we’re offering a navigation system based on subject matter and I think we’d all agree that individual degree programs shouldn’t have individualized brands. So, we can now conclude that a single visitor experience does not pigeon hole or force any internal group to act or be represented like any other group because we’ve abstracted that perspective away for a better one.

I’ll structure my review on the 2-2 style popular in the MBA program I’m in- two compliments, two criticisms. First up, two compliments.

It’s useful today—As a notoriously slow reader, I can happily state that this one is quick and easy. It’s less a narrative and more a bulleted list with lots of screengrabs. If you want expert opinion, support for your own work or just plain good advice, this is the book for you. Best of all, because it’s in such an easy to digest form, you can apply the insights the same day you read them. And, of course, it’s targeted to the higher ed space- a piece of the online world that normally doesn’t get center stage attention. That means everything you read, EVERYTHING, is practical and applicable.

Best of the best—I suppose it goes without saying, but I’ll state it anyway because it’s important. The book highlights some of the preeminent higher education sites out there. There’s no doubt that higher education suffers from poor management, poor focus, and poor ______ (you fill in the blank). Having a single place to examine the best of the best is both informative, but inspiring too. And as higher edu workers, inspiration can make the exceptionally hard days we all encounter easier to take. For that, I thank the authors.

Next up, two criticisms.

Universal takeaways—Like many sites, truly good cross pollination of content necessitates good metadata (data about data). It’s hard to do well, but when it is, a site can seem to read your mind as a visitor. It’ll anticipate what and where you want to go next. This book tries to do so by offering multiple ways- by school name, by student population, by type (public vs. private) and by region- to access all the reviews. Each school’s page also gives you a “comparable institutions” sidebar where you can cross reference any school with others in as close an apples to apples comparison as is possible. It’s an admirable approach and works, but it seems to come at a cost. I wish it had a single page or section devoted to high level takeaways- a quick reference of universal do’s and dont’s, if you will.

More background—This might be an unfair criticism, but I’ll put it out there anyway. As a usabilty/design centric book, it’s not about in-depth case studies. However, each school mentioned (there are 20), does come with an “about” page that highlights information like what CMS powers the site, who the members of the team are, what technologies are used, etc. I kept wishing the authors would elaborate or, at least, standardize what behind-the-scenes information was presented. As someone who has built websites for 10+ years, the back story can be some of the best takeaways to learn.

My final thought is, as is the custom for us web workers, a call to action. Buy the book. It’s a nice companion to the eduStyle site and highlights some of the best higher ed sites out there today. As such, we can all learn a few things from it. If my review doesn’t quite convince you to buy, you can always get a sample taste and decide for yourself. For me, it’s a winner.

• Research
• Information architecture consideration
• Visual design consideration
• Final determination

1. Research

Your first step is homework. You want to find the maximum width your site can be in order to maximize the available space without going so large that you lose significant numbers of your audience due to low resolution monitors. The tightrope walk here begins with your own site’s analytics. If this is a new site where none existed before, skip this step or look at the stats, if possible, of another site with similar audience profiles. You can help inform this information by doing some online research to see what display resolution trends exist. As of this writing, 1024×768 or higher seems a safe bet. Your mileage may vary though depending on any unique audience traits (an intranet site where you know everyone’s exact display equipment).

Once you’ve established your maximum browser resolution, you can shave off some pixels to account for browser chrome- all the window borders, scrollbars, etc. The amount of chrome has dwindled down to zero, horizontally, for some browsers like Safari and Firefox on Mac, but others have not. Test multiple platform and browsers to nail down exactly how much room you need to allow for chrome. On top of browser chrome, you may wish to worry about whether people maximize their browser screens. For people will exceptionally large screens, the answer is likely no. Accommodating for this is impossible on a universal level as it’s different for each person out there, but you can shrink down your max size a bit more for this. How much is up to you.

After all of these variables are accounted for, let’s say you settle on 960 pixels as your optimal maximum horizontal width. Keep in mind that the operative word here is “maximum.” This is the limit you set for yourself. Anything inside of it is fair game. Research is used to help you determine the widest possibility. It says nothing about going smaller, but our next steps do so let’s continue.

2. Information Architecture

Ideally, by the time you begin your design phase, your information architecture work is solidified. You know the general needs of the site, what the page elements are on all the major page types and the kinds of content your site will need to support. With hope, you’ll also have enough flexibility for the site to grow and support new types of content as they come (you may already have a list of “phase 2″ ideas before phase 1 is launched, for example). Your task now is to use this information to inform how wide the site should be in order to accommodate the elements as best as possible.

Let’s say you have, among other page elements, four blocks of information you need to communicate. Since each of those four blocks are equally important, the plan is to show them horizontally across the page next to one another. You now have a math problem on your hands (it’s easy though): 960 pixels ÷ 4 equal blocks = 240 pixels per block. The page can now be divided into 4 equal columns to house the information in a nice, clean manner. You might say you have the basis for a design grid, but not quite. Let’s factor in design considerations next.

3. Visual Design

Information architecture leads us to a four column structure, but from a design perspective, we may consider it too limiting. There may be pages that need smaller columns widths to house information (maybe a page with thumbnails images, for instance). On the flip side, you don’t want too many columns either or the grid options become so numerous, the entire purpose is defeated. You ideally want flexibility, but not too much.

Let’s consider a grid composed of 10 equal columns with 9 equal gutters between them. Let’s also say we wish to make our gutters 10 pixels wide for a total gutter width of 90px. Subtract that from the 960 pixel max width we’ve already established and we’re left with 870px. Divide that by 10 and we arrive at a grid with 10 columns each 87 pixels wide with a 10 pixel gutter between each for separation. Our 10/9 grid works well. But we have a problem. 

From our IA exploration, we know a four column grid is best for the elements on the page. Four doesn’t divide evenly into our 10 column grid which poses a design problem for us. Do we have to go back to he drawing board? Not quite.

4. Final determination

We don’t have to start over, just modify any of the variables so far:

• We can work out a different solution from an IA perspective that doesn’t depend on the grid to be successful
• We can choose a different design grid to work within or
• We need to disprove our research or assumptions about our 960 pixel maximum width

Having just spent a good amount of effort determining our maximum width, we don’t want to revisit it. And let’s say that we’re fully confident that our four block IA solution is the best course of action. That leaves us to find another design grid. So let’s see where that leads us.

We feel a 10 pixel gutter is a solid choice for our needs so we keep that variable intact. We also know that our final grid needs to be divisible by four while still being flexible, but not too flexible. So let’s try an 8 column grid with 7 gutters. The equation will look like this:

(8 columns * 110 pixels each) + (7 gutters * 10 pixels each) = 950px

We notice that as long as the columns and gutters are equal width to one another respectively, there is no acceptable equation where we come out to an even 960 pixels as our research tells us is best. However, since 960 is the MAXIMUM width, we are free to work at any width in between. An eight column grid can be reconfigured by pairing columns together to get a four column structure so our IA needs are met. The 8/7 system, while a bit less flexible than our preferred 10/9 system, still allows many combinations from a design perspective so we determine that it is an acceptable system for design purposes. We could add another pixel to each column for a final width of 958px or one extra pixel to each gutter for a final 957px, but we prefer the roundness of 950 and decide to leave things there.

I have no issue whatsoever with decentralization in terms of content. What I do have an issue with is decentralizing the management of other aspects of the web effort — strategy, IA, design and code. Decentralizing those aspects result in the pitfalls I outlined in my earlier post. Now there’s always an exception to the rule, but those should be few and far between and that mantra holds true in this case.

In a nutshell, centralizing a site’s management should manifest itself in the opposite way outlined in my other post. Here’s the quick rundown:

• Greater consistency in design, navigation, functionality, overall experience
• Better focus and clarity in communicating the organization’s messages and goals
• A more symbiotic effort toward marketing the organization to a diverse set of audiences
• A systematic, proactive approach to improving the visitor experience
• Single source accountability for many of the site’s performance metrics and marketing goals 
• Greater efficient use of time, effort and resources
• Faster project turnaround time
• Generally, a more sustainable approach
• A happier web team/better morale

However, all that said, centralization does raise issues. Most prominent is the fact that it’s a huge break from the past. The university has long given individual units large latitude in terms of how to run their groups. So much so, that the bigger units don’t even bother with the web team. Instead, they hire outside agencies to knock out whatever it is they need to accomplish. That’s just decentralization by another name though. Our biggest hurdle is the perception that centralizing the site will mean an inability to uniquely market each unit. The anthropology department will look like political science which will look like music and so on down the line.

That’s where the decentralized approach to content comes back into the picture. Content is the best, most efficient way to make your pitch. Yes, design, layout, colors, etc. influence decisions, but (and this is coming from a designer) it matters less that photos are floated left versus right compared to what those photos depict. It matters less that copy is Helvetica rather than Georgia than what the copy says. The ability to determine content is the ability to market.

What centralization ultimately allows is efficient, planned out efforts to roll out improvements and functionality in a consistent, controlled and timely manner based on visitor and unit needs. The organization and visitors benefit while the web team stays sane.