Monthly Archives: October 2010

Flip This Website: The Montreal Impact (part 3)

As a favor for some consultants who are working on a marketing proposal for the Montreal Impact’s upcoming move to Major League Soccer, I have been working on a revamped version of the Montreal Impact website they’re going to pitch. For the sake of posterity, here is a screen shot of what the web site looks like now:

Screenshot of the Montreal Impact web site at the time this was written
Click to enlarge

So… what’s wrong with this web site? I’m going to spend a few days over the next week sharing some of my observations.

Observation #3: Don’t Interfere With The User’s Habits Or Expectations

Frankly – in its current state – the Impact web site annoys me tremendously. Every time I visit it, it doesn’t take long for me to get frustrated with the fact that many of its navigation links are not links but javascript-enabled images. This annoys me because I am a constant "open link in new tab" kind of guy.

A screenshot of how I open links in a new tab

When I right-click on the main navigation menu items on the Impact’s web site, it does nothing! I know that left-clicking on them will direct me somewhere else… and this gets under my skin, not as a web developer, but as a user; I want to right-click those navigation elements, and who the hell are the Impact’s web masters to impose strange rules and constraints on my behavior when I am visiting their web site from the comfort of my own home, using the computer I own, with the Internet subscription I pay for, visiting their web site so as to potentially give them my money buying merchandise or tickets! No web site should play with the end user’s basic expectations of how they interact with the web. If you do, chances are you’ll just annoy and alienate your users.

Let’s move away from the web for a second; imagine you’re a customer, placing an order with a business. You call by phone, and are served by an automated voice recognition system. It tells you "if you’d like to purchase an item, please sing the F# above middle C, and hold the note for at least 2 seconds." You’d probably be a little surprised, and since the service didn’t respect your expectations of how you would interact with it, one of two things would happen:

  1. You’ll hang up the phone and bring your business elsewhere.
  2. You’ll continue with your purchase, but be disinclined to use the service again.

This is how your end user feels when little things that they value (like not being able to "open if a new tab") don’t work. (and no, there is no third option where you just find it weird and continue normally.) They will either navigate to another web site, or they will finish their current transaction, and then be hesitant to come back.

Don’t Change The Behavior of Links

So I’ve effectively already mentioned this, but we have the same problem again with the "Montreal 2012" link:

A screenshot of the Montreal 2012 link which is not actually a hyperlink

… and here it changes the behavior of the link in yet another (unacceptable) way. When the user moves their mouse over this image they don’t get the finger (pointer) cursor, so the user is probably surprised and confused when they click on it and are directed to another page… another site even.

What we should be seeing is this:

A screenshot of the Montreal 2012 link behaving like a hyperlink

Unless the user sees this finger/pointer cursor no element on your web site should do anything special when clicked on, especially not navigate away from the current page.

Make Sure All Links Are Clickable

I have probably spent hours by now, trying to click on the ‘Français’ link in the top right corner.

A screenshot of the unclickable francais link

It is completely impossible. I don’t think I need to go on at any length about why this is bad.

Flip This Website: The Montreal Impact (part 2)

Free Smileys ad

As a favor for some consultants who are working on a marketing proposal for the Montreal Impact’s upcoming move to Major League Soccer, I have been working on a revamped version of the Montreal Impact website they’re going to pitch. For the sake of posterity, here is a screen shot of what the web site looks like now:

Screenshot of the Montreal Impact web site at the time this was written
Click to enlarge

Observation #2: Unecessary Design Elements

Screensavers ad So… what’s wrong with this web site? I’m going to spend a few days over the next week sharing some of my observations.

I couldn’t find a good name for this observation, so I’ve borrowed an item from Vincent Flanders’ Web Redesign Checklist: "We have not eliminated unnecessary design items."

A good web site should serve the needs of the site’s visitors first, and the needs of the organization second. In the case of the Impact web site, users want to:

  • Find out about tickets
  • Find out about merchandise
  • Follow the performance of players

Meanwhile, the Impact needs their web site to:

  • Sell tickets
  • Sell merchandise
  • Be a source of advertisement/sponsorship revenue

So what elements do we see on the site’s main page which hinder those goals?

The YouTube Banner

This one is the most obvious I see.

A screenshot of the large YouTube logo on the Montreal Impact home page

I really can’t bring myself to understand what this item is doing for the web site; unless YouTube endorses the Montreal Impact, this shouldn’t be there… I mean, companies like Saputo churn out big bucks sponsoring this team… and their logo isn’t on the main page! Meanwhile, YouTube gets this large image, which (at a glance) is about 10% of the visible content on the page.

Not only does it make no sense financially, but it doesn’t make sense for the goals listed above; the YouTube logo doesn’t help end users find out about tickets, find out about merchandise or follow the performance of players. Maybe this design element is trying to benefit those users seeking videos, but you don’t have to use the YouTube logo for that:

A solution to the presence of the YouTube logo on the Montreal Impact home page

… or better yet, this design element can just be removed; the user can make use of th YouTube link in the top right of the page, or the ‘Videos’ link in the ‘MultiMedia’ navigation menu.

The Header Image/Animation

While the header image/animation looks good, it’s not useful:

A screenshot of the pretty header from the Montreal Impact web site

This isn’t completely unnecessary, but it’s not being used to its full potential. The first time a user visits the site and sees this spiffy animation, it’s really cool to look at, but that’s where it ends; it’s not cool the second time, or the third or any time after that… and it was never really useful to begin with.

Frankly, if a fan wants to see a cool photo of a player with a signature, they’ll go to a trading card convention; this isn’t entirely appropriate for the web site.

So why not change the header to – instead of just showing off a player – also encourage and enable the end user to come see that player?

A suggested solution for the header which retains its prettiness while also making it useful to the visitor

Things Which are Moving

It isn’t captured in the above screen-shot, but a lot of images/ads on the Impact web site move on their own.

A screenshot of the Monteal Impact web site which identifies the moving content

This is unnecessary, and leads to your users ignoring that content. Users ignore any content which doesn’t look like content or a navigational aid; if it looks like advertisement, they look right past it. You want to avoid having things which move without user-provocation on a web site. As an example, can you remember – without looking away from this sentence – what the 2 banner advertisements which appeared earlier in this article were? Can you think of what the Google ads at the bottom of the page say? Probably not; the ads were for some of that "free smileys" stuff everyone hates and some stuff about screen savers.

So these elements should either be removed, or re-designed such that they don’t look like inconsequential content to the user.

The Wrap Up

So, to sum it up, not all the items on the Impact’s web site serve either the needs of the organization or the needs of the site’s visitors. This is bad; elements should be reviewed individually and removed based on their usefulness. For those who scoff at the suggestion that design elements on a web site should be functional, it’s important to remember that a web site is not a piece of art, but a valuable (sometimes expensive) business asset which serves a purpose.

Flip This Website: The Montreal Impact (part 1)

As a favor for some consultants who are working on a marketing proposal for the Montreal Impact’s upcoming move to Major League Soccer, I have been working on a revamped version of the Montreal Impact website they’re going to pitch. For the sake of posterity, here is a screen shot of what the web site looks like now:

Screenshot of the Montreal Impact web site at the time this was written
Click to enlarge

So… what’s wrong with this web site? I’m going to spend a few days over the next week sharing some of my observations.

Observation #1: There Shouldn’t Be A Splash Page

It’s not in the above screen-shot, but the Impact Web Site has a Splash Page.

The Montreal Impact web site splash page
Click to enlarge

Splash pages are the mark of an amateur; it is the mark of someone who is creating web sites with the mindset of working with magazines or books. (These are the same people who talk about ‘The Fold‘.) They think a website needs a flashy cover, like a magazine trying to stand out on the shelves of a store, so they translate this special magazine page (the "cover") to a special web page (the "splash") while neglecting that a web site is different from a magazine. They neglect that a web site doesn’t need a pretty cover because it just has to stand out in the search results:

A magazine stand Google search results
Big help your splash page is there.

In the end, a magazine or book cover aims to get the customer to pick up and read a magazine. While this need is present in web sites, it is very different because by the time someone is looking at your splash page, they’re already visiting your web site! They’ve already picked it up and they’re already reading it, and your splash page isn’t what they’re looking for inside.

For example, returning to the Impact web site, their users probably visit the web site hoping to:

  • Find out about tickets
  • Find out about merchandise
  • Follow the performance of players

Which of these goals involves a splash page? None of them; while the customer expected tickets, merchandise and player performance, they got a splash page.

Really, if we were to translate this practice of a "splash page" back from the web medium to the magazine medium, we’d be putting cover pages in the middle of our magazine. For your consumer, it’s like opening up an issue of Playboy, hoping to find some adult content and getting another PG-rated cover page.

A page which looks and acts like a cover page prompting the user to just turn the page
If Playboy published its content like this, there’s a good chance readers would put it down and go for a competitor which caters to their needs more effectively.

But what about the user’s language of preference?

Some of you out there feel clever right now, and I know what you’re thinking; "The Impact are based in Montreal – a multilingual city – therefore the splash page allows the user to choose their language!" and you’re still wrong. Browsers communicate language preferences to web servers in HTTP headers; hence the HTTP Accept-Language header.

This is why I never use my girlfriend’s computer; as a student of UdM, her operating system is in French, and so all the Google and Wikipedia results come back in French… I can’t stand it.

The Alternative…

The alternative to the use of this splash page is to just direct users to the main web site, and circumvent the splash page. If you detect their language settings, the end user still has the option to change languages by selecting the English/French link in the top right corner of the page.

*It should be noted that there are exceptions to the "don’t use splash pages" rule – in particular, web sites for artists and/or movies can get away with splash pages. Additionally, sometimes splash pages are necessary to provide information such as an important message (ex: approaching deadline, "this site contains sound" warnings or a legal disclaimer).