grundyhome.com

Go read Top 10 Higher-Ed Web Design Mistakes in 140 on eduStyle. While you’re there, go ahead and create a profile and vote for all of my team’s sites.

Jakob Nielsen has introduced a lot of helpful guidelines and research for the web industry. But as the industry shifts, the many of these guidelines should shift as well. But people remember these slogans. And they repeat them for years, unaware of new research or trends. (See Where the Fold Exists)

At one point, a record exec passed on The Beatles because guitar-based music was on its way out. That’s what I think of when someone tells me the website shouldn’t scroll.

Three Clicks

One of Nielsen’s guidelines, so often repeated, is that any content should be available within three clicks. A lot of my clients seem to know this “rule” and bring it up during information architecture or design meetings.

Some clients end up with a site structure that looks like this:

Wide and flat. Clients think it works because a user can get to any page on the site from any other page on the site.

This doesn’t work because visitors have to parse too many options, too quickly. As soon as they find a potential match, they go to that page. Then they’ll need to do the same thing again. I recommend 4-6 top level navigation choices.

But having too narrow and deep of a site can be equally frustrating, because there’s too much interaction required for each decision. Suddenly it’s 10 clicks to wind down into the page that could be easier to find and get to. For very large sites, finding this kind of balance is one of the hardest parts of a project.

What’s Behind the Rule

The three click rule is an excuse for lazy content organization: as long as it’s within three clicks, it must be usable. Or so some of my clients would have you believe.

The point that Nielsen has started making, is that it’s not important how many clicks as it is how productive those clicks are. He recently wrote about interaction elasticity, or how “usage goes down as interaction costs increase.”

I consider cognitive load to be part of these interaction costs, certainly more than the physical cost of having to click one more time. Harvard College Library has a very simple, but effective interface to navigate into the site. With four main choices, you quickly eliminate 75% of the pages on your way to finding what you want.

A New “Rule”

A more flexible approach to the classic rule is my 1 Click Rule:

Every click or interaction should take the user closer to their goal while eliminating as much of the non-destination as possible.

The corollary:

Avoid any interaction that eliminates the user’s intended goal.

Just remember, not every visit starts with your homepage; this process should be reliable from any point in the site, easily navigable back to your homepage or another section of your site.

A garden requires attention: one must carefully consider what will be planted and where, weeds must be pulled, and it will need regular water and fertilizer.

A blog is no different. I redesigned my grundyhome.com blog a while back. I can’t leave it alone. I tweak it constantly, changing links and rewriting copy. I do the same to Non-Profit Chas and pretty much any website I manage closely. If you read blogs through a feed reader, you may not notice these.

Design Your Garden

You must design your blog to be efficient and meet your content needs. Don’t add anything that you can’t support and that won’t bear fruit. What’s the purpose of this elements? Widgets are dangerous for this reason: there are a lot of useless blog widgets that take up space, distract your readers, and weigh down your pages.

And like any garden, it should reflect your own style.

Pull Some Weeds

Look at your blogroll – do those links still work? When you started your blog, you probably threw some content into an About page. Is that still correct and relevant? Think of this in terms of broken windows theory: every defect in your site hurts your visitors’ perception.

Feed and Fertilize!

This is the hardest part of having a blog. Creating valuable content and posting on a regular, consistent basis is the best thing you can do for your blog. I’ve struggled with keeping a posting schedule, coming up with content ideas, and finding new avenues to promote my blog. Now I set reminders and keep brainstorm lists to help me stay on track.

Watch it grow!

Check your stats – page views, visitors, feed subscribers – with proper cultivation of your blog you’ll see the numbers grow. It takes adjusting and consistency. After all, if you neglect your garden you can’t expect it to thrive.

Now, how you harvest your blog is a different post entirely…

I hate calendars. They’re home to some of the worst software I’ve used. One of the worst things about them is the complete disregard for interface and usability.

The first, and most obvious, goal of a calendar is for people to find an event. Whether they know of the event or are just browsing, finding an event is the most basic task. So let’s look at some main options that I’ve used or implemented.

30 Boxes / Wall Calendar

If you have a lot of events, this view makes it hard to fit the information. If you don’t have a lot of events, there’s a lot of wasted room. Or the boxes distort to show the events you do have. The wall calendar view makes sense for one thing: giving you a quick view of what dates fall on what days. This is the worst of all event calendar interfaces. But having built and implemented many calendars for many client websites, I refuse to do this for most projects.

List

The list is a very basic approach: show the events in order by date. These are more of a headline style, with some or all event details broken out. This works well for very few events, but is a cognitive nightmare when there are hundreds of events.

Weekly / Date Range

This is a version of the list view, but pared down to a specific date range such as a week. If the user knows when the event is happening, this can reduce the cognitive load by cutting down to a handful of events. However, this can also produce results with too many or even no events at all – both of which defeat the purpose.

Agenda

The agenda approach displays a list of events in order by date, with the date displayed prominently. Makes sense, right? It makes it easier to find events you need quickly, with enough info to catch your attention but also find specific events without parsing a lot of descriptive text.

Tools and Trick to Make it Better

Category Filter

The filter is a great way of breaking down events by category. This is even better when it gives the option of subscribing to a specific calendar (if you’re into that kind of thing).

Date Picker

The picker view is a throwback to the wall calendar, but with the benefit of cramming it into a much smaller space. Bonus points if the only days with events are the only ones you can select. In this example, the whole week is highlighted because it’s used in combination with the weekly date range approach. Note how the dates are all the same – only one of those weeks has any events, and it’s not even the one that’s highlighted. A great use of a date picker is to quickly move past many months or years to find events in a specific date range.

Question: What’s the Best Calendar Interface?

Answer: The one that’s best for your content. Too many events or too few and any of these options are terrible. But combined with a category filter and a date picker, and most of these can be usable. I always liked how Google Calendar gives me several options, rather than forcing me to wade through a wall calendar or scroll past hundreds in a list to find the one I want.

Today, I fought a battle about why our websites look so good on Macs and bad on PCs. My short answer was that Macs make text look prettier. After a diatribe about why we have to start designing to make these look good on PCs, I pointed out that it’s nothing we can change – it’s something we have to accept. I not-so-nicely suggested that he take the issue up with Microsoft.

If you’re new to this issue or if you just need a quick way to show off the differences and reasons why this happens, this post is for you.

Example 1: Content area from ND.edu

Check out the full screens… notice how the Flash and the images aren’t any different? This problem is pretty much limited to text.

ND.edu, Windows Firefox 3

ND.edu, Mac Firefox 3

Why this happens

Joel Spolsky wrote about this issue a couple of years ago, with an excellent summary:

Typically, Apple chose the stylish route, putting art above practicality, because Steve Jobs has taste, while Microsoft chose the comfortable route, the measurably pragmatic way of doing things that completely lacks in panache. To put it another way, if Apple was Target, Microsoft would be Wal-Mart.

The two biggest reasons, in case you’re interested.

1. Anti-aliasing

Mac computers, by default, smooth the edges of fonts to make them truer to the design of the font. This is called anti-aliasing. Windows computers, however, handle this differently – and it’s not always by default. The result? Text looks smoother on Mac machines and to many Windows users, this looks blurry. This also causes fonts to look bolder or lighter.

2. Font substitutions

Text on the web generally gets rendered based on the fonts you have on your computers. This means your computer will use whatever it has, rather than the ideal font that the designers/developers wanted. Sadly, there are limited default font options on both Macs and PCs. Sometimes, this is a conscious choice – rewarding the folks with more selection – and accepting the fact that some people will end up with a different, less-desirable font. Don’t have Lucida Sans? You might end up with Verdana, and that’s going to look different.

Is there nothing we can do?

Well, everyone could just switch to a Mac. But mostly, it’s on designers and developers to realize how their sites will be consumed. It’s not a problem, per se, it’s just a matter of awareness and acceptance of what the technologies will do and why.

Anyone who’s worked with me probably realizes I don’t mind offending people (and I barely consider graphic designers to be people) in hopes of improving the work. This post will certainly offend. Enjoy.

I’ve been meaning to share this gem from Seth Godin for a while, and apparently so did Jeff Brooks at the Donor Power Blog.

From Your brand is not your logo

Smart marketers understand that a new logo can’t possibly increase your market share, and they know that an expensive logo doesn’t defeat a cheap logo. … take the time and money and effort you’d put into an expensive logo and put them into creating a product and experience and story that people remember instead.

I’ve said this to a lot of clients in the last few years. I’m always on the agency end of the project, creating a logo for a client. But since I went through the process of having my own logo redesigned I realized it was a joke: the finesse and tweaking and painful revision process was more about my own pride than it was about helping my company. We spent many hours creating a logo, rather than creating value.

I wouldn’t do it the same way again.

The real question is not whether the fold exists, but how people scroll.

This image is overlaid with percentiles of browser heights. The 100th percentile means that effectively 100% of users will see that without scrolling. 0th percentile marks the point where no user (based on the sample) will see the content. Download a JPEG of the fold percentages overlay with no site behind it.

This is intended to be a discussion point, design tool, and client demonstration. Clients requesting design changes to avoid the fold often do not realize the reality of browser sizes and base their instincts on personal experience, anecdotes, or even obsolete knowledge of the industry. Realistically, this study should be re-executed regularly to assess how the browser sizes have changed. Mobile browsing, PDAs, increasing screen sizes, etc. are all rapidly changing factors that will affect where the fold lives.

Assessed from 415,927 page loads on the nd.edu homepage from 4/28/2008 to 5/8/2008. These include duplicate page loads. These exclude any 0 height page loads, based on the presumption that this is irrelevant (robots/spiders) or impossible (poltergeists).

A University website isn’t really a single website. It’s actually made up of many sites: Human Resources. Office of the President. Department of Zebra Fish Studies.

So the question is this: how important is it for these websites to be look the same?

This recently became a topic on several forums and in our office. On EduStyle and other sites, people commented about how our Department of Film, Television, and Theatre didn’t look anything like our other sites – or even a Notre Dame website. After kicking these ideas around for a few weeks, I figured I’d jot down a few observations here.

Custom Design

• Individual units have different communications goals
• Design standards and technologies evolve
• Custom tailored to different audiences’ needs

Cohesive Design

• Brand consistency and unity
• Easier maintenance
• Less design/development time
• People tend to think of them all as part of the ND.edu website

Someone proposed a compromise. Administrative offices would get a standard design, intended to be functional and carry the University brand. Academic units – colleges, departments, institutes, and centers – would be offered custom designs. However, there should still be some consistency in brand locations, navigation, etc. As users adapt to the website they’re on, moving to another ND site shouldn’t be totally disruptive. They shouldn’t need to learn a new interface and struggle to find the information they need.

I’ve always been a proponent of custom design, but I can see the value of such a compromise. It would let our small group focus on more of the brand-critical, high visibility websites.